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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html{
    font-size: 62.2%;
    overflow-x: hidden ;
}
body{
    overflow-x: hidden;
}
.flex{
    display: flex;
    align-items: center;
}
/* 
    =======================================
                HEADER
    ======================================
*/
.header{
    background-color: rgb(230, 247, 255);
    padding: 0 4.8rem;
    height: 7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 99;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.432);
}
.logo-img{
    gap: 1rem;
}
.header .logo{
    height: 6rem;
}
.tagline{
    flex-direction: column;
    align-items: flex-start;
}
.tagline h4{
    color: black;
}
.navbar-list{
    display: flex;
    list-style: none;
    gap: 4.8rem;
}
.navbar-links{
    text-decoration: none;
    font-size: 2rem;
    font-weight: 400;
    color: #212121;
    transition: 0.3s;
    opacity: 80%;
}
.navbar-links:hover,  .navbar-links:active{
    color: #364fc7;
}
.mobile-navbar-btn{
    display: none;
    background: transparent;
    cursor: pointer;
}
.mobile-nav-icon{
    width: 3rem;
    color: #212121;
    height: 2rem;
    font-size: 3.5rem;
}
.mobile-navbar-btn >  .fa-xmark{
    display: none;
}

/* 
    =======================================
                HERO SECTION
    ======================================
*/
.hero{
    background: url(./imgs/hero-background/HeroSection_1980x1080.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 58rem;
    margin-top: 7rem;
}
.hero-heading{
    position: relative;
    left: 3rem;
    flex-direction: column;
    align-items: flex-start;
}
.hero-heading h1,h4{
    color: white;
}
.hero-heading h1{
    font-size: 8rem;
}
.hero-heading h4{
    font-size: 2rem;
    text-transform: uppercase;
font-style: italic;
left: 1rem;
position: relative;
}

/* 
    =======================================
                Home SECTION
    ======================================
*/
.home{
    padding: 8rem 4.8rem;
    background-color:rgb(255, 255, 255) ;
    justify-content: space-between;
    align-items: flex-start;

}
.home-img{
    width: 50%;
}
.home-img img{
    width: 100%;
    border-radius: 5px;
    box-shadow: 3px 3px 10px rgb(133, 133, 133);
}
.home-discription{
    width: 70%;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    padding: 0 4rem;
    justify-content: flex-start;
}
.home-discription p{
    font-size: 1.5rem;
    font-style: italic;
}
 h1{
    text-transform: uppercase;
    font-size: 3rem;
}
.home-disc-p{
    font-size: 2rem !important;

}
.home-disc-list{
    /* flex-direction: column; */
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    left: 20px;
    font-size: 1.5rem;
    gap: 1.5rem;
    /* list-style: none; */
    flex-direction: column;
}
.home-disc-list li{
    /* background-color: red; */
    /* padding: 0.5rem 0.8rem; */
    color: black;
    /* border-radius: 5px; */
    /* box-shadow: 1px 3px 5px rgba(0, 17, 95, 0.432); */
}
.home-discription h3{
    font-size: 1.5rem;
    color: rgb(238, 255, 0);
    background-color: black;
    padding: 1rem 1.4rem;
    border-radius: 5px;
    /* font-weight:lighter; */
    font-style: italic;
    text-transform: uppercase;
    word-spacing: 0.3rem;
    cursor: pointer;
    box-shadow: 1px 1px 5px rgb(246, 255, 0);
}
.enroll-now{
    padding: 0.5rem 0.8rem;
}
.enroll-now a{
    color: rgb(25, 25, 25);
    text-decoration: none;
}
/* 
    =======================================
                ABOUT SECTION
    ======================================
*/
.about{
    padding: 8rem 4.8rem;
    background-color: #262626;
    justify-content: flex-start;
    align-items: flex-start;
    /* height: 100vh; */
}
.about-img{
    width: 50%;
}
.about-img img{
    width: 90%;
    margin: auto;
    border-radius: 5px;
    display: flex;
    box-shadow: 3px 3px 12px rgba(193, 193, 193, 0.342);
}
.about-discription{
    width: 50%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    color: white;
}
.about-discription p{
    font-size: 1.2rem;
    font-style: italic;
    line-height: 2.9rem;
}
.about-discription h1{
    text-transform: uppercase;
}
/* 
    =======================================
            INCREASING NUMBER SECTION
    ======================================
*/  
.wrapper{
    border: 1px solid white;
    width: 100%;
    margin: 4rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper-container{
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(230, 247, 255);
    padding: 4rem  0;
}
.num p{
    color: rgb(0, 40, 160);
    font-weight: 1000;
    font-size: 5rem;
}
.text  p{
    color: rgb(0, 0, 0);
    font-size: 3.3rem;
}
/* 
    =======================================
            FLAGS SECTION
    ======================================
*/  
.flags{
    width: 100%;
    margin: auto;
    gap: 5rem;
    justify-content: center;
    /* align-items: flex-start; */
    flex-wrap: wrap;
}
.flag{
    width: 13%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.flag img{
    width: 100%;
}
/* 
    =======================================
            STUDENT REVIEW SECTION
    ======================================
*/  
.review{
    flex-direction: column;
    gap: 4rem;
    padding: 7rem 4.8rem;
}
.review p{
    font-size: 3.5rem;
    font-style: italic;
}
.box{
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
}
.container{
    width: 30%;
    flex-direction: column;
    background-color: rgb(240, 247, 255);
    padding: 1rem 0;
    border-radius: 20px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.514);
}
.review-img{
    width: 100%;
    margin: auto;
    justify-content: center;
    align-items: center;
    display: flex;
}
.review-img img{
    width: 20%;
    border-radius: 50%;
}
.review-text{
    width: 95%;
    padding: 1rem 1rem;
    flex-direction: column;
    gap: 1rem;
}
.review-text p{
    font-size: 1rem;
}
.review-text h4{
    color: #333333;
    font-size: 1.2rem;
}
/* 
    =======================================
            JOINUS CODES
    ======================================
*/
.joinus{
    padding: 8rem 4.8rem;
    background-color: #fbf7e4;
}
.joinus-img{
    width: 50%;
    border-top-right-radius: 50%;

}
.joinus-img img{
    width: 70%;
    border-top-right-radius: 35%;
    border-bottom-left-radius: 35%;
}
.joinus-text{
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    width: 50%;
}
.joinus-text h6{
    font-size: 2rem;
    opacity: 60%;
}
.joinus-text h2{
    font-size: 4rem;
}
.joinus-text p{
    font-style: italic;
    font-size: 2.7rem;
    opacity: 80%;
    font-weight: 300;
}
.joinus-btn{
    padding: 1.5rem 4rem;
    font-size: 1.5rem;
    background-color: black;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s linear;
}
.joinus-btn:hover{
    background-color: #333333;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.49);
}
.joinus-btn a{
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}
/* 
    =======================================
            FOOTER CODES
    ======================================
*/
.footer{
    text-align: center;
    justify-content: center;
    padding: 1.5rem 4.8rem;
    background-color: rgb(23, 23, 23);
    color: white;
    flex-direction: column;
}
.footer-details{
    justify-content: space-between;
    align-items: flex-start;
}
.right-footer{
    width: 50%;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
}
.right-footer p{
    font-style: italic;
    font-size: 1.1rem;
}
.right-footer-head{
    gap: 1.3rem;
    margin-bottom: 1rem;
}
.right-footer-head h4{
    font-size: 1.5rem;
}
.right-footer-head img{
    width: 9%;
}
.left-footer{
    width: 50%;
    align-items: flex-end;
    flex-direction: column;
    gap: 0.7rem;
}
.left-footer p{
    font-style: italic;
    font-size: 1.1rem;
}
.footer-icons {
    gap: 1.1rem;
}
.footer-icons a{
    color: white;
    font-size: 1.6rem;
}
.footer-icons a:hover{
    color: rgb(224, 223, 223);
}
.sub-footer{
    text-align: center;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 1rem 0;
    background-color: black;
    gap: 0.5rem;
    flex-direction: column;
}
.sub-footer p:nth-child(2){
    font-style: italic;
    font-size: 0.7rem;
}
.sub-footer p > a{
    color: rgb(139, 210, 255);
}


/* button */
#go-top-btn {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 99;
    font-size: 22px;
    border: none;
    outline: none;
    background-color: #0089df;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 15%;
    transition: all 0.3s ease-in-out;
}

#go-top-btn:hover {
    background-color: #005d96;
}
/* 
    =======================================
            RESPONSIVE CODES
    ======================================
*/

