/* global variables */


:root{
    --light-color : #FFFFFF;
    --dark-color: #3C3C3B;
    --primary-color: #008BFC;
    --secondary-color: #FF5E27;
    --app-bg-color: #F9F9F9;
}
@font-face {
    font-family: 'BanglaBold';
    src: url(HindSiliguri-Bold.ttf) format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'BanglaLight';
    src: url(HindSiliguri-Light.ttf) format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'BanglaMedium';
    src: url(HindSiliguri-Medium.ttf) format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'BanglaRegular';
    src: url(HindSiliguri-Regular.ttf) format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'BanglaSemiBold';
    src: url(HindSiliguri-SemiBold.ttf) format('truetype');
    font-weight: 600;
}
@font-face {
    font-family: 'EnglishLight';
    src: url(Montserrat-Light.ttf) format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'EnglishRegular';
    src: url(Montserrat-Regular.ttf) format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'EnglishMedium';
    src: url(Montserrat-Medium.ttf) format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'EnglishSemiBold';
    src: url(Montserrat-SemiBold.ttf) format('truetype');
    font-weight: 600;
}
@font-face {
    font-family: 'EnglishBold';
    src: url(Montserrat-Bold.ttf) format('truetype');
    font-weight: 700;
}


/* ------------- global classes --------------- */


