:root {
    background: transparent;
}

.aboutusContentDesktop {
    background: url("../../../assets/images/womandriving.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
}

.aboutusContentDesktop > p:nth-of-type(1) {
    color: rgba(255, 193, 26, 1);
    font-family: "oswald";
    font-weight: 500;
    font-size: 200%;
    margin-top: 3%;
    justify-content: center;
}

.aboutusContentDesktop > p:nth-of-type(2) {
    color: rgba(0, 0, 0, 1);
    width: 60%;
    font-family: "oswald";
    font-weight: 500;
    font-size: 115%;
    margin-top: 1.5%;
    margin-left: 2%;
    letter-spacing: 0.05rem;
    justify-content: center;
}

.aboutusContentDesktop > p:nth-of-type(3) {
    color: rgba(0, 0, 0, 1);
    width: 60%;
    font-family: "Carlito";
    font-weight: 300;
    font-size: 105%;
    margin-top: 1.5%;
    margin-left: 2%;
    justify-content: center;
    text-align: justify;
    box-sizing: border-box;
    border: 1px solid transparent;
    line-height: 200%;
}

.aboutusContentDesktop > .flashcards {
    margin-top: 3%;
    width: 80%;
    height: 50vh;
    gap: 8%;
}

/* FlashCard Div First Two Without Hover */

.aboutusContentDesktop > .flashcards > div {
    width: 24%;
    justify-content: center;
    align-items: center;
    height: 80%;
    box-shadow: 0px 4px 21.9px -4px rgba(0, 0, 0, 0.25);
    transition: 0.3s ease-in-out;
    background-color: rgba(255, 255, 255, 1);
}

.aboutusContentDesktop > .flashcards > div > p:nth-of-type(1) {
    font-family: "oswald";
    font-weight: 600;
    font-size: 105%;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    margin-top: 5%;
}

.aboutusContentDesktop > .flashcards > div > p:nth-of-type(2) {
    font-family: "Carlito";
    font-weight: 400;
    font-size: 115%;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    margin-top: 5%;
    width: 70%;
    justify-content: center;
    word-wrap: normal;
}

.aboutusContentDesktop > .flashcards > div > div {
    width: 50%;
    margin-top: 5%;
    align-items: center;
    gap: 1%;
    justify-content: center;
}

.aboutusContentDesktop > .flashcards > div > div > p {
    font-family: "oswald";
    font-size: 70%;
    font-weight: 500;
    text-align: center;
    color: rgba(0, 0, 0, 1);

}

.aboutusContentDesktop > .flashcards > div:nth-of-type(1) > img:nth-of-type(1),
.aboutusContentDesktop > .flashcards > div:nth-of-type(2) > img:nth-of-type(1) {
    visibility: hidden;
    height: 0;
}

.aboutusContentDesktop > .flashcards > div:nth-of-type(1) > img:nth-of-type(2),
.aboutusContentDesktop > .flashcards > div:nth-of-type(2) > img:nth-of-type(2) {
    height: 15%;
    width: 20%;
    margin-top: 3%;
}

/* END - FlashCard Div First Two Without Hover */

/* FlashCard Div First Two With Hover */

.aboutusContentDesktop > .flashcards > div:hover {
    background-color: rgba(255, 193, 26, 1);
    box-shadow: 0px 4px 21.9px -4px rgba(0, 0, 0, 0.25);
    transition: 0.3s ease-in-out
}

.aboutusContentDesktop > .flashcards > div:nth-of-type(1):hover > img:nth-of-type(2),
.aboutusContentDesktop > .flashcards > div:nth-of-type(2):hover > img:nth-of-type(2) {
    visibility: hidden;
    height: 0;
}

.aboutusContentDesktop > .flashcards > div:nth-of-type(1):hover > img:nth-of-type(1),
.aboutusContentDesktop > .flashcards > div:nth-of-type(2):hover > img:nth-of-type(1) {
    visibility: visible;
    height: 15%;
    width: 20%;
    margin-top: 2.5%;
    margin-bottom: -3%;
}

/* End FlashCard Div First Two With Hover */

/* FlashCard Div Third One without Hover*/

.aboutusContentDesktop > .flashcards > .withPictureMain {
    width: 48%;
    height: 80%;
    box-shadow: 0px 4px 21.9px -4px rgba(0, 0, 0, 0.25);
}

.aboutusContentDesktop > .flashcards > .withPictureMain > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.aboutusContentDesktop > .flashcards > .withPictureMain > .withPicture {
    margin-top: 0%;
    width: 100%;
    height: 100%;
    
}
.aboutusContentDesktop > .flashcards > .withPictureMain > .withPicture > img:nth-of-type(1) {
    visibility: hidden;
    height: 0;
}

.aboutusContentDesktop > .flashcards > .withPictureMain > .withPicture > img:nth-of-type(2) {
    height: 15%;
    width: 20%;
    margin-top: 3%;
}

.aboutusContentDesktop > .flashcards > .withPictureMain > .withPicture > p:nth-of-type(1) {
    font-family: "oswald";
    font-weight: 600;
    font-size: 105%;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    margin-top: 5%;
}

.aboutusContentDesktop > .flashcards > .withPictureMain > .withPicture > p:nth-of-type(2) {
    font-family: "Carlito";
    font-weight: 400;
    font-size: 115%;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    margin-top: 4.5%;
    width: 80%;
    justify-content: center;
    word-wrap: normal;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.aboutusContentDesktop > .flashcards > .withPictureMain > .withPicture > div {
    width: 50%;
    margin-top: 5%;
    align-items: center;
    gap: 1%;
    justify-content: center;
}

.aboutusContentDesktop > .flashcards > .withPictureMain > .withPicture > div > p {
    font-family: "oswald";
    font-size: 70%;
    font-weight: 500;
    text-align: center;
    color: rgba(0, 0, 0, 1);
}

/* End FlashCard Div Third One without Hover*/


/* FlashCard Div Third One With Hover*/

.aboutusContentDesktop > .flashcards > .withPictureMain:hover > .withPicture {
    background-color: rgba(255, 193, 26, 1);
    box-shadow: 0px 4px 21.9px -4px rgba(0, 0, 0, 0.25);
    transition: 0.3s ease-in-out
}

.aboutusContentDesktop > .flashcards > .withPictureMain:hover > .withPicture > img:nth-of-type(2) {
    visibility: hidden;
    height: 0;
}

.aboutusContentDesktop > .flashcards > .withPictureMain:hover > .withPicture > img:nth-of-type(1) {
    visibility: visible;
    height: 15%;
    width: 20%;
    margin-top: 2.5%;
    margin-bottom: -3%;
}

/* End FlashCard Div Third One With Hover*/

.aboutusContentDesktop > img {
    margin-top: -10%;
    position: relative;
    z-index: -2
}

.aboutusMainMobile > p:nth-of-type(1) {
    font-family: "Oswald";
    font-weight: 600;
    font-size: 170%;
    line-height: 150%;
    letter-spacing: 5%;
    color: rgba(255, 193, 26, 1);
    width: max-content;
    margin-left: 10%;
}

.aboutusMainMobile > p:nth-of-type(2) {
    font-family: "Oswald";
    font-weight: 500;
    font-size: 140%;
    width: 80%;
    text-align: justify;
    color: rgba(0, 0, 0, 1);
    margin-left: 10%;
    line-height: 120%;
    margin-top: 1%;
}

.aboutusMainMobile > p:nth-of-type(3) {
    font-family: "Carlito";
    font-weight: 400;
    font-size: 110%;
    width: 80%;
    text-align: justify;
    color: rgba(0, 0, 0, 1);
    margin-left: 10%;
    line-height: 150%;
    letter-spacing: 1px;
    margin-top: 3%;
}

.mobileFlashcards {
    margin-top: 10%;
}

/* Mobile Flashcards Without Hover */

.mobileFlashcards > div {
    margin-bottom: 10%;
    width: 80%;
    align-items: center;
    height: 35vh;
    box-shadow: 0px 4px 21.9px -4px rgba(0, 0, 0, 0.25);
    transition: 0.3s ease-in-out;
    background-color: rgba(255, 255, 255, 1);
}

.mobileFlashcards > div > img:nth-of-type(1) {
    visibility: hidden;
    height: 0;
}

.mobileFlashcards > div > img:nth-of-type(2) {
    height: 15%;
    width: 10%;
    margin-top: 3%;
}

.mobileFlashcards > div > p:nth-of-type(1) {
    color: rgba(0,0,0,1);
    font-family: "oswald";
    font-weight: 600;
    font-size: 125%;
    text-align: center;
    margin-top: 5%;
}

.mobileFlashcards > div > p:nth-of-type(2) {
    font-family: "Carlito";
    font-weight: 400;
    font-size: 120%;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    margin-top: 5%;
    width: 70%;
    justify-content: center;
    word-wrap: normal;
}

.mobileFlashcards > div > div {
    justify-content: center;
    margin-top: 5%;
    width: 80%;
    gap: 1%;
}

.mobileFlashcards > div > div > p {
    font-family: "oswald";
    font-size: 140%;
    font-weight: 500;
    text-align: center;
    color: rgba(0, 0, 0, 1);
}



/* Mobile Flashcards with Hover */

.mobileFlashcards > div:hover {
    background-color: rgba(255, 193, 26, 1);
    box-shadow: 0px 4px 21.9px -4px rgba(0, 0, 0, 0.25);
    transition: 0.3s ease-in-out
}

.mobileFlashcards > div:hover > img:nth-of-type(2) {
    visibility: hidden;
    height: 0;
}

.mobileFlashcards > div:hover > img:nth-of-type(1) {
    visibility: visible;
    height: 15%;
    width: 10%;
    margin-top: 2.5%;
    margin-bottom: -3%;
}

.mobileFlashcards > img {
    margin-bottom: 10%;
}