:root {
    --orange-color: #FA8A38;
    --green-color: #24725D;
    --dark-color: #121212;
    --light-color: #FAFAFA;
    --silver-color: #75757B;
    --grey-color: #75757B;
    --grey-color-2: #AAB1BA;
    --light-green-color: #EBFAF5;
    --light-orange-color: #FFF8F5;
    --stroke-color: #F4F4F4;
    --white-color: #FFF;
}
*,
*::after,
*::before{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: "Be Vietnam Pro", sans-serif;
}
*{
    padding: 0;
    margin:0;
}

a {
    text-decoration: none;
}
h1,h2,h3,h4{

}

.flex {display: flex;}

body{
        background-color: var(--light-color);
    }
    .top{
        background-color: var(--green-color);
        height: 52px;
        justify-content: space-between;
    }

    .container{
        margin: 0px auto;
        justify-content: center;
        padding: 0 80px;
    }

    .top .container{
        justify-content: space-between;
        align-items: center;
    }

    .info{
        align-items: center;
        
    }
    a.info-phone{
        display: inline-block;
        border-right: 1px solid var(--light-color);
        padding-right: 16px;
    }
    .info-phone > i{
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(images/phone.png);
        vertical-align: middle;
        margin-right: 12px;
    }

    a.info-email{
        padding-left: 16px;
    }
    .info-email > i{
        display: inline-block;
        width: 22px;
        height: 18px;
        background: url(images/email-icon.png);
        vertical-align: middle;
        margin-right: 12px;
    }

    .info a{
        font-size: 16px;
        color: var(--light-color);
    }

    .socials{
        position: relative;
        display: flex;
        background-color: var(--orange-color);
        align-items: center;
        height: 52px;
        padding: 0 40px;
    }

    .img-phone{
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }

    .img-email{
        width: 13px;
        height: 10px;
        margin-right: 8px;
    }

    .social-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(images/socials-icon-26.png);
    }

    .s-fb{
        background-position: 0 24px;
        margin-right: 20px;
    }

    .s-int{
        background-position: -44px 26px;
        width: 26px;
        height: 26px;
        margin-right: 20px;
    }

    .s-tt{
        background-position: 66px 26px;
        margin-right: 20px;
    }
    .s-yt{
        background-position: 24px 24px;
        width: 24px;
        height: 24px;
    }

    /* nav */
    nav{
        background-color: var(--light-color);
        margin: 24px 0;
    }

    nav a{
        font-size: 16px;
        color: var(--dark-color);
    }

    nav .container{
        justify-content: space-between;
        height: 56px;
        align-items: center;
    }

    nav ul{
        list-style: none;
    }

    nav .navbar{
        height: 56px;
    }
    .navbar > ul{
        display: flex;
        align-items: center;
    }

    nav ul li{
        float: left;
    }
    nav ul li a{
        margin-left: 20px;
    }

    nav ul li ul{
        display: none;
    }

    .user-ctrl{
        margin-left: 24px;
        align-items: center;
    }

    .user-ctrl .btn{
        margin-left: 24px;
    }

    .btn{
        background-color: var(--green-color);
        border-radius: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 8px 8px 24px;
        color: var(--light-color);
        gap: 16px;
    }

    .btn span{
        background-color: var(--light-color);
        width: 40px;
        height: 40px;
        display: inline-block;
        border-radius: 40px;
        text-align: center;
        padding: 12px;
    }
    .btn span > i{
        background: url(images/send.png);
        width: 16px;
        height: 16px;
        display: inline-block;
    }
    span.btn > i{
        background: url(images/send-icon-white.png);
        width: 14px;
        height: 14px;
        display: inline-block;
        margin-right: 0;
    }
    /* hero banner */

    .hero-banner{
        margin: 64px 0;
        background-color: var(--light-color);
    }
    .hero-banner .left{
        padding-top: 60px;
    }

    .hero-banner h1{
        font-size: 56px;
        font-weight: 800;
        margin-top: 16px;
        margin-bottom: 24px;
    }
    .hero-banner p.welcome{
        border-radius: 5px;
        background: rgba(255, 149, 0, 0.12);
        padding: 4px 8px;
        flex-basis: auto;
    }

    .hero-banner p.welcome{
        color: var(--orange-color);
        font-size: 14px;
    }

    .hero-banner p.slogan{
        font-size: 20px;
        color: var(--silver-color);
    }

    .search-box{
        align-items: center;
        justify-content: space-between;
        margin-top: 40px;
        flex: 1;
        gap: 16px;
    }

    .search-box-input > span > i{
        background: url(images/search-icon.png);
        width: 24px;
        height: 25px;
        display: inline-block;
    }
    .search-box-input{
        border: none;
        margin: 0;
        padding:0;
        flex: 1;
        padding: 6px 6px 6px 24px;
    }
    .search-box-input > input{
        flex: 1;
        border: none;
    }
    .search-box > img{
        width: 24px;
        height: 24px;
    }

    .side-menu{
        display: none;
    }
    .gs-title{
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .gs-title-btn{
        align-items: center;
        gap: 24px;
    }
    .gs-title a{
        color: var(--light-color);
    }
    .gs-title-hot{
        background-color: var(--orange-color);
        padding: 10px 24px;
        border-radius: 8px;
    }
    a.gs-title-latest{
        color: var(--silver-color);
    }
    .gs-title > h2{
        font-size: 48px;
    }

    .gs-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 25px 24px;
    }
    .gs-card {
        flex-basis: 48%;
        display: flex;
        padding: 10px 20px 10px 10px;
        align-items: flex-start;
        gap: 24px;
        border-radius: 18px;
        border: 1px solid var(--stroke-color, #F4F4F4);
        background: var(--light-color, #FFF);
        box-shadow: 0px 0px 24px 0px rgba(74, 125, 111, 0.08);
    }
    .gs-card.active{
        border-radius: 18px;
        border: 1px solid rgba(36, 114, 93, 0.30);
        background: var(--light-color);
        box-shadow: 0px 12px 48px 0px rgba(74, 125, 111, 0.20);
    }
    .gs-card-info{
        padding: 12px 0;
    }
    .gs-card-info > p, .gs-card-info > h3{
        margin-bottom: 16px;
    }
    .gs-card-info > h4{
        font-size: 20px;
    }
    .gs-card-info > p.a{
        display: flex;
        flex: 1 0 0;
        flex-wrap: wrap;
        gap: 0 8px;
        justify-content: flex-start;
    }
    .gs-card-info > p > span{
        color: var(--silver-color);
        font-size: 16px;
    }
    .gs-card-info > p > i{
        margin-right: 8px;
    }

    .book2{
        background: url(images/book-icon.png);
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .book::before{
        width: 20px;
        height: 24px;
        display: inline-block;
        content: url(images/book-icon.png);
        vertical-align: middle;
    }
    .area::before{
        width: 20px;
        height: 20px;
        display: inline-block;
        content: url(images/address-icon.png);
        vertical-align: middle;
    }
    .school::before{
        width: 20px;
        height: 24px;
        display: inline-block;
        content: url(images/school-icon.png);
        vertical-align: middle;
    }
    .gs-card-info a{
        color: var(--orange-color);
        font-size: 16px;
    }
    .view-detail{
        gap: 16px;
        align-items: center;
    }

    .btn-detail{
        width: 32px;
        height: 32px;
        text-align: center;
        padding: 0;
        margin: 0;
        justify-content: center;
        background-color: var(--orange-color);
    }
    .viewall-box{
        align-items: center;
        justify-content: center;
        margin-top: 64px;
        margin-bottom: 120px;
    }
    .btn-viewall{
        max-width: 176px;
    }
    h2.st-title{
        font-size: 48px;
        margin-bottom: 64px;
    }
    .st-list{
        gap: 24px;
        flex-wrap: wrap;
    }
    .st-item-avatar{
        content: url(images/st-male-avatar.png);
        width: 40px;
        height: 40px;
        display: inline-block;
        margin-right: 13px;
    }
    .st-item-avatar.female{
        content: url(images/st-female-avatar.png);
    }
    .st-item{
        flex-basis: 48%;
        padding: 24px;
        border-radius: 18px;
        border: 1px solid var(--stroke-color, #F4F4F4);
        background: var(--light-color, #FFF);
        box-shadow: 0px 0px 24px 0px rgba(74, 125, 111, 0.08);
    }
    .st-item.active{
        border-radius: 18px;
        border: 1px solid rgba(36, 114, 93, 0.30);
        background: var(--White, #FFF);
        /* Card */
        box-shadow: 0px 12px 48px 0px rgba(74, 125, 111, 0.20);
    }
    .st-item h3{
        margin-bottom: 24px;
        font-size: 20px;
    }
    .st-item > h3 > i{
        vertical-align: middle;
    }
    .st-item > p{
        margin-bottom: 16px;
    }
    .st-item i{
        margin-right: 8px;
    }
    .st-item > p{
        font-weight: 500;
    }
    .st-item > p > span{
        color: var(--grey-color);
        font-weight: 400;
    }
    .detail-box{
        justify-content: space-between;
        align-items: center;
    }
    .detail-box span{
        color: var(--green-color);
        line-height: 24px;
        font-weight: 600;
    }
    .detail-box > a{
        color: var(--orange-color);
    }
    .money::before{
        width: 24px;
        height: 24px;
        display: inline-block;
        content: url(images/money-icon.png);
        vertical-align: middle;
    }
    .special-request::before{
        width: 24px;
        height: 24px;
        display: inline-block;
        content: url(images/special-request-icon.png);
        vertical-align: middle;
    }
    .search-gs-hs-box {
        margin: 120px 0;
    }
    .search-gs-hs-box > h2 > i::before{
        width: 32px;
        height: 24px;
        display: inline-block;
        content: url(images/find-gs-hs-icon1.png);
        vertical-align: middle;
        margin: 16px;
        margin-right: 40px;
    }
    .search-gs-hs-box > h2.search-hs-title > i::before{
        width: 32px;
        height: 24px;
        display: inline-block;
        content: url(images/find-gs-hs-icon2.png);
        vertical-align: middle;
        margin: 16px;
        margin-right: 40px;
    }
    .search-gs-hs-box > h2{
        margin-bottom: 48px;
        font-size: 48px;
        font-weight: 700;
    }
    .search-hs-title{
        margin-top: 80px;
    }
    .subject-box > span, .class-box > span{
        padding: 16px 24px;
        display: inline-block;
        font-size: 18px;
    }
    .subject-box > span.active{
        border-radius: 12px;
        border: 1px solid rgba(36, 114, 93, 0.30);
        background: var(--light-green-color);
        color: var(--green-color);
    }
    .subject-box.hs-subject-box > span.active{
        border-radius: 12px;
        border: 1px solid rgba(250, 138, 56, 0.30);
        background: var(--light-orange-color);
        color: var(--orange-color);
    }
    .statistics{
        background-color: var(--green-color);
        justify-content: space-around;
        gap: 120px;
        padding: 80px 0;
    }
    .statistics > div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .statistics > div > span{
        width: 78px;
        height: 78px;
        padding: 19px 20px 21px 20px;
        background-color: var(--orange-color);
        border-radius: 78px;
        margin-bottom: 20px;
    }
    .statistics > div > span > i{
        width: 39px;
        height: 39px;
        display: inline-block;
        content: url(images/s-hs-icon.png);
        vertical-align: middle;
    }
    .statistics > div.statistic-gs > span > i{
        content: url(images/s-gs-icon.png);
    }
    .statistics > div.statistic-class > span > i{
        content: url(images/s-class-icon.png);
    }
    .statistics > div.statistic-regis > span > i{
        content: url(images/s-regis-icon.png);
    }
    .statistics > div > h3{
        font-size: 40px;
        color: var(--light-color);
        font-weight: 700;
    }
    .statistics > div > p{
        font-size: 20px;
        color: var(--light-color);
        font-weight: 500;
    }
    .students-reviews{
        padding: 120px 0;
        align-items: center;
        flex-direction: column;
        background-color: var(--light-green-color);
    }
    .students-reviews > p{
        font-size: 18px;
        color: var(--orange-color);
    }
    .students-reviews > p > i{
        width: 21px;
        height: 21px;
        display: inline-block;
        content: url(images/review-title-icon.png);
        vertical-align: middle;
    }
    .students-reviews > h2{
        font-size: 40px;
        font-weight: 700;
    }
    .student-review-list{
        gap: 24;
        flex-wrap: wrap;
        margin-top: 64px;
        margin-bottom: 40px;
    }
    .student-review-item{
        flex-basis: 33%;
        padding: 34px 32px;
    }
    .student-review-item.student-review-item-main{
        border-radius: 8px;
        border: 1px solid rgba(36, 114, 93, 0.30);
        background: var(--White, #FFF);
        box-shadow: 0px 12px 48px 0px rgba(74, 125, 111, 0.20);
    }
    .student-review-item > i{
        width: 78px;
        height: 15px;
        display: inline-block;
        content: url(images/review-star-5.png);
        vertical-align: middle;
        margin-bottom: 12px;
    }
    .student-review-item > p{
        margin-bottom: 18px;
    }
    .item-info-box{
        align-items: center;
    }
    .item-img{
        margin-right: 14px;
    }
    .item-info{
        flex-direction: column;
        flex: 1;
    }
    .item-info > strong{
        font-size: 18px;
        font-weight: 700;
    }
    .item-info > span{
        font-size: 14px;
        color: var(--green-color);
    }
    .review-nav{
        width: 24px;
        height: 24px;
        display: inline-block;
        content: url(images/review-nav-link-icon.png);
        vertical-align: middle;
        cursor: pointer;
    }
    .review-nav.review-nav-active{
        content: url(images/review-nav-link-active-icon.png);
    }
    .review-nav:hover{
        content: url(images/review-nav-link-active-icon.png);
    }
    footer{
        background-color: var(--light-color);
        padding-top: 120px
    }
    .connect-me-box{
        flex-direction: column;
        align-items: center;
    }
    .connect-me-box > h2{
        font-size: 48px;
        margin-bottom: 16px;
    }
    .connect-me-box > p{
        font-size: 18px;
        color: var(--grey-color);
        margin-bottom: 40px;
    }
    .connect-me-box .connect-me-info-box{
        margin-bottom: 56px;
    }
    .connect-me-info-box > span{
        padding: 0px 32px;
    }
    .connect-me-info-box > span:first-child{
        border-right: 1px solid #121212;
    }
    .connect-me-info-box > span > i{
        width: 24px;
        height: 19px;
        display: inline-block;
        content: url(images/mail-bottom-icon.png);
        vertical-align: middle;
        margin-right:16px;
    }
    .connect-me-info-box > span:first-child > i{
        width: 24px;
        height: 24px;
        content: url(images/phone-bottom-icon.svg);
    }
    .connect-me-email-box{
        min-width: 741px;
        padding: 6px 6px 6px 24px;
        gap: 8;
        margin-bottom: 120px;
        align-items: center;
    }
    .connect-me-email-box input{
        flex: 1;
        border: none;
        margin-right: 16px;
        height: 24px;
    }
    .footer-nav{
        justify-content: space-between;
        align-items: center;
    }
    .footer-nav img{
        height: 40px;
    }
    .footer-nav > ul{
        list-style: none;
        display: flex;
        gap: 32px;
    }
    .footer-nav > ul li{
    }
    .footer-nav > ul li a{
        font-size: 16px;
        font-weight: 500;
        color: var(--dark-color);
    }
    .footer-nav > ul li a.has-sub::after{
        width: 11px;
        height: 6px;
        display: inline-block;
        content: url(images/has-sub-icon.png);
        vertical-align: middle;
        margin-left: 2px;
    }
    .footer-socials-box > a > i{
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(images/socials-icon2.png);
        margin-left: 24px;
    }
    .footer-socials-box > a.fb i{
        background-position: 120px 0px;
    }
    .footer-socials-box > a.tiktok i{
        background-position: 72px 0px;
    }
    .footer-socials-box > a.yt i{
        background-position: 23px 0px;
    }
    .copyright-box{
        justify-content: space-between;
        margin: 32px 0;
    }
    .copyright-box .left > span{
        font-size: 16px;
        color: var(--grey-color);
    }
    .copyright-box .left > strong{
        margin: 0 4px;
    }
    .copyright-box .right a{
        font-size: 16px;
        color: var(--grey-color);
    }
    .copyright-box .right a:first-child{
        margin-right: 32px;
    }
    /* dang ky lam gia su*/
    .register-box{
        padding: 80px;
    }
    .frm-register{
        padding: 0 48px;
    }
    .frm-register > h2{
        font-size: 48px;
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 12px;
        margin-top: 48px;
    }
    .frm-register > p{
        font-size: 18px;
        color: var(--grey-color);
        font-weight: 400;
    }
    .frm-register > p > span{
        color: #E02D3C;
    }
    .title-register{
        padding: 32px 0;
    }
    .title-register > span{
        padding: 10px 24px;
        background-color: var(--orange-color);
        border-radius: 10px;
        background: var(--orange-color, #FA8A38);
        box-shadow: 0px 0px 24px 0px rgba(255, 221, 173, 0.50);
        color: var(--white-color);
        font-size: 24px;
        font-weight: 600;
    }
    .frm-register > h3{
        color: #0E2A46;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 24px;
        margin-top: 48px;
    }
    .title-register > a{
        padding: 10px 24px;
        border-radius: 10px;
        color: var(--grey-color, #75757B);
        font-size: 24px;
        font-weight: 500;
    }
    .input-control{
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .input-control-full{
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .input-control-full > div{
        flex-basis: 100%;
    }
    .input-control > div{
        flex-basis: 50%;
    }
    .input-control > div > input, .input-control > div > select, .input-control-full > div > input, .input-control-full > div > textarea{
        padding: 12px;
        border-radius: 8px;
        border: 1px solid var(--stroke-color, #F4F4F4);
        background: var(--light-color, #FAFAFA);
        color: var(--grey-color-2);
        font-size: 16px;
        font-weight: 400;
        font-feature-settings: 'liga' off, 'clig' off;
        width: 100%;
    }
    .input-control-full > div > textarea{
        min-height: 80px;
    }
    .input-control > div > input::placeholder{
        color: var(--grey-color-2);
        font-size: 16px;
        font-weight: 400;
        font-feature-settings: 'liga' off, 'clig' off;
    }
    .input-control > div > p{
        margin-bottom: 12px;
    }
    .input-control > div b{
        font-size: 16px;
        color: var(--dark-color);
        font-weight: 400;
    }
    .input-control > div span, .input-control-full > div span{
        color: #E02D3C;
        font-weight: 500;
    }
    .input-control > div p, .input-control-full > div p{
        margin-bottom: 12px;
    }
    .input-control > div b, .input-control-full > div b{
        font-size: 16px;
        font-weight: 400;
    }
    .input-control-full > div div.note{
        display: flex;
        flex-wrap: wrap;
        border-radius: 8px;
        background: var(--Primary-100, #F0F5FF);
        padding: 6px;
    }
    .input-control-full > div div.note span{
        color: #121212;
        font-size: 16px;
        line-height: 150%;
        flex: 1;
    }
    .input-control-full > div div.note > i{
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(images/info-icon.png);
    }
    .input-control > div:first-child{
    }
    .button-control{
        text-align: center;
    }
    .input-control fieldset{
        border: none;
    }
    .input-control input[type=checkbox]{
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .button-control > button{
        padding: 16px 48px;
        border-radius: 40px;
        background: var(--Primary, #24725D);
        font-size: 20px;
        color: var(--light-color, #FAFAFA);
        font-weight: 500;
        border: none;
    }
@media (min-width: 1281px) {
  
  /* CSS */
    
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS */
  body{
    background-color: green;
  }
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* CSS */
  body{
    background-color: blue;
  }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  /* CSS */
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  .container{
    padding: 0 20px;
  }
  /* CSS */
  .top{
    background-color: var(--green-color);
    padding: 0;
  }
  .btn.btn-viewall{
    padding: 4px 4px 4px 24px;
  }
  .btn > span{
    width: 32px;
    height: 32px;
    border-radius: 32px;
    text-align: center;
  }
  .btn > span > img{
    width: 12px;
  }
  .top .container{
    align-items: center;
    height: 45px;
    justify-content: space-between;
  }
  .socials{
    display: none;
  }
  nav{
    margin: 12px 0;
  }

  .navbar{
    display: none;
    align-items: center;
  }
  a.info-phone, a.info-email{
    font-size: 14px;
  }
  .logo > img{
    height: 40px;
  }

  .hero-banner {
    flex-direction: column;
  }
  .hero-banner h1{
    font-size: 32px;
  }
  .hero-banner p.slogan{
    font-size: 14px;
  }
  .search-box .btn{
    display: none;
  }
  .search-box-input{
    flex-direction: row-reverse;
    flex: 1;
    gap: 16px;
    padding: 6px 6px 6px 16px;
  }
  .search-box-input input{
    padding: 6px;
    border-radius: 56px;
    border: 1px solid var(--Stroke, #F4F4F4);
    background: var(--White, #FFF);
    box-shadow: 8px 8px 56px 0px rgba(0, 0, 0, 0.05);
    flex: 1;
  }
  .search-box-input > span{
    background-color: var(--green-color);
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: var(--Primary, #24725D);
    justify-content: center;
    display: flex;
    align-items: center;

  }
    .search-box-input > span > i {
        background: url(images/search-icon-2.png);
        width: 20px;
        height: 20px;
    }
    .gs-title > h2{
        font-size: 24px;
        margin-bottom: 20px;
    }
    .gs-list{
        margin: 40px 0;
    }
    h2.st-title{
        font-size: 24px;
        margin-bottom: 40px;
    }
    .right img{
        max-width: 350px;
    }

    .hamb{
        cursor: pointer;
        float: right;
        padding: 10px 0px;
    }
    .hamb-line{
        background-color: var(--dark-color);
        display: block;
        height: 2px;
        position: relative;
        width: 24px;
    }
    .hamb-line::before,
    .hamb-line::after{
        background: var(--dark-color);
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-in-out;
        width: 100%;
    }
    .hamb-line::before{
        top: 5px;
        width: 50%;
        right: 0px
    }
    .hamb-line::after{
        top:-5px;
    }
    .side-menu{
        display: none;
    }

    .side-menu:checked ~ .navbar{
        max-height: 100%;
    }

    .gs-list{
        flex-direction: column ;
    }

    .gs-card{
        flex-direction: column;
    }
    .gs-card > img{
        width: 100%;
    }
    .student-review-list{
        flex-direction: column;
    }
    .st-list{
        flex-direction: column;
    }
    .connect-me-email-box{
        min-width: 272px;
    }
    .footer-nav{
        flex-direction: column;
    }
    .connect-me-info-box{
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .connect-me-info-box > span:first-child{
        border: none;
    }
    .footer-nav > ul{
        flex-direction: column;
        gap: 12px;
        margin: 24px 0;;
    }
    h2{
        font-size: 24px;
    }
    .connect-me-box > h2, .connect-me-box > h2, .students-reviews > h2{
        font-size: 24px;
    }
    .connect-me-box > p{
        font-size: 16px;
        color: var(--grey-color, #75757B);
    }
    .copyright-box{
        flex-direction: column;
        gap: 12px;
    }
    .copyright-box .left > span{
        font-size: 14px;
    }
    .statistics{
        flex-direction: column;
    }
    /*register*/
    .register-box{
        margin: 48px 0;
        padding-bottom: 32px;
    }
    .frm-register{
        padding:0 20px;
    }
    .title-register{
        flex-wrap: wrap;
    }
    .title-register > span, .title-register > a{
        font-size: 16px;
        padding: 10px 16px;
    }
    .button-control > button{
        padding: 12px 24px;
        font-size: 16px;
    }
}

header{
    
}