@media screen and (max-width :575px) {
      .board-card-center-block{
            margin-top: 30px;
      }
      .header-logo{
            gap: 10px !important;
      }
      .header-board-logo{
            padding-right: 10px !important;
      }
      .ribbion h4{
            font-size: 1.2rem;
      }
      .center-element {
            flex-wrap: wrap;
            gap: 10px;
      }
      .center-element-items .module-card-circle{
            width: 200px;
            height: 200px;
      }
      .center-element-items .module-card-circle img{
            height: 150px;
      }
      .center-element-items h2{
            font-size: 1.5rem;
      }
      .page-fotter p{
            font-size:12px
      }
      .btn-default{
            font-size: 12px
      }
      .accordion-title{
            flex-wrap: wrap;
            gap: 5px;
      }
      .play-button{
            margin-left: 0;
      
      }
      .mat-mdc-tab-label-container{
            padding: 5px;
      }
      .mat-mdc-tab-header {
            gap: 4px;
      }
      .top-bar-wrapper{
          overflow: hidden;
      }
      /* .grade-bar{
            max-width: 200px;
      } */

      .grade-bar{
            max-width: 100%;
            margin-top: 20px;
      }
      
      .board-cards-container .board-card{
            width: 100%;
      }
      /* css for mobile tab -9 -12-2025 */
      .tab-sidebar-slider{
            height: auto;
      }
      .tab-vertical-slider{
            flex-direction: row;
            padding: 5px;
      }
      .tab-vertical-slider li{
            white-space: nowrap;
      }


}



@media screen and (max-width :700px) {
      .board-cards-container{
            overflow-y: auto;
      }
      .grade-bar{
            gap: 10px;
      }
      .form-info{
            flex-wrap: wrap;
      }
      .demo-form-title-heading{
            font-size: 14px;
      }
      .hover-list{
            display: none;
      }
      .header-logo img{
            height: 30px;
      }
      .segment .content{
            font-size: .8rem;
      }
      .circle-toggle-button{
            width: 100px;
            height: 100px;
      }
      .pie-chart {
            width: 250px;
            height: 250px;
            border: 8px solid #fff;
      }
      .segment {
            flex: 0 0 125px;
            max-width: 125px;
            height: 125px;}
      .segment1 {
            flex: 0 0 250px;
            max-width: 250px;
            height: 125px;
        }
        .segment2:before{
            top: -40px;
        }

        .segment-border{
            width: 6px;
        }
        .segment-border:after,.segment-border:before{
            height: 6px;
        }

      .grade-bar,.grade-list{
            flex-wrap: nowrap;
            width: 100%;
            overflow: auto;
      }
    
      .grade-list{
            gap: 6px;
      }
      .grade-list li{
            min-width: 60px;
            height: 22px
          
      }
      .category-title {
            font-size: 14px;
      }
      .liquid-background{
            width: 22px;
            height: 22px;
            bottom: 16px;
      }
      .grade-list li a{
            font-size: .7rem;
      }
      .circle-toggle-button h2{
            font-size: 14px;
      }
      .tabbar .nav-tabs .nav-link {
            /* min-width: 100px; */
            min-width: auto;
      }
      .accordion-title h3{
            font-size: 1rem;
      }
      .fix-body-table-container .table thead th{
            font-size: .8rem;
      }
      .fix-body-table-container .table td{
            font-size: .7rem;
      }
      .play-vedio-with-title{
            flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
      }
      .play-vedio-with-title .play-button{
            padding: 4px 7px;
    border-radius: 5px;
    font-size: 1rem;
   
      }
      .play-vedio-with-title h2{
            font-size: 1rem;
      }
      .name-of-school-board {
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-direction: column;
        }
        .school-title, .board-title{
            width: 100%;
        }
        .bdr-right{
            border: none !important;
        }
        .bg-img{
            height: auto;
            padding: 50px 0;
        }
        .mdc-tab-indicator--active .mdc-tab__content{
            
        }
        .mat-mdc-tab .mdc-tab__content{
            padding: 6px 4px;
            font-size: 10px;
            min-width: 100px;
        }
        .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron{
            background-size: 50%;
        }
.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{
      background-size: 50%;
}
.mat-mdc-tab-header-pagination-chevron{
      padding: 10px;
}
.tabbar .nav-tabs .nav-link {
      border: none;
      padding: 3px 11px;
      border-radius: 6px;
      font-size: 14px;
}
.module-text, .tool-text, .segment .content a {
      font-size: 13px;
      padding: 1px 8px;
      min-width: 76px;
      text-align: center;
  }
  .segment3 .segment-3-border {
 
      height: 49px;
      background: #adf5b9;
      clip-path: polygon(100% 0, 0 102%, 100% 72%);
      top: -36px;
    
  }
  .segment2 .segment-1-border {
      height: 49px;
      top: -40px;
  
}
.segment .content{
      height: 90%;
}
}

