@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: "Lilita One";
    src: url("Fonts/LilitaOne Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Calibri";
    src: url("Fonts/Calibri.ttf") format("truetype");
}
@font-face {
    font-family: "Calibri";
    src: url("Fonts/Calibri-Bold.ttf") format("truetype");
    font-weight: bold;
}


@keyframes EnrollNow {
    0% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}
@keyframes FreeDelivery {
    0% {
        transform: scale(0.75); opacity: 0;
    }
    5% {
        transform: scale(1); opacity: 1;
    }
    50% {
        transform: scale(1); opacity: 1;
    }
    55%, 100% {
        transform: scale(0.75); opacity: 0;
    }
}


/* Miscellaneous Classes */
html {
    scrollbar-width: none;
}
* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body::-webkit-scrollbar {
    width: 0em; display: none;
}
body {
    font-family: Calibri, Tahoma, Geneva, Verdana, sans-serif;
    font-size: min(2.25vmin, 18px);
}


/* Main Content */
.MainContainer {
    width: 100svw; height: 100svh;
    overflow-x: clip; overflow-y: auto;
}
.MainContainer::-webkit-scrollbar {
    width: clamp(0.5em, 1vw, 0.75em);
}
.MainContainer::-webkit-scrollbar-track {
    background-color: #eee;
}
.MainContainer::-webkit-scrollbar-thumb {
    background-color: #999;
    border: 0.2em solid #eee;
    border-radius: 1em;
}
.MainContainer section > .Title {
    padding: 0.25em 0.5em;
    font: 900 3em Montserrat;

    position: relative;
    z-index: 1;
}
.MainContainer section > .Title::before {
    content: "";
    width: 100%; height: 100%;
    background: url("Images/TitleBackground.svg") center no-repeat;
    background-size: 100% 100%;
    opacity: 0.6;

    position: absolute;
    top: 0; left: 0;
    z-index: -1;
}


.NavBar {
    padding: 0.75em 1.5em;
    background-color: #000;

    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0; z-index: 100;
}
.NavBar > div {
    display: flex; gap: 1em;
    align-items: center;
}
.NavBar .LOGO {
    height: 3em;
    object-fit: contain;
    object-position: center;
}
.NavBar .Name {
    color: #fff;
    font: 900 1.75em Montserrat;
    text-transform: uppercase;
}
.NavBar .NormalLinks {
    color: #fff;
    margin-left: 0.75em;
    text-decoration: none;
    font: 700 1em Poppins;
    text-transform: uppercase;
    transition: all 0.2s ease-out;
    transform-origin: center;
    white-space: nowrap;
}
.NavBar .NormalLinks:hover {
    transform: scale(1.05);
}
.NavBar .EnrollNow {
    color: #000;
    border-radius: 3em;
    margin-left: 0.75em;
    padding: 0.6em 1.25em;
    font: 700 0.9em Poppins;
    text-transform: uppercase;
    background-position: 100% 100%;
    background: linear-gradient(135deg, #ecd996, #ecd996 40%, #fff, #ecd996 60%, #ecd996);
    animation: EnrollNow 2s linear 1.75s infinite;
    background-size: 300% 300%;
}

#AboutUs {
    padding: 3em; max-width: 70em;
    margin: auto; margin-top: 2em;

    display: flex; gap: 5em;
    align-items: center;
}
#AboutUs .Collage {
    height: 25em;
    object-fit: contain;
    object-position: center;
}
#AboutUs .Description {
    font: 600 1.1em Poppins;
    text-align: justify;
}