/* below 980 */
@media ( max-width: 62em) {
    .mobile-navbar-btn{
        display: block;
        z-index: 999;
    }
    .header{
        /* position: relative; */
    }
    .navbar{
        /* display: none; */
        width: 100%;
        height: 100vh;
        background-color: #e3e3e3;
        position: absolute;
        top: 0;
        left: 0;

        display: flex;
        justify-content: center;
        align-items: center;

        /* to get transition */
        transform: translateX(100%);
        transition: all 0.5s linear;

        opacity: 0;
        visibility: hidden;
        /* pointer-events: none; */
    }
    .navbar-list{
        flex-direction: column;
        align-items: center;
    }
    .active .navbar{
        transform:  translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        position: absolute;
        height: 100vh;
    }
    .active .mobile-navbar-btn  > .fa-xmark{
        display: block;
    }
    .active .mobile-navbar-btn  > .fa-bars{
        display: none;
    }
    .hero{
        background-size: cover;
        background-size: 100%;
        height: 35rem;
    }
    .hero-heading{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        top: 0;
        /* position: relative; */
        z-index: 1;
    }
    .hero-heading h1{
        font-size: 4rem;
    }
    .hero-heading h4{
        font-size: 1.2rem;
    }
    .home-discription{
        gap: 2rem;
        padding-right: 0;
    }
    .home-discription h3{
        font-size: 0.9rem;
    }
    .home-discription h1{
        font-size: 1.7rem;
    }
    .home-discription p{
        font-size: 1rem;
    }
    .home-disc-p{
        font-size: 1rem !important;
    }
    .home-disc-list{
        gap: 1rem;
        font-size: 1rem;
    }
    .about{
        flex-direction: column;
        flex-direction: column-reverse;
    }
    .about-img{
        width: 100%;
    }
    .about-img img{
        width: 100%;
    }
    .about-discription{
        width: 100%;
        padding: 2rem 0;
    }
    .about-discription h1{
        font-size: 2.5rem;
    }
    .joinus{
        padding: 4rem ;
    }
    .joinus-text{
        gap: 1.4rem;
    }
    .joinus-text h6{
        font-size: 1.2rem;
    }
    .joinus-text h2{
        font-size: 2.2rem;
    }
    .joinus-text p{
        font-size: 1.5rem;
    }
    .joinus-btn{
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    .wrapper{
        width: 100%;
        flex-wrap: wrap;
    }
    .wrapper-container{
        width: 25%;
    }
    .num p{
        font-size: 4rem;
    }
    .text p{
        font-size: 3rem;
    }
    .flags{
        justify-content: center;
        align-items: flex-start;
    }
    .flag{
        width: 11%;
    }
    .flag p{
        font-size: 0.9rem;
    }
}

/* below 560px  */
@media (max-width: 35rem) {
    .header {
        padding: 0 2rem;
    }
    .hero{
        background-size: cover;
        background-size: 100%;
        height: 20rem;
    }
    .hero-heading h1{
        font-size: 2rem;
        position: relative;

    }
    .hero-heading h4{
        font-size: 0.7rem;
        position: relative;
        left: 0;
    }
    .home{
        flex-direction: column;
        padding: 2rem 2rem;
    }
    .home-img{
        width: 100%;
        align-items: center;
        justify-content: center;
        margin: auto;
    }
    .home-discription{
        width: 100%;
        padding: 2rem 0;
        gap: 1.5rem;
    }
    .home-disc-list{
        flex-direction: column;
    }
    .about{
        flex-direction: column;
        flex-direction: column-reverse;
        padding: 2rem 2rem;
    }
    .review{
        padding: 3rem 2rem;
    }
    .container{
        width: 100%;
    }
    .joinus{
        flex-direction: column-reverse;
        gap: 6rem;
        padding: 4rem 2rem;
    }
    .joinus-text{
        width: 100%;
    }
    .joinus-img{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .joinus-img img{
        width: 90%;
    }
    .right-footer{
        width: 100%;
        align-items: center;
    }
    .right-footer-head{
        align-items: center;
        justify-content: center;
    }
    .left-footer{
        width: 100%;
        align-items: center;
    }
    .footer-details{
        flex-direction: column;
    }
    .wrapper{
        width: 100%;
        flex-wrap: wrap;
    }
    .wrapper-container{
        width: 50%;
    }
    #go-top-btn{
        font-size: 20px;
        padding: 7px;
    }
    .flags{
        gap: 5rem;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 3rem;
    }
    .flag{
        width: 24%;
    }
    .flag p{
        font-size: 1rem;
    }
}