:root {
    /* --theme1: #739856; */
    /*--theme1: #6B003E;*/
    --theme1: #1EB2A6;
    
    /* --theme1 :#AC0000; */
  
    --theme2: #c91e1d;
     
  
  }
  
  body{
      font-family: "Roboto", Arial, sans-serif;
      background-color: #F8F8F8;
    
  }
  p{
      font-size: 16px;
      line-height: 1.8;
      font-weight: 400;
      color: #999999;
  }
  
  a{
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease;
      text-decoration: none;
      text-decoration: none !important;
  }
  .theme_btn {
    background-color: var(--theme1);
    color: #fff;
    padding: 18px 24px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.theme_btn:hover{
    color: #fff;
}
.theme_btn i{

}
.theme_btn2{}
.theme_btn2 i{}

/* nav .nav-sidebar>.nav-item .nav-icon{
    font-weight: 600;
} */

.my_breadcrumb {
    background: none;
    padding: 10px 0;
    font-size: 16px;
}

.my_breadcrumb a {
    color: #007bff;
    text-decoration: none;
}

.my_breadcrumb a:hover {
    text-decoration: underline;
}


  .subheading{
        font-size: 16px;
      display: block;
      margin-bottom: 5px;
      color:var(--theme1);
      font-weight: 700;
      text-transform: uppercase;
  }
  .heading{
       font-size: 46px;
      font-weight: 500;
      line-height: 1.4;
  
  }
   

  .header_top{
      
      padding: 8px 0px; 
      background-color: var(--theme1);
  }
  .header_top .info{
      display: flex;
      column-gap: 20px;
      margin-bottom: 0;
      padding: 0;
  }
  .header_top .info li{
      list-style: none;
  }
  .header_top .info li a{
      color: #fff;
      font-size: 16px;
  }
  .header_top .info a i{
      margin-right: 5px;
      font-size: 15px;
  }
   
  .header_top .social_icons{
      display: flex;
  }
  .header_top .social_icons a{
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 8px;
      background: #000;
      justify-content: center;
      align-items: center;
      display: flex;
      color: #fff;
      text-decoration: none;
  }
  .header_top .social_icons a:hover{
    /* background-color: var(--theme1);
    color: #fff; */
  }
  
  .header{
      /* position: absolute;
      top: 95px;
      left: 0;
      right: 0;
      z-index: 3;
      padding: 0; */
      background-color: #fff;
      padding: 10px 0px;
  }
  
  .header .my_nav{
       padding: 0;
  }
  .header .my_nav .container {
      padding-right: 10px;
  }
  .header .my_nav #w1-collapse,
  .header .my_nav #w2-collapse{
      justify-content: flex-end;
  }
  .header .my_nav ul{
      margin: 0;
      padding: 0;
      column-gap: 45px;
  }
  .header .my_nav li{
      list-style: none;
      display: inline-block;
   
  }
  .header .my_nav li a{
      font-size: 15px;
      text-decoration: none;
      color: #000;
      font-weight: 500;
      padding: 0;}
  
  .header .dropdown-menu{
      background-color:var(--theme1);
      padding: 12px 10px;
      border-radius: 0px;
      border: unset;
      margin-top: 10px;
      margin-left: 0px;
  }
  .header .dropdown-menu .dropdown-item{
      margin-bottom: 5px;
      color: #fff;
  }
  .header .dropdown-menu .dropdown-item:hover {
      background-color: #ff000000;
  }
  
  
  .header .my_nav .cert_btn:before{
        position: absolute;
        top: -1px;
        bottom: -1px;
        left: -15px;
        width: 70px;
        background: var(--theme1);
        -webkit-transform: skewX(-20deg);
        -ms-transform: skewX(-20deg);
         
        z-index: -1;
        content: '';
  }
  .header .my_nav .cert_btn{
      position: absolute;
      right: 0;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.3);
      background: var(--theme1);
      padding: 26px 15px;
      color: #fff;
      border-radius: 0;
      width: 230px;
      z-index: 0;
      text-align: center;
      border: 1px solid transparent;
      letter-spacing: 2px;
      text-decoration: none;
      top: 0px;
  }
  .inner_banner{
        display: flex;
      align-items: center;
     background-attachment: fixed;
      height: unset;
      padding-top: 75px;
      padding-bottom: 75px;
      text-align: center;
      position: relative;
  }
  .inner_banner:before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000000ab;
      z-index: 1;
  }
  .inner_banner .bg_image{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .inner_banner .content {
      position: relative;
      z-index: 2;
  }
  .inner_banner .content h4{
      font-size: 14px;
      color: #fff;
      font-weight: 500;
      text-transform: uppercase;
  }
  .inner_banner .content i{
      margin: 0px 5px;
      font-size: 12px;
  }
  
  .inner_banner h1{
      font-size: 60px;
      color: #fff;
      font-weight: 400;
      padding-top: 10px;
  
  }
  
  /*banner*/
  .banner{
      height: 90vh;
      background-image: url(../images/banner.webp);
      display: flex;
      align-items: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      background-attachment: fixed;
      position: relative;
  }
  .banner::before{
      content: '';
      background-color: #0000006e;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  
  .banner .content{
      
  }
  .banner h4{
      text-transform: uppercase;
      font-weight: 700;
      color: #fff;
      font-size: 14px;
      letter-spacing: 2px;
      margin-bottom: 15px;
      z-index: 0;
      position: relative;
  }
  .banner h1{
      font-weight: 600;
      color: #fff;
      font-size: 2.4rem;
      line-height: 1.2;
      margin-bottom: 20px;
  }
  .banner p{
    color: #fff;
    line-height: 1.6;
  } 
  .banner .btns{
      display: flex;
      column-gap: 5px;
  }
  .banner .btns a{
      /* background-color: var(--theme1);
      color: #fff;
      padding: 18px 24px;
      cursor: pointer;
      border-radius: 4px;
      -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
      display: flex;
      align-items: center; */
      margin-top: 10px;
  }
  .banner .btns a i{
      margin-left: 10px;
  }
  
  .banner .btns .btn-white{
      background-color: #fff;
      color: var(--theme1);
      transition: all 0.5s;
  }
  .banner .btns .btn-white:hover {
    /* background-color: var(--theme1);
    color: #fff; */
  }
  
  /*about sec*/
  .about_sec {
      padding: 80px 0px;
  }
  .about_sec .image {
      padding-right: 5%;
  }
   
  
  .about_sec .image img{
      width: 100%;
  }
  .about_sec .right_parent{
      display: flex;
      align-items: center;
  }
  .about_sec .right_wrapper{
      /* padding: 90px 25px 90px 26px; */
       
  }
  .about_sec .content{}
  .about_sec h3{
        font-size: 16px;
      display: block;
      margin-bottom: 5px;
      color: var(--theme1);
      font-weight: 700;
      text-transform: uppercase;
  }
  .about_sec h1{
      font-size: 46px;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 20px;
  }
  .about_sec .about_box{
      display: flex;
      column-gap: 20px;
    
      margin-bottom: 0px;
      padding: 20px 0px;
     
      
  
  }
  /* .about_sec .about_box:hover{
    background-color: var(--theme1);
  }
  .about_sec .about_box:hover .icon img{
    filter: brightness(0) invert(1);
  }
  .about_sec .about_box:hover h4,
  .about_sec .about_box:hover p{
    color:#fff ;
  } */
  
  .about_sec .about_box .icon{}
  .about_sec .about_box .icon img{
      width: 60px;
  }
  .about_sec .about_box h4{
      font-size: 20px;
      font-weight: 500;
      font-family: "Roboto", Arial, sans-serif;
      margin-bottom: 5px;
  }
  .about_sec .about_box p{
      margin: 0;
      color: #000;
  }
  
   /* CTA1 section  */
  .cta1{
      padding: 80px 0px;
      background-color: var(--theme1);
  }
  .cta1 .main{
      display: flex;
      column-gap: 40px;
      flex-wrap: wrap;
      align-items: center;
  }
  .cta1 .left_col{
      width: 74%;
  }
  .cta1 .right_col{
      width: 22%;
      display: flex;
      justify-content: flex-end;
  }
   
  .cta1 .main h4{
      font-size: 36px;
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 20px;
      color: #fff;
  }
  .cta1 .main a{
      padding: 10px 10px;
      background-color: #fff;
      color: var(--theme1);
      padding: 18px 24px;
      cursor: pointer;
      border-radius: 4px;
      -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
      display: flex;
    align-items: center;
  }
  .cta1 .main a i{
      margin-left: 5px;
      /* font-size: 14px; */
  }
 /* CTA1 section  */

 /* newsletter sec */
.newsletter_sec{}
.newsletter_sec .content{
    background-color: #fff;
    background: #fff;
    padding: 30px 20px;
    border-radius: 4px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 25px -2px rgb(0 0 0 / 12%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.newsletter_sec .content h2{
    margin-bottom: 20px;

}
.newsletter_sec .content form {
    width: 35%;
}
.newsletter_sec .content form input{
    border-top: unset;
    border-right: unset;
    border-left: unset;
    border-radius: unset;
}
.newsletter_sec .content form button{
    background-color: #1eb2a6;
    border: unset;
    border-radius: 4px;
    padding: 10px 40px;
    font-size: 16px;
    font-weight: 600;
}
.newsletter_sec .content form button i{
    margin-left: 5px;
} 


 /* assesment page */
.assessment_page {
    padding: 80px 0px;
}

.assessment_page .assessment-form{
    background: #fff;
    padding: 30px 20px;
    border-radius: 4px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 25px -2px rgb(0 0 0 / 12%);
    /* text-align: center; */
    display: flex;
    flex-direction: column;
}
.assessment_page .assessment-form h2{
    padding-bottom: 20px;
    text-align: center;
    font-size: 36px;
    font-weight: 600;
}
.assessment_page .assessment-form form{}
.assessment_page .assessment-form input{
    padding: 25px 15px;
    border-radius: 10px;
}
.assessment_page .assessment-form .control-label{
    font-size: 18px;
    font-weight: 600;
}

.assessment_page .assessment-form button{
    background-color: var(--theme1);
    color: #fff;
    padding: 18px 24px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 22%;
    justify-content: center;
    border: unset;
}
.assessment_page .assessment-form .my_radios #assessment-children_count,
.assessment_page .assessment-form .my_radios #assessment-grades,
.assessment_page .assessment-form .my_radios #assessment-education_satisfaction{
    display: flex;
        column-gap: 15px;
}


  
  /* Own Pace section  */
    .own_pace{
      padding: 80px 0px;
      background-color: #fff;
  }
  .own_pace h2{
      text-align: center;
      font-size: 46px;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 20px;
  }
  .own_pace h5{
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      margin: 0% 15%;
      line-height: 1.4;
  }
  .own_pace .main{
      display: flex;
      flex-wrap: wrap;
      column-gap: 19px;
      justify-content: center;
      margin-top: 40px;
  }
  .own_pace .box{
      width: 23%;
      background-color: #fff;
      border: 1px solid #0000008f;
      border-radius: 5px;
      box-shadow: 3px 3px 11px 5px #a39e9e73;
  }
  .own_pace .box img{
      width: 100%;
      border-radius: 5px 5px 0px 0px;
      min-height: 252px;
      object-fit: cover;
  }
  .own_pace .box .content{
      padding: 30px 20px;
  }
  .own_pace .box h4{
      font-size: 20px;
      text-align: center;
  }
  .own_pace .box p{
      line-height: 1.4;
      text-align: center;
      margin-bottom: 20px;
  }
  .own_pace .box a{
      background-color: var(--theme1);
      width: 85%;
      display: block;
      padding: 10px 10px;
      font-size: 14px;
      color: #fff;
      text-transform: uppercase;
      border-radius: 5px;
      margin: 0 auto;
      text-align: center;
      text-decoration: none;
  }
  /* Own Pace section  */
  

 
   /* CTA2 section  */
  .cta2{
    padding: 80px 0px;
    background-image: url(../images/inner_banner4.webp);
    position: relative;
  }
  .cta2:before{
    content: '';
    background-color: #000000cf;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .cta2 .main{
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 35px;
}
  .cta2 .left_col{}
  .cta2 .right_col{}
  .cta2 .main h2{
    font-size: 46px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
}
  .cta2 .main h4{
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}
  .cta2 .main a{
    padding: 10px 10px;
    background-color: #fff;
    color: var(--theme1);
    padding: 15px 50px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}
/* CTA2 section  */
  
  
  /*trust section*/
  .trust_sec{
      background-image: url(../images/inner_banner7.webp);
      padding: 100px 0px;
      background-size: cover;
      background-position: center;
      position: relative;
  }
  .trust_sec:after{
           content: 'In 2023';
    width: 129px;
    height: 45px;
    position: absolute;
    top: 10px;
    z-index: 1;
    right: 21px;
    left: unset;
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    /* text-decoration: underline; */
    font-style: italic;
  }

  .trust_sec:before{
        content: '';
        background-color: #000000cc;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
  }
  .trust_sec .box{
      display: flex;
      column-gap: 20px;
      z-index: 2;
      position: relative;
  }
  .trust_sec .box .icon{} 
  .trust_sec .box .icon img{
      width: 60px;
  }
  .trust_sec .box .content{}   
  .trust_sec .box .content h2{
      font-size: 40px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      margin-bottom: 5px;
  }
  .trust_sec .box .content h4{
      color: rgba(255, 255, 255, 0.9);
      text-transform: uppercase;
      font-size: 16px;
      line-height: 29px;
  }  
  
  
  /*courses*/
  .courses_sec{
        padding: 100px 0px;
  }
  .courses_sec h4{
      text-align: center;
  }
  .courses_sec h2{
      margin-bottom: 60px;
      text-align: center;
  }
  .courses_sec .box{
      background-color: #fff;
      padding: 28px 23px;
      margin: 0px 10px;
      max-height: 408px;
  }
  .courses_sec .box .main{
      display: flex;
      column-gap: 20px;
      flex-wrap: wrap;
  }
  .courses_sec .box .main .icon{
      background-color: var(--theme1);
      border-radius: 50%;
      height: 80px;
      width: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .courses_sec .box .main .icon img{
      width: 50px;
      height: 50px;
  }
  .courses_sec .box .main .content{
      width: 70%;
  }
  .courses_sec .box .main .content h4{
      font-size: 26px;
      font-weight: 500;
      margin-bottom: 5px;
      text-align: left;
  }
  .courses_sec .box .main p.rating{}
  .courses_sec .box .main p.rating i{
      color: var(--theme1);
      font-size: 14px;
  }
  .courses_sec .box .main p.rating span{
      color: var(--theme1);
  }
  .courses_sec .box .main .author{
      display: flex;
      column-gap: 10px;
      align-items: center;
  }
  .courses_sec .box .main .author img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
  }
  .courses_sec .box .main .author span{
      font-weight: 500;
      color: #999999;
  }
  .courses_sec .box .main .content p.lectures a{
      font-weight: 500;
      font-size: 13px;
      color: var(--theme1);
  }
  .courses_sec .box .course_price{
      background: #f8f8f8 !important;
      border-radius: 5px;
      padding: 10px 10px;
      text-align: center;
      color: var(--theme1);
      font-weight: 500;
  }
  
  .courses_sec .box .enroll_btn{
      border: 1px solid var(--theme1);
      background: transparent;
      color: var(--theme1);
      display: block;
      padding: 15px 21px;
      -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-radius: 5px;
      text-align: center;
  }
  .courses_sec .box.slick-current .enroll_btn{
     background: var(--theme1);
     color: #fff;
  }
  
 

  .tutorials_sec{
    padding: 80px 0px;
    /* background-color: #b3b3b3; */
}
  .tutorials_sec h4{
    text-align: center;
}
  .tutorials_sec h2{
    text-align: center;
}
.tutorials_sec .main{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 15px;
      margin-top: 40px;
  }
  .tutorials_sec .main .box{
        background-color: #fff;
    background: #fff;
    padding: 30px 20px;
    border-radius: 4px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 25px -2px rgb(0 0 0 / 12%);
    text-align: center;
        display: flex;
    flex-direction: column;
}
  }
  .tutorials_sec .icon{}
  .tutorials_sec .icon img{
        height: 80px;
    margin-bottom: 20px;
  }
   .tutorials_sec .box h5{
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 0;
}
    .tutorials_sec .box p{
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-top: 15px;
}
    .tutorials_sec .box .small{
    font-size: 18px;
    margin-top: 15px;
     
}
    .tutorials_sec .box a{
      background-color: var(--theme1);
      color: #fff;
      padding: 16px 35px;
      cursor: pointer;
      border-radius: 4px;
      -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      font-size: 12px;font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
        width: 56%;
    margin: 0 auto;
        margin-top: 16px;
  }
    .tutorials_sec .box h3{
    margin: 0;
    margin-bottom: 10px;
    font-size: 50px;
    font-weight: 700;
        line-height: 34px;
}
    .tutorials_sec .box sup{
    font-size: 30px;
}
    .tutorials_sec .box span{
    font-size: 30px;
}




  /*online courses*/
  .online_courses{
      padding: 70px 0px;
  }
  .online_courses h4{
      text-align: center;
  }
  .online_courses h2{
      text-align: center;
      margin-bottom: 60px;
  }
  .online_courses .main{
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-gap: 8px;
  }
  .online_courses .box{
      background-color: #fff;
      background: #fff;
      padding: 30px 20px;
      border-radius: 4px;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease;
      -webkit-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
      -moz-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
      box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
      text-align: center;
  }
  .online_courses .box:hover{
    background-color: var(--theme1);
  }
  .online_courses .box:hover img{
    filter: brightness(0) invert(1);
  }
  .online_courses .box:hover h5{
    color: #fff;
  }
  .online_courses .box:hover span{
    background-color: #fff;
      color: var(--theme1);
  }
  
  .online_courses .box .icon{}
  .online_courses .box img{
      width: 70px;
  }
  .online_courses .box h5{
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 2px;
      color: #000;
      margin-top: 20px;
      margin-bottom: 10px;
  }
  .online_courses .box span{
      font-size: 13px;
      font-weight: 500;
      background: #f8f8f8;
      padding: 5px;
      border-radius: 4px;
      color: var(--theme1);
  } 
  
  /*testimonials sec*/
  .testimonials_sec{
      padding: 80px 0px;
  }
  .testimonials_sec h4{
      text-align: center;
  }
  .testimonials_sec h2{
      text-align: center;
  }
  .testimonials_sec .testimonial_slider{
      margin-top: 70px;
  }
  .testimonials_sec .box{
      display: block;
      position: relative;
      background: #fff;
      padding: 30px;
      -webkit-box-shadow: 0px 5px 12px -9px rgba(0, 0, 0, 0.17);
      -moz-box-shadow: 0px 5px 12px -9px rgba(0, 0, 0, 0.17);
      box-shadow: 0px 5px 12px -9px rgba(0, 0, 0, 0.17);
      margin: 0px 15px;
      /*max-height: 290px;*/
  }
  .testimonials_sec .box:hover{
    background-color: var(--theme1);
  }
  .testimonials_sec .box:hover h5,
  .testimonials_sec .box:hover h6,
  .testimonials_sec .box:hover p{
    color:#fff ;
  }
  .testimonials_sec .box:hover .pic i{
    background-color: #fff;
    color: var(--theme1);
  }
  .testimonials_sec .box .author{
      display: flex;
      align-items: center;
      column-gap: 20px;
      margin-bottom: 25px;
  }
  .testimonials_sec .box .pic{
      position: relative;
  }
  .testimonials_sec .box .pic img{
      width: 80px;
      border-radius: 50%;
  }
  .testimonials_sec .box .pic i{
      background-color: var(--theme1);
      color: #fff;
      font-size: 15px;
      width: 30px;
      height: 30px;
      display: flex;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      /*position: absolute;
      bottom: 0;
      right: 0;*/
  }
  .testimonials_sec .box .name{}
  .testimonials_sec .box h5{margin: 0;font-weight: 600;font-size: 20px;margin-bottom: 0;color: #111111;text-transform: uppercase;}
  .testimonials_sec .box h6{
      margin: 0;
      padding-top: 10px;
      font-size: 13px;
      text-transform: uppercase;
      color: var(--theme1);
      font-weight: 500;
  }
  .testimonials_sec .box .text{}
  .testimonials_sec .box .text p{}
  
  
  .slick-dots{
      bottom: -50px;
  }
  .slick-dots li{
      margin-right: 15px !important;
  }
  .slick-dots li.slick-active{}
  .slick-dots li button{}
  
  .slick-dots li button:before{
    content: '' !important;
    width: 30px !important;
    height: 2px !important;
    background: #ddd !important;
     opacity: 1 !important;
  }
  .slick-dots li.slick-active button:before{
     background-color: var(--theme1) !important;
    
  }
  
  /*blog sec*/
  .blog_sec{
    padding: 80px 0px;
  }
  .blog_sec h4{
    text-align: center;
  }
  .blog_sec h2{
    text-align: center;
    margin-bottom: 70px;
  }
  .blog_sec .main{
      display: flex;
      flex-wrap: wrap;
      column-gap: 1.5em;
      justify-content: center;
  }
  .blog_sec .box{
      width: 32%;
  }
  .blog_sec .box .image{
      width: 100%;
      display: block;
  }
  .blog_sec .box .image img{
    width: 100%;
    height: 280px;
    object-fit: cover;
  }
  .blog_sec .box .content{
      background-color: #fff;
      padding: 30px;
  }
  .blog_sec .content .tags{
      display: flex;
      column-gap: 10px;
  }
  .blog_sec .content .tags span{
      font-size: 14px;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 600;
      color: #999999;
  }
  .blog_sec .content .tags span i{
      margin-right: 5px;
      color: var(--theme1);
  }
  .blog_sec .content .tags span a{
      color: var(--theme1);
  } 
  .blog_sec .content h3{
      font-size: 24px;
      font-weight: 400;
      margin-top: 20px;
      margin-bottom: 10px;
  }
  .blog_sec .content h3 a{
    color: #000;
  }
  .blog_sec .content p{}

  .blog_sec .pagination ul{}
  .blog_sec .pagination ul li.active{}
  
  .blog_sec .pagination ul li a{
    color: #000000;
  }
  .blog_sec .pagination ul li.active a{
    background-color: #1eb2a6;
    border-color: #1eb2a6;
  }
  .blog_sec .pagination{
    justify-content: center;
  }
  
  .blog_sec .pagination ul li.prev{}
  .blog_sec .pagination ul li.next{}

  /* Blog Single */
  .blog_single{}
  .blog_single .inner{}
  .blog_single h1{}
  .blog_single .inner img{
    width: 50%;
    display: block;
    margin: 15px 0px;

  }
  .blog_single .inner .theme_btn{
    width: 12%;
    display: flex;
    justify-content: center;
  }
  

  
  
  /*pricing sec*/
  .pricing_sec{
    padding: 80px 0px;
  }
  .pricing_sec h4{
    text-align: center;
  }
  .pricing_sec h2{
    text-align: center;
    margin-bottom: 70px;
  }
  .pricing_sec .main{
      display: flex;
      flex-wrap: wrap;
      column-gap: 1.5em;
      justify-content: center;
  }
  .pricing_sec .box{
      width: 23%;
      padding: 40px 40px;
      background: #fff;
      -webkit-box-shadow: 0px 24px 48px -13px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: 0px 24px 48px -13px rgba(0, 0, 0, 0.05);
      box-shadow: 0px 24px 48px -13px rgba(0, 0, 0, 0.05);
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease;
      text-align: center;
  }
  .pricing_sec .box h5{
      margin-bottom: 20px;
      color: #111111;
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: 1px;
      font-weight: 700;
  }
  .pricing_sec .box h3{
      font-size: 50px;
      font-weight: 600;
      color: var(--theme1);
  }
  .pricing_sec .box h3 sup{
      font-size: 24px;
      top: -0.8em;
      color: gray;
      font-weight: 400;
  }
  .pricing_sec .box p{
      margin-top: 35px;
      margin-bottom: 35px;
  }
  .pricing_sec .box .started_btn{
      border: 1px solid var(--theme1);
      background: transparent;
      color: var(--theme1);
      display: block;
      padding: 15px 21px;
      -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-radius: 5px;
      text-align: center;
  }
  .pricing_sec .box .started_btn:hover{
        background: var(--theme1);
      color: #fff;
  }
  
  .newsletter{
      background-color: var(--theme1);
      color: #fff;
      padding: 50px 0px;
  }
  .newsletter .inner_wrap{
      display: flex;
      flex-wrap: wrap;
      column-gap: 50px;
      justify-content: space-between;
      align-items: center;
  }
  .newsletter .content{
      width: 55%;
  }
  .newsletter .content h2{
      color: #fff;
      font-size: 27px;
      font-weight: 500;
  }
  .newsletter .content p{
      color: #fff;
  }
  .newsletter .subs{
      width: 40%;
  }
  .newsletter .subs form{
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      display: flex;
      padding-bottom: 10px;
  }
  .newsletter .subs input{
       background-color: #fff0;
      color: #fff;
      font-size: 16px;
      padding: 0;
      border-radius: 5px 0px 0px 5px;
      border: none !important;
      outline: none !important;
  }
  .newsletter .subs input::placeholder{
   color: white ;
  }
  .newsletter .subs button{
      background-color: unset;
      border: unset;
      color: #fff;
  }
  .newsletter .subs i{}
  
  
  footer{padding-top: 80px;background-color: #EEEEEE;}
  footer .parent{
      display: grid;
      grid-template-columns: 30% 20% 20% 30%;
      padding-bottom: 60px;
  }
  footer .parent .col{}
  footer .parent .col_small{}
  footer .logo{
      text-decoration: none;
      color: #111111;
      font-size: 30px;
      line-height: 1.1;
      text-transform: uppercase;
      font-weight: 800;
      margin-bottom: 40px;
      display: block;
  }
  footer .logo span{
      font-size: 12px;
      display: block;
      font-weight: 500;
      color: var(--theme1);
  }
  footer .social_icons {
      display: flex;
      column-gap: 8px;
  }
  footer .social_icons a{
      height: 40px;
      width: 40px;
      display: block;
      color: #fff;
      border-radius: 50%;
      position: relative;
      background: var(--theme1);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  footer .social_icons a i{} 
  footer h4{
      color: #000;
      margin-bottom: 40px;
      font-size: 18px;
      font-weight: 500;
  }
  footer ul {
      margin: 0;
      padding: 0;
  }
  footer ul li {
      list-style: none;
      margin-bottom: 15px;
  }
  footer ul li a {
      color: #666666;
  }
  footer ul li a i{
      color: var(--theme1);
      font-size: 10px !important;
      margin-right: 5px;
  }
  footer .little_post {
      display: flex;
      column-gap: 15px;
      margin-bottom: 20px;
  }
  footer .little_post .pic {
      width: 50px;
      height: 50px;
  }
  footer .little_post .pic img{
      width: 55px;
      height: 55px;
      object-fit: cover;
      border-radius: 5px;
  }
  footer .content {}
  footer .content .tags{}
  footer .content .tags a {
      display: inline-block;
      font-size: 12px;
      margin-right: 5px;
      color: var(--theme1);
  }
  footer .content .tags i{}
  footer .little_post h5{font-size: 16px;font-weight: 400;margin-bottom: 0;color: #666666;margin-top: 3px;}
   
  footer .cont_fields{}
  footer .cont_fields div{
      display: flex;
      column-gap: 20px;
      position: relative;
      margin-bottom: 20px;
  }
  footer .cont_fields i{
      color: var(--theme1);
      top: 3px;
      position: relative;
  }
  footer .cont_fields p{
      font-size: 15px;
      color: #000;
      margin: 0;
  }
  footer .cont_fields a{
      font-size: 15px;
      color: #000;
  }
  
  
  .copyright_sec{
    background-color: #E9E9E9;
    padding: 30px 0px;
    text-align: center;
  }
  .copyright_sec p{
    margin:0;
  }
  .about_page{
      padding: 80px 0px;
  }
  .about_page .content_parent{
      display: flex;
      align-items: center;
  }
  .about_page .content{
      padding-right: 10%;
  }
  .about_page h2{
      text-transform: capitalize;
      font-size: 40px;
  }
  .about_page p{}
  .about_page .image{}
  .about_page .image img{
      width: 100%;
  }
  
  /* faqs page */
  .faqs_sec{
      padding: 80px 0px;
  }
  .faqs_sec h2{
      text-align: center;
      padding-bottom: 30px;
  }
  .faqs_sec .accordion{
      margin-bottom: 40px;
  }
  .faqs_sec .accordion-item{
      /* border-width: 1px;
      border-color: #0000003d;
      border: 1px solid; */
      padding: 8px 10px;
  }
  .faqs_sec .accordion-item h4{
  }
  .faqs_sec .accordion-item button{
      font-weight: 500;
      font-size: 18px;
  
  }
  .faqs_sec .accordion-button:not(.collapsed){
      background-color: var(--theme1);
      color: #fff;
  }
  .faqs_sec .accordion-button:focus {
      z-index: 3;
      /* border-color: #86b7fe; */
      border: unset;
      outline: 0;
      box-shadow: unset;
  }
  .faqs_sec .accordion-collapse{}
  .faqs_sec .accordion-collapse p{}
  .faqs_sec .bottom_content{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      column-gap: 20px;
  }
  .faqs_sec .bottom_content h4{
  }
  .faqs_sec .bottom_content a{
      background-color: var(--theme1);
      color: #fff;
      padding: 18px 30px;
      cursor: pointer;
      border-radius: 4px;
      -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
      display: block;
      margin-top: 13px;
  }
  
   
  .faqs_contact{
      padding-top: 30px;
      padding-bottom: 80px;
  }
  .faqs_contact .content_parent{
      display: flex;
      align-items: center;
  }
  .faqs_contact .content{
      padding-left: 20px;
  }
  .faqs_contact h3{
      font-size: 36px;
      text-transform: capitalize;
      margin-bottom: 10px;
  } 
  
  .faqs_contact p{
      font-size: 18px;
  }
  .faqs_contact p a{
      color: #000;
      text-decoration: underline;
  }
  .faqs_contact .box {
      background-color: var(--theme1);
      border-radius: 5px;
       
      padding: 40px;
  }
  
  .faqs_contact .cont_box{
      display: flex;
      gap: 15px;
      margin-bottom: 15px;
       position: relative;
       
    }
    .faqs_contact .cont_box a{
      background-color: #ff000000;
      position: absolute;
      left: 0;
      top: 0;
      width: 80%;
      height: 100%;
      font-size: 0;
    }
    
    .faqs_contact .cont_box .icon {}
    .faqs_contact .cont_box .text {}
    
    .faqs_contact .cont_box .icon img{
        width: 42px;
    }
    .faqs_contact .cont_box .text span{
      display: block;
      color: #fff;
      line-height: 1.2;
      font-size: 20px;
      font-weight: 700;
     
    }
    .faqs_contact .cont_box .text strong{
      color: #fff;
    }
    .faqs_contact .social_icons{
        display: flex;
        margin-top: 30px;
    }
    .faqs_contact .social_icons a{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 4px;
        background: rgb(0 0 0);
        justify-content: center;
        align-items: center;
        display: flex;
        color: #ffffff;
        text-decoration: none;
    }
    .faqs_contact .social_icons a:hover{
      /* background-color: var(--theme1);
      color: #fff; */
    }
  
  
  
/*...Start Contact Page CSS....*/ 


  .right_conatct_social_icon{
       background: linear-gradient(to top right, #6b003e -5%, #8f10b7 100%);
  }
  .contact_us{
      background-color: #f1f1f1;
      padding: 120px 0px;
  }
  
  .contact_inner{
      background-color: #fff;
      position: relative;
      box-shadow: 20px 22px 44px #cccc;
      border-radius: 25px;
  }
  .contact_field{
      padding: 60px 340px 90px 100px;
  }
  .right_conatct_social_icon{
      height: 100%;
  }
  
  .contact_field h3{
     color: #000;
      font-size: 40px;
      letter-spacing: 1px;
      font-weight: 600;
      margin-bottom: 10px
  }
  .contact_field p{
      color: #000;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 1px;
      margin-bottom: 35px;
  }
  .contact_field .form-control{
      border-radius: 0px;
      border: none;
      border-bottom: 1px solid #ccc;
  }
  .contact_field .form-control:focus{
      box-shadow: none;
      outline: none;
      border-bottom: 2px solid #6b003e;
  }
  .contact_field .form-control::placeholder{
      font-size: 13px;
      letter-spacing: 1px;
  }
  
  .contact_info_sec {
      position: absolute;
      background-color: #2d2d2d;
      right: 1px;
      top: 18%;
      height: 340px;
      width: 340px;
      padding: 40px;
      border-radius: 25px 0 0 25px;
      color: #fff;
  }
  .contact_info_sec a {
    color: #fff;;
  }
  .contact_info_sec h4{
      letter-spacing: 1px;
      padding-bottom: 15px;
  }
  
  .info_single{
      margin: 30px 0px;
  }
  .info_single i{
      margin-right: 15px;
  }
  .info_single span{
      font-size: 14px;
      letter-spacing: 1px;
  }
  
  button.contact_form_submit {
      background: linear-gradient(to top right, #6b003e -5%, #8f10b7 100%);
      border: none;
      color: #fff;
      padding: 10px 15px;
      width: 100%;
      margin-top: 25px;
      border-radius: 35px;
      cursor: pointer;
      font-size: 14px;
      letter-spacing: 2px;
  }
  .socil_item_inner li{
      list-style: none;
  }
  .socil_item_inner li a{
      color: #fff;
      margin: 0px 15px;
      font-size: 14px;
  }
  .socil_item_inner{
      padding-bottom: 10px;
  }
  
  .map_sec{
      padding: 50px 0px;
  }
  .map_inner h4, .map_inner p{
      color: #000;
      text-align: center
  }
  .map_inner p{
      font-size: 13px;
  }
  .map_bind{
     margin-top: 50px;
      border-radius: 30px;
      overflow: hidden;
  }

/*...End Contact Page CSS....*/ 


/*starts login page*/

.login_sec{}
.login_sec h1{
         text-align: center;
    margin-bottom: 35px;
    font-size: 55px;
}
.login_sec .form_col{
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.login_sec .form_wrapper{
      width: 40%;
}

.login_sec form{
}
.login_sec form input{
  background-color: #EEF5F3;
    border: unset;
    outline: none;
       padding: 15px 20px;
    width: 100%;
        border-radius: 107px;
        font-size: 16px;
  font-weight: 500;

} 
.login_sec form input::placeholder{

}
.login_sec form input[type="submit"]{
 background-color: var(--theme1);
    border-radius: 100px;
    width: 40%;
    padding: 15px 20px;
    display: block;
    margin: 0 auto;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}
.login_sec form .field{
       margin-bottom: 20px;
}
.login_sec form .field.pass{
  position: relative;
}
.login_sec form .field.pass #eyeicon{
      position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
        color: #8b8b8b;
}
.login_sec form .field.pass #eyeicon:hover{
  color:var(--theme1) ;
  cursor: pointer;
}

.new-box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--theme1);
}
.n-box{}
.n-box h2{
     
    color: #fff;
    text-align: center;
}
.n-box p{
    font-size: 20px;
    text-align: center;
    color: #fff;
    line-height: 38px;
    margin-bottom: 30px;
}
.n-box .signup_btn{
      color: #000;
    background-color: #fff;
    padding: 15px 20px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 100px;
    display: block;
    margin: 0 auto;
    width: 71%;
    text-align: center;
    font-weight: 600;
}

/*End Login page*/

.student_create{
    padding: 80px 0px;
}

.student_update{
    padding: 100px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F8F8F8;
}
.student_update .form{
    width: 50%;

}

/*Select  profiles*/
 
.select_profile {
    /* height: 100vh;*/
    padding: 100px 0px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #F8F8F8;
 }
 

 .select_profile .list-view{
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 30px;
    justify-content: center;
 }
 .select_profile .list-view > div{
    width: 23%;
 }
 
 .select_profile h1{
     text-align: center;
     margin-bottom: 60px;
     font-size: 54px; 
 }
 .select_profile .last_col{
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .select_profile .boxes{
     width: 100%;
 }
 .select_profile .list-view .card{
    margin-bottom: 0 !important;
 }
 .select_profile .card{
     transition: 0.5s;
 }
 .select_profile .card:hover{
         transform: scale(1.1);
 }
 .select_profile .last_col .card:hover{
      transform: scale(1);
 }
 .select_profile .box .pic{
width: 100%;
 }
 .select_profile .box .content{
    padding: 15px 20px;
 }
 
 .select_profile .box .title{
         padding-top: 12px;
     color: #000;
     font-size: 24px;
     text-transform: capitalize;
     margin-bottom: 10px;
 }
 .select_profile .box a.view_btn{
        color: #000;
     transition: 0.5s;
     display: block;
      font-size: 14px;
      margin-bottom: 5px;
 }
 .select_profile .box a.view_btn:hover{
     color: #1eb2a6;
 }
 .select_profile .box a.view_btn i{
     margin-right: 5px;
         color: #1eb2a6;
 }
 .select_profile .box img{
     width: 100%;
     height: 170px;
     object-fit: cover;
 }
  
 .select_profile .box .plus a.icon{
     width: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 80px;
     background-color: #bfbcbc;
     border-radius: 50%;
     transition: 0.5s;
 }
 .select_profile .box .plus a.icon:hover{
     background-color: #1eb2a6;
 }
 .select_profile .box .plus i{
     font-size: 47px;
     color: #ffffff;
         margin-top: 8px;
 }
 
 .select_profile .box h6{}
 .select_profile a.add{
         margin-top: 22px;
     display: block;
         color: #000;
         transition: 0.5s;
 }
 .select_profile a.add:hover{
     color: #1eb2a6;
 }
 
 .select_profile .manage_btn{
     text-align: center;
     padding-top: 60px;
 }
 .select_profile .manage_btn a{
     border: 2px solid black;
     padding: 10px 40px;
     text-decoration: none;
     font-size: 18px;
     color: #000;
       transition: 0.5s;
 }
 .select_profile .manage_btn a:hover{
     background-color: #1eb2a6;
     color:#fff;
     border-color: #1eb2a6;
 }


 /* profile_detail */

 .desktop_header{
    display: block;
 }
 .mob_header{
    display: none;
 }

 .profile_detail.header{
    padding: 15px 0px;
 }
 .profile_detail.header .logo{
    margin-right: 15px;
 }
 .profile_detail.header .logo_main {
    width: 50px;
 }
 .profile_detail.header .navi{}
 .profile_detail.header .navi ul{
    display: flex;
    margin: 0;
    padding: 0;
    column-gap: 45px;
    align-items: center;
 }
 .profile_detail.header .navi.right ul {
     
    column-gap: 15px;
}
 .profile_detail.header .navi li{
    list-style: none;
      display: inline-block;
 }
 .profile_detail.header .navi li a{
    font-size: 15px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    padding: 0;
 }
 
 .profile_detail.header .navi .nav-item.dropdown ul{
        flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px;
        border-radius: 5px;
    margin-top: 10px;
 }
 .profile_detail.header .navi .nav-item.dropdown ul.dropdown-menu{
    display: none;
 }
 .profile_detail.header .navi .nav-item.dropdown span.sub{
    display: none;
 }
 /* ul.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    z-index: 1000;
    min-width: 200px;
    padding: 0.5rem 0;
    border: 1px solid #ddd;
} */

/* ✅ Only show on hover */
.profile_detail.header .navi ul.dropdown:hover .dropdown-menu {
    display: block;
}



 .profile_detail.header .navi .nav-item.dropdown ul li{
    margin-bottom: 5px;
 }
 .profile_detail.header .navi .nav-item.dropdown ul a{
    color: #fff;
 }
 .profile_detail.header .navi .nav-item.dropdown ul a i{
     color: #fff;
 }



 .profile_detail.header .navi.right li form button{
    border: unset;
    background-color: unset;
    padding: 0;
    display: flex;
    align-items: center;
    column-gap: 5px;
    font-size: 14px;
    font-style: italic;
 }
 .profile_detail.header .navi.right li form button i{
    color: var(--theme2);
}

 .profile_detail.header .navi.right {
    display: flex;
    justify-content: flex-end;
 }
 .profile_detail.header .navi.right li i{
    font-size: 20px;
    color: #9f9999;
 }
 .profile_detail.header .navi.right .avator{
     margin-left: 15px;
    display: flex;
    align-items: center;
    column-gap: 15px;
 }
 .profile_detail.header .navi.right .avator .image{}
 .profile_detail.header .navi.right .avator .content{}
 .profile_detail.header .navi.right .avator .content p{
    margin: 0;
 }
 .profile_detail.header .navi.right .avator img{
    width: 60px;
    border-radius: 50%;
    height: 60px;
    object-fit: cover;
 }

 .days {
    display: flex;
    justify-content: space-between;
}

.day {
    width: 14%;
    text-align: center;
    padding: 5px;
    border: 1px solid #ccc;
}

.day.present {
   background-color: var(--theme1);
    color: white;
}

 .profile_detail.streak_bar{
   padding-top: 40px;
    padding-bottom: 80px;
    background-color: #F8F8F8;
    /* position: relative; */
}
.profile_detail.streak_bar #fireworks_canvas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
.center-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 1000;
    font-size: 2rem; /* Increase the font size */
}
#hideAnimationButton {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000; /* Make sure the button is on top */
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}


.profile_detail.streak_bar .main_row{
    
}
.profile_detail.streak_bar .left_col{
   padding-right: 5%;
}
 .profile_detail.streak_bar .heading{
    margin-bottom: 30px;
}
 .profile_detail.streak_bar .boxes{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-gap: 15px;
    width: 100%;
    margin-bottom: 15px;

}
 .profile_detail.streak_bar .box{
    background-color: #fff;
    background: #fff;
    padding: 40px 30px;
    border-radius: 4px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 25px -2px rgb(0 0 0 / 12%);
    height: 240px;
    justify-content: center;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: #000;
    font-size: 50px;
    font-weight: 600;
    text-transform: uppercase;
}
.profile_detail.streak_bar .box h4{
   font-size: 16px;
   display: block;
   margin-bottom: 5px;
   color: var(--theme1);
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 15px;
}
.profile_detail.streak_bar .box a{
   font-size: 26px;
   font-weight: 600;
   margin-bottom: 0;
   color: rgb(33, 37, 41);
}

.profile_detail.streak_bar .right_col{}

.profile_detail.streak_bar .grow_card{
  background-color: #fff;
} 
.profile_detail.streak_bar .grow_card .heading_text{
    background-color: var(--theme1);
    text-align: center;
    color: #fff;padding: 12px 30px;margin-bottom: 0;}  
.profile_detail.streak_bar .grow_card .content{
   padding: 20px 30px;
   background-color: #fff;
}
.profile_detail.streak_bar .grow_card h4{
   margin-bottom: 15px;
}

.profile_detail.streak_bar .grow_card .current{
   margin: 0;
   font-size: 16px;
}
.profile_detail.streak_bar .grow_card .current span{
   color: #000;
   font-size: 46px;
   font-weight: 500;
   line-height: 1.4;
}
.profile_detail.streak_bar .grow_card .days{
   display: flex;
   column-gap: 10px;
   margin-top: 10px;
}
.profile_detail.streak_bar .grow_card .day{
   
   border: 2px solid #999999;
   height: 40px;
   width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.profile_detail.streak_bar .grow_card hr{}
.profile_detail.streak_bar .view_btn{
    font-size: 18px;
    color: #000;
    text-align: right;
    display: block;
    margin-top: 20px;
    font-weight: 600;

}
.profile_detail.streak_bar .view_btn i{
    font-size: 15px;
    font-weight: 400;
    margin-left: 8px;
}

.profile_detail.streak_bar .grow_card .attempt_para{
    margin: 0;
    padding-top: 10px;
    text-transform: capitalize;
}

/* end profile_detail  */

/* course_page */
.course_page{
    padding: 80px 0px;
    background-color: #F8F8F8;
}
.course_page .boxes{
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    justify-content: center;
    row-gap: 20px;
    margin-top: 30px;
}
.course_page .boxes .list-view{
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 30px;
}
.course_page .boxes .list-view>div{
    width: 32%;
}
.course_page .box{
    width: 100%;
    position: relative;
}
.course_page .box .inner{
    display: block;
    border: 2px solid #d5d5d5;
    border-radius: 4px;
    min-height: 400px;
    background: #fff;
    padding: 20px 40px;
    position: relative;
    min-height: 300px;
}
.course_page .box .inner .title{
    position: relative;
    z-index: 2;
}
.course_page .box .inner h2{
    color: #212529;
    font-size: 24px;
    font-weight: 600;
}
.course_page .box .inner p{
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
            line-clamp: 4;
    -webkit-box-orient: vertical;
}

.course_page .box .inner .skils{
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
    border-top: 1px solid #1eb2a652;
    padding-top: 20px; */
}
.course_page .box .inner .skils .chapters{
    display: flex
;
    justify-content: space-between;
    margin-bottom: 5px;
  
}

.course_page .classes_link{
    display: flex
;
    justify-content: space-between;
    padding: 5px 0px;
    z-index: 3;
    position: relative;
}
.course_page .box .inner .sk_link{
    /* position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end; */
}

.course_page .box .inner .skils a{}
.course_page .box .inner .skils h4{
    font-size: 16px;
    font-weight: 500;
}

.course_page .box>.inner:after {
    display: block;
    content: "";
    width: 9%;
    height: 17%;
    position: absolute;
    top: -2px;
    left: -2px;
    border-top: 2px solid var(--theme1);
    border-left: 2px solid var(--theme1);
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
}
.course_page .box>.inner:before {
    display: block;
    content: "";
    width: 9%;
    height: 17%;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid var(--theme1);
    border-right: 2px solid var(--theme1);
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
}
.course_page .boxes .list-view>div:nth-child(odd) .inner:before {
    border-bottom: 2px solid var(--theme2);
    border-right: 2px solid var(--theme2);
}
.course_page .boxes .list-view>div:nth-child(odd) .inner:after {
    border-top: 2px solid var(--theme2);
    border-left: 2px solid var(--theme2);
}

.course_page .box>.inner:hover:before, .course_page .box>.inner:hover:after {
    width: 95%;
    height: 90%;
}
 .course_page .box>.inner:hover {
    opacity: 1;
    border-color: #d5d5d5;
}

.course_page .box .ribbon {
    position: absolute;
    right: -0.313rem;
    top: -0.313rem;
    z-index: 1;
    overflow: hidden;
    width: 4.688rem;
    height: 4.688rem;
    text-align: right;
    }
    .course_page .box .ribbon span {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25rem;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 6.25rem;
    display: block;
    position: absolute;
    top: 1.188rem;
    right: -1.313rem;
    }
    .course_page .box .ribbon span::after {
    content: "";
    position: absolute;
    right: 0rem;
    top: 100%;
    z-index: -1;
    }
    .course_page .box .ribbon span::before {
    content: "";
    position: absolute;
    left: 0rem;
    top: 100%;
    z-index: -1;
    }
    
    .course_page .boxes .list-view>div:nth-child(even) .ribbon span {
     color: #fff;
    background: #f50505;
    background: linear-gradient(var(--theme1) 0%, var(--theme1) 100%);
    box-shadow: 0 0.188rem 0.625rem -0.313rem #000;
     }
    .course_page .box .prek span {
    color: #fff;
    background: #f50505;
    background: linear-gradient(var(--theme2) 0%, var(--theme2) 100%);
    box-shadow: 0 0.188rem 0.625rem -0.313rem #000;
    font-size: 0;
    }
 
    .course_page .boxes .list-view>div:nth-child(even) .ribbon span::before{
     border-left: 0.188rem solid var(--theme1);
    border-right: 0.188rem solid transparent;
    border-bottom: 0.188rem solid transparent;
    border-top: 0.188rem solid var(--theme1);
    }
    .course_page .boxes .list-view>div:nth-child(even) .ribbon span::after{
     border-left: 0.188rem solid transparent;
    border-right: 0.188rem solid var(--theme1);
    border-bottom: 0.188rem solid transparent;
    border-top: 0.188rem solid var(--theme1);
    }
 
    .course_page .box .prek span::before {
    border-left: 0.188rem solid var(--theme2);
    border-right: 0.188rem solid transparent;
    border-bottom: 0.188rem solid transparent;
    border-top: 0.188rem solid var(--theme2);
    }
    .course_page .box .prek span::after {
    border-left: 0.188rem solid transparent;
    border-right: 0.188rem solid var(--theme2);
    border-bottom: 0.188rem solid transparent;
    border-top: 0.188rem solid var(--theme2);
    }
/* end course_page */

.theme_btn.back{
    padding: 14px 10px;
    justify-content: center;
    column-gap: 5px;
    align-items: center;
    margin-bottom: 20px;
    width: 14%;
}
.chapters_page .theme_btn i {
    margin-top: 2px;
}

 

.lesson_page{
    /* background-color: #ffa9a8d6 !important; */
}
 /* starts topic page  */
 .topic_page{
    padding-top: 40px;
    padding-bottom: 80px;
    background-color: #F8F8F8;
}
.top_bar_tuts{
    padding-top: 20px;
    padding-bottom: 20px;
    
    background-color: var(--theme1);
}
.top_bar_tuts .inner{
    display: flex;
    justify-content: space-between;
    margin: 0% 5%;
    align-items: center;
}
.top_bar_tuts .inner .vid_btn{
    background-color: #ffffff;
    color: #c91e1d;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 5px;

}

.top_bar_tuts.test_page .inner{
    flex-wrap: wrap;
    align-items: center;
}
.top_bar_tuts.test_page .inner .col1{
    width: 30%;
}
.top_bar_tuts.test_page .inner .col2{
    width: 40%;
}
.top_bar_tuts.test_page .inner .col3{
    width: 30%;
}


.top_bar_tuts a.close_btn{
    background-color: var(--theme2);
    color: #fff;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 5px;
    column-gap: 8px;
} 
.top_bar_tuts.test_page a.close_btn{
    border-radius: 50%;
    padding: 10px;
    width: 40px;
    height: 40px;
}
.top_bar_tuts .test_btn{
    /* padding: 14px 70px;
    background-color: #fff;
    color: var(--theme1);
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    border: 3px solid;
    
    box-shadow: 4px 6px 5px 1px #c91e1d73;
    transition: 0.3s; */
}
.top_bar_tuts .test_btn:hover{
    /* box-shadow: unset; */
}

.animated_btn {
    position: relative;
    display: inline-block;
    padding: 15px 50px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #c91e1d;
    border: none;
    border-radius: 10px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(98, 0, 234, 0.4);
    perspective: 500px;
}

.animated_btn:hover {
    color: #fff;
}

.animated_btn:active {
    /* transform: translateY(0) scale(1);
    box-shadow: 0 5px 15px rgba(98, 0, 234, 0.4); */
}

.animated_btn::before {
    /* content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #ff4081, #3f51b5);
    z-index: -1;
    border-radius: 12px;
    transition: opacity 0.4s ease;
    opacity: 0; */
}

.animated_btn:hover::before {
    /* opacity: 1; */
}

.animated_btn:after {
    /* content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transform: translateY(-5px) scale(0.95);
    transition: transform 0.3s ease; */
}

.animated_btn:hover:after {
    /* transform: translateY(0) scale(1); */
}






.top_bar_tuts .answer_btn{
    padding: 10px 30px;
    background-color: #fff;
    color: var(--theme1);
}
.top_bar_tuts .navigation-buttons form{
	display: flex;
	column-gap: 15px;
}
.top_bar_tuts .navigation-buttons button{
	 
    padding: 10px 22px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09) !important;
    -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: flex;
    align-items: center;
    border: unset;
}
.top_bar_tuts .navigation-buttons .prev{
	    background-color: var(--theme2);
    color: #fff;
}
.top_bar_tuts .navigation-buttons .next{
	background-color: #fff;
    color: var(--theme1);
     
}
.top_bar_tuts .navigation-buttons .finish{
	background-color: #fff;
    color: var(--theme1);
}


.topic_page h2{
    padding-bottom: 20px;
}
.topic_page .boxes .list-view {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 30px;
}
.topic_page .boxes .list-view>div {
    width: 48%;
}


.topic_page .box {
    width: 100%;
}
.topic_page .box .inner {
    display: flex;
    flex-wrap: wrap;
    min-height: 200px;
    border-radius: 150px;
    background-color: white;
     
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 25px -2px rgb(0 0 0 / 12%);
}
.topic_page .box .inner.lesson_inner{
    /* min-height: 170px; */
}
.topic_page .box .inner .left{
    background-color: var(--theme1);
    width: 31%;
    padding: 30px 30px;
    border-radius: 35px 0px 0px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* .topic_page .boxes .list-view>div:nth-child(even) .box .inner .left{
    background-color: black;
} */
 
 
.topic_page .box .inner .right{width: 58%;padding: 30px 30px;display: flex;flex-direction: column;justify-content: space-between;}
.topic_page .box .inner .left h5{
    color: #fff;
}
.topic_page .box .inner .left h4{
    color: #fff;
}
.topic_page .box .inner .right .text{
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    justify-content: space-between;
    align-items: center;
}
.topic_page .box .inner .right .text .content{
    width: 60%;
}
.topic_page .box .inner h5{
font-size: 16px;
font-weight: 400;
color: #000;
}
.topic_page .box .inner h4{
font-size: 22px;
color: #000;
}

/* test page */
.test_page .test_navi{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
.test_page .test_navi li{
    list-style: none;
    display: inline-block;
    margin-right: 40px;
}
.test_page .test_navi li a{
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
}
.test_page .custom-radio i.correct{
    color: var(--theme1);
}
.test_page .custom-radio i.incorrect{
    color: var(--theme2);
}

.test_page #solutionModal .solution{
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.test_page #solutionModal .solution #nextSlideBtn{
    display: none;
}
.test_page #solutionModal .solution h2{
    margin: 0;
    padding-bottom: 10px;
}
.test_page #solutionModal .solution .sol_text{
    margin-bottom: 10px;
}
.test_page .solution_div{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: white;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 6px 6px 7px 1px #0000001f;
    padding: 40px 60px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 35px;
    row-gap: 15px;
}
.test_page .solution_div h2{
    padding-bottom: 0px;
}
.test_page .solution_div p{}
 
.test_page .gotid_btn{
    border: unset;
    padding: 12px 30px;
}
.test_page #solutionModal .gotid_btn{
    /* display: none; */
}
.test_page #solutionModal .gotid_btn2{
    border: unset;
    padding: 12px 30px;
}


.test_page .modal-content .modal-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 15px;
}
.test_page .sol_text{
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    justify-content: center;
    align-items: center;
}

.test_page h2.heading div{
    display: flex !important;
}
.question_progress{}
.question_progress p{
    color: #ffffff;
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    font-style: italic;
}
.question_progress span{
    color: var(--theme2);
    font-size: 24px;
    line-height: 28px;
} 


.tutorials_page #startTestLink{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.tutorials_page .modal-dialog{
    max-width: 600px;
}
.tutorials_page .modal-content{
    padding: 30px 30px;
}