#AboutCourses {
    height: 275svh;
}
#AboutCourses .Container {
    width: 100%; max-width: 90em;
    height: 100svh; margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: sticky;
    top: 0;
}
#AboutCourses .Container > .Title {
    padding: 0.75em;
    text-align: center;
    margin: 1.75em 0em 1em;
    font: 900 2em Montserrat;
}
#AboutCourses .Content {
    width: 100%;
    padding: 0em 1em;

    display: flex;
}
#AboutCourses .Content > div {
    height: 30em;
    position: relative;
}
#AboutCourses .Left {
    flex: 1 1;
}
#AboutCourses .Right {
    min-width: 30em;
}
#AboutCourses .Left > div {
    padding: 0em 2em;
    background-color: #fff;
    width: 100%; height: 100%;
    transition: all 0.5s ease-out;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
}
#AboutCourses .Left .Title {
    font: 300 2em 'Lilita One';
    text-transform: uppercase;
    text-align: center;
    padding: 0.75em;
    color: #500;
}
#AboutCourses .Description {
    font: 600 1.1em Poppins;
    text-align-last: center;
    text-align: justify;
}
#AboutCourses .Quote {
    margin-top: 1.75em;
    padding: 0.5em 0.75em;
    background-color: #9dd8ff;
    border-top: 0.25em solid #006bcf;
    border-bottom: 0.25em solid #006bcf;
    font: 800 1.1em Poppins;
    text-align: center;
    color: #006bcf;
}
#AboutCourses .Author {
    height: 20em;
    border-radius: 2em;
    transition: all 0.5s ease-out;

    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
}

#OurPublications {
    padding: 3em;
    margin-top: 1em;

    display: flex;
    flex-direction: column;
    align-items: center;
}
#OurPublications .Content {
    max-width: 100%;
    margin-top: 3.5em;

    display: flex; gap: 1em;
    align-items: stretch;
}
#OurPublications .Left {
    width: 35%;
    position: relative;
}
#OurPublications .Books {
    max-width: 90%;
    object-fit: cover;
    pointer-events: none;
    border-radius: 1.25em;
    object-position: center;
    border: 0.5em solid #0081cc;

    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
}
#OurPublications .Right {
    width: 65%;
    padding: 1em 0.5em;

    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}
#OurPublications .Container {
    width: 100%; padding-bottom: 1.25em;
}
#OurPublications .swiper-pagination-bullet {
    background: #005eb6;
    width: 15px; height: 15px;
}
#OurPublications .Card {
    padding: 0em 0em 1em 2em;
}
#OurPublications .ContentWrapper {
    height: 100%;
    border-radius: 1em;
    padding: 0.75em 1.25em;
    border: 0.25em solid #500;
    box-shadow: 0em 0.3em 0.3em rgba(0, 0, 0, 0.4);

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    position: relative;
}
#OurPublications .Icon {
    color: #000;
    cursor: pointer;
    padding: 1em 1.25em;
    text-transform: uppercase;
    font: 800 1em Montserrat;
    transition: all 0.25s ease-out;

    display: flex; gap: 0.25em;
    align-items: center;
    position: absolute;
    bottom: 0; left: 0;
}
#OurPublications .Icon i {
    font-size: 1.5em;
}
#OurPublications .Icon:hover {
    color: #0050b9;
}
#OurPublications .Right .Title {
    font: 300 1.75em 'Lilita One';
    text-transform: uppercase;
    text-align: center;
}
#OurPublications .Intro {
    margin: 1.5em 0em;
    font: 500 1em Montserrat;
    text-align: center;
}
#OurPublications .Price {
    font: italic 800 1.25em Calibri;
    text-align: right;
}
#OurPublications .Footer {
    margin-top: 1em;
    padding: 0.5em 1em;
    border-radius: 0.75em;
    background-color: #aa0000;
    box-shadow: 0em 0.2em 0.3em rgba(0, 0, 0, 0.5);

    position: relative;
    overflow: clip;
}
#OurPublications .Contact {
    color: #fff;
    text-align: center;
    font: 800 1.2em Poppins;
    text-transform: uppercase;
}
#OurPublications .Footer .Highlight {
    color: #000;
    border-radius: 1em;
    font: 800 1.2em Poppins;
    width: 110%; height: 110%;
    text-transform: uppercase;
    background-color: #d6c482;
    transform: scale(0.75); opacity: 0;
    animation: FreeDelivery 10s linear 4.5s infinite;
    text-align: center;
    padding: 0em 1.5em;

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    z-index: 1;
}

