:root{
    --bs-body-color: #000000;
    --bs-dark: #000000;
    --bs-primary: #d2afa3;
    --bs-primary-active: #b57f6e;
    --bs-secondary: #e9d9d1;
    --bs-brand-primary: #0e2e29;
    --bs-brand-secondary: #779d93;
}

@font-face {font-family: 'avenirbook';
    src: url('../fonts/avenir-book.woff2') format('woff2'),
    url('../fonts/avenir-book.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {font-family: 'avenirmedium';
    src: url('../fonts/avenir-medium.woff2') format('woff2'),
    url('../fonts/avenir-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {font-family: 'avenirroman';
    src: url('../fonts/avenir-roman.woff2') format('woff2'),
    url('../fonts/avenir-roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {font-family: 'avenirblack';
    src: url('../fonts/avenir-black.woff2') format('woff2'),
    url('../fonts/avenir-black.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {font-family: 'avenirheavy';
    src: url('../fonts/avenir-heavy.woff2') format('woff2'),
    url('../fonts/avenir-heavy.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {font-family: 'beyond_sweetregular';
    src: url('../fonts/beyondsweet.woff2') format('woff2'),
    url('../fonts/beyondsweet.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
  font-family: 'academy';
  src:  url('../fonts/academy.eot?fp6gwg');
  src:  url('../fonts/academy.eot?fp6gwg#iefix') format('embedded-opentype'),
    url('../fonts/academy.ttf?fp6gwg') format('truetype'),
    url('../fonts/academy.woff?fp6gwg') format('woff'),
    url('../fonts/academy.svg?fp6gwg#academy') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;}

[class^="ac-"], [class*=" ac-"] {
  font-family: 'academy' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}

.ac-user:before {content: "\e900";}
.ac-bell:before {content: "\e901";}
.ac-search-o:before {content: "\e902";}
.ac-menu:before {content: "\e903";}
.ac-play:before {content: "\e904";}
.ac-search:before {content: "\e905";}
.ac-lock:before {content: "\e906";}
.ac-listview:before {content: "\e907";}
.ac-gridview:before {content: "\e908";}
.ac-facebook:before {content: "\e909";}
.ac-instagram:before {content: "\e910";}
.ac-eye:before {content: "\e911";}
.ac-add:before {content: "\e912";}
.ac-minus:before {content: "\e913";}
.ac-check:before {content: "\e914";}
.ac-arrow-left:before {content: "\e915";}
.ac-arrow-right:before {content: "\e916";}
.ac-arrow-up:before {content: "\e917";}
.ac-arrow-down:before {content: "\e918";}
.ac-calendar:before {content: "\e919";}
.ac-home:before {content: "\e920";}
.ac-map:before {content: "\e921";}
.ac-date:before {content: "\e922";}
.ac-time:before {content: "\e923";}
.ac-reset:before {content: "\e924";}
.ac-person:before {content: "\e925";}
.ac-mail:before {content: "\e926";}
.ac-call:before {content: "\e927";}
.ac-image:before {content: "\e928";}
.ac-twitter:before {content: "\e929";}
.ac-youtube:before {content: "\e930";}
.ac-linkedin:before {content: "\e931";}
.ac-brush:before {content: "\e932"; transform: scaleX(-1); display: inline-flex;}
.ac-trash:before {content: "\e933";}

html, body { height: 100%; }
.avenirbook{font-family:'avenirbook',sans-serif;}
.avenirmedium{font-family:'avenirmedium',sans-serif;}
.avenirroman{font-family:'avenirroman',sans-serif;letter-spacing:1px}
.avenirblack{font-family:'avenirblack',sans-serif;}
.avenirheavy{font-family:'avenirheavy',sans-serif;}
.cursive-text{font-family: 'beyond_sweetregular',sans-serif;}

body{margin: 0;font-family:'avenirroman',sans-serif; color: #000000; font-size: 14px; line-height: 22px;}

h1, h2, h3, h4, h5, h6, strong, b{font-family: 'avenirmedium',sans-serif;}

html, body {height: auto; scroll-behavior: smooth;}

.fs-10{font-size:10px!important}
.fs-11{font-size:11px!important}
.fs-12{font-size:12px!important}
.fs-13{font-size:13px!important}
.fs-14{font-size:14px!important}
.fs-15{font-size:15px!important}
.fs-16{font-size:16px!important}
.fs-17{font-size:17px!important}
.fs-18{font-size:18px!important}
.fs-19{font-size:19px!important}
.fs-20{font-size:20px!important}
.fs-21{font-size:21px!important}
.fs-22{font-size:22px!important}
.fs-23{font-size:23px!important}
.fs-24{font-size:24px!important}
.fs-25{font-size:25px!important}
.fs-26{font-size:26px!important}
.fs-27{font-size:27px!important}
.fs-28{font-size:28px!important}
.fs-29{font-size:29px!important}
.fs-30{font-size:30px!important}
.fs-31{font-size:31px!important}
.fs-32{font-size:32px!important}
.fs-33{font-size:33px!important}
.fs-34{font-size:34px!important}
.fs-35{font-size:35px!important}
.fs-40{font-size:40px!important}
.fs-45{font-size:45px!important}
.fs-50{font-size:50px!important}

.w10{width:10px!important;min-width:10px!important;max-width:10px!important}
.w20{width:20px!important;min-width:20px!important;max-width:20px!important}
.w30{width:30px!important;min-width:30px!important;max-width:30px!important}
.w40{width:40px!important;min-width:40px!important;max-width:40px!important}
.w50{width:50px!important;min-width:50px!important;max-width:50px!important}
.w60{width:60px!important;min-width:60px!important;max-width:60px!important}
.w70{width:70px!important;min-width:70px!important;max-width:70px!important}
.w80{width:80px!important;min-width:80px!important;max-width:80px!important}
.w90{width:90px!important;min-width:90px!important;max-width:90px!important}
.w100{width:100px!important;min-width:100px!important;max-width:100px!important}
.w110{width:110px!important;min-width:110px!important;max-width:110px!important}
.w120{width:120px!important;min-width:120px!important;max-width:120px!important}
.w130{width:130px!important;min-width:130px!important;max-width:130px!important}
.w140{width:140px!important;min-width:140px!important;max-width:140px!important}
.w150{width:150px!important;min-width:150px!important;max-width:150px!important}
.w160{width:160px!important;min-width:160px!important;max-width:160px!important}
.w170{width:170px!important;min-width:170px!important;max-width:170px!important}
.w180{width:180px!important;min-width:180px!important;max-width:180px!important}
.w190{width:190px!important;min-width:190px!important;max-width:190px!important}
.w200{width:200px!important;min-width:200px!important;max-width:200px!important}
.w210{width:210px!important;min-width:210px!important;max-width:210px!important}
.w220{width:220px!important;min-width:220px!important;max-width:220px!important}
.w230{width:230px!important;min-width:230px!important;max-width:230px!important}
.w240{width:240px!important;min-width:240px!important;max-width:240px!important}
.w250{width:250px!important;min-width:250px!important;max-width:250px!important}
.w260{width:260px!important;min-width:260px!important;max-width:260px!important}
.w270{width:270px!important;min-width:270px!important;max-width:270px!important}
.w280{width:280px!important;min-width:280px!important;max-width:280px!important}
.w290{width:290px!important;min-width:290px!important;max-width:290px!important}
.w300{width:300px!important;min-width:300px!important;max-width:300px!important}
.w310{width:310px!important;min-width:310px!important;max-width:310px!important}
.w320{width:320px!important;min-width:320px!important;max-width:320px!important}
.w330{width:330px!important;min-width:330px!important;max-width:330px!important}
.w340{width:340px!important;min-width:340px!important;max-width:340px!important}
.w350{width:350px!important;min-width:350px!important;max-width:350px!important}
.w380{width:380px!important;min-width:380px!important;max-width:380px!important}
.w400{width:400px!important;min-width:400px!important;max-width:400px!important}
.mw-200px{max-width: 200px;}
.mw-650px{max-width: 650px;}
.mw-780px{max-width: 780px;}

.btn{font-size: 14px; min-height: 35px;}
.btn.btn-outline-light:hover, .btn.btn-outline-light.active{background-color: #57585b; color: var(--bs-white);}
.btn.btn-outline-primary:hover, .btn.btn-outline-primary.active{color: var(--bs-white) !important;}
.btn.btn-outline-brand-primary{color: var(--bs-brand-primary); border-color: var(--bs-brand-primary);}
.btn.btn-outline-brand-primary:hover, .btn.btn-outline-brand-primary:focus, .btn.btn-outline-brand-primary:active{color: var(--bs-white); background-color: var(--bs-brand-primary);}
.btn.btn-brand-primary{background-color: var(--bs-brand-primary); color: var(--bs-white); border: none;}
.btn.btn-brand-primary:hover, .btn.btn-brand-primary:focus, .btn.btn-brand-primary:active{background-color: var(--bs-brand-primary); opacity: 0.85; color: var(--bs-white);}

.btn.btn-icon {width: 35px; height: 35px; padding: 6px; min-width: 35px; min-height: 35px;}
.btn.btn-with-icon {display: flex; align-items: center;}

.table-responsive{scrollbar-color:var(--bs-primary) transparent!important;scrollbar-width:thin!important}
.table-responsive::-webkit-scrollbar{width:5px;height:5px}
.table-responsive::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px #fff0;box-shadow:inset 0 0 6px #fff0;background-color:#fff0}
.table-responsive::-webkit-scrollbar-thumb{background-color:var(--bs-primary)}
.gecko .table-responsive{scrollbar-color:var(--bs-primary) transparent!important;scrollbar-width:thin!important}
.firefox .table-responsive{scrollbar-color:var(--bs-primary) transparent!important;scrollbar-width:thin!important}
.table-responsive:hover{scrollbar-color:var(--bs-primary) transparent!important;scrollbar-width:thin!important}

.topstrip {padding: 10px 0;}
.topstrip a{text-decoration:none}
.topstrip a.menu-icon{color: var(--bs-white); font-size: 20px; display: inline-flex;}
.topstrip a.menu-link{color: var(--bs-white); font-size: 13px; display: inline-flex;}
.topstrip a.menu-link:hover, .topstrip a.menu-icon:hover{color: var(--bs-primary);}
.top-search label{color: var(--bs-white); font-size: 16px; margin-right: 5px; cursor: pointer;}
.top-search .search-input{border: none; outline: none; color: var(--bs-white); padding: 5px; border-radius: 0; width: 280px; font-size: 14px; background-color: transparent;}
.top-search .search-input::placeholder{color: var(--bs-white); opacity: .7;}

.navbar-light .navbar-nav .nav-link.noline::before{display: none;}
.navbar-light .navbar-nav .nav-link {font-family: 'avenirmedium', sans-serif; position: relative; margin-left: 30px; padding: 30px 0; font-size: 14px; color: var(--bs-dark); outline: none; transition: .5s;}
.navbar-light .navbar-nav .nav-link.dropdown-toggle {padding-right: 18px; display: flex; align-items: center;}
.dropdown-toggle::after {content: "\e918"; font-family: 'academy' !important; border: 0; font-size: 18px; position: absolute; right: 0; width: 18px; margin: 0; line-height: 14px;}
.navbar-light .navbar-nav .nav-link .notification, .notification{font-size: 20px; padding: 0 3px; display: inline-flex; position: relative;}
.navbar-light .navbar-nav .nav-link .notification span, .notification span {position: absolute; top: -5px; right: -8px; background: var(--bs-danger); color: var(--bs-white); font-size: 11px; width: 18px; height: 18px; border-radius: 16px; display: flex; align-items: center; justify-content: center;}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active {color: var(--bs-primary-active);}
.navbar-light .navbar-nav .nav-link:hover svg path, .navbar-light .navbar-nav .nav-link.active svg path{fill: var(--bs-primary-active);}
.navbar-device .dropdown-toggle::after{display: none;}
.navbar-device .search-mobile .dropdown-menu{top: 54px; background-color: var(--bs-dark);}
.dropdown-menu .dropdown-item{font-size: 14px;}

.bg-light-gray {background-color: #f8f9fa;}
.rounded-custom {border-radius: 15px;}
.content-card {background-color: #ced4da; padding: 25px 30px; border-radius: 20px; text-align: center; position: absolute; right: 0; top: 0; bottom: 0; max-height: 290px; max-width: 550px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.content-card h2 {letter-spacing: 1px; font-size:24px; color: var(--bs-dark);}
.main-product-img {max-width: 75%; object-fit: contain;}
#medik8Carousel .carousel-item {transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out; max-height: 635px;}
#medik8Carousel .carousel-fade .carousel-item {opacity: 0; transition-property: opacity; transform: none;}
#medik8Carousel .carousel-fade .carousel-item.active {opacity: 1;}
#medik8Carousel.carousel .carousel-indicators{bottom: -40px;}
#medik8Carousel.carousel .carousel-indicators [data-bs-target]{width: 10px; height: 10px; border: 0; border-radius: 50px; background-color: var(--bs-dark);}

.dropdown-menu{box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.20); border: 0; z-index: 1021;}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active{background-color: var(--bs-primary); color: var(--bs-white);}

.halfbg-color{background: linear-gradient(0deg, #e6d7d0 15%, var(--bs-white) 15%);}
.brands-social-wrap{background-color: #e6d7d0;}

.brands-cont{gap: 2px; border-radius: 25px; overflow: hidden; border: 1px solid var(--bs-primary);}
.brands-cont h3{background-color: var(--bs-white); color: var(--bs-dark); font-size: 16px; text-align: center; padding: 12px;}
.social-carousal{min-width: 330px;}
/* ---- Carousel frame ---- */
.carousel.vertical {max-width: 300px; margin: 0;}
/* Keep a consistent height like a placeholder image */
.carousel.vertical .carousel-inner {height: 240px; overflow: hidden; padding: 10px 40px;}
/* Make each item fill the inner height */
.carousel.vertical .carousel-item {height: 240px; text-align: center; padding: 8px 0;}
.carousel.vertical .carousel-item img{height: 100%; width: auto;}
.carousel.vertical .carousel-item-next,
.carousel.vertical .carousel-item-prev,
.carousel.vertical .carousel-item.active {display: block;}
/* Starting positions for incoming slides */
.carousel.vertical .carousel-item-next.carousel-item-start,
.carousel.vertical .carousel-item-prev.carousel-item-end {transform: translateY(0);}
/* Active slide leaves up/down */
.carousel.vertical .carousel-item.active.carousel-item-start {transform: translateY(-100%);}
.carousel.vertical .carousel-item.active.carousel-item-end {transform: translateY(100%);}
/* Incoming slide enters from below/above */
.carousel.vertical .carousel-item-next {transform: translateY(100%);}
.carousel.vertical .carousel-item-prev {transform: translateY(-100%);}
/* Smooth transition (Bootstrap uses CSS vars) */
.carousel.vertical .carousel-item {transition: transform .6s ease-in-out;}
/* ---- Controls below ---- */
.carousel-controls-below {display: flex; gap: 12px; justify-content: center; max-width: 300px;}

.brand-slider {padding: 20px 0;}
.brand-slider .swiper-slide {display: flex; align-items: center; justify-content: center;}
.brand-slider img {max-height: 40px; max-width: 100px; width: auto; filter: grayscale(100%); opacity: 0.85; transition: all 0.3s ease;}
.brand-slider img:hover {filter: grayscale(0%); opacity: 1;}

.footer-bar{background: #000; color: rgba(255,255,255,.85);}
.footer-bar .container{display: flex; align-items: center; z-index: 5; padding: 15px 0;}
.footer-left{font-size: 14px; letter-spacing: .2px; white-space: nowrap;}
.footer-right{margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--bs-white);}
.footer-right img{height: 34px; width: auto;}

.back-to-top {position: fixed; display: none; right: 30px; bottom: 0; border-radius: 50% 50% 0 0; z-index: 99; padding: 10px 10px 0px;}

.page-title, .page-title > span{font-family: 'avenirmedium',sans-serif; font-size: 40px; text-transform: uppercase; position: relative; border-bottom: 2px solid rgb(0 0 0 / 40%);}
.page-title > span:after {content: ""; height: 2px; width: 100%; background-color: rgb(0 0 0 / 40%); display: block; position: absolute; bottom: -2px;}
.profile-container {text-align: center; padding: 20px 0;}
/* Profile Image */
.profile-image-wrapper {position: relative; width: 100px; margin: 0 auto 20px;}
.profile-image {width: 100px; height: 100px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; border: 1px solid rgb(0 0 0 / 30%);}
.profile-image img {width: 100%; height: 100%; object-fit: cover;}
.profile-image-edit-btn { position: absolute; bottom: 4px; right: 4px; width: 28px; height: 28px; background: var(--bs-dark); color: var(--bs-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.25);}
.profile-image-edit-btn:hover {background: var(--bs-primary);}
.line-divider{position: relative; text-align: center;}
.line-divider:before{content: ""; height: 1px; width: 100%; background-color: var(--bs-dark); display: block; position: absolute; top: 0; bottom: 0; margin: auto;}
.line-divider .profile-image{z-index: 1; position: relative;}
.line-divider.half:before{max-width: 400px; background-color: var(--bs-primary); left: 0; right: 0;}
.line-divider .line-heading {font-size: 18px; color: var(--bs-primary-active); margin: auto; display: inline-block; text-align: center; background-color: var(--bs-white); position: relative; z-index: 1; padding: 5px 15px; text-transform: uppercase;}
.line-divider.line-primary:before{background-color: var(--bs-primary);}
/* Name */
.profile-name {font-size: 20px; letter-spacing: 0.5px; display: inline-block; padding-bottom: 4px; border-bottom: 2px solid rgb(0 0 0 / 40%); margin-bottom: 16px; text-transform: uppercase;}
.clinic-name{font-size: 18px; letter-spacing: 0.5px; display: inline-block; padding-bottom: 4px; color: var(--bs-primary-active);}
/* Info row */
.profile-info {font-size: 14px; color: #000; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;}
.profile-info span {white-space: nowrap;}
.divider {opacity: 0.6;}
.profile-categories {display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
.profile-categories > span{border: 1px solid var(--bs-primary); font-size: 14px; padding: 8px 15px; border-radius: 50px; cursor: pointer;}
.profile-categories > span:hover, .profile-categories > span.selected, .profile-categories > span.active{background-color: var(--bs-primary-active); color: var(--bs-white);}

.table.table-bordered thead tr th{color: var(--bs-primary-active); font-size: 14px;}
.table.table-bordered tbody tr td{font-size: 14px; color: var(--bs-dark);}
.table-striped > tbody > tr:nth-of-type(odd) > *{background-color: #fcf6f3;}

.card{border-radius: 0; border: 0;}
.halfbg-wrapper{background: linear-gradient(#e6d7d0 0%, #e6d7d0 350px, var(--bs-white) 0, var(--bs-white) 100% );}
.filter-toolbar {display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;}
/* Search box */
.filter-toolbar .search-box, .filter-toolbar .sort-box {display: flex; align-items: center; width: 300px; height: 40px; border: 1px solid #939598; border-radius: 999px; padding: 6px 12px; position: relative;}
.filter-toolbar .search-box input, .filter-toolbar .sort-box select {border: none; outline: none; flex: 1; font-size: 14px; padding: 6px;}
.filter-toolbar .search-box button {background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px; line-height: 12px;}
.filter-toolbar .search-box:after, .filter-toolbar .sort-box:after{content: ""; height: 100%; width: 1px; background-color: #939598; display: block; position: absolute; top: 0; bottom: 0; right: 40px;}
.select2-container{width: 100%;}
.select2-container .select2-selection--single{height: 32px; line-height: 32px; display: flex;}
.select2-container .select2-selection--single .select2-selection-rendered{padding: 0 30px 0 5px; width: 100%;}
.select2-container .select2-selection--single .select2-selection-arrow{position: absolute; right: 0; top: 10px; line-height: 10px;}
.select2-container .select2-selection--single .select2-selection-arrow:before{content: "\e918"; font-family: 'academy' !important; font-size: 22px;}
.select2-container .select2-selection--single .select2-selection-clear{display: none;}
.select2-container .select2-dropdown {border-radius: 0; border-color: var(--bs-primary); top: -4px;}
.select2-container .select2-dropdown .select2-search--dropdown .select2-search-field{outline: 0;}
.select2-container .select2-dropdown .select2-results .select2-results-options .select2-results-option{padding: 8px; color: var(--bs-black);}
.select2-container .select2-dropdown .select2-results .select2-results-options .select2-results-option:hover{background-color: var(--bs-secondary);}
/* Sort dropdown */

.form-group {margin-bottom: 10px;}
.form-group label{font-size: 14px; color: var(--bs-dark); margin-bottom: 5px;}
.form-group .form-control, .form-control{font-size: 14px; border-color: var(--bs-primary); border-radius: 5px; min-height: 35px;}
.form-group select.form-control{-webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../images/select_arrow.svg); background-repeat: no-repeat; background-position: calc(100% - 12px); padding-right: 32px !important; background-size: 11px;}
.form-group .form-control:focus, .form-control:focus, .form-group select.form-control:focus{border-color: var(--bs-primary);}
.form-control.timeonly{text-transform: uppercase;}
.form-group textarea, textarea{resize: none;}
.input-icon {position: relative;}
.input-icon .icon{color: var(--bs-primary-active); font-size: 18px; position: absolute; right: 8px; top: 8px; cursor: pointer;}
.input-icon .form-control{padding-right: 30px;}
.error, .required{font-size: 13px; color: #f00;}

/* Modal */
.modal-backdrop.show{opacity: 0.8;}
.modal .modal-body{padding: 25px;}
.modal .modal-body .modal-title{font-size: 24px; text-transform: uppercase;}
.modal .modal-footer{border-color: var(--bs-primary); padding: 20px 25px; gap: 20px;}
.modal .modal-footer .btn{margin: 0;}
/* Modal */

.brand-banner, .banner-wrapper{display: flex; align-items: center; justify-content: center; position: relative;}
.brand-banner .brand-logo, .banner-wrapper .brand-logo{position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.banner-wrapper .banner-title {font-size: 55px; text-transform: uppercase; padding-bottom: 2px; border-bottom: 2px solid rgb(0 0 0 / 40%);}
.banner-wrapper .brand-logo img + .banner-title {border: 0; position: relative;}
.banner-wrapper .brand-logo img + .banner-title:before {content: ""; height: 2px; width: 65%; background-color: rgb(0 0 0 / 40%); display: block; margin: 0 auto 18px;}
.brand-primary-light-bg-25{background-color: color-mix( in srgb, var(--bs-brand-primary) 25%, var(--bs-white));}
.brand-primary-light-bg-10{background-color: color-mix( in srgb, var(--bs-brand-primary) 10%, var(--bs-white));}
.brand-product-img img{border-radius: 10px;}
.brand-sub-title{display: inline-block; padding-bottom: 2px; border-bottom: 2px solid rgb(0 0 0 / 40%);}
.faq-search label{font-size: 20px; line-height: 18px;}
.faq-search .search-input{width: 100%; background-color: transparent; border: none; outline: 0; padding: 5px 10px;}
.brand-link{color: var(--bs-brand-primary);}
.brand-logo-img{display: flex; align-items: center; justify-content: center; border: 1px solid var(--bs-dark); border-radius: 10px; overflow: hidden; min-height: 180px; padding: 10px; max-height: 180px;}
.brand-logo-img:hover, .brand-logo-img.selected{background-color: color-mix( in srgb, var(--bs-brand-primary) 20%, var(--bs-white));}
.bg-brand-primary{background-color: var(--bs-brand-primary);}
.bg-brand-secondary{background-color: var(--bs-brand-secondary);}
.text-brand-primary{color: var(--bs-brand-primary);}
.text-brand-secondary{color: var(--bs-brand-secondary);}
.course-banner-img {background-color: var(--bs-brand-primary); display: flex; align-items: center; justify-content: center;}
.halfbg-brand-primary-wrapper{background: linear-gradient(color-mix( in srgb, var(--bs-brand-primary) 25%, var(--bs-white)) 0%, color-mix( in srgb, var(--bs-brand-primary) 25%, var(--bs-white)) 350px, var(--bs-white) 0, var(--bs-white) 100% );}
.card-title {font-size: 22px; text-transform: uppercase;}
.course-detail-card .couese-title{font-size: 20px; text-transform: uppercase;}
.video-box {border: 1px solid #939598; display: flex; align-items: center; justify-content: center;}
.course-modules-card h4{background-color: var(--bs-brand-primary); color: var(--bs-white); font-size: 20px; text-transform: uppercase; padding: 12px 15px; margin-bottom: 0;}
.course-modules-card .mod_ul{margin: 0; padding: 0; list-style-type: none; border: 1px solid color-mix( in srgb, var(--bs-brand-primary) 15%, var(--bs-white));}
.course-modules-card .mod_ul li{text-transform: uppercase; padding: 8px 15px; border-top: 1px solid color-mix( in srgb, var(--bs-brand-primary) 15%, var(--bs-white)); display: flex; justify-content: space-between; align-items: center;}
.course-modules-card .mod_ul li:first-child {border-top: 0;}
.course-modules-card .mod_ul li.mod_check{font-weight: bold; color: var(--bs-brand-primary); background-color: color-mix( in srgb, var(--bs-brand-primary) 20%, var(--bs-white));}
.course-modules-card .mod_ul li.mod_check .check-circle{background-color: var(--bs-brand-primary);}
.course-modules-card .mod_ul li.mod_complete{background-color: color-mix( in srgb, var(--bs-brand-primary) 10%, var(--bs-white));}
.course-modules-card .mod_ul li.mod_complete a{color: var(--bs-dark);}
.course-modules-card .mod_ul li.mod_locked{opacity: 0.6;}
.thumb-icon{font-size: 110px; line-height: 110px; display: block;}
.card-body{min-height: 640px;}

.faq-accordion {max-width: 100%;}
.faq-accordion .accordion-item {border: none; background: transparent; margin-bottom: 20px;}
.faq-accordion .accordion-item:last-child{margin-bottom: 0;}
.faq-accordion .accordion-button {background-color: color-mix( in srgb, var(--bs-primary) 25%, var(--bs-white)); color: var(--bs-dark); font-size: 14px; font-weight: 500; border-radius: 999px !important; padding: 14px 18px; box-shadow: none;}
.faq-accordion .accordion-button:focus {box-shadow: none;}
.faq-accordion .accordion-button::after {display: none;}
.faq-accordion .icon { font-family: 'academy' !important; color: var(--bs-dark); display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 8px; flex-shrink: 0;}
.faq-accordion .accordion-button:not(.collapsed) .icon::before {content: "\e913";}
.faq-accordion .accordion-button.collapsed .icon::before {content: "\e912";}
.faq-accordion .accordion-body {padding: 15px 10px 0; font-size: 14px; line-height: 1.6; color: #000;}
.brand-faq .faq-accordion .accordion-button {background-color: color-mix( in srgb, var(--bs-brand-primary) 25%, var(--bs-white));}

/* Top bar */
.brand-filter {display: flex; align-items: center; gap: 20px; color: var(--bs-white);}
/* Sort pill */
.brand-filter .sort-pill {background: transparent; border: 1px solid var(--bs-white); color: var(--bs-white); padding: 8px 15px; border-radius: 999px; white-space: nowrap;}
.brand-filter .sort-pill .sort-select{background-color: transparent; border: none; padding: 0 5px; font-size: 13px; color: var(--bs-white); appearance: none; -webkit-appearance: none; --moz-appearance: none; outline: 0;}
.brand-filter .sort-pill .sort-select option{color: var(--bs-dark);}
/* Search */
.brand-filter .search-wrap input {background: transparent; border: none; outline: none; color: var(--bs-white); font-size: 14px; width: 100%;}
.brand-filter .search-wrap input::placeholder {color: rgba(255,255,255,0.5);}
/* View icons */
.brand-filter .view-icons {margin-left: auto; display: flex; gap: 16px;}
.brand-filter .icon-btn {background: none; border: none; text-decoration: none; cursor: pointer; padding: 0; display: grid; gap: 4px; color: color-mix( in srgb, var(--bs-brand-primary) 40%, var(--bs-white));}
.brand-filter .icon-btn:hover, .brand-filter .icon-btn.selected{color: var(--bs-white);}
/* Grid icon */

/* ---------- Tabs (Segmented control) ---------- */
.segmented-tabs {background: #e6e7e8; border-radius: 999px; padding: 12px 16px; display: inline-flex; gap: 6px;}
.segmented-tabs .nav-link {border-radius: 999px; padding: 8px 32px; font-weight: 600; font-size: 16px; text-transform: uppercase; color: var(--bs-dark); border: none; background: transparent;}
.segmented-tabs .nav-link.active {background: var(--bs-white);}
/* ---------- Cards ---------- */
.course-card {background: color-mix( in srgb, var(--bs-brand-primary) 10%, var(--bs-white)); border-radius: 15px; border: 1px solid var(--bs-dark); overflow: hidden; height: 100%; cursor: pointer; max-height: 210px;}
.course-card .course-header {height: 130px; position: relative; padding: 16px; font-weight: 600; font-size: 15px; text-align: center; display: flex; align-items: center; justify-content: center; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.course-card .course-header .course-badge {position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--bs-brand-primary); color: color-mix( in srgb, var(--bs-brand-primary) 30%, var(--bs-white)); font-size: 14px; display: flex; align-items: center; justify-content: center;}
.course-card.locked .course-header .course-badge {background-color: transparent; color: var(--bs-brand-primary); font-size: 18px;}
.course-card .course-header .course-badge .ac-lock, .course-card.locked .course-header .course-badge .ac-check {display: none;}
.course-card .course-header .course-badge .ac-check, .course-card.locked .course-header .course-badge .ac-lock {display: block;}
.course-card .course-footer {background: var(--bs-white); padding: 10px 14px; font-size: 12px;}
.course-card .course-footer strong {font-weight: 600;}
.course-card .course-footer .course-meta {display: flex; justify-content: space-between; margin-top: 6px;}
.course-card .course-footer .course-meta a {font-size: 13px; color: #939598; text-decoration: none; gap: 2px;}
.course-card .course-footer .course-meta a:hover{color: var(--bs-dark);}
.course-card.ma-card .course-header {height: 170px;}
.ma-list{margin: 0; padding: 0; list-style-type: none;}
.ma-list li{padding: 10px;}
.ma-list li a{color: var(--bs-dark); text-decoration: none;}
.ma-list li:nth-child(odd) {background-color: #d6dbd9;}

/* Header layout */
.course-header-listing {display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;}
/* Left section */
.course-header-listing .course-left .course-title{font-size: 21px; font-weight: 600; color: var(--bs-dark); text-decoration: none; display: block; margin: 0 0 10px;}
.course-header-listing .course-left .course-title:hover{text-decoration: underline;}
.course-header-listing .author {display: flex; align-items: center; gap: 10px; font-size: 15px;}
.course-header-listing .author img {width: 34px; height: 34px; border-radius: 50%; object-fit: cover;}
/* Right section */
.course-header-listing .course-right {text-align: right; white-space: nowrap;}
.course-header-listing .status {font-size: 14px; color: #939598; margin-top: 4px;}
/* Description */
.course-header-listing .course-description { margin-top: 18px; max-width: 900px; font-size: 14px; line-height: 1.6; color: var(--bs-dark);}

.course-detail-layout{background: linear-gradient(var(--bs-white) 0%, var(--bs-white) 350px, color-mix( in srgb, var(--bs-brand-primary) 10%, var(--bs-white)) 0, color-mix( in srgb, var(--bs-brand-primary) 10%, var(--bs-white)) 100% );}
.course-detail{position: relative;}
.course-detail .course-detail-image{max-width: 80%;}
.course-detail .course-detail-image .course-detail-brand{padding: 30px; text-align: center; max-width: 80%;}
.course-detail .course-detail-image .course-detail-brand img {max-width: 180px;}
.course-detail .course-detail-card{display: flex; flex-direction: column; position: absolute; right: 0; bottom: 50px; max-width: 450px; width: 450px;}
.course-detail .course-detail-card .course-detail-summary{text-align: center; background-color: color-mix( in srgb, var(--bs-brand-primary) 25%, var(--bs-white)); padding: 40px; border-radius: 10px 10px 0 0; margin-bottom: 5px;}
.course-detail .course-detail-card .course-detail-description{background-color: var(--bs-white); padding: 40px; border-radius: 0 0 10px 10px; max-height: 420px; overflow-y: auto;}
.course-detail .course-detail-card .course-detail-summary h2{font-size: 20px;}
.course-detail .course-detail-card .course-detail-summary .course-detail-meta p{font-family:'avenirmedium',sans-serif; font-size: 15px; margin-bottom: 5px;}

.category-card {position: relative; width: 100%; max-height: 255px; border-radius: 10px; overflow: hidden; cursor: pointer;}
.category-card img {width: 100%; height: 100%; object-fit: cover;}
.category-card .category-card-overlay {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;}
.category-card .category-card-overlay span {max-width: 225px; font-size: 15px; font-family: 'avenirheavy',sans-serif; letter-spacing: 1px; color: var(--bs-dark); text-transform: uppercase; line-height: 1.5;}

.category-card.listview {width: 100%; max-height: inherit; border-radius: 0; overflow: auto; display: flex; gap: 20px;}
.category-card.listview img {max-width: 140px; height: auto; object-fit: cover; border-radius: 10px;}
.category-card.listview .category-card-overlay {position: static; display: flex; justify-content: flex-start; text-align: left; padding: 0;}
.category-card.listview .category-card-overlay span {max-width: inherit; font-size: 15px; font-family: 'avenirheavy',sans-serif; letter-spacing: 1px; color: var(--bs-dark); text-transform: uppercase; line-height: 1.5;}

/* Card */
.link-card {display: flex; flex-direction: column; text-decoration: none; color: #000;}
.link-card .link-card-image {border-radius: 10px; overflow: hidden; background: #eee; position: relative;}
.link-card .link-card-image img {width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.3s ease;}
.link-card .link-card-title {text-align: center; padding: 5px 5px 10px; border-bottom: 1px solid var(--bs-secondary);}
.link-card:hover .link-card-image img {transform: scale(1.05);}
.link-card:hover .link-card-title {text-decoration: underline;}
.link-card .link-card-image > span {opacity: 0; transform: scale(1); transition: opacity 0.3s ease, transform 0.3s ease; transition-delay: 0.1s; position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 30px; width: 100%; text-align: center; z-index: 1; margin: auto; color: var(--bs-white); text-transform: uppercase; background-color: rgb(0 0 0 / 50%); line-height: 30px; max-width: 120px; border-radius: 5px;}
.link-card:hover .link-card-image > span {opacity: 1; transform: scale(1);}

.points-table {font-family:'avenirmedium',sans-serif; max-width: 1200px; margin: auto; overflow-x: auto;}
.points-table .points-table-header, .points-table .points-table-row, .points-table .points-table-total {display: grid; grid-template-columns: 220px repeat(12, 1fr); align-items: center;}
.points-table .points-table-header {color: var(--bs-primary-active); font-size: 14px;}
/* Rows */
.points-table .points-table-row {background: #f4eeea; border-radius: 16px; margin-bottom: 1px; padding: 0;}
/* Cells */
.points-table .points-table-cell {text-align: center; font-size: 14px; padding: 10px 4px; border-left: 1px solid var(--bs-white); border-right: 1px solid var(--bs-white);}
.points-table .points-table-cell.points-table-months {text-align: left; padding-left: 16px;}
/* Labels */
.points-table .points-table-label {padding-left: 16px; font-size: 14px;}
/* Active month (NOV column) */
.points-table .points-table-cell.is-active {background: var(--bs-secondary);}
/* Header active */
.points-table .points-table-header .is-active {background: var(--bs-secondary); border-radius: 20px 20px 0 0; padding: 8px 0;}
.points-table .points-table-total .is-active {background: var(--bs-secondary); border-radius: 0 0 20px 20px; padding: 8px 0;}

.ticket-card {position: relative; border-radius: 20px; padding: 28px 32px 32px; max-width: 820px; margin: auto; font-family: Arial, Helvetica, sans-serif; color: var(--bs-dark);}
/* Status */
.ticket-card .ticket-card-status {position: absolute; top: 20px; right: 24px; display: flex; align-items: flex-end; gap: 8px; font-size: 12px; text-align: right; flex-direction: column; line-height: 14px;}
.ticket-card .ticket-card-status-dot, .check-circle {width: 18px; height: 18px; background: var(--bs-dark); border-radius: 50%; margin-top: 2px; display: flex; align-items: center; justify-content: center;}
/* Header */
.ticket-card .ticket-card-header {text-align: center; margin-bottom: 14px;}
.ticket-card .ticket-card-logo {display: inline-block; padding: 6px 28px;}
.ticket-card .ticket-card-logo img{max-width: 180px;}
/* Title */
.ticket-card .ticket-card-title {text-align: center; font-size: 21px; margin: 18px 0 6px;}
/* Meta */
.ticket-card .ticket-card-meta {text-align: center; font-size: 14px;  color: var(--bs-dark);}
/* Divider */
.ticket-card .ticket-card-divider {height: 2px; background: color-mix( in srgb, var(--bs-brand-primary) 40%, var(--bs-white));  margin: 18px 0 20px;}
/* Details */
.ticket-card .ticket-card-details {display: flex; flex-direction: column; gap: 12px;}
.ticket-card .ticket-card-row {display: grid; grid-template-columns: 28px 110px 1fr; align-items: center; font-size: 14px;}
.ticket-card .ticket-card-icon {font-size: 16px;  opacity: 0.7;}
.ticket-card .ticket-card-label {font-weight: 600;}
.ticket-card .ticket-card-value {color: var(--bs-dark);}
.play-link{color: var(--bs-white); text-decoration: none; display: flex; align-items: center;}

/* Table reset */
.table > :not(caption) > * > *{border: 0; box-shadow: none;}
.table.table-striped {width: 100%; border-collapse: separate; border-spacing: 0;}
/* Header */
.table.table-striped thead th {text-align: left; font-size: 14px; letter-spacing: 0.5px; color: var(--bs-primary-active); font-family: 'avenirmedium', sans-serif; font-weight: 400; text-transform: uppercase; padding: 8px 15px; white-space: nowrap;}
/* Body cells */
.table.table-striped tbody td {font-family: 'avenirmedium', sans-serif; padding: 12px 15px; font-size: 14px; color: var(--bs-dark); white-space: nowrap; border-right: 1px solid var(--bs-white); vertical-align: middle;}
/* Pill rows */
.table.table-striped tbody tr:nth-of-type(odd) td, .table.table-striped > tbody > tr:nth-of-type(odd) > * {background: var(--bs-secondary);}
/* Rounded corners for pill rows */
.table.table-striped tbody tr:nth-of-type(odd) td:first-child {border-top-left-radius: 14px; border-bottom-left-radius: 14px;}
.table.table-striped tbody tr:nth-of-type(odd) td:last-child {border-top-right-radius: 14px; border-bottom-right-radius: 14px;}
.table.table-striped tbody tr td:last-child {border-right: 0;}

.password-field {position: relative;}
.password-field .form-control{padding-right: 34px;}
.password-field .toggle-password {position: absolute; top: 7px; right: 10px; color: var(--bs-primary); cursor: pointer;}
.password-field .eye-slash:after {content: ""; height: 18px; width: 2px; background: var(--bs-primary); display: block; position: absolute; left: 0; right: 0; top: -2px; bottom: 0; margin: auto; -webkit-transform: rotate(45deg); transform: rotate(45deg);}

.form-check-label {display: flex; align-items: center;}
.form-check-input {width: 20px; height: 20px; vertical-align: top; margin-top: 0; background-color: var(--bs-white); background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid var(--bs-primary-active); appearance: none; transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}
.form-check-input[type=checkbox] {border-radius: 0.25em;}
.form-check-input[type=radio] {border-radius: 50%;}
.form-check-input:active {filter: brightness(90%);}
.form-check-input:focus {border-color: var(--bs-secondary); outline: 0;}
.form-check-input:checked {background-color: var(--bs-primary-active); border-color: var(--bs-primary-active);}
.form-check-input:checked[type=checkbox] {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");}
.form-check-input:checked[type=radio] {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");}
.form-check-input[type=checkbox]:indeterminate {background-color: var(--bs-primary-active); border-color: var(--bs-primary-active); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");}

.daterangepicker td.active, .daterangepicker td.active:hover {background-color: var(--bs-primary-active);}
.daterangepicker td.available:hover, .daterangepicker th.available:hover{background-color: var(--bs-secondary);}
.daterangepicker .drp-calendar.left {padding: 10px;}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect{background-color: var(--bs-secondary); padding: 5px 2px;}

.form-actions{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px;}
.info-box p {margin-bottom: 5px; display: flex; align-items: center; gap: 10px;}
.info-box p i{font-size: 16px;}
.info-box p a:hover{text-decoration: none;}
.person-info{display: flex; gap: 15px;}
.person-info .profile-image{margin: 0;}

.pagination-wrap{display: flex; align-items: center; justify-content: space-between; gap: 15px;}
.pagination-wrap .pagination-info{display: flex; align-items: center; gap: 10px;}
.pagination-wrap .pagination {margin-bottom: 0;}
.pagination .page-item .page-link{border-color: var(--bs-secondary); width: 36px; height: 36px; padding: 8px; margin: 0 2px; border-radius: 0; display: flex; align-items: center; justify-content: center;}
.pagination .page-item .page-link:hover, .pagination .page-item .page-link:focus, .pagination .page-item.active .page-link{background-color: var(--bs-primary); color: var(--bs-white);}

.form-group select.form-control + .select2 .select2-selection {font-size: 14px; border: 1px solid var(--bs-primary); border-radius: 5px; min-height: 35px; padding: 5px 5px;}
.select2-container .select2-search--inline .select2-search__field{outline: 0; margin: 0; height: 22px;}
.select2-container .select2-selection--multiple .select2-selection__rendered{display: flex; flex-wrap: wrap; gap: 5px; margin: 0;}
.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice{background-color: var(--bs-primary); border: none; color: var(--bs-white); font-size: 13px; padding: 2px 10px; border-radius: 15px;}
.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {margin-right: 5px; font-weight: bold; cursor: pointer; border: none; opacity: 0.5; padding: 0; background-color: transparent;}
.select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {opacity: 1;}


/* Responsive */
@media (min-width: 1199.02px) {
    .course-banner-img{min-height: 667px;}
}
@media (min-width: 991.02px) {
    .navbar-light .navbar-nav .nav-link::before, .navbar-light .navbar-nav .dropdown::before {position: absolute; content: ""; width: 0; height: 3px; bottom: 0px; left: 50%; background: var(--bs-primary-active); transition: .5s;}
    .navbar-light .navbar-nav .nav-link:hover::before, .navbar-light .navbar-nav .nav-link.active::before {width: 100%; left: 0;}
    .mw-lg-960px{max-width: 960px;}
}
@media (min-width: 767.02px) {
    .main-product-img.mobile, img.mobile {display: none;}
}

@media (max-width: 1399.98px) {
    .main-product-img {max-width: 65%;}
}

@media (max-width: 1199.98px) {
    .content-card {max-width: 450px; max-height: 250px; padding: 20px 25px;}
    .content-card h2 {font-size: 20px;}
    .brands-cont h3{font-size: 13px;}
    .fs-50 {font-size: 30px!important;}
    .brands-cont .col-md-6{width: 49.7%; flex: 0 0 auto;}
    .carousel.vertical .carousel-inner, .carousel.vertical .carousel-item {height: 300px;}

    .course-detail .course-detail-image, .course-detail .course-detail-image .course-detail-brand{max-width: 100%;}
    .course-detail .course-detail-card{position: static; margin: auto; width: 100%;}
}

@media (max-width: 1024px) {
  .points-table .points-table-header, .points-table .points-table-row, .points-table .points-table-total {min-width: 900px; grid-template-columns: 180px repeat(12, 1fr);}
}

@media (max-width: 991.98px) {
    .navbar-light #navbarCollapse.offcanvas{background-color: var(--bs-dark); padding: 20px;}
    .navbar-light #navbarCollapse.offcanvas .navbar-nav .nav-link, .navbar-light .navbar-nav .dropdown {margin-left: 0; margin-bottom: 10px; width: 100%; color: var(--bs-white);}
    .navbar-light #navbarCollapse.offcanvas .navbar-nav .nav-link{padding: 8px 10px;}
    .navbar-light #navbarCollapse.offcanvas .navbar-nav .dropdown-menu{background-color: transparent; border-radius: 0; padding: 0;}
    .navbar-light #navbarCollapse.offcanvas .navbar-nav .dropdown-menu .dropdown-item{color: var(--bs-white); padding: 5px; font-size: 14px;}
    .navbar-light #navbarCollapse.offcanvas .navbar-nav .dropdown-menu .dropdown-item:hover, .navbar-light #navbarCollapse.offcanvas .navbar-nav .dropdown-menu .dropdown-item.active, 
    .navbar-light #navbarCollapse.offcanvas .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active{background-color: var(--bs-primary); color: var(--bs-dark);}
    .navbar-light #navbarCollapse.offcanvas .dropdown-toggle::after{right: 5px;}

    .main-product-img {max-width: 80%;}

    .navbar .navbar-device img{width: 180px;}
    .navbar .navbar-device .link-item, .navbar .navbar-device .link-item .notification{color: var(--bs-dark); font-size: 24px; text-decoration: none;}

    .profile-categories > span{padding: 6px 12px;}
    .filter-toolbar .search-box, .filter-toolbar .sort-box{width: 300px;}

    .banner-wrapper .banner-title {font-size: 34px;}
    .banner-wrapper .brand-logo img {max-width: 160px;}
    .modal .pagination-wrap {flex-direction: column;}
}

@media (max-width: 767.98px){
    .footer-bar .container{text-align: center; white-space: initial; display: flex; flex-direction: column; gap: 20px;}
    .footer-left {text-align: center; white-space: initial; display: flex; flex-direction: column;}
    .footer-right {margin-left: initial;}  

    .main-product-img.desktop, img.desktop {display: none;}
    .main-product-img {max-width: 100%;}
    .content-card{display: none;}

    .brands-cont {gap: 20px; border-radius: 0; overflow: hidden; border: 0;}
    .brands-social-wrap {background-color: var(--bs-white);}
    .brands-cont .col-12{width: 100%;}
    .brands-cont h3{font-size: 20px;}

    .brand-slider {max-width: 360px;}
    .brand-slider .swiper-slide{border: 1px solid var(--bs-primary); padding: 15px;}
    .brand-slider img{max-width: initial; max-height: initial; width: 240px;}
    .fs-50{font-size: 35px !important;}

    .footer-links{display: flex; flex-direction: column;}
    .footer-links .ft-link{font-size: 16px; color: var(--bs-white); margin-bottom: 10px; text-decoration: none;}
    .footer-links a.ft-link:hover{color: var(--bs-primary);}
    .footer-links .social-links{display: flex; align-items: center; gap: 20px;}
    .footer-links .social-links a{font-size: 26px; line-height: 22px; color: var(--bs-white); text-decoration: none;}

    .filter-toolbar{flex-direction: column;}
    .faq-accordion .accordion-button{padding: 10px 12px;}
   
    .brand-banner > img, .banner-wrapper > img{display: none;}
    .brand-banner, .banner-wrapper{background-repeat: no-repeat; background-size: cover; min-height: 160px;}
    .banner-wrapper .brand-logo img + .banner-title:before{margin: 0 auto 15px;}
    .banner-wrapper .banner-title {font-size: 20px;}
    .brand-logo-img{min-height: 130px;}
    .brand-menu .btn{font-size: 12px;}

    .brand-filter{flex-direction: column;}

    .pagination-wrap {flex-direction: column;}
  
}

@media (max-width: 640px) {
    .ticket-card {padding: 22px;}
    .ticket-card .ticket-card-row {grid-template-columns: 24px 90px 1fr; font-size: 13px;}
    .ticket-card .ticket-card-title {font-size: 22px;}
}

@media (max-width: 575.98px){
    .filter-toolbar .search-box, .filter-toolbar .sort-box{width: 100%;}
    .brand-menu .btn{min-width: 145px;}
    .course-header-listing {flex-direction: column; align-items: flex-start;}
    .course-header-listing .course-right {text-align: left;}
}