:root{
    --font-body: 'Noto Sans', sans-serif;
    --black: #000000;
    --white: #ffffff;
    --blue:#274D73;
    --blue-light:#E4F2F7;
    --blue-half : #879CB1;
    --blue-600 : #6F88A1;
    --blue-800 : #3F6182;
    --red : #DD391E;
    --red-light:#FFECED;
    --green:#33795F;
    --green-txt :#255744;
    --green-light:#C7E7DB;
    --gray:#8E8E8E;
    --gray-light : #E8E8E8;
    --border-gray :#D9D9D9;
    --border-gr : #D2D2D2;
    --activeFilter : #F4BB50;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: auto;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--black);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-width: 300px;
  width: 100%;
  max-width: 2048px;
  margin: 0 auto;
  line-height: 1.5;
}
body.scrollBlock{
  overflow: hidden;
  height: 100vh;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
}
/*Global wrapper classes*/
.noDisplay{ display: none;}

.desktopOnly{
  display: block;
}

.mobileOnly{
  display: none;
}
main{
  min-height: 100vh;
  background-color: var(--white)
}
/* .loading-fake{
  // width: 100vw;
  // height: 100vh;
  // background-color: #D1D3D4;
} */

.container{
  width: 100%;
}
.lr-pad{
    padding-left: 80px;
    padding-right: 80px;
}
.l-pad{
    padding-left: 80px;
}
.r-pad{
    padding-right: 80px;
}
.tb-pad{
    padding-top: 48px;
    padding-bottom: 48px;
}
.t-pad{
    padding-top: 80px;
}
.b-pad{
    padding-bottom: 80px;
}
h1{
    font-size: 3rem;
}
h2{
    font-size: 2.5rem;
}
h3{
    font-size: 2.125rem;
}
h4{
    font-size: 1.75rem;
}
h5{
    font-size: 1.5rem;
}
.cta-button{
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--blue);
    color: var(--white);
    background: var(--blue);
    cursor: pointer;
    font-size: 1rem;
    font-family: 400;
    font-family: var(--font-body);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.cta-button.white{
    background: var(--white);
    color: #454A53;
}
.cover-banner{
    position: relative;
    padding-top: calc(219 /1424 * 100%);
}
.cover-banner.listing_banner{
    display: none;
}
@media only screen and (min-width : 1280px){
    .cover-banner.listing_banner{
        display: block;
    }
}
.cover-banner img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.listfilters{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.filterside{
    display: flex;
    justify-content: center;
    gap: 24px;
}
.filterbox{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--black);
    padding: 16px 32px;
    position: relative;
    cursor: pointer;
}
.filterbox .count{
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%,-50%);
    padding:2px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
}
.filterbox.sort{
    border-color: transparent;
}
.filterctas{
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding: 16px 40px;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}
.filterctas .cta-button{
    flex: 1;
}
.boxed{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.boxed p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
.sort select{
    height: 100%;
    border: 1px solid var(--blue-half);
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--blue-half);
    text-align: center;
    position: relative;
    background: url('../img/sort-icon.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: calc(100% - 4px);
    -webkit-appearance: none;
    padding: 8px 16px;
    padding-right: 26px;
    outline: none;
    cursor: pointer;
    font-family: var(--font-body);
    height: 50px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 20px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #EFEFEF;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
} 
input:checked + .slider {
    background-color: var(--green);
}
input:focus + .slider {
    box-shadow: 0 0 1px var(--green);
} 
input:checked + .slider:before {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(24px);
}
.searchside{
    display: flex;
    gap: 8px;
}
.search input{
    border: 1px solid var(--border-gr);
    border-radius: 8px;
    padding: 16px;
    padding-left: 48px;
    height: 100%;
    font-family: var(--font-body);
    width: 400px;
    position: relative;
    background: url('../img/search-icon.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 16px;
    font-size: 1rem;
    font-weight: 400;
}
.togglebox{
    padding: 16px;
    background: var(--green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: 8px;
    /* border: 1px solid var(--gray-light); */
}
.togglebox.disabled{
    /* border-color: #D2D2D2; */
    background: transparent;
}
.togglebox.disabled p{
    color: #6F88A1;
}
.togglebox.disabled p svg path{
    stroke: #6F88A1;
}
.togglebox p{
    font-size: 1rem;
    font-weight: 400;
    color: var(--green-txt);
    display: flex;
    align-items: center;
    gap: 6px;
}
.togglebox p svg path{
    stroke: var(--green-txt);
}
.stickybox{
    position: sticky;
    position: -webkit-sticky;
    top: -20px;
    background: var(--white);
    z-index: 5;
    padding: 40px 0 20px 0;
}
.categories{
    position: relative;
}
.categories .swiper-slide{
    width: auto!important;
    flex: 0 0 auto;
}
.categories .swiper-slide.last-slide{
    width: 32px!important; 
    opacity: 0!important; 
    pointer-events: none!important;
}
.categories .swiper-slide .slidebox{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    opacity: 0.5;
    white-space: nowrap;
}
.categories .swiper-slide .slidebox.dot{
    position: relative;
}
.categories .swiper-slide .slidebox.dot::after{
    content: "";
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    right: 0;
    bottom: 28px;
    background: var(--blue);
}
.categories .swiper-slide .slidebox .icon{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.categories .swiper-slide .slidebox img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.categories .swiper-slide .slidebox p{
    font-size: 1rem;
    font-weight:400;
    color: var(--blue);
    display: block;
    padding: 10px 16px;
    position: relative;
}
.categories .swiper-slide .slidebox p::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--blue);
    opacity: 0;
}
.categories .swiper-slide .slidebox.selected{
    opacity: 1;
}
.categories .swiper-slide .slidebox.selected p{
    font-weight: 700;
}
.categories .swiper-slide .slidebox.selected p::after{
    opacity: 1;
}
.navbtn{
    height: 40px;
    width: 40px;
    cursor: pointer;
}
.navbtn svg{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.nav-prev[aria-disabled="true"]{
    opacity: 0;
}
.nav-next[aria-disabled="true"]{
    opacity: 0.3;
    cursor: not-allowed;
}
.nav-prev{
    transform: rotate(180deg);
}
.categories .navbtn{
    position: absolute;
    top: 24px;
    z-index: 3;
}
.categories .nav-prev,.sub-cats .nav-prev{
    left: -40px;
}
.categories .nav-next,.sub-cats .nav-next{
    right: -40px;
}
.sub-cats .navbtn{
    position: absolute;
    top: 0;
}
.sub-cats{
    margin-top: 32px;
    position: relative;
    display: none;
}
.sub-cats .swiper-slide{
    width: auto!important;
    flex: 0 0 auto;
}
.sub-cats .swiper-slide .slidebox{
    display: block;
    border: 1px solid var(--blue-800);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
}
.sub-cats .swiper-slide p{
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--blue-800);
}
.sub-cats .swiper-slide .de-select{
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.16);
    display: none;
    border-radius: 50%;
}
.sub-cats .swiper-slide .de-select svg{
    display: flex;
}
.sub-cats .swiper-slide .slidebox.active{
    background: var(--blue);
    border-color: var(--blue);
}
.sub-cats .swiper-slide .slidebox.active p{
    color: var(--white);
}
.sub-cats .swiper-slide .slidebox.active .de-select{
    display: flex;
}

.sub-cats .swiper-slide .slidebox.active svg path{
    stroke: #0F3963;
}
.sub-cats .swiper-slide .slidebox.active svg{
    border-color: var(--white);
}
.sub-cats .swiper-slide .slidebox.active svg .border{
    stroke: var(--white);
}
.listing_cont{
    margin-top: 20px;
}
.listing{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 40px 16px;
    transition:all 0.4s ease-in-out;
}
.listing .col-3{
    grid-column: span 3;
}
.doc-card{
    width: 100%;
    transition:all 0.4s ease-out;
    position: relative;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    padding-bottom: 64px;
}
.doc-card:hover{
    box-shadow: 0px 1px 16px 0px #2C4E651A;
    transform: translate3d(0,-10px,0);
    border-color: #A4A4A4;
}
.doc-card .imagebox{
    position: relative;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    padding-top: calc(234 / 306 * 100%);
}
.doc-card .imagebox img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.tag{
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.tag p{
    color: #553500;
    font-size: 12px;
    font-weight: 700;
}
.tag.toptag{
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
}
.tag.rating{
    background: linear-gradient(94.13deg, #F0EFB7 0.42%, #E3BB32 32.52%, #DAA506 100.98%);
}
.tag.avail{
    background: #181717CC;
}
.tag.avail p{
    color: #64FF8B;
}
.tag.off p{
    color: var(--white);
}
.tag.off{
    background: #DD391E;
}
.tag.view{
    background: #CFD7E01A;
}
.bottomtags{
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: calc(100% - 8px);
    display: flex;
    gap: 4px;
}
.bottomtags.two .tag:nth-child(1) p{
    display: none;
}
.doc-card .content{
    padding: 16px;
    padding-bottom: 32px;
}
.doc-card .content .name{
    display: flex;
    align-items: center;
    gap: 10px;
}
.doc-card .content .name p{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--black);
    max-width: calc(100% - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-card .content .name .country{
    height: 18px;
    width: 18px;
}
.doc-card .content .name .country img{
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
}
.doc-card .content .sub{
    font-size: 1rem;
    font-weight: 400;
    color: #3F3F3F;
    margin: 6px auto 16px auto;
}
.doc-card .tags{
    display: flex;
    gap: 8px;
    width: 100%;
    /* flex-wrap: wrap; */
}
.doc-card .tags .tg{
    flex: 1 1 auto;
    border-radius: 4px;
    color: #333333;
    font-size: 0.875rem;
    font-weight: 400;
    padding: 4px 8px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.doc-card .tags .tg:nth-child(1){
    background: var(--blue-light);
    border: 1px solid var(--blue-light);
}
.doc-card .tags .tg:nth-child(2){
    background: var(--red-light);
    border: 1px solid var(--red-light);
}
.doc-card .tags .tg:nth-child(3){
    background: var(--white);
    border: 1px solid #E8E8E8;
    width: 40px;
    max-width: 40px;
}
.doc-card .list{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.doc-card .list li{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #777777;
}
.doc-card .list li span{
    font-weight: 700;
    color: #3F6182;
}
.doc-card .list li .icon{
    height: 20px;
    width: 20px;
    flex-shrink: 0;
}
.doc-card .list li .icon img{
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
}
.doc-card .bookcta{
    width: calc(100% - 32px);
    left: 16px;
    padding: 16px;
    background: transparent;
    border: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue);
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    position: absolute;
    bottom: 16px;
    border: 1px solid var(--blue);
    transition: 0.2s ease-out;
}
.doc-card:hover .bookcta{
    background: var(--blue);
    color: var(--white);
}
.listing-content{
    display: flex;
    width: 100%;
}
.close-filt{
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.close-filt svg{
    height: 100%;
    width: 100%;
    display: flex;
}
.listing-content .right{
    width: 100%;
    transition:all 0.4s ease-out;
}
.listing-content.filteropen .filter-container{
    width: 100%; 
    padding: 24px 0;
}
.listing-content .left.main-filter{
    
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    visibility: hidden;
}
.listing-content .left.main-filter.filteropen{
    visibility: visible;
}
.filter-container{
    background: #CFD7E01A;
    width: 348px;
    border-right: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
    background: var(--white);
    overflow: hidden;
    height: 100%;
    position: relative;
    left: -100%;
    transition:all 0.4s ease-out;
    transition-delay: 0s;
}
.listing-content .left.main-filter.filteropen .filter-container{
    left: 0;
}
.filter-container .top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 40px;
    padding-right: 40px;
}
.filter-container .top-bar p{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--black);
}
.filter-container .filters_list{
    padding: 0 40px;
    height: calc(100vh - 160px);
    overflow: auto;
}
.filters_list .filterlistcont .titlebox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 0 0;
    cursor: pointer;
}
.filters_list .filterlistcont .titlebox .lft{
    display: flex;
    gap: 6px;
    align-items: center;
}
.filters_list .filterlistcont .titlebox span{
    font-size: 12px;
    color: var(--blue);
    padding: 2px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    min-width: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
}
.filters_list .filterlistcont{
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 16px;
}
.filters_list .filterlistcont:nth-child(3){
    border-top: 1px solid #D9D9D9;
    /* padding-top: 0; */
}

.filters_list .filterlistcont .titlebox p{
    font-size: 0.875rem;
    font-weight: 700;
    color: #333333;
    pointer-events: none;
}
.filter-container .titlebox .drop{
    transition:all 0.4s ease-out;
    pointer-events: none;
}
.filter-container .titlebox .drop svg{
    display: flex;
}
.filterlistcont.dropped .titlebox .drop{
    transform: rotate(180deg);
}
.filters_list .filterlistcont .dropbox{
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-out;
}
.filters_list .filterlistcont .search{
    width: 100%;
    margin-top: 16px;
}
.filters_list .filterlistcont .search input{
    width: 100%;
}
.filters_list .list .filt_list{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 400;
    padding-left: 16px;
}
.filt_list input{
    accent-color: var(--blue-600);
    flex-shrink: 0;
}
.filt_list {
    cursor: pointer;
}
.filt_list .text{
    width: 100%;
}
.filt_list .count{
    padding: 0px 8px;
    border-radius: 999px;
    background: var(--blue-600);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 400;
    flex-shrink: 0;
}
.filterlistcont .list{
    max-height: 135px;
    overflow: auto;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    padding-bottom: 16px;
}
.filterlistcont .list::-webkit-scrollbar {
    width: 4px;
}
.filterlistcont .list::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.filterlistcont .list::-webkit-scrollbar-thumb {
    background: #D9D9D9; 
}
.filterlistcont .list::-webkit-scrollbar-thumb:hover {
    background: #D9D9D9; 
}
.sub-cats .top-bar{
    display: none;
}
.sub-cats .bottom{
    display: none;
}
.listtitle{
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}
.listtitle .left_count{
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.listtitle p{
    font-size: 1rem;
    font-weight: 600;
    color: #0F3963;
}
.listtitle span{
    font-size: 0.875rem;
    color: #879CB1;
}
.listtitle .right_sort{

}
.cattitle{
    display: none;
}

.listing tr{
    grid-column: span 3;
}
.listing tr td{
    display: block;
    width: 100%;
    height: 100%;
}
.listing tr td .col-3,.listing tr td .doc-card{
    height: 100%;
}
#trainer_list{
    width: 100%!important;
}
.d-none{
    display: none;
}
.sort-btn-block {
  position: relative;
  width: 200px;
  font-family: sans-serif;
}

.sort-btn {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sort-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 1000;
  display: none; /* initially hidden */
}

.sort-menu li a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #333;
}

.sort-menu li a:hover {
  background-color: #f0f0f0;
}
#trainer_list_filter{
    display: none;
}
#cover-spin{
    position: fixed;
    z-index: 999;
    background: rgba(255,255,255,0.16);
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  --b: 8px; 
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,var(--blue)) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation:l4 1s infinite steps(10);
}
.trainer_list_processing{
    width: 100%;
}
.overlay-spinner{
    display: flex!important;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.active_filters{
    position: relative;
    margin-top: 20px;
    display: flex;
    gap: 10px;
}
.active_filters p.topactfilts{
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    font-size: 14px;
    color: #20B7DC;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.active_filters p.allfilters{
    position: relative;
    width: 90px;
    font-size: 14px;
    color: #20B7DC;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: flex-end;
}
.active_filters p.allfilters.hidden{
    display: none;
}
.active_filters p.allfilters .all{
    display: block;
}
.active_filters p.allfilters .less{
    display: none;
}
.active_filters p.allfilters.shown .all{
    display: none;
}
.active_filters p.allfilters.shown .less{
    display: block;
}
.active_filters .act_fitls_cont{
    width: calc(100% - 100px);
    overflow: auto;
    padding: 8px 0;
}
.active_filters .act_fitls_cont .actfiltflex{
    width: max-content;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}
.active_filters .act_fitls_cont .actfiltflex .filter-selection.d-none{
    display: none;
}
.active_filters .act_fitls_cont .actfiltflex .filter-selection{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}
.active_filters .act_fitls_cont .actfiltflex.shown{
    width: 100%;
    flex-wrap: wrap;
}
.active_filters .act_fitls_cont .actfiltflex.shown .filter-selection{
    flex-wrap: wrap;
}
.active_filters .actfilter{
    display: flex;
    align-items: center;
    background: #E7EBEF;
    padding: 4px 8px;
    border-radius: 999px;
}
.active_filters .actfilter span{
    font-size: 12px;
    color: #333333;
    font-weight: 400;
}
.active_filters .actfilter .closefilter{
    font-size: 12px;
    color: #333333;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
}
.active_filters .act_fitls_cont::-webkit-scrollbar {
    height: 4px;
}
.active_filters .act_fitls_cont::-webkit-scrollbar-thumb {
    background: var(--blue);
}
@keyframes l4 {to{transform: rotate(1turn)}}
/* large  */
@media only screen and (max-width: 1200px) {
    .lr-pad{
        padding-left: 60px;
        padding-right: 60px;
    }
    .search input{
        width: 360px;
    }
    .listing {
        grid-template-columns: repeat(9,1fr);
    }
}
/* tab  */
@media only screen and (max-width: 991px) {
    .mobileOnly{
        display: block;
    }
    .desktopOnly{
        display: none;
    }
    .lr-pad{
        padding-left: 16px;
        padding-right: 16px;
    }
    .l-pad{
        padding-left: 16px;
    }
    .r-pad{
        padding-right: 16px;
    }
    .tb-pad{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .t-pad{
        padding-top: 40px;
    }
    .b-pad{
        padding-bottom: 40px;
    }
    .togglebox{
        display: none;
    }
    .filterside .sort{
        display: none;
    }
    .listfilters{
        flex-direction: row-reverse;
    }
    .filterside .boxed p{
        display: none;
    }
    .filterbox{
        height: 52px;
        width: 52px;
    }
    .searchside {
        max-width: calc(100% - 92px);
    }
    .searchside .search{
        width: 100%;
    }
    .searchside .search input{
        max-width: 100%;
    }
    .categories .swiper-slide .slidebox{
        flex-direction: row;
    }
    .categories .swiper-slide .slidebox p{
        padding: 10px 16px 10px 12px;
    }
    .categories .swiper-slide .slidebox.selected{
        background: var(--blue);
        border-radius: 999px;
    }
    .categories .swiper-slide .slidebox.selected p{
        color: var(--white);
    }
    .categories .swiper-slide .slidebox .icon{
        padding-left: 8px;
    }
    .categories .swiper-slide .slidebox.selected img{
        filter: brightness(0) invert(1);
    }
    .categories .swiper-slide .slidebox p::after{
        display: none;
    }
    .categories .navbtn{
        top: 2px;
        height: 30px;
        width: 30px;
    }
    .filter-container .top-bar{
        padding-top: 0;
    }
    .categories .navbtn{
        top: 6px;
    }
    .categories .nav-next {
        right: -15px;
    }
    .categories .nav-prev {
        left: -15px;
    }
    .doc-card:hover{
        transform: none;
        box-shadow: none;
        border-color:#E8E8E8;
    }
    .listing{
        grid-template-columns: repeat(6,1fr);
    }
    .doc-card .content{
        text-align: center;
        padding: 16px 4px;
        padding-bottom: 16px;
    }
    .doc-card .content .sub{
        font-size: 0.75rem;
        margin: 6px auto 0 auto;
    }
    .doc-card .content .name{
        justify-content: center;
    }
    .doc-card .tags{
        display: none;
    }
    .doc-card .list li{
        justify-content: center;
        display: none;
        font-size: 0.875rem;
    }
    .doc-card .list li:nth-child(1){
        display: flex;
    }
    .doc-card .list li .tohide{
        display: none;
    }
    .doc-card{
        padding-bottom: 48px;
    }
    .doc-card .bookcta{
        width: 100%;
        left: 0;
        margin-bottom: 0;
        border-radius: 0 0 8px 8px;
        font-size: 0.875rem;
        bottom: 0;
        white-space: nowrap;
    }
    .doc-card .content .name p{
        font-size: 1rem;
    }
    .doc-card .list{
        margin-top: 8px;
    }
    .categories{
        padding: 0 8px;
    }
    .listing-content .left.main-filter{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        border-top: 1px solid #E8E8E8;
        border-radius: 8px 8px 0 0;
        overflow: hidden;
        transform: translateY(100%);
        transition:all 0.3s ease-in;
        height: 100svh;
    }
    .filter-container{
        width: 100%;
        background: var(--white);
        padding: 40px 0px 24px 0px;
        left: 0;
    }
    .listing-content.filteropen .right{
        width: 100% ;
    }
    .listing-content.filteropen .filterside{
        display: block;
    }
    .listing-content .left.main-filter.filteropen{
        transform: translateY(0%);
    }
    .filters_list{
        max-height: calc(100svh - 160px);
        overflow: auto;
    }
    .sub-cats{
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        border-top: 1px solid #E8E8E8;
        border-radius: 8px 8px 0 0;
        background: var(--white);
        overflow: hidden;
        padding: 24px;
        transform: translateY(100%);
        transition: 0.4s all ease-out;
    }
    .sub-cats .top-bar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 24px;
    }
    .sub-cats .top-bar p{
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--black);
    }
    .sub-cats .top-bar .close-subcat{
        display: flex;
        align-items: center;
    }
    .sub-catslider{
        max-height: calc(100svh - 350px);
        overflow: auto;
    }
    .sub-cats .navbtn{
        display: none;
    }
    .sub-cats .swiper-wrapper{
        flex-wrap: wrap;
        gap: 16px;
    }
    .filterbox .count{
        font-size: 12px;
        padding: 2px;
    }
    .sub-cats .bottom{
        display: block;
        margin-top: 24px;
    }
    .listtitle{
        display: flex;
        align-items: flex-end;
        margin-bottom: 16px;
        gap: 6px;
    }
    .listtitle p{
        font-size: 0.875rem;
        font-weight: 600;
        color: #0F3963;
    }
    .listtitle span{
        font-size: 12px;
        color: #879CB1;
    }
    .stickybox{
        padding: 24px 0 16px 0;
    }
    .cattitle{
        display: block;
        margin-bottom: 8px;
        padding-left: 8px;
    }
    .cattitle p{
        font-size: 1rem;
        font-weight: 700;
        color: #0F3963;
    }
    .sort select{
        font-size: 12px;
        padding: 8px;
        padding-right: 22px;
        height: auto;
    }
    .doc-card .bookcta{
        background: var(--blue);
        color: var(--white);
    }
    .active_filters .act_fitls_cont{
        width: 100%;
    }
    .active_filters p.allfilters{
        position: absolute;
        top: 0;
        transform: translateY(-100%);
        right: 16px;
    }
}
/* less tab  */
@media only screen and (max-width: 767px) {

}
/* mobile  */
@media only screen and (max-width: 563px) {

}