#RecentBreakthrough {
    padding: 3em;
    margin-top: 1em;

    display: flex;
    flex-direction: column;
    align-items: center;
}
#RecentBreakthrough .Content {
    max-width: 80em;
    margin-top: 2.5em;

    display: grid; gap: 2em;
    grid-template-columns: 1fr 1fr;
}
#RecentBreakthrough .Breakthrough-1 {
    grid-area: 1 / 1 / span 1 / span 1;
}
#RecentBreakthrough .Breakthrough-2 {
    grid-area: 1 / 2 / span 1 / span 1;
}
#RecentBreakthrough .Breakthrough-3 {
    grid-area: 2 / 1 / span 1 / span 2;
}
#RecentBreakthrough .Breakthrough-4 {
    grid-area: 3 / 1 / span 1 / span 2;
    height: 25em; aspect-ratio: 1.75;
    margin: auto;
}
#RecentBreakthrough .Card {
    height: 100%;
    text-align: center;
    padding: 0.75em 1em;
    border-radius: 0.75em;
    text-transform: uppercase;
    font: 800 1.1em Montserrat;
    border: 0.2em solid #500;
    background-color: #f1f1f1;
    box-shadow: 0em 0.25em 0.25em rgba(0, 0, 0, 0.4);
}
#RecentBreakthrough .ContentWrapper {
    font-size: 1.1em;
    padding: 0.75em 1em;
    border-radius: 0.75em;
    border: 0.2em solid #500;
    background-color: #f1f1f1;
    box-shadow: 0em 0.4em 0.5em rgba(0, 0, 0, 0.4);
}
#RecentBreakthrough .Heading {
    font: 800 1.5em Montserrat;
    text-transform: uppercase;
    text-align: center;
}
#RecentBreakthrough .Display {
    padding: 1.5em 0em;

    display: flex; gap: 2em 0em;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
}
#RecentBreakthrough .Display div {
    flex: 1 1 25%;
    min-width: 15em;
    padding: 0em 1.5em;
    text-align: center;
    font: bold 1.1em Calibri;
}
#RecentBreakthrough .YoutubeLink {
    box-shadow: 0em 0.5em 0.5em rgba(0, 0, 0, 0.4);
    border: 0.25em solid #000;
    height: 100%; width: 100%;
    border-radius: 1em;
}

#Footer {
    color: #fff;
    margin-top: 2em;
    background-color: #960a0a;

    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#Footer .Content {
    padding: 1em 1.5em;
    width: clamp(10em, 100%, 90em);
    margin: auto;

    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
#Footer .Content > div {
    width: 17.5em;
}
#Footer .Content .Title {
    font: 300 1.15em 'Lilita One';
    text-transform: uppercase;
    text-align: center;
}
#Footer .Content .Details {
    padding-top: 0.5em;
    text-align: center;
    font-size: 1em;
}
#Footer .Content .LOGO {
    height: 5em;
}
#Footer .SocialMediaLinks {
    padding-top: 0.5em;

    display: flex; gap: 0.75em;
    justify-content: center;
    align-items: center;
}
#Footer .SocialMediaLinks a {
    background: #fff;
    border-radius: 0.4em;
    height: 2.25em; width: 2.25em;
    transition: all 0.3s ease-out;
    box-shadow: 0em 0.15em 0.3em rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