.tutorials_page .modal-content h2{
    margin-bottom: 0;
    padding-bottom: 0;
}
.tutorials_page .modal-content .test_btn{
    padding: 12px 15px;
    width: 75%;
    margin: 0 auto;
    justify-content: center;
}


.tutorials_page h2{
    text-align: center;
    color: #000;
}
.tutorials_page h2 p{
    color: #000;
}
.tutorials_page .lesson_name{
    color: var(--theme1);
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
}
.tutorials_page .slick_btn{
    background-color: #fff;
    color: var(--theme1);
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: flex;
    align-items: center;
    border: 1px solid var(--theme1);
    gap: 10px;
}

.tutorials_page .slick_btn i{}
.tutorials_page .slick_nav{
    display: flex;
    justify-content: space-between;
    margin: 0px 15px;
    padding-bottom: 20px;
    padding-top: 15px;
    width: 50%;
    margin: 0 auto;
}

.test_page .next-btn{
    background-color: #fff;
    color: var(--theme1);
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    -webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
   
    align-items: center;
    border: 1px solid var(--theme1);
    gap: 10px;
}
 
 
.tutorials_page .content_box{
    border-radius: 10px;
    background-color: white;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 6px 6px 7px 1px #0000001f;
    padding: 40px 60px;
    margin: 15px 15px;
    width: 75%;
    margin: 0 auto;
}
.tutorials_page .content{
    display: flex;
    justify-content: center;
}

.tutorials_page .content p{
    font-size: 20px;
    color: #000;
    margin: 0;
    font-weight: 600;
}
.tutorials_page .content .heading{
    font-size: 24px;
    font-weight: 600;
}
.tutorials_page .content .heading p{
    font-size: 24px;
    color: #000;
    margin: 0;
    font-weight: 600;
}
.tutorials_page .explanations p{
    color: #000;
}

.tutorials_page p {
    display: flex;
    column-gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.tutorials_page .content img,
.tutorials_page .answer img{
    display: inline-block;
    /* width: 70px;
    height: auto; */
    margin-right: 15px;
} 
.tutorials_page .answer{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.tutorials_page .answer p{
    margin: 0;
}

.tutorials_page .quiz_slide{
    display: flex !important;
    justify-content: center;
}
.tutorials_page .quiz_slide .inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: white;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 6px 6px 7px 1px #0000001f;
    padding: 40px 60px;
    width: 70%;
}

.tutorials_page .quiz_slide .quiz-image{
	    width: 40%;
}
.tutorials_page .custom-radio {
        display: inline-block;
        margin: 10px;
}
.tutorials_page .custom-radio input {
    /* display: none; */
}
 

.tutorials_page.test_page .custom-radio {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    column-gap: 10px;
}

.tutorials_page.test_page .custom-radio input[type="radio"] {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: #0a0a0a;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid var(--theme1);
    border-radius: 50%;
    display: grid;
    place-content: center;
  
    cursor: pointer;
}

.tutorials_page.test_page .custom-radio input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--theme2);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
}