h1,h3,h5{
    font-family: 'EnglishBold',sans-serif;
}
h2,h4,h6{
    font-family: 'BanglaBold',sans-serif;
}
.extralarge{
    font-size: 35px;
}
.large{
    font-size: 30px;
}
.standard{
    font-size: 25px;
}
.small{
    font-size: 20px;
}
.tiny{
    font-size: 15px;
}
.extra-tiny{
    font-size: 10px;
}
.en-bold{
    font-family: 'EnglishBold',sans-serif;
}
.bn-bold{
    font-family: 'BanglaBold',sans-serif;
}
.bn-regular{
    font-family: 'BanglaRegular',sans-serif;
}
.en-regular{
    font-family: 'EnglishRegular',sans-serif;
}
.en-light{
    font-family: 'EnglishLight',sans-serif;
}
.bn-light{
    font-family: 'BanglaLight',sans-serif;
}
html{
    margin: 0px;
    padding: 0px;
}
*, body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'BanglaRegular',sans-serif;
    color: var(--dark-color);
}
b,i,ul,ol,li{
    font-family: 'BanglaMedium',sans-serif;
}
a{
    text-decoration: none;
    color: var(--dark-color);
    cursor: pointer;
}
.app-bg{
    background-color: var(--app-bg-color);
}
.light-bg{
    background-color: var(--light-color);
}
.dark-bg{
    background-color: var(--dark-color);
}
.primary-bg{
    background-color: var(--primary-color);
}
.orange{
    color: var(--secondary-color);
}
.blue{
    color: var(--primary-color);
}
.white{
    color: var(--light-color);
}
input:invalid{
    border: 2px solid red;
}
input:invalid::after{
    content: attr(title);
    display: block;
    color: red;
    font-size: 10px;
    font-family: 'EnglishBold',sans-serif;
}
.container{
    margin: 0px 100px;
}
#inputfield{
    font-family: 'BanglaRegular',sans-serif;
}
/* Hide spinner arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide scrollbar */
input[type="number"]::-webkit-scrollbar {
    display: none;
}
form{
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
::-webkit-file-upload-button{
    color: var(--light-color);
    font-family: 'EnglishBold',sans-serif;
    background-color: var(--primary-color);
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
::-webkit-file-upload-button:hover{
    background-color: var(--dark-color);
}
.inputfield{
    font-family: 'EnglishLight',sans-serif;
    width: 300px;
    background-color: var(--light-color);
    padding: 15px;
    border: 0.3px solid rgba(60, 60, 59, 0.1);
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
#submit-btn{
    font-family: 'EnglishBold',sans-serif;
    width: 300px;
    padding: 15px;
    color: var(--light-color);
    background-color: var(--primary-color);
    border: 0.3px solid rgba(60, 60, 59, 0.1);
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}

@media screen and (max-width:1300px){
    .container{
        margin: 0px 70px;
    }
}

@media screen and (max-width:900px){
    .container{
        margin: 0px 40px;
    }
}

@media screen and (max-width:500px){
    .container{
        margin: 0px 20px;
    }
}

/* --------------- pop up global ------- */

.popup {
    display: none;
    position: fixed;
    z-index: 11111111111111111111111111111111111111111111111111111111111;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
    background-color: #fefefe;
    margin: 10% auto;
    border-radius: 8px;
    position: relative;
    width: 60%;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: var(--dark-color);
}




/* ------------navbar section-----------*/

.navigation-header {
    background-color: var(--light-color);
    padding: 0;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 8px rgba(60, 60, 59, 0.1);
    position: sticky;
    top: 0;
    z-index: 1111111111111111111111111111111111111111111111111111111111;
  }
  
  nav {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo-container > a {
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 800;
    font-size: 16px;
  }
  .logo-container > a > img{
    width: 220px;
    height: auto;
  }
  .navigation-items {
    display: flex;
    gap: 40px;
    align-items: center;
  }
  .navigation-items > a {
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 800;
    font-size: 16px;
    transition: .4s ease-in-out;
  }
  .navigation-items > a:hover {
    color: var(--primary-color);
  }
  .hamburger {
    display: none;
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
  }
  .login-button{
    display: flex;
    gap: 5px;
    padding: 7px 20px;
    background-color: var(--primary-color);
    color: var(--light-color);
    border: none;
    border-radius: 8px;
  }

  @media screen and (max-width:820px) {
    .hamburger {
      display: flex;
      cursor: pointer;
    }
    .hamburger #closeHam {
      display: none;
    }
    .navigation-items {
      display: none;
      flex-direction: column;
      align-items: center;
      position: absolute;
      right: 0;
      top: 58px;
      background-color: var(--primary-color);
      width: 100%;
      height: calc(100vh - 150px);
      padding-top: 60px;
      gap: 10vh;
    }
    .login-button{
        background-color: none;
        color: var(--dark-color);
    }
  }


  /* 


.loginpopup {
    display: none;
    position: fixed;
    z-index: 11111111111111111111111111111111111111111111111111111111111;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.loginpopup > .popup-content > .sign-in-page{
    display: flex;
    gap: 0;
    align-items: flex-start;
}
.loginpopup > .popup-content > .sign-in-page > .images{
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: rgba(0, 139, 252, 0.1);
    align-items: center;
}
.loginpopup > .popup-content > .sign-in-page > .form{
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
.loginpopup > .popup-content > .sign-in-page > .form > form{
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.loginpopup > .popup-content > .sign-in-page > .form > form > .inputfield{
    padding: 10px;
    background-color: var(--app-bg-color);
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 7px;
    width: 300px;
}
.loginpopup > .popup-content > .sign-in-page > .form > form > .btn{
    background-color: var(--primary-color);
    color: var(--light-color);
}
.otppopup {
    display: none;
    position: fixed;
    z-index: 11111111111111111111111111111111111111111111111111111111111;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
*/


/* ------------------------ footer -------------------- */

.footer-container{
    background-color: #F0F9FE;
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.above{
    padding-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;
}
.first-footer > div > img{
    width: 220px;
    height: auto;
}
.first-footer,.second-footer,.third-footer,.fourth-footer{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.contact{
    color: var(--primary-color);
    cursor: pointer;
}
.social{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.social > a > img{
    text-decoration: none;
    padding: 7px;
    background-color: var(--light-color);
    border: 1px solid rgba(60, 60, 59, 0.1);
    border-radius: 8px;
}
.contact1{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.under{
    padding-bottom: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media screen and (max-width:1100px){
    .above{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        justify-content: space-around;
        align-items: start;
    }
}
@media screen and (max-width:768px){
    .above{
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .first-footer,.second-footer,.third-footer,.fourth-footer{
        align-items: center;
    }
    .under{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .under > .links{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .dari{
        display: none;
    }
}


/* --------------- slider ----------------- */

.wrapper-fold{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}
.wrapper {
    max-width: 1100px;
    width: 100%;
    position: relative;
  }
  
  .wrapper i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.23rem;
    height: 50px;
    width: 50px;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
    border-radius: 50%;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    transition: 0.3s ease;
  }
  
  .wrapper i:first-child {
    left: -22px;
  }
  
  .wrapper i:last-child {
    right: -22px;
  }
  
  .wrapper i:active {
    transform: translateY(-50%) scale(0.85);
  }
  
  .wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3) - 12px);
    gap: 16px;
    border-radius: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  
  .wrapper .carousel.no-transition {
    scroll-behavior: auto;
  }
  
  .wrapper .carousel::-webkit-scrollbar {
    display: none;
  }
  
  .wrapper .carousel.dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
  
  .wrapper .carousel .card {
    scroll-snap-align: start;
    height: auto;/*342px*/
    background: #fff;
    border-radius: 8px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .wrapper .carousel.dragging .card {
    user-select: none;
    cursor: grab;
  }

  @media screen and (max-width: 1200px){
    .wrapper{
        max-width: 900px;
    }
    .wrapper .carousel{
        grid-auto-columns: calc((100% / 2) - 12px);
    }
  }
  @media (max-width: 900px) {
    .wrapper{
        max-width: 700px;
    }
    .wrapper .carousel {
      grid-auto-columns: calc((100% / 2) - 9px);
    }
  }
  
  @media (max-width: 600px) {
    .wrapper .carousel {
      grid-auto-columns: 100%;
    }
  }


/* --------------------------------------- items in wrapper --------------- */



  .wrapper .carousel .card > .course{
    max-width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--light-color);
    border: none;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(60, 60, 59, 0.1);
  }
  .wrapper .carousel .card > .course > .bullets{
    margin: 10px 0px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.wrapper .carousel .card > .course > .bullets > .bullet{
    background-color: #F2F3F3;
    border: none;
    border-radius: 8px;
    padding: 10px;
}
.wrapper .carousel .card > .course > hr{
    border: 0.3px solid rgba(60, 60, 59, 0.1);
    width: 320px;
}
.wrapper .carousel .card > .course > .title{
    margin: 10px;
}
.wrapper .carousel .card > .course > .details{
    margin-bottom: 20px;
}
.wrapper .carousel .card > .course > .details > span{
    display: inline-flex;
    gap: 10px;
    padding: 7px 100px;
    border: none;
    border-radius: 8px;
    background-color: var(--primary-color);
    box-shadow: 0px 4px 8px rgba(60, 60, 59, 0.1);
}
.wrapper .carousel .card > .course > .details > span > a{
    color: var(--light-color);
}
  

/*-------------------------------------cards in wrapepr ----------*/
.index-reviews > .wrapper-fold > .wrapper > .carousel{
    grid-auto-columns: calc((100% / 2) - 12px);
}
.wrapper .carousel .card > .review{
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: var(--light-color);
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(60, 60, 59, 0.1);
}
.wrapper .carousel .card > .review > img{
    border: none;
    border-radius: 10px;
}
.wrapper .carousel .card > .review > .name-batch-text{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
@media screen and (max-width: 900px){
    .wrapper .carousel .card > .review{
        flex-direction: column;
    }
    .wrapper .carousel .card > .review > .name-batch-text{
        align-items: center;
    }
}
@media (max-width: 600px) {
    .index-reviews > .wrapper-fold > .wrapper{
        max-width: 300px;
    }
    .index-reviews > .wrapper-fold > .wrapper > .carousel{
        grid-auto-columns: 100%;
    }
  }



/* ----------- index page ------------- */

.index-hero{
    background-color: #F0F9FE;
}
.hero-contents{
    padding: 50px 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.hero-contents > .texts{
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hero-contents > .texts > .first-hero{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.hero-contents > .texts > .fourth-hero >  span{
    display: inline-flex;
    gap: 10px;
    padding: 7px 25px;
    border: none;
    border-radius: 8px;
    background-color: var(--primary-color);
    box-shadow: 0px 4px 8px rgba(60, 60, 59, 0.1);
}
.hero-contents > .texts > .fourth-hero >  span > a{
    color: var(--light-color);
}
@media screen and (max-width:1000px){
    .hero-contents{
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .hero-contents > .pics > img{
        width: 300px;
        height: 250px;
    }
}

.index-courses > .container{
    margin-top: 50px;
}
.index-courses > .container > .type{
    text-align: center;
}
.index-courses > .container > .type > .orange{
    color: var(--secondary-color);
}
.index-courses > .container > .courses{
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-around;
    justify-items: center;
    gap: 20px;
    align-items: center;
}
@media screen and (max-width:1400px){
    .index-courses > .container > .courses{
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media screen and (max-width:1100px){
    .index-courses > .container > .courses{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width:600px){
    .index-courses > .container > .courses{
        grid-template-columns: 1fr;
    }
}
.index-courses > .container > .courses > .course{
    max-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--light-color);
    border: none;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(60, 60, 59, 0.1);
}
.index-courses > .container > .courses > .course > .bullets{
    margin: 10px 0px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.index-courses > .container > .courses > .course > .bullets > .bullet{
    background-color: #F2F3F3;
    border: none;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.index-courses > .container > .courses > .course > hr{
    border: 0.3px solid rgba(60, 60, 59, 0.1);
    width: 350px;
}
.index-courses > .container > .courses > .course > .title{
    margin: 10px;
}
.index-courses > .container > .courses > .course > .details{
    margin-bottom: 20px;
}
.index-courses > .container > .courses > .course > .details > span{
    display: inline-flex;
    gap: 10px;
    padding: 7px 100px;
    border: none;
    border-radius: 8px;
    background-color: var(--primary-color);
    box-shadow: 0px 4px 8px rgba(60, 60, 59, 0.1);
}
.index-courses > .container > .courses > .course > .details > span > a{
    color: var(--light-color);
}
.index-studentcount{
    background-color: var(--primary-color);
    text-align: center;
    padding: 3% 0;
}
.index-courses > .container > .all-button{
    margin: 20px 0px;
    text-align: center;
}
.index-courses > .container > .all-button > span{
    display: inline-flex;
    gap: 10px;
    padding: 7px 100px;
    border: none;
    border-radius: 8px;
    background-color: var(--app-bg-color);
    box-shadow: 0px 4px 8px rgba(60, 60, 59, 0.1);
}

.index-studentcount{
    background-image: url('sectionbg1.png');
}
.index-studentcount > .container > .holder{
    width: 100%;
    border: none;
    background-color: var(--light-color);
    border-radius: 8px;

}
.index-studentcount > .container > .holder > .texts{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    padding: 20px;
    text-align: center;
}
.index-studentcount > .container > .holder > .texts > .text{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0px;
}
@media screen and (max-width:600px){
    .index-studentcount{
        padding: 30px 20px;
    }
    .index-studentcount > .container > .holder{
        border-radius: 8px;
    }
    .index-studentcount > .container > .holder > .texts{
        padding: 5px;
        flex-direction: column;
    }
    .index-studentcount > .container > .holder > .texts > .text{
        gap: 5px;
    }
}
.index-studentcount > .container > .holder > .texts > .text > .color1{
    color: #FF6E76;
}
.index-studentcount > .container > .holder > .texts > .text > .color2{
    color: #3DAFFD;
}
.index-studentcount > .container > .holder > .texts > .text > .color3{
    color: #00B19E;
}
.index-studentcount > .container > .holder > .texts > .text > .color4{
    color: #EAA819;
}

.index-live-features{
    background-image: url("sectionbg2.png");
    padding: 50px 0px;
}
.index-live-features > .container > .orange {
    text-align: center;
    color: var(--secondary-color);
    padding: 15px 0px;
}
.index-live-features > .container > h2{
    text-align: center;
    color: var(--light-color);
}
.index-live-features > .container > .cards{
    margin-top: 30px;
    display: flex;
    gap: 40px;
    justify-content: center;
}
.index-live-features > .container > .cards > .card{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 250px;
    padding: 10px;
    align-items: center;
    text-align: center;
    background-color: var(--light-color);
    border: none;
    border-radius: 8px;
}
@media screen and (max-width:600px){
    .index-live-features > .container > .cards{
        flex-direction: column;
        gap: 20px;align-items: center;
    }
}

.index-reviews{
    padding: 50px 0px;
}
.index-reviews > .text{
    text-align: center;
    color: var(--dark-color);
}
.index-reviews > .text > .orange{
    color: var(--secondary-color);
    padding: 10px 0px;
}



.index-blogs{
    padding: 20px 0px;
}
.index-blogs > .container > .text{
    text-align: center;
    padding-bottom: 30px;
}
.index-blogs > .container > .text > .orange{
    color: var(--secondary-color);
    padding: 15px;
}
.index-blogs > .container > .blogs{
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 30px;
    justify-content: center;
}
.index-blogs > .container > .blogs > .blog{
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    border: rgba(60, 60, 59, 0.2) 0.2px solid;
    border-radius: 8px;
    padding: 20px;
    background-color: var(--light-color);
}
.index-blogs > .container > .blogs > .blog >.category > .category1{
    padding: 3px 6px;
    border: rgba(60, 60, 59, 0.2) 0.2px solid;
    border-radius: 8px;
    background-color: var(--app-bg-color);
}
.index-blogs > .container > .blogs > .blog > img{
    width: 360px;
    height: auto;
    border: none;
    border-radius: 8px;
}
.index-blogs > .container > .blogs > .blog > div > a{
    text-decoration: none;
    text-align: center;
    color: var(--primary-color);
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 10px 30px;
    background-color: var(--light-color);
    border: rgba(0, 139, 252, 1) 0.5px solid;
    border-radius: 8px;
    cursor: pointer;
}
.index-blogs > .container > .button-div{
    display: flex;
    justify-content: center;
    padding: 20px 0px;
}
.index-blogs > .container > .button-div > .button > a{
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 10px 20px;
    background-color: var(--app-bg-color);
    border: none;
    border-radius: 8px;
}
@media screen and (max-width:1100px){
    .index-blogs > .container > .blogs > .blog{
        max-width: 300px;
        padding: 10px;
    }
    .index-blogs > .container > .blogs > .blog > img{
        width: 280px;
    }
}
@media screen and (max-width:820px){
    .index-blogs > .container > .blogs{
        grid-template-columns: auto;
        gap: 15px;
        align-items: center;
    }
    .index-blogs > .container > .blogs > .blog{
        max-width: 500px;
        padding: 20px;
    }
    .index-blogs > .container > .blogs > .blog > img{
        width: 460px;
    }
}
@media screen and (max-width:460px){
    .index-blogs > .container > .blogs > .blog{
        max-width: 300px;
        padding: 10px;
    }
    .index-blogs > .container > .blogs > .blog > img{
        width: 280px;
    }
}

.index-partner{
    padding: 20px 0px;
}
.index-partner > h2{
    padding-bottom: 20px;
}
.index-partner > .partner-bg{
    background-image: url("sectionbg1.png");
    padding: 40px;
}
.index-partner > .partner-bg > .container > .partners{
    display: flex;
    gap: 40px;
    justify-content: center;
}
.index-partner > .partner-bg > .container > .partners > img{
    width: 250px;
    height: auto;
    border: none;
    border-radius: 8px;
}
@media screen and (max-width:1200px){
    .index-partner > .partner-bg > .container > .partners > img{
        width: 200px;
        height: auto;
    }
}
@media screen and (max-width:1000px){
    .index-partner > .partner-bg > .container > .partners > img{
        width: 150px;
        height: auto;
    }
}
@media screen and (max-width:600px){
    .index-partner > .partner-bg > .container > .partners{
        gap: 1px;
    }
    .index-partner > .partner-bg > .container > .partners > img{
        width: 100px;
        height: auto;
    }
}

.index-faqs{
    padding: 30px 0px;
    background-color: #F0F9FE;
}
.index-faqs > .container > .faqs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.index-faqs > .container > .faqs > details{
    color: var(--dark-color);
    width: fit-content;
}
.index-faqs > .container > .faqs > details > summary {
    padding: 10px 20px;
    list-style: none;
    width: 800px;
    display: flex;
    justify-content: space-between;
    transition: 0.1s ease;
}
.index-faqs > .container > .faqs > details > summary::-webkit-details-marker {
    display: none;
}
.index-faqs > .container > .faqs > details > summary:after{
    content: "\002B";
}
.index-faqs > .container > .faqs > details[open] summary {
    margin-bottom: 10px;
}
.index-faqs > .container > .faqs > details[open] summary:after{
  content: "\00D7";
  color: var(--primary-color);
}
.index-faqs > .container > .faqs > details[open] div{
    padding: 10px 20px;
    width: 800px;
    border-bottom: rgba(60, 60, 59, 0.1) 0.2px solid;
}
@media screen and (max-width:900px){
    .index-faqs > .container > .faqs > details > summary{
        width: 700px;
    }
    .index-faqs > .container > .faqs > details[open] div{
        width: 700px;
    }
}
@media screen and (max-width:768px){
    .index-faqs > .container > .faqs > details > summary{
        width: 320px;
    }
    .index-faqs > .container > .faqs > details[open] div{
        width: 320px;
    }
}

.index-callbook{
    padding: 50px 0px;
}
.index-callbook > .container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.index-callbook > .container > .map > img {
    width: 600px;
    height: auto;
    border: none;
    border-radius: 8px;
}
.index-callbook > .container > .text-inputs{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    max-width: 600px;
}
.index-callbook > .container > .text-inputs > form{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.index-callbook > .container > .text-inputs > form > .inputfield {
    width: 500px;
    height: auto;
    background-color: #F4F5F7;
    color: var(--dark-color);
    padding: 10px;
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    box-shadow: rgba(60, 60, 59, 0.01) 0px 4px;
}
.index-callbook > .container > .text-inputs > form > .submit-btn{
    background-color: var(--primary-color);
    color: var(--light-color);
}
.index-callbook > .container > .text-inputs > .helps{
    display: flex;
    gap: 40px;
    justify-content: space-between;
}
.index-callbook > .container > .text-inputs > .helps > .help{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.index-callbook > .container > .text-inputs > .helps > .help > .help-text{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.index-callbook > .container > .text-inputs > .helps > .help > .help-text > .blue{
    color: var(--primary-color);
}
@media screen and (max-width:1100px){
    .index-callbook > .container > .map > img{
        width: 400px;
    }
    .index-callbook > .container > .text-inputs{
        max-width: 400px;
    }
    .index-callbook > .container > .text-inputs > form > .inputfield{
        width: 350px;
    }
    .index-callbook > .container > .text-inputs > .helps{
        display: none;
    }
}
@media screen and (max-width:768px){
    .index-callbook > .container > .map{
        display: none;
    }
    .index-callbook > .container > .text-inputs{
        max-width: 400px;
    }
    .index-callbook > .container > .text-inputs > form > .inputfield{
        width: 350px;
    }
}
@media screen and (max-width:450px){
    .index-callbook > .container > .text-inputs{
        max-width: 300px;
        padding: 5px;
    }
    .index-callbook > .container > .text-inputs > form > .inputfield{
        width: 250px;
    }
}


/* ---------------------- about us ----------------- */
.about-mission-vision{
    background-color: #F0F9FE;
    padding: 50px 0px;
}
.about-mission-vision > .container{
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
.about-mission-vision > .container > .mission{
    padding: 20px;
    background-color: var(--light-color);
    border-left: 5px solid var(--primary-color);
    border-radius: 0px 8px 8px 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media screen and (max-width:500px){
    .about-mission-vision{
        padding: 30px;
    }
    .about-mission-vision > .container{
        flex-direction: column;
    }
    .about-mission-vision > .container > .mission{
        border-radius: 0px;
        border-right: 5px solid var(--primary-color);
    }
}
.about-mission-vision > .ceo-box{
    padding: 50px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-mission-vision > .ceo-box > .ceo{
    width: 800px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 20px;
    background-color: var(--light-color);
    border-left: 5px solid var(--primary-color);
    border-radius: 0px 8px 8px 0px;
}
@media screen and (max-width: 1100px){
    .about-mission-vision > .ceo-box > .ceo{
        width: 600px;
    }
}
@media screen and (max-width: 500px){
    .about-mission-vision > .ceo-box > .ceo{
        width: 330px;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
}
.about-mission-vision > .ceo-box > .ceo > .texts{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
.about-mission-vision > .ceo-box > .ceo > .texts > .blue{
    color: var(--primary-color);
}
.about-mission-vision > .ceo-box > .ceo > .texts > .orange{
    color: var(--secondary-color);
}
.about-mission-vision > .ceo-box > .ceo > .texts > .links{
    display: flex;
    gap: 20px;
    align-items: center;
}
.about-mission-vision > .ceo-box > .ceo > .texts > .links > a > img{
    padding: 10px;
    background-color: var(--light-color);
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
}
.about-mission-vision > .ceo-box > .ceo > .image > img{
    background-color: #0387F3;
    width: 300px;
    height: auto;
    padding: 3px;
    border: none;
    border-radius: 8px 8px 45px 8px;
}

.about-team{
    padding: 30px 0px;
}
.about-team > .container > .teams{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.about-team > .container > .teams > .team{
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background-color: var(--light-color);
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    max-width: 200px;
    text-align: center;
}
.about-team > .container > .teams > .team > a > span{
    color: var(--dark-color);
}
.about-team > .container > .teams > .team > a > span:hover{
    color: var(--primary-color);
}
@media screen and (max-width:1100px){
    .about-team > .container > .teams{
        grid-template-columns: auto auto auto auto;
    }
}
@media screen and (max-width:900px){
    .about-team > .container > .teams{
        grid-template-columns: auto auto auto;
    }
}
@media screen and (max-width:500px){
    .about-team > .container > .teams{
        grid-template-columns: auto;
    }
}



/* -------------------- books ------------- */
.books-academic{
    padding: 30px 0px;
}
.books-academic > .container > .books{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.books-academic > .container > .books > .book{
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background-color: var(--light-color);
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    max-width: 200px;
    text-align: center;
}
.books-academic > .container > .books > .book > a > span:hover{
    color: var(--primary-color);
}
.books-academic > .container > .books > .book > .blue{
    color: var(--primary-color);
}
.books-academic > .btn{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.books-academic > .btn > span:hover{
    color: var(--primary-color);
}
@media screen and (max-width:1100px){
    .books-academic > .container > .books{
        grid-template-columns: auto auto auto auto;
    }
}
@media screen and (max-width:900px){
    .books-academic > .container > .books{
        grid-template-columns: auto auto auto;
    }
}
@media screen and (max-width:500px){
    .books-academic > .container > .books{
        grid-template-columns: auto;
    }
}

.book-details{
    padding: 30px 0px;
}
.book-details > .container > .book{
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
}
.book-details > .container > .book > .book-info{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 300px;
}
.book-details > .container > .book > .book-info > .blue{
    color: var(--primary-color);
}
.book-details > .container > .book > .book-info > a{
    background-color: var(--secondary-color);
    border: none;
    border-radius: 8px;
    text-align: center;
    padding: 7px;
}
.book-details > .container > .book-description {
    padding: 30px 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}



/* --------------------------- blogs ------------------ */



.blogpage > .bbg{
    background-color: rgba(0, 139, 252, 0.1);
    padding: 40px 0px;
}
.blogpage > .bbg > .container > .details{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.blogpage > .bbg > .container > .details > .img > img{
    width: 400px;
    height: auto;
    border: var(--primary-color) 3px solid;
    border-radius: 8px;
}
.blogpage > .bbg > .container > .details > .detail{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
}
.blogpage > .bbg > .container > .details > .detail > div > .category{
    padding: 7px;
    background-color: var(--app-bg-color);
    border: none;
    border-radius: 5px;
}
.blogpage > .bbg > .container > .details > .detail > .date-time{
    display: flex;
    gap: 20px;
    align-items: center;
}
.blogpage > .bbg > .container > .details > .detail > .date-time > .date{
    display: flex;
    gap: 7px;
    align-items: center;
}
.blogpage > .container > .blog-body > p{
    padding: 30px;
}
.blogpage > .container > .share{
    background-color: var(--app-bg-color);
    margin: 20px 0px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: none;
    border-radius: 8px;
}
.blogpage > .container > .share > .links{
    display: flex;
    gap: 10px;
    align-items: center;
}
.blogpage > .container > .share > .links > a > img{
    padding: 10px;
    border: none;
    border-radius: 50%;
    background-color: var(--light-color);
}
.blogpage > .container > .share > .links > a > button{
    padding: 10px;
    border: none;
    border-radius: 50%;
    background-color: var(--light-color);
    cursor: pointer;
}
.blogpage > .container > .share > .counts {
    display: flex;
    gap: 20px;
    align-items: center;
}
.blogpage > .container > .share > .counts > .likes {
    display: flex;
    gap: 10px;
    align-items: center;
}
.blogpage > .container > .share > .counts > .likes > form > button{
    background-color: var(--app-bg-color);
    cursor: pointer;
    border: none;
}
.blogpage > .container > .share > .commentbox{
    padding: 20px;
    background-color: var(--light-color);
    display: grid;
    grid-template-columns: 40px auto;
    column-gap: 20px;
    justify-content: start;
    align-items: flex-start;
    border-radius: 8px;
}
.blogpage > .container > .share > .commentbox > form{
    display: grid;
    grid-template-columns: auto 100px;
    column-gap: 20px;
    justify-content: center;
    align-items: flex-start;
}
.blogpage > .container > .share > .commentbox > form > .inputfield{
    background-color: var(--light-color);
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    height: 100px;
    width: 800px;
    padding: 0px 20px;
}
@media screen and (max-width: 1200px){
    .blogpage > .container > .share > .commentbox > form > .inputfield{
        width: 600px;
    }
}
@media screen and (max-width: 900px){
    .blogpage > .container > .share > .commentbox > form > .inputfield{
        width: 450px;
    }
}
@media screen and (max-width: 768px){
    .blogpage > .container > .share > .commentbox > form > .inputfield{
        width: 400px;
    }
}
@media screen and (max-width: 500px){
    .blogpage > .bbg > .container > .details > .img > img{
        width: 300px;
    }
    .blogpage > .bbg > .container > .details{
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        align-items: center;
    }
    .blogpage > .container > .share > .commentbox{
        grid-template-columns: auto;
        gap: 20px;
    }
    .blogpage > .container > .share > .commentbox > form{
        grid-template-columns: auto;
        gap: 20px;
    }
    .blogpage > .container > .share > .commentbox > form > .inputfield{
        width: 300px;
    }
}
@media screen and (max-width: 500px){
    .blogpage > .container > .share > .commentbox > form > .inputfield{
        width: 250px;
    }
}
.blogpage > .container > .share > .commentbox > form > .btn{
    background-color: var(--primary-color);
    padding: 10px 20px;
    color: var(--light-color);
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.blogpage > .container > .share > .comment{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: var(--light-color);
    align-items: flex-start;
    border: none;
    border-radius: 8px;
}
.blogpage > .container > .share > .comment > .name-date{
    display: flex;
    gap: 20px;
    align-items: center;
}


/* ------------------ all courses page ------------- */
.all-course-category{
    padding: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.all-course-category > a > span{
    padding: 10px 30px;
    background-color: var(--app-bg-color);
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    cursor: pointer;
}




/* ------------------ parentcourse page ------------- */
.course-page > .offer{
    background-color: var(--primary-color);
    padding: 20px 0px;
    text-align: center;
}
.course-page > .offer > span{
    color: var(--light-color);
}
.course-page > .offer > span > .changable{
    padding: 2px 10px;
    background-color: var(--light-color);
    color: var(--dark-color);
    border: none;
    border-radius: 5px;
    margin-left: 10px;
}
.course-page > .container > .main-course{
    padding: 30px 0px;
    display: flex;
    gap: 20px;
}
.course-page > .container > .main-course > .sticky > .course-sticky{
    display: flex;
    flex-direction: column;
    width: 600px;
    padding: 10px;
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.course-page > .container > .main-course > .sticky > .course-sticky > .imgutube{
    border: none;
    border-radius: 8px;
    height: 300px;
}
.course-page > .container > .main-course > .sticky > .course-sticky > .img > img{
    width: 580px;
    height: auto;
    border-radius: 8px;
}
.course-page > .container > .main-course > .sticky > .course-sticky > .bullets{
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    padding: 20px 0px;
}
.course-page > .container > .main-course > .sticky > .course-sticky > .bullets > .bullet{
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 3px 10px;
    border: none;
    border-radius: 8px;
    background-color: var(--app-bg-color);
}

.course-page > .container > .main-course > .sticky > .course-sticky > a{
    color: var(--light-color);
    background-color: var(--primary-color);
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 10px;
}
.course-page > .container > .main-course > .course-details{
    flex: 1;
    overflow-y: auto;
    height: 500px;
}
.course-page > .container > .main-course > .course-details::-webkit-scrollbar{
    display: none;
}
.course-page > .container > .main-course > .course-details > .info{
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 30px 0px;
}
.course-page > .container > .main-course > .course-details > .info > .infoo > span{
    padding: 4px 10px;
    background-color: var(--app-bg-color);
}
.course-page > .container > .main-course > .course-details > .info > .infoo > .blue{
    background-color: var(--primary-color);
    color: var(--light-color);
}

.course-page > .container > .main-course > .course-details > .faqs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    background-color: var(--app-bg-color);
    border: none;
    border-radius: 8px;
}
.course-page > .container > .main-course > .course-details > .faqs > details{
    color: var(--dark-color);
    width: fit-content;
}
.course-page > .container > .main-course > .course-details > .faqs > details > summary {
    padding: 10px 20px;
    list-style: none;
    display: flex;
    gap: 30px;
    transition: 0.1s ease;
}
.course-page > .container > .main-course > .course-details > .faqs > details > summary::-webkit-details-marker {
    display: none;
}
.course-page > .container > .main-course > .course-details > .faqs > details > summary:after{
    content: "\002B";
}
.course-page > .container > .main-course > .course-details > .faqs > details[open] summary {
    border-bottom: rgba(60, 60, 59, 0.1) 0.2px solid;
    margin-bottom: 10px;
}
.course-page > .container > .main-course > .course-details > .faqs > details[open] summary:after{
  content: "\00D7";
  color: var(--primary-color);
}
.course-page > .container > .main-course > .course-details > .faqs > details[open] div{
    padding: 10px 20px;
    width: fit-content;
}
@media screen and (max-width: 1200px){
    .course-page > .container > .main-course > .sticky > .course-sticky{
        width: 400px;
    }
    .course-page > .container > .main-course > .sticky > .course-sticky > .img > img{
        width: 380px;
        height: auto;
    }
    .course-page > .container > .main-course > .course-details > .info{
        flex-direction: column;
        align-items: flex-start;
    }
    .course-page > .container > .main-course > .course-details{
        height: 700px;
    }
}
@media screen and (max-width: 900px){
    .course-page > .container > .main-course > .sticky > .course-sticky{
        width: 300px;
    }
    .course-page > .container > .main-course > .sticky > .course-sticky > .img > img{
        width: 280px;
        height: auto;
    }
}
@media screen and (max-width: 500px){
    .course-page > .container > .main-course{
        flex-direction: column-reverse;
        align-items: center;
    }
    .course-page > .offer{
        padding: 15px;
    }
}


/* ------------------- class page */

.class-page > .container > .container2{
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 30px 0px;
}
.class-page > .container > .container2 > .class-video{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 860px;
}
.class-page > .container > .container2 > .class-video > .video{
    padding: 10px;
    background-color: var(--light-color);
    border: rgba(0, 139, 252, 0.1) 0.2px solid;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.class-page > .container > .container2 > .class-video > .video > video{
    border: none;
    width: 840px;
    height: auto;
    border-radius: 8px;
}
.class-page > .container > .container2 > .class-video > .class-info{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}.class-page > .container > .container2 > .class-video > .class-info > .div{
    display: flex;
    gap: 20px;
    align-items: center;
}
.class-page > .container > .container2 > .class-video > .class-info > .div > a{
    cursor: pointer;
}
.class-page > .container > .container2 > .class-video > .class-info > .div > a > span{
    padding: 4px 10px;
    border: none;
    background-color: var(--primary-color);
    border-radius: 8px;
    color: var(--light-color);
}
.class-page > .container > .container2 > .class-video > .class-info > .div > a > .help{
    background-color: var(--secondary-color);
}
.class-page > .container > .container2 > .class-list{
    padding: 20px;
    border: rgba(0, 139, 252, 0.5) 0.5px solid;
    border-radius: 8px;
    background-color: var(--app-bg-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
    height: 500px;
}
.class-page > .container > .container2 > .class-list::-webkit-scrollbar{
    display: none;
}
@media screen and (max-width: 1100px){
    .class-page > .container > .container2{
        flex-direction: column;
        align-items: center;
    }
    .class-page > .container > .container2 > .class-list{
        width: 70%;
    }
}
@media screen and (max-width: 900px){
    .class-page > .container > .container2 > .class-video{
        width: 600px;
    }
    .class-page > .container > .container2 > .class-video > .video > video{
        width: 580px;
    }
}
@media screen and (max-width: 500px){
    .class-page > .container > .container2 > .class-video{
        width: 350px;
    }
    .class-page > .container > .container2 > .class-video > .video > video{
        width: 330px;
    }
}


/* ----------------- dashboard ------------------ */

.dashboard-header{
    top: 0;
    left: 0;
    padding: 40px;
    z-index: 1;
    width: 300px;
    height: 100%;
    position: fixed;
    background-color: var(--light-color);
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
}
.dashboard-header > nav{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.dashboard-header > nav > .main > a > img{
    width: 220px;
    height: auto;
}
.dashboard-header > nav > .links{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dashboard-header > nav > .links > a{
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
}
@media screen and (max-width: 500px){
    .dashboard-header{
        width: 100%;
        height: auto;
    }
    .dashboard-header > nav > .links{
        flex-direction: row;
        justify-content: space-around;
    }
    .dashboard-header > nav > .links >a > .text{
        display: none;
    }
}

.dashboard-body{
    background-color: #EEF1F6;
}
.dashboard-block{
    padding: 20px 20px 20px 320px;
    overflow-y: auto;
}
.dashboard-block > .enrolled{
    padding: 30px 15px;
    margin-top: 50px;
    background-color: var(--light-color);
    border: none;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.dashboard-block > .enrolled > .classes{
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 30px;
}
@media screen and (max-width: 1400px){
    .dashboard-block > .enrolled > .classes{
        gap: 10px;
    }
}
@media screen and (max-width: 1150px){
    .dashboard-block > .enrolled > .classes{
        flex-direction: column;
    }
}
@media screen and (max-width: 500px){
    .dashboard-block{
        padding: 180px 10px;
    }
    .dashboard-block > .enrolled{
        padding: 15px 7px;
    }
    .dashboard-block > .not-enrolled{
        margin-top: 40px;
    }
}
.dashboard-block > .enrolled > .classes > .class{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 300px;
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    padding-bottom: 15px;
}
.dashboard-block > .enrolled > .classes > .class > img{
    width: 300px;
    border: none;
    border-radius: 8px 8px 0 0;
}
.dashboard-block > .enrolled > .classes > .class > .counts{
    padding: 10px 0;
    display: flex;
    gap: 10px;
    padding-left: 10px;
}
.dashboard-block > .enrolled > .classes > .class > .counts > span{
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 4px 7px;
    border: none;
    border-radius: 8px;
    background-color: var(--app-bg-color);
}
.dashboard-block > .enrolled > .classes > .class > hr{
    width: 300px;
    color: rgba(60, 60, 59, 0.1);
}
.dashboard-block > .enrolled > .classes > .class > a > span{
    color: var(--primary-color);
    padding: 10px;
}
.dashboard-block > .enrolled > .all-btn > span{
    padding: 4px 10px;
    background-color: var(--app-bg-color);
    border: none;
    border-radius: 8px;
}
.dashboard-block > .not-enrolled{
    padding: 20px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background-color: var(--light-color);
    border: none;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.dashboard-block > .not-enrolled > .orange{
    color: var(--secondary-color);
}
.dashboard-block > .not-enrolled > a > span{
    padding: 7px 15px;
    background-color: var(--primary-color);
    color: var(--light-color);
    border: none;
    border-radius: 8px;
}

.dashboard-block > .enrolled > .live-classes{
    display: flex;
    gap: 20px;
    align-items: center;
}
@media screen and (max-width: 1100px){
    .dashboard-block > .enrolled > .live-classes{
        flex-direction: column;
    }
}
.dashboard-block > .enrolled > .live-classes > .class{
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.dashboard-block > .enrolled > .live-classes > .class > img{
    border-radius: 8px 8px 0 0;
}
.dashboard-block > .enrolled > .live-classes > .class > .text{
    color: #663001;
    background-color: #FEF1E6;
    margin: 10px 10px;
    padding: 4px 10px;
    border-radius: 8px;
}
.dashboard-block > .enrolled > .live-classes > .class > span{
    margin: 0 10px;
}
.dashboard-block > .enrolled > .live-classes > .class > .timer > span > .orange{
    color: var(--secondary-color);
}
.dashboard-block > .enrolled > .live-classes > .class > .date-time{
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0 10px;
}
.dashboard-block > .enrolled > .live-classes > .class > .date-time > .date{
    display: flex;
    gap: 10px;
    align-items: center;
}
.dashboard-block > .enrolled > .live-classes > .class > .class-join-link > a{
    background-color: var(--primary-color);
    color: var(--light-color);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    padding: 7px 0;
    margin-bottom: 10px;
}

.dashboard-block > .help{
    margin-top: 30px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--light-color);
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.dashboard-block > .help > .images{
    display: flex;
    gap: 20px;
    align-items: center;
}
.dashboard-block > .help > .images > div{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.dashboard-block > .help > .phone{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.dashboard-block > .help > .phone > .text{
    display: flex;
    gap: 5px;
    align-items: center;
    color: #663001;
    background-color: #FEF1E6;
    border-radius: 8px;
    padding: 10px;
}
@media  screen and (max-width: 1100px) {
    .dashboard-block > .help{
        flex-direction: column;
    }
    .dashboard-block > .help > .images{
        flex-direction: column;
    }
    .dashboard-block > .help > .images > div{
        align-items: center;
        text-align: center;
    }
}

.dashboard-block > .enrolled > .certificate{
    display: flex;
    gap: 20px;
    align-items: center;
}
.dashboard-block > .enrolled > .certificate > .poster > img{
    max-width: 300px;
    height: auto;
    border-radius: 8px;
}
.dashboard-block > .enrolled > .certificate > .details{
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}
.dashboard-block > .enrolled > .certificate > .details > .issue-date{
    display: flex;
    gap: 5px;
    align-items: center;
}
.dashboard-block > .enrolled > .certificate > .details > .download{
    display: flex;
    gap: 15px;
    align-items: center;
}
.dashboard-block > .enrolled > .certificate > .details > .download > a > .orange{
    border: var(--secondary-color) 0.5px solid;
    border-radius: 8px;
    padding: 5px 10px;
}
.dashboard-block > .enrolled > .certificate > .details > .download > a > .white{
    background-color: var(--primary-color);
    border-radius: 8px;
    padding: 5px 10px;
}
@media screen and (max-width: 900px){
    .dashboard-block > .enrolled > .certificate{
        flex-direction: column;
    }
}

.dashboard-block > .profile{
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
}
.dashboard-block > .profile > .personal{
    padding: 15px;
    background-color: var(--light-color);
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.dashboard-block > .profile > .personal > img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
.dashboard-block > .profile > .personal > form{
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}
.dashboard-block > .profile > .personal > form > .inputfield{
    padding: 10px;
    border: rgba(60, 60, 59, 0.01) 0.2px solid;
    border-radius: 8px;
    background-color: #F4F5F7;
    width: 500px;
}
.dashboard-block > .profile > .personal > form > .btn{
    background-color: var(--primary-color);
    color: var(--light-color);
}
.dashboard-block > .profile > .personal > form > .pictureinput{
    color: #663001;
    background-color: #FEF1E6;
    text-align: center;
}
@media screen and (max-width: 1300px){
    .dashboard-block > .profile{
        flex-direction: column;
        align-items: center;
    }
}
@media screen and (max-width: 1300px){
    .dashboard-block > .profile > .personal > form > .inputfield{
        width: 300px;
    }
}
@media screen and (max-width: 500px){
    .dashboard-block > .profile{
        margin-top: 40px;
    }
}

.dashboard-block > .custom-table{
    border-collapse: collapse;
    margin: 25px 0;
    min-width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.dashboard-block > .custom-table thead tr{
    background-color: var(--dark-color);
    color: var(--light-color);
    text-align: left;
}
.dashboard-block > .custom-table  th,
.dashboard-block > .custom-table  td{
    padding: 10px;
    border-top: 1px solid var(--dark-color);
    border-bottom: 1px solid var(--dark-color);
}
.dashboard-block > .custom-table  th:first-child,
.dashboard-block > .custom-table  td:first-child{
    border-left: none;
}
.dashboard-block > .custom-table  th:last-child,
.dashboard-block > .custom-table  td:last-child{
    border-left: none;
}



/* -------------- login page ---------- */

.login-container{
    display: flex;
    justify-content: center;
    padding: 20px;
}
.login-box{
    width: 70%;
    display: flex;
    gap: 0;
    align-items: flex-start;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.login-box > .images{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 30px;
    background-color: rgba(0, 139, 252, 0.1);
    border-radius: 8px 0 0 8px;
}
.login-box > .credentials{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 50px;
    background-color: var(--light-color);
    border-radius: 0px 8px 8px 0px;
}
.login-box > .credentials > form{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.login-box > .credentials > form > .inputfield{
    width: 300px;
    background-color: #F4F5F7;
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    padding: 10px;
}
@media screen and (max-width: 1200px){
    .login-box > .credentials{
        padding: 25px;
    }
    .login-box > .credentials > form > .inputfield{
        width: 200px;
    }
}
@media screen and (max-width: 900px){
    .login-box > .images{
        display: none;
    }
    .login-box{
        justify-content: center;
    }
}
.login-box > .credentials > form > .btn{
    background-color: var(--primary-color);
    color: var(--light-color);
}
.otp-form > .otps{
    display: flex;
    gap: 20px;
    align-items: center;
}
.otp-form > .otps > .inputfield{
    width: 50px;
    height: 50px;
    background-color: #F4F5F7;
    color: var(--dark-color);
    border: var(--primary-color) 0.1px solid;
    border-radius: 8px;
    text-align: center;
}


/* ----------------- checkout ------------------- */

.checkout{
    padding: 50px;
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
}
@media screen and (max-width: 500px){
    .checkout{
        flex-direction: column;
        align-items: center;
    }
}
.checkout > .product , .checkout > .payment{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding: 16px;
    border: rgba(60, 60, 59, 0.1) 0.2px solid;
    border-radius: 8px;
    background-color: var(--light-color);
}
.checkout > .product > div{
    width: 300px;
    display: flex;
    justify-content: space-between;
}
.checkout > .payment > form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.checkout > .payment > form > .inputfield{
    width: 300px;
    background-color: #F4F5F7;
    border: #DDE1E5 0.2px solid;
    border-radius: 8px;
    padding: 8px;
}

.checkout > .payment > form > .btn{
    background-color: var(--primary-color);
    color: var(--light-color);
}