#Footer .SocialMediaLinks a:hover {
    width: 3.5em;
}
#Footer .SocialMediaLinks .Icon {
    width: 100%; height: 100%;
    font-size: 1.25em;

    display: flex;
    justify-content: center;
    align-items: center;
}
#Footer #Youtube {
    color: #f00;
}
#Footer #Instagram {
    color: #df0082;
}
#Footer #Facebook {
    color: #006bcf;
}
#Footer .Links {
    padding: 1.5em;
    border-bottom: 0.2em solid #000;

    display: flex; gap: 1.25em 2em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#Footer .Links a {
    color: #fff;
    text-decoration: none;
    font: 800 1em Montserrat;
    transition: all 0.3s ease-out;
}
#Footer .Links a:hover {
    transform: scale(1.1);
}
#Footer .Copyright {
    color: #fff;
    padding: 0.5em;
    text-align: center;
    font: 800 0.75em Montserrat;
    text-transform: uppercase;
    background-color: #af0c0c;
}


@media screen and (max-aspect-ratio: 1.60) {
    #AboutCourses .Right {
        min-width: 25em;
    }
    #AboutCourses .Author {
        height: 15em;
    }

    #OurPublications .Left {
        display: none;
    }
    #OurPublications .Right {
        width: 100%;
    }
}

@media screen and (max-aspect-ratio: 1.50) {
    #AboutUs .Collage {
        height: 20em;
    }
}

@media screen and (max-aspect-ratio: 1.48) {
    #AboutCourses .Right {
        min-width: 20em;
    }
}

@media screen and (max-aspect-ratio: 1.32) {
    #AboutUs {
        gap: 2.5em;
        flex-direction: column;
    }
    #AboutUs .Collage {
        height: 25em;
    }
    #AboutUs .Description {
        text-align-last: center;
    }

    #OurPublications, #RecentBreakthrough {
        padding: 3em 1em;
    }
}

@media screen and (max-aspect-ratio: 1.25) {
    #AboutCourses {
        height: fit-content;
    }
    #AboutCourses .Container {
        height: fit-content;
        position: static;
    }
    #AboutCourses .Content .Left {
        height: fit-content;
    }
    #AboutCourses .Left > div {
        margin-bottom: 2.75em;

        position: static;
        translate: unset;
    }
    #AboutCourses .Right {
        display: none;
    }

    #RecentBreakthrough .Content {
        grid-template-columns: 1fr;
    }
    #RecentBreakthrough .Breakthrough-1 {
        grid-area: 1 / 1 / span 1 / span 1;
    }
    #RecentBreakthrough .Breakthrough-2 {
        grid-area: 2 / 1 / span 1 / span 1;
    }
    #RecentBreakthrough .Breakthrough-3 {
        grid-area: 3 / 1 / span 1 / span 1;
    }
    #RecentBreakthrough .Breakthrough-4 {
        grid-area: 4 / 1 / span 1 / span 1;
        width: 35em; height: auto;
        margin: auto;
    }
}

@media screen  and (max-aspect-ratio: 1.20) {
    .NavBar .Name {
        display: none;
    }
}

@media screen and (max-aspect-ratio: 0.60) {
    body {
        font-size: 3.5vmin;
    }

    .MainContainer::-webkit-scrollbar {
        width: 0; display: none;
    }

    .NavBar {
        padding: 0.5em 1em;
    }
    .NavBar .NormalLinks, .NavBar .EnrollNow {
        margin-left: 0em;
    }

    #AboutCourses .Left > div {
        padding: 0em;
    }

    #OurPublications .Title {
        font-size: 2.25em;
    }
    #OurPublications .Content {
        margin-top: 1.5em;
    }
    #OurPublications .swiper-pagination-bullet {
        width: 10px; height: 10px;
    }
    #OurPublications .Card {
        padding: 0em 0em 1em 0.5em;
    }

    #RecentBreakthrough .Title {
        font-size: 2em;
    }
    #RecentBreakthrough .Breakthrough-4 {
        width: 100%;
    }

    #Footer .Content {
        padding: 2em; gap: 2em;
        flex-direction: column;
    }
    #Footer .Content > div {
        position: relative;
        z-index: 1;
    }
    #Footer .Content .LOGO {
        height: 90%; opacity: 0.35;

        position: absolute;
        top: 50%; left: 50%;
        translate: -50% -50%;
    }
}