.tutorials_page.test_page .custom-radio input[type="radio"]:checked::before {
    transform: scale(1);
}

.tutorials_page.test_page .custom-radio span {
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
    background: #f0f0f0;
    transition: background 0.3s, transform 0.3s;
}

.tutorials_page.test_page .custom-radio span:hover {
    background: #e0e0e0;
    transform: scale(1.05);
    cursor: pointer;
}

.tutorials_page.test_page .custom-radio input[type="radio"]:focus {
    outline: 2px solid var(--theme2);
    outline-offset: 2px;
}
.test_page .right .custom-next-arrow{
   
}
.hide {
    display: none;
}





.tutorials_page .radio_choices{
	    margin-top: 20px;
}
.tutorials_page .navigation-buttons form{
	display: flex;
	justify-content: center;
	column-gap: 20px;

}
.tutorials_page.test_page {
    padding-top: 20px;
}
.tutorials_page.test_page .custom-radio input{
    /* display: block; */
}
.tutorials_page.test_page .custom-radio {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.tutorials_page.test_page .custom-radio input[type="radio"] {
 
}






/* progress bar */
/* Progress bar container */
.progress_bar {
    background-color: #d8d8d8; /* Gray background for the unfilled portion */
    border-radius: 20px;
    position: relative;
    margin: 15px 0;
    height: 25px;
    width: 100%;
    margin-bottom: 30px;
    overflow: hidden; /* Ensure no overflow of inner content */
}

/* Progress bar fill with gradient */
.progress-done {
    background: linear-gradient(to left, #1EB2A6, #1d837a); /* Gradient color */
    box-shadow: 0 3px 3px -5px #ffd5d5, 0 2px 5px #ffd5d5;
    border-radius: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0; /* Initially set to 0 and will be adjusted with JS */
    opacity: 0; /* Initially hidden */
    transition: width 1s ease, opacity 1s ease; /* Smooth transition */
    padding: 10px 13px ;
}

/* progress bar */

 
  
 /* percentage circles */
 .single-chart{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 .single-chart p.score{
    margin: 0;
    font-size: 14px;
 }
  
  .circular-chart {
    display: block;
    max-width: 60px;
    max-height: 250px;
  }
  
  .circle-bg {
    fill: none;
    stroke: #ffd5d5;
    stroke-width: 3.8;
  }
  
  .circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  
 .circular-chart.green .circle {
    stroke: var(--theme1);
  }
  .percentage {
    fill: #666;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
  }

/* percentage circles */


/* .topic_page .box .inner .my_button{
    display: flex;
    justify-content: flex-end;
}
.topic_page .box .inner a{
    font-size: 14px;
    color: #fff;
}
.topic_page .box .inner a i{
    font-size: 12px;
    margin-left: 8px;
} */
.topic_page .box .inner .cont_btn{background-color: var(--theme1);color: #fff;padding: 10px 15px;cursor: pointer;border-radius: 4px;-webkit-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);-moz-box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);box-shadow: 0px 24px 36px -11px rgba(0, 0, 0, 0.09);font-size: 12px;font-weight: 700;text-transform: uppercase;letter-spacing: 1px;text-decoration: none;display: flex;align-items: center;}
 

.topic_page .btns{
    display: flex;
    margin-top: 15px;
    justify-content: center;
}
.topic_page .btns a{}
.topic_page .btns a i{
    margin-right: 8px;
}


/* end topic page */


/* starts results page  */
.results_page{
    padding-top: 40px;
    padding-bottom: 50px;
}
.results_page .quiz_heading{
    text-align: center;
}
.results_page .quiz_heading .inner{
    justify-content: center;
    display: flex;
}
.results_page .quiz_heading h1{
    margin-bottom: 15px;
}
.results_page .quiz_heading span i{
    background-color: var(--theme1);
    padding: 15px;
    border-radius: 50%;
    font-size: 40px;
    color: #fff;
}
.results_page .quiz_heading h3{
    color: rgb(153, 153, 153);
    font-size: 24px;
    margin-top: 25px;
     
}
.results_page .quiz_heading h3 .student_name{
    color: var(--theme1);
    text-transform: uppercase;
}
.results_page .quiz_heading h4{
    font-size: 20px;
    color: rgb(153, 153, 153);
    margin-bottom: 20px;
}
.results_page .quiz_heading h4 span{
    color: var(--theme1);
}
.results_page .quiz_heading .inner a{
    display: block;
    margin: 0 auto;
}

.results_page .quiz_boxes{
    margin-top: 50px;
}
.results_page .quiz_boxes .inner{
    display: flex;
    justify-content: center;
    column-gap: 40px;
    margin-bottom: 40px;
}
.results_page .quiz_boxes .box{
    background-color: #F8F8F8;
    padding: 20px 30px;
    width: 25%;
    text-align: center;
}
.results_page .quiz_boxes .box.lesson_box{
    width: 50%;
}
.results_page .quiz_boxes .box.lesson_box h2{
    font-size: 40px;
}
.results_page .quiz_boxes h4{
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}
.results_page .quiz_boxes h2{
    color: var(--theme1);
    font-size: 60px;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 15px;
}
.results_page .quiz_boxes hr{
    margin: 0;
    width: 90%;
    margin: 0 auto;
    height: 2px;
}
.results_page .quiz_boxes p{
    margin: 0;
}

.results_page .quiz_bottom{} 
.results_page .quiz_bottom .inner{}
.results_page .quiz_bottom .btns{}
.results_page .quiz_bottom a{}


/* end results page  */

/* reports page */
.reports_page{
    padding: 80px 0px;
}
.reports_page h2 {
    text-align: center;
}

.reports_filter_form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
    margin-bottom: 20px;
}

.reports_filter_form .form-group {
    margin: 0;
    flex: 1;
    min-width: 150px;
    position: relative; /* To position the icon */
}
.reports_filter_form .filter_btns {
    display: flex;
        column-gap: 10px;
}


.reports_filter_form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.reports_filter_form .form-control {
    width: 100%;
    padding: 8px 35px 8px 10px; /* Add padding for the icon */
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 1em;
    color: #333;
    background-color: #fff;
}

.reports_filter_form .custom-select-wrapper {
    position: relative;
}

.reports_filter_form .select-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none; /* Ensure the icon does not block interactions */
    color: #999;
}

.reports_filter_form .filter_btn {
    border: unset;
    padding: 9px 25px;
    margin-top: 26px;
}

.reports_filter_form .filter_btn:hover {
    
}
.reports_filter_form .clear_btn{
    padding: 10px;
    display: block;
    margin-top: 26px;
    border: unset;
}


.reports_page .reports_table{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    
}

.reports_page table{
     
    border-radius: 10px;
    background-color: white;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 25px -2px rgb(0 0 0 / 12%);
  width: 100%;
     
}
.reports_page table thead{
    background-color: #1eb2a6;
    color: #fff;
}
.reports_page table th{
    border: 1px solid #0000003b;
    padding: 10px 20px;
}
.reports_page table tbody{}
.reports_page table td{
    border: 1px solid #0000003b;
    padding: 10px 20px;
}

.reports_page .summary_boxes {
  padding-top: 0px;
    padding-bottom: 50px;
}
.reports_page .summary_boxes  h2{
    text-align: center;
    padding-bottom: 25px;
}
.reports_page .summary_boxes .inner{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 25px;
    row-gap: 20px;
   }
   .reports_page .summary_boxes .inner2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
    margin-top: 25px;
    row-gap: 20px;
   } 
.reports_page .summary_boxes .box{
    display: flex;
    min-height: 200px;
    border-radius: 10px;
    background-color: white;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 25px -2px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 25px -2px rgb(0 0 0 / 12%);
    padding: 20px;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}
.reports_page .summary_boxes .box1,
.reports_page .summary_boxes .box2{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
 
.reports_page .summary_boxes .box img{
    width: 52px;
}
.reports_page .summary_boxes .box1 h4,
.reports_page .summary_boxes .box2 h4{
 
}
.reports_page .summary_boxes .box1 .total_count,
.reports_page .summary_boxes .box2 .total_count{
    display: flex;
    column-gap: 10px;
}
.reports_page .summary_boxes .box1 .details ,
.reports_page .summary_boxes .box2 .details{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.reports_page .summary_boxes h4{
    font-size: 26px;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
}
.reports_page .summary_boxes .small_text{
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
    color: #585454;
    margin-top: 10px;
}
.reports_page .summary_boxes p{
    font-size: 40px;
    color: #000;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    
    padding-top: 5px;
    padding-bottom: 2px;
}
.reports_page .summary_boxes canvas{
    height: 320px !important;
    width: auto !important;
} 
/* end reports page */


.special_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid #f92929;
    border-radius: 12px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.special_btn:hover{
    color: #fff;
}
.special_btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: linear-gradient(135deg, #c91e1d, #c91e1d);
    transition: all 0.5s ease-in-out;
    border-radius: 50%;
    z-index: 0;
    transform: translate(-50%, -50%) scale(0);
}

.special_btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.special_btn span {
    position: relative;
    z-index: 1;
}

.special_btn i {
    font-size: 20px;
    position: relative;
    z-index: 1;
}

 
/* setup wizard css starts here */
 .wiz_buttons{
    display: flex;
    justify-content: center;
    column-gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.wiz_buttons button{
    width: 48%;
    border: unset;
    padding: 5px 10px !important;
    border-radius: 0px !important;
    background-color: #e9e7e7 !important;
    color: #000 !important;
    margin: 0 !important;
}

.wiz_buttons button.next{
    background-color: var(--theme1) !important;
    color: #fff !important;
}
/* setup wizard css end here */

 

  
/* media query */

@media (max-width:767px){
    .desktop_header{
        display: none;
     }
     .mob_header{
        display: block;
     }

        .select_profile{
            padding: 50px 0px;
        }
        .select_profile h1 {
            margin-bottom: 25px;
            font-size: 34px;
            line-height: 46px;
        }
        .select_profile .list-view{
            row-gap: 15px;
        }
        .select_profile .list-view > div{
            width: 100%;
        }
        .select_profile .last_col{
            margin-top: 25px;
        }

       
        .select_profile .box{
            margin-bottom: 25px;
        }
        .select_profile .main{
             height: unset;

        }
       
        .select_profile .main h1 {
            font-size: 30px;
        }
        .profile_detail.streak_bar {
            padding: 40px 0px;
        }
        .profile_detail.streak_bar .right_col {
            padding-top: 25px;
        }
        .profile_detail.streak_bar .left_col{
            padding-right: 15px;
        }
        .profile_detail.streak_bar .boxes{
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: auto;
        }
        .profile_detail.streak_bar .grow_card .content {
            padding: 20px 10px;
        }
        .profile_detail.streak_bar .grow_card .day {
            height: 35px;
            width: 35px;
        }
       

        .mob_header{}
        .mob_header .inner{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .mob_header .logo img{
            width: 15vw;
        }

        .mobile_menu ul li {
            width: 100%;
            border: none;
            position: relative;
            }
            .navi ul ul {
            width: 100%;
            position: relative;
            box-shadow: none;
            background: #7f7f7f;
             display: none;
            flex-direction: column;
             padding: 10px 15px !important;
            }
            .mobile_menu ul ul {
            width: 100%;
            position: relative;
            box-shadow: none;
            background: #7f7f7f;
            float: left;
            display: none;
            }
            .menu-toggle {
            display: block;
            }
            .menu-toggle {
            text-align: center;
            color: #fff;
            font-size: 23px;
            line-height: 38px;
            height: 38px;
            width: 38px;
             background-size: 70%;
            background-color: var(--theme1);
            background-position: center;
            background-repeat: no-repeat;
            z-index: 99;
            }
            .mobile_menu {
            position: fixed;
            left: -400px;
            overflow: auto;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
            right: 0;
            height: 100%;
            max-width: 300px;
            z-index: 999;
            bottom: 0;
            padding-top: 20px;
            top: 0;
            background-color: var(--theme1);
            }
            .mobile_menu.active {
            left: 0%;
            }
            .mobile_menu ul li a {
            font-size: 14px;
            text-decoration: none;
            color: #fff;
            display: block;
            padding: 8px 20px;
            border-bottom: 1px solid rgba(45, 45, 45, 0.2);
            }
            .mobile_menu .sub-menu li a {
            font-size: 14px;
            }
            body.menu-change {
            overflow: hidden;
            }
            .overlay-main {
            background-color: #000000c2;
            position: absolute;
            visibility: hidden;
            opacity: 0;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
            z-index: 99;
            }
            .overlay-main.active {
            visibility: visible;
            opacity: 1;
            }
            .top-close-menu {
            text-align: center;
            line-height: 38px;
            position: absolute;
            top: 0;
            z-index: 3;
            right: 0;
            width: 35px;
            height: 35px;
            background-color: #111;
            background-size: 12px;
            background-repeat: no-repeat;
            background-position: center;
            color: #fff;
            }
            .mobile_menu.active {
            left: 0%;
            }
            .mobile_menu ul li {
            width: 100%;
            border: none;
            position: relative;
            }
            .mobile_menu ul li a {
            font-size: 14px;
            text-decoration: none;
            color: #fff;
            display: block;
            padding: 8px 20px;
            border-bottom: 1px solid rgba(45, 45, 45,0.2);
            }
            .mobile_menu .sub {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 25px;
            height: 25px;
            background-color: #111;
            color: #fff;
            font-size: 16px;
            text-align: center;
            line-height: 27px;
            }
            .mobile_menu ul{
            padding:0;
            margin:0;
            }




   
  .inner_banner {
      background-size: contain;
      padding-top: 120px;
      padding-bottom: 20px;
  }
  .inner_banner h4 {
      font-size: 14px;
   
  }
  .inner_banner h1{
      font-size: 36px;
      padding-top: 0;
  }
      .banner {
          height: 88vh;
      }
      .banner h4{
          text-align: center;
      }
      .banner h1{
          font-size: 36px;
          text-align: center;
      }
      .banner p {
       
          text-align: center;
      }
      .banner .btns {
          align-items: center;
          flex-direction: column;
          text-align: center;
          row-gap: 15px;
      }
      .banner .btns a {
          width: 65%;
          padding: 17px 15px;
      }
  
      .about_sec .image{
          height: 300px;
      }
      .about_sec {
          padding: 40px 0px;
      }
      .about_sec .right_wrapper {
          padding: 0;
          padding-top: 25px;
      }
      
      .heading {
          font-size: 34px;
          line-height: 1.2;
          text-align: center;
      }
      
      .subheading{
          text-align: center;
      }
      .about_sec h1{
          font-size: 30px;
          line-height: 1.2;
          text-align: center;
      }
      .about_sec .about_box {
         flex-direction: column;
          
      }
      .about_sec .about_box .icon {
          text-align: center;
      }
      .about_sec .content {
          text-align: center;
          margin-top: 15px;
      }
      .cta1 {
        padding: 40px 0px;
    }
    .cta1 .main h4 {
        font-size: 24px;
        text-align: center;
    }
    .cta1 .main {
        flex-direction: column;
        padding: 0px 20px;
    }
    
    .cta1 .left_col {
        width: 100%;
    }
    .cta1 .right_col {
        width: 100%;
        justify-content: center;
    }
    .cta1 .main a{
        padding: 15px 25px;
    }
    .own_pace {
        padding: 50px 0px;
        
    }
    .own_pace h2 {
        text-align: center;
        font-size: 34px;
        line-height: 1.2;
    }
    .own_pace h5{
        margin: 0;
    }
    .own_pace .main{
        flex-direction: column;
        margin-top: 25px;
        row-gap: 20px;
    }
    .own_pace .box{
        width: 100%;
    }
    .cta2 .main h2 {
        font-size: 36px;
    }
    .cta2 .main h4 {
        font-size: 20px;
    }

  
      .trust_sec {
         
          padding-top: 40px;
          padding-bottom: 20px;
      }
      .trust_sec .box{
          column-gap: 10px;
          margin-bottom: 15px;
      }
      .trust_sec .box .content h2 {
          font-size: 34px;
      }
      .trust_sec .box .content h4 {
          font-size: 14px;
          line-height: 20px;
          text-transform: capitalize;
      }
      .trust_sec .box .icon img {
          width: 45px;
      }
      .courses_sec {
          padding-top: 50px;
          padding-bottom: 50px;
      }
      .courses_sec h2 {
          margin-bottom: 30px;
           
      }
      .courses_sec .box {
          max-height: 460px;
          margin: 0;
      }
      .courses_sec .box .main {
          
          align-items: center;
          flex-direction: column;
      }
      .courses_sec .box .main .content {
          text-align: center;
          width: 100%;
      }
      .courses_sec .box .main .content h4{
          text-align: center;
          font-size: 24px;
      margin-top: 15px;
      }
      .courses_sec .box .main .author{
          justify-content: center;
      }
  
      .online_courses{
          padding-top: 50px;
          padding-bottom: 50px;
      }
      .online_courses h2 {
        
          margin-bottom: 20px;
      }
      .online_courses .main {
          
          grid-template-columns: 1fr 1fr;
      }
      .testimonials_sec{
          padding-top: 50px;
          padding-bottom: 50px;
      }
      .testimonials_sec .testimonial_slider {
          margin-top: 30px;
      }
  
      .blog_sec{
          padding-top: 50px;
          padding-bottom: 50px;
      }
      .blog_sec h2 {
          margin-bottom: 25px;
      }
      .blog_sec .main {
           
          flex-direction: column;
      }
      .blog_sec .box {
          
          width: 100%;
      }
  
      .pricing_sec{
          padding-top: 50px;
          padding-bottom: 50px;
      }
      .pricing_sec h2 {
          
          margin-bottom: 20px;
      }
      .pricing_sec .main{
          flex-direction: column;
          row-gap: 10px;
      }
      .pricing_sec .box {
          width: 100%;
      }
  
      .newsletter .inner_wrap{
          flex-direction: column;
      }
      .newsletter .content {
          width: 100%;
      }
      .newsletter .subs {
          width: 100%;
      }
  
      footer {
          padding-top: 50px;
       
      }
      footer .parent {
          
          padding-bottom: 30px;
          grid-template-columns: 1fr;
          row-gap: 30px;
      }
      .dnone_mob{
          display: none !important;
      }
    .contact_field {
        padding: 20px 20px;
    }
    .contact_info_sec {
        position: unset;
        width: 100%;
        border-radius: 0px 0px 25px 25px;
    }
  
  
  }