@media screen and (max-width: 767px){
      .explore-title{
            width: 95%;
            font-size: 15px;
}
      .form-info{
            flex-wrap: wrap;
      }
      .no-of-session{
            margin-top: 15px !important;
      }
      .play-button{
            font-size: .8rem;
            padding: 4px 7px;
      }
      .fix-body-table-container .table th{
            vertical-align: top;
      }
      .modal-body{
            padding: 10px 10px;
      }
      .modal-title{
            font-size: 1rem;
      }
      .heading-primary{
            font-size: 1rem;
      }
      .banner-section .banner-titile{
            font-size: 1.5rem;
      }
      .banner-section .banner-sub-title {
            font-size: 1rem;
      }
      .counter,.percent{
            font-size: 20px !important;
         
          }
.state .card-body img {
      height: 70px !important;
}
     
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
      .form-info-title p,
      .form-info-items-bottom p {
            font-size: 10px;
      }
      .form-info-items-img{
            width: 50px;
            height: 50px;
      }
      .form-info-items-bottom .badge{
            min-width: 50px;
      }
      .hover-list-item{
            min-width: 8rem;
      }
      .chart-hover-content a{
            font-size: .7rem;}
      .module-hover{
            left: 3%;
      }
      .tool-hover{
            right: 3%;
      }
      .play-vedio-with-title h2{
      max-width: 500px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bg-img{
            height: 50vh;
      }
      .tabbar .nav-tabs{
            gap: 8px;
      }
      .recomended-project P{
            font-size: 11px;
      }
      .right-button .btn-default{
            font-size: 12px;
            padding: 8px 10px;
      }
      .borad-logo-box{
            width: 80px;
            padding: 5px;
      }
      .borad-logo-box p {
            font-size: 12px;
      }
      .explore-title{
            width: 95%;
      }
      .logo-sm.borad-logo-box img{
            height: 50px;
      }
      .grade-bar{
            padding: 10px 32px;
      }

      .button-group{
            flex-wrap: wrap;
      }
    .state .card-body img {
      height: 70px !important;
}
}


@media screen and (min-width: 1024px) and (max-width: 1366px) {
      .form-info-title p,
      .form-info-items-bottom p {
            font-size: 14px;
      }
      .form-info-items-img{
            width: 70px;
            height: 70px;
      }
      .form-info-items-bottom .badge{
            min-width: 70px;
      }
      .slider-button.slider-prev{
            left: -37px;
      }
      .slider-button.slider-next{
            right: -35px;
      }
      .modal-xl {
            max-width: 70%;
        }
        .module-hover{
            left: 2%;
        }
        .tool-hover{
            right: 2%;
      }
      .play-vedio-with-title h2{
      max-width: 750px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bg-img{
            height: 50vh;
      }
    

}
@media (max-width: 1400px) {
      .category-title {
            font-size: 14px;
      }
      .grade-list li{
            min-width: 58px;
            height: 25px;
      }
      .grade-list li a{
            font-size: 12px;
      }
}




@media (min-width: 1200px) {
      .modal-xl {
          max-width: 1000px;
      }
      .col-sm-6 .table-responsive
      {
            width: 90%;
            margin: 0 auto;
      }
}

@media screen and (min-width :1400px){
      .grade-top-bar{
              width:91% ;
            overflow: hidden;
            margin: 0 auto; 
            
          
      }
      .active-project-name p{
            max-width: 650px;
      }
    .xxl-7 .col-xxl-2{
            width: 14.2%;
      }
      .xxl-8 .col-xxl-2{
            width: 12.5%;
      } 
      .xxl-5 .col-xxl-2 {
            width: 20%;
      }
      .xxl-6 .col-xxl-2{
            width: 16.66%;
      }
}


@media screen and (min-width :1921px) {
       .header{
            height: 90px;
       }
.header-logo{
      height: 100px !important;
      width:300px !important
}
.header-logo img{
      height: 80px !important;
}
.menu-icon, .search-icon {
      width: 60px;
      height: 60px;
}
.menu-icon img, .search-icon img{
      height: 30px;
}
    .board-cards-container .board-card .card-body img {
      height: 150px !important;
    }
    .board-cards-container .grid-item .board-card
 {
        width: 400px !important;
        height: 400px !important;
    }
   .grid-item .board-card .borad-info{
      font-size: 23px !important;
    }
      .modal-body .row .col-sm-6 h3{
            font-size: 30px !important;
      }
      .grid-container{
            max-width: 100% !important;
      }
    .grid-container  .book-grid{
            width: 400px !important;
            height: 390px !important;
      }
      .tab-content .project-card .project-card-card-body p{
            font-size: 20px;
      }
      .text-single{
            font-size: 24px !important;
      }
      .text-single strong{
            font-size: 26px;
            font-weight: 700;
      }
      .explore-title{
            font-size: 20px;
      }
.sample-button{
      font-size: 24px !important;
}
.gridbox .offer .offering-card-outer{
      width:400px !important;
      height: 390px !important;
}

.gridbox .offer .offering-card-outer .offering-inner p{
     font-size: 24px !important;
}
.demo-login-main .container{
      max-width: 75% !important;
}

.demo-login-main form .form-control{
      min-height: 60px !important;
}
.demo-login-main .form-control {
      font-size: 25px !important;
}
.label{
      font-size: 25px !important;
}
.radio-btn .yes-radio label span, .radio-btn .no-radio label span{
      font-size: 16px !important;
}
#contactsubmit-btn{
      font-size: 24px;
}

.book-title h3, .book-description p, .book-grade-name p, thead th {
      font-size: 30px !important;
 }
 .sample-button{
      font-size: 18px;
 }
 tbody td, .section-header td
 {
      font-size: 25px !important;
 }
 .icon-box h6{
      font-size: 25px !important;}
      .page-label h2 {
            font-size: 30px;
      }
      .book-name p{
            font-size: 25px !important;
      }
      .play-vedio-border h2, .play-button {
            font-size: 30px !important;
      }
      .modal-title{
            font-size: 30px !important;
      }
.title-main h3{
      font-size: 35px !important;


}
.title-main p {
      font-size: 30px !important;
}
.default-button{
      font-size: 30px !important;
}
.navigation .menu-list a{
      font-size: 25px !important;
}
.book-cover-wrapper{
      justify-content: flex-start !important;
}
}