/* ==========================================================================
   Premium • Professional • 2025 Modern UI
   (Drop-in stylesheet — keeps your class names, fixes bugs, polishes UX)
   ==========================================================================

   Table of Contents:
   1.  Import Statements
   2.  Keyframes & Property Animations
   3.  Custom Properties (Design Tokens)
   4.  Global / Resets / Accessibility
   5.  Typography
   6.  Headings & Subheadings
   7.  Form & Inputs
   8.  Maps Elements
   9.  Header & Navbar
   10. Section & Container
   11. Backgrounds & Color Utilities
   12. Swiper Settings
   13. Buttons & Links
   14. Overlay
   15. Utility Classes
   16. Social & Contact
   17. Breadcrumb
   18. Responsive / Media Queries
   19. Card Settings
   20. Progress & Rating
   21. Accordion
   ========================================================================== */


/* ------------------------------------------
   1) Import Statements
   ------------------------------------------ */
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/swiper-bundle.min.css');
@import url('../css/vendor/rtmicons.css');
@import url('../css/vendor/open-sans/stylesheet.css');
@import url('../css/vendor/source-sans-3/stylesheet.css');


/* ------------------------------------------
   2) Keyframes & Property Animations
   ------------------------------------------ */
@property --progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@keyframes load { to { --progress: var(--value) } }

@keyframes background_animation {
  from { background-size: 100% }
  to   { background-size: 110% }
}

@keyframes ripple {
  from { opacity: 1; transform: scale3d(1,1,1); transform-origin: center; border-width: 0 }
  to   { opacity: 0; transform: scale3d(1.7,1.7,1.8); transform-origin: center; border-width: 13px }
}

@keyframes rotateAlbumArt { from { transform: rotateZ(0) } to { transform: rotateZ(360deg) } }

@keyframes text-marquee { from { transform: translateX(0%) } to { transform: translateX(-100%) } }
@keyframes marquee { from { transform: translateX(0%) } to { transform: translateX(calc(-100% - 1rem)) } }


/* ------------------------------------------
   3) Custom Properties (Design Tokens)
   ------------------------------------------ */
:root{
  /* Core palette */
  --primary: #181518;
  --background-color: #231F20;
  --text-color: #F4F4F4;
  --text-color-2: #EBEBEB;

  /* Brand accents */
  --accent-color: #CFAB82;
  --accent-color-2: #8A715A;
  --accent-color-3: #38373C;
  --accent-color-4: #151315;

  /* Typography */
  --font-1: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-2: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Elevation / radii / spacing */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-1: 0 7px 15px rgba(0,0,0,.13), 0 1px 4px rgba(0,0,0,.11);
  --shadow-2: 0 18px 80px rgba(0,0,0,.40);

  /* Transitions */
  --ease-1: cubic-bezier(.2,.7,.2,1);
  --ease-2: cubic-bezier(.1,0,.3,1);
  --speed-1: .2s;
  --speed-2: .35s;

  /* Focus ring (accessible) */
  --ring: 2px solid color-mix(in oklab, var(--accent-color) 70%, white 30%);
  --ring-offset: 2px;

  /* Progress */
  --value: 0;
}

/* Respect user color scheme (keeps dark defaults but ensures compatibility) */
@media (prefers-color-scheme: dark){
  :root { color-scheme: dark; }
}


/* ------------------------------------------
   4) Global / Resets / Accessibility
   ------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box }

html, body { height: 100% }

body{
  margin: 0;
  background: var(--primary);
  color: var(--text-color);
  font-family: var(--font-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

img{ max-width: 100%; height: auto; object-fit: cover; display: block }
a{ color: inherit; text-decoration: none }
ul{ list-style: none; padding: 0; margin: 0 }

::selection{ background: color-mix(in oklab, var(--accent-color) 48%, #000 20%); color:#fff }

:focus-visible{
  outline: var(--ring);
  outline-offset: var(--ring-offset);
}

[disabled], .is-disabled{ cursor: not-allowed; opacity: .6 }

/* Smooth scrolling (respects reduced motion) */
html{ scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  *{ animation: none !important; transition: none !important }
}


/* ------------------------------------------
   5) Typography
   ------------------------------------------ */
h1,h2,h3,h4,h5,h6{ font-weight: 800; line-height: 1.08; margin: 0 0 .35em }
p{ margin: 0 0 1em; color: var(--text-color-2); font-family: var(--font-2) }

h1{ font-size: clamp(2rem, 4.5vw, 5.25rem) }   /* ~84px max */
h2{ font-size: clamp(1.9rem, 4.2vw, 5rem) }    /* ~80px max */
h3{ font-size: clamp(1.6rem, 3vw, 3rem) }      /* ~48px max */
h4{ font-size: clamp(1.25rem, 2.2vw, 2rem) }   /* ~32px max */
h5{ font-size: clamp(1.1rem, 1.6vw, 1.5rem) }  /* ~24px max */
h6{ font-size: clamp(1rem, 1.3vw, 1.25rem) }   /* ~20px max */

button,a{ font-size: 18px; font-family: var(--font-2) }
li{ font-size: 16px; font-family: var(--font-2) }

.text-accent{
  background: linear-gradient(90deg, #01C7F3 0%, #003642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-text   { font-size: clamp(2rem, 6vw, 4rem); font-weight: 900 }
.price-text2  { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 900 }
.testimonial-text{ font-size: 12px; font-style: italic }
.small-text   { font-size: 12px; font-family: var(--font-2) }

.list-circle{ list-style: disc; padding-left: 1.2em }
.list-circle li::marker{ color: var(--accent-color) }

.brush1,.brush2,.brush3,.brush4,.brush5{ position: relative; display:inline-block; padding: 5px 0 }
.brush1::before{ content:""; background:url('../image/brush1.png') no-repeat center / contain; position:absolute; inset:0; left:-5%; width:110%; opacity:.8; z-index:-1 }
.brush2::before{ content:""; background:url('../image/brush2.png') no-repeat center / contain; position:absolute; inset:0; left:-5%; width:110%; opacity:.8; z-index:-1 }
.brush3::before{ content:""; background:url('../image/brush3.png') no-repeat center / contain; position:absolute; inset:0; left:-5%; width:110%; opacity:.8; z-index:-1 }
.brush4::before{ content:""; background:url('../image/brush4.png') no-repeat center / contain; position:absolute; inset:0; left:-5%; width:110%; opacity:.8; z-index:-1 }
.brush5::before{ content:""; background:url('../image/brush5.png') no-repeat center / contain; position:absolute; inset:0; left:-5%; width:110%; opacity:.8; z-index:-1 }


/* ------------------------------------------
   6) Headings & Subheadings
   ------------------------------------------ */
.banner-heading{ font-size: clamp(2.5rem, 6vw, 5.5rem) }
.sub-heading{ color: var(--accent-color) }
.text-color{ color: var(--text-color) }
.text-color-2{ color: var(--text-color-2) }
.p-banner{ color: var(--primary) }


/* ------------------------------------------
   7) Form & Inputs
   ------------------------------------------ */
.form-label{ font-size: clamp(1rem, 1.2vw, 1.5rem) }
.form-control{ padding: 15px 24px; border: none }

.form textarea,
.form input,
.form select{
  background-color: var(--accent-color-3);
  border-radius: 8px;
  color: var(--text-color-2);
  outline: none;
  border: 1px solid transparent;
  font-family: var(--font-2);
  transition: border-color var(--speed-1) var(--ease-2), box-shadow var(--speed-1) var(--ease-2), background-color var(--speed-1) var(--ease-2);
  accent-color: var(--accent-color);
}

.form input:focus,
.form textarea:focus,
.form select:focus{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-color) 45%, transparent);
  border-color: var(--accent-color);
  background-color: var(--accent-color-3);
  color: var(--text-color-2);
}

.form input::placeholder,
.form textarea::placeholder{ color: #cfcfcf }

.form option{ background-color: var(--primary) }

.form-check-input{ background-color: transparent; border: 1px solid gray; width: 1.1rem; height: 1.1rem; cursor: pointer }
.form-check-input:checked{ border-color: #0070f3 }
.form-check-input:checked[type=checkbox]{
  --bs-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-check-xl" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/></svg>');
}

.form .submit_form{
  padding-inline: 2rem; padding-block: 1rem; text-decoration: none;
  transition: all var(--speed-2) var(--ease-2);
  background-color: var(--accent-color); border-radius: 10px; color: var(--primary); border: 1px solid transparent;
}
.submit_form:hover{ background-color: transparent; color: var(--accent-color); border-color: var(--accent-color) }

.submit_appointment{ padding-inline: 3rem; padding-block: .7rem; text-decoration: none }


/* ------------------------------------------
   8) Maps Elements
   ------------------------------------------ */
.maps{ width: 100%; height: 480px; transition: filter .5s; display: block }


/* ------------------------------------------
   9) Header & Navbar
   ------------------------------------------ */
#header{ transition: all .5s ease }
.logo-container{ max-width: 200px }
.logo-partner{ filter: brightness(200%) contrast(0%) saturate(0%); transition: filter .5s }
.logo-partner:hover{ filter: none }

.offcanvas{ background-color: var(--primary) }
.offcanvas-header{ color: var(--text-color) }

.navbar-toggler{ border: none; color: var(--accent-color-2) }
.navbar-toggler:focus{ box-shadow: none; background: transparent; color: var(--accent-color-2) }

.navbar-nav .nav-link{ border-bottom: 2px solid transparent; font-size: 18px; font-family: var(--font-2); color: var(--text-color-2); text-align: center; transition: color var(--speed-1) var(--ease-1), border-color var(--speed-1) var(--ease-1) }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{ color: var(--accent-color) }
.navbar-nav .nav-link.show{ color: var(--accent-color) }
.nav-link.active{ color: var(--text-color) !important; border-bottom-color: var(--accent-color) }

.nav-tabs{ border-bottom: none }
.nav-tabs .nav-link{
  background: transparent; color: var(--accent-color); border: none; position: relative;
}
.nav-tabs .nav-link:hover{ color: #fff }
.nav-tabs .nav-link.active::after{
  content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background: var(--accent-color);
}

.dropdown-menu{
  border-radius: 0; border: none; padding: 0; width: 200px;
  box-shadow: 0 0 24px rgba(0,0,0,.3);
}
.dropdown-item{
  padding: .75rem; color: var(--text-color); font-family: var(--font-1); font-size: .95rem; background: var(--background-color); text-align: center;
}
.dropdown-item.active{ color: var(--primary); background: var(--accent-color) }
.dropdown-item:hover{ background: var(--accent-color); color: var(--primary) }
.dropdown-item:focus{ color: var(--accent-color) }


/* ------------------------------------------
   10) Section & Container
   ------------------------------------------ */
.section{ padding: 6em 2em; overflow: hidden; background-size: cover; background-position: center }
.r-container{ max-width: 1440px; margin-inline: auto }


/* ------------------------------------------
   11) Backgrounds & Color Utilities
   ------------------------------------------ */
.bg-accent-primary{ background: var(--primary) }
.bg-accent-color{ background: var(--accent-color) }
.bg-accent-color-2{ background: var(--accent-color-2) }
.bg-accent-color-3{ background: var(--accent-color-3) }
.bg-accent-color-4{ background: var(--accent-color-4) }
.bg-accent{ background: var(--background-color) }
.bg-text-color{ background: var(--text-color) }
.bg-text-color-2{ background: var(--text-color-2) }

.bg-accent-color-hover:hover{ background: var(--accent-color); color: #fff }

.bg-dark-transparent{ background-color: #232323b7 }

.accent-color-primary{ color: var(--primary) }
.accent-color{ color: var(--accent-color) }
.accent-color-2{ color: var(--accent-color-2) }
.accent-color-3{ color: var(--accent-color-3) }
.accent-color-4{ color: var(--accent-color-4) }
.accent{ color: var(--background-color) }

.border-accent{ border-color: var(--text-color-2) !important }
.border-accent-2{ border-color: var(--accent-color) !important }
.border-accent-3{ border: 1px solid rgba(207,171,130,.2) }
.border-text-color{ border-color: var(--text-color) !important }
.border-testimonial{ border-right: 5px solid var(--accent-color-2) }
.border-bottom-hover:hover{ border-bottom: 2px solid var(--accent-color) }
.border-accent-color{ border: 1px solid var(--accent-color) }

.custom-border{ padding: 2rem 3rem; border-radius: 1rem }
.custom-border:hover{ box-shadow: 0 5px 6px rgba(1,199,243,.26) }

.outline{ color: transparent; -webkit-text-stroke: 1px var(--accent-color) }
.text-gray{ color: grey !important }


/* ------------------------------------------
   12) Swiper Settings
   ------------------------------------------ */
.text-marquee{ overflow: hidden; white-space: nowrap; position: relative }
.text-marquee-content{ display: inline-block; animation: text-marquee 70s linear infinite; font-size: clamp(2.5rem, 8vw, 6.25rem); padding-right: 50% }

.marquee-container{ overflow: hidden; width: 100%; display:flex; flex-direction: row; --gap:1rem; --speed:20 }
.marquee{ animation: marquee calc(500s / var(--speed)) infinite linear }
.reverse .marquee{ animation-direction: reverse }
.marquee-content{ display:inline-flex }
.marquee-item{ text-wrap: nowrap; padding-inline: var(--gap); margin-right: 1rem; width: max-content }
.marquee-item:hover img{ filter: var(--accent-color) }

.service-scroll{ height: 610px; overflow-y: auto; overflow-x:hidden; padding-right: 3rem }
.service-scroll::-webkit-scrollbar{ width:6px }
.service-scroll::-webkit-scrollbar-track{ background: #e0e0e0; border-radius: 10px }
.service-scroll::-webkit-scrollbar-thumb{ background: var(--accent-color); border-radius: 10px }
.service-scroll::-webkit-scrollbar-thumb:hover{ background: var(--accent-color-2) }

.swiperTestimonials{ overflow: visible }
.swiperTestimonials2{ position: relative; padding-bottom: 40px }

.swiperStep{ width:100%; height:100% }
.swiperStep .swiper-slide{ width:25%; height:100%; opacity:.4 }
.swiperStep .swiper-slide.swiper-slide-thumb-active{ opacity:1 }
.swiperStep .swiper-slide.swiper-slide-thumb-active h4{ color: var(--accent-color) }

.swiperStep2 .swiper-slide{ background-size: cover; background-position: center }
.swiperStep2 .swiper-slide img{ display:block; width:100%; height:550px; object-fit:cover }
.swiperStep2 .swiper-button-next::after, .swiperStep2 .swiper-button-prev::after{ font-size:45px }
.swiperStep2 .swiper-button-next, .swiperStep2 .swiper-button-prev{
  right:-1rem; top:15rem; width:95px; height:95px; border:6px solid var(--primary);
  background: linear-gradient(180deg,#050505 -77.42%, #01C7F3 100%);
  color: var(--text-color); border-radius: 50%; display:flex; justify-content:center; align-items:center; cursor:pointer;
}
.swiperStep2 .swiper-button-next{ right:0; transform: translateY(20px) }
.swiperStep2 .swiper-button-prev{ left:0; transform: translateY(20px) }

.mySwiper{ position: relative; padding-bottom: 156px }
.swiperImage{ position: relative; width: 100% }

.swiper-pagination{ margin-block: 1rem; position: relative }
.swiper-pagination-bullet{ width:30px; height:3px; background: var(--accent-color-3); margin:0 5px; border-radius: 0; transition: all .3s ease; opacity:.5 }
.swiper-pagination-bullet-active{ background: var(--accent-color); width: 40px; opacity:1 }

.swiper-slide{ padding: .5rem }

.mySwiper .swiper-button-next, .mySwiper .swiper-button-prev{
  top:25rem; width:50px; height:50px; border:2px solid var(--accent-color); background: transparent; color: var(--accent-color);
  border-radius:50%; display:flex; justify-content:center; align-items:center; cursor:pointer;
}
.mySwiper .swiper-button-next{ right:45%; transform: translateY(20px) }
.mySwiper .swiper-button-prev{ left:45%;  transform: translateY(20px) }

.swiper-button-next.service{ right:-9%; transform: translateY(20px) }
.swiper-button-prev.service{ left:-7%; transform: translateY(20px) }

.swiperImage .swiper-button-next, .swiperImage .swiper-button-prev{
  bottom:10px; width:50px; height:50px; border:1px solid var(--accent-color); background: var(--background-color);
  color: var(--accent-color); border-radius: 50%; display:flex; justify-content:center; align-items:center; cursor:pointer;
}
.swiperImage .swiper-button-next{ left:50%; transform: translateY(20px) }
.swiperImage .swiper-button-prev{ left:47%; transform: translateY(20px) }
.swiperImage .swiper-button-next::after, .swiperImage .swiper-button-prev::after{ font-size:24px }
.swiperImage .swiper-button-next:hover, .swiperImage .swiper-button-prev:hover{ background: var(--accent-color); color: var(--primary) }

.custom-swiper{ width:100%; height:600px; padding-right: 3rem }
.custom-slide{ display:flex; justify-content:center; align-items:center }
.custom-scrollbar{ width:6px; position:absolute; right:10px; top:0; margin-top:150px; bottom:0; background:#e0e0e0; border-radius:10px; z-index: 9 }
.swiper-scrollbar.swiper-scrollbar-vertical{ height: 300px }
.custom-scrollbar .swiper-scrollbar-drag{ background:#ff9800; border-radius:10px }


/* ------------------------------------------
   13) Buttons & Links
   ------------------------------------------ */
button{
  padding: .5rem 1rem;
  text-decoration: none;
  transition: all var(--speed-2) var(--ease-2);
  border-radius: 999px;
}

button:hover{ color: var(--text-color) }

a{ text-decoration: none }
.w-max-content{ width: max-content }

.read-more{ color: var(--text-color-2); font-family: var(--font-2); font-size: 16px; transition: all .5s }
.read-more.blog{ color: var(--text-color) }
.read-more:hover{ color: var(--accent-color) }

.tags{ padding: 3px 6px; font-family: var(--font-2); color: var(--text-color); background: var(--accent-color-3); border-radius: 6px }
.tags.active{ color: var(--primary); background: var(--accent-color) }

.btn{
  font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-2); font-weight: 600; position: relative; cursor: pointer; gap:.5rem;
}
.btn::before, .btn::after{ content:""; position:absolute; inset:0 }

.btn-close{ color: var(--text-color) }
.btn-close:hover{ color: var(--text-color) }

.btn-accent{
  background: var(--accent-color); color: var(--primary);
  transition: all var(--speed-2) var(--ease-2); border: 1px solid transparent; overflow: hidden; border-radius: 999px; padding:.8rem 1.2rem;
}
.btn-accent:hover{ color: var(--primary) }
.btn-accent span, .btn-accent i{ position: relative; z-index:10; display: block }
.btn-accent:hover i, .btn-accent:hover span{ animation: MoveScaleUpInitial .3s forwards, MoveScaleUpEnd .3s forwards .3s }

@keyframes MoveScaleUpInitial { to { transform: translate3d(0,-105%,0) scale3d(1,2,1); opacity:0 } }
@keyframes MoveScaleUpEnd { from { transform: translate3d(0,100%,0) scale3d(1,2,1); opacity:0 } to { transform: translate3d(0,0,0); opacity:1 } }

.btn-accent::before{
  background: var(--accent-color); width:120%; height:0; padding-bottom:120%; top:-110%; left:-10%; border-radius:50%;
  transform: translate3d(0,68%,0) scale3d(0,0,0);
}
.btn-accent:hover::before{ transform: translate3d(0,0,0) scale3d(1,1,1); transition: transform .4s var(--ease-2) }
.btn-accent::after{ background: var(--accent-color); transform: translate3d(0,-100%,0); transition: transform .4s var(--ease-2) }
.btn-accent:hover::after{ transform: translate3d(0,0,0); transition-duration:.05s; transition-delay:.4s; transition-timing-function: linear }

.btn-accent.accent:hover{ background: transparent; border-color: var(--primary); color: var(--primary) }

.btn-accent-outline{
  background: transparent; border:1px solid var(--accent-color); color: var(--accent-color); overflow: hidden; border-radius: 999px; padding:.8rem 1.2rem;
}
.btn-accent-outline:hover{ border-color: var(--accent-color); color: var(--accent-color) }
.btn-accent-outline span{ position: relative; z-index:10; display:block }
.btn-accent-outline:hover span{ animation: MoveScaleUpInitial .3s forwards, MoveScaleUpEnd .3s forwards .3s }

.btn-accent-underline{
  background: transparent; color: var(--accent-color); border: none; position: relative; white-space: nowrap; cursor: pointer;
}
.btn-accent-underline::before,
.btn-accent-underline::after{
  position:absolute; left:0; top:100%; width:100%; height:1px; background: currentColor; pointer-events:none; content:"";
}
.btn-accent-underline{ border-bottom: 1px solid var(--accent-color) }
.btn-accent-underline:hover{ color: var(--text-color) }
.btn-accent-underline:hover::after{ transform: scale3d(0,1,1) }

.btn-toggler-accent{
  background: transparent; border:1px solid var(--text-color); color: var(--text-color);
  aspect-ratio:1/1; width:60px; height:60px; border-radius:50%;
}
.btn-toggler-accent:hover{ background: var(--text-color); color: var(--primary) }

.btn-white-outline{ background: transparent; border:1px solid var(--text-color); color: var(--text-color) }
.btn-white-outline-hover:hover{ background: transparent; border-color: var(--text-color); color: var(--text-color) }
.btn-white-outline:hover{ background: #fff; color: var(--primary) }

.partner{ display:flex; justify-content:center; padding: 16px 24px; border:1px solid transparent }
.partner:hover{ border-color: var(--accent-color) }
.partner svg{ fill: var(--accent-color) }

.image-footer .social-item{ color: var(--primary); background: var(--accent-color) }
.image-footer:hover .image-footer-blur{
  background: rgba(24,21,24,.3); backdrop-filter: blur(2px);
  position:absolute; inset:0; z-index:1; transition: all var(--speed-2) ease;
}
.image-footer{ position: relative; width: max-content }
.image-footer .image-zoom{ position:absolute; inset:0; z-index:2; opacity:0; transform-origin: bottom; transition: all var(--speed-2) ease }
.image-footer:hover .image-zoom{ opacity:1 }

.card-track{ transition: all var(--speed-2) ease }
.card-track .track-blur{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition: all var(--speed-2) ease }
.card-track:hover .track-blur{ opacity:1; transform: translate(1rem, -1rem) }

.card .link{ color: var(--accent-color); transition: color var(--speed-2) ease }
.card .link:hover{ color: var(--primary) }
.link{ color: var(--text-color); transition: color var(--speed-2) ease }
.link.accent-color{ color: var(--accent-color) }
.link.accent-color:hover{ color: var(--background-color) }
.link:hover{ color: var(--accent-color) }
.link-white{ color: #fff }
.link-white:hover{ color: var(--accent-color) }


/* ------------------------------------------
   14) Overlay
   ------------------------------------------ */
.blog-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,69,81,.6) 100%);
  transition: background .3s, border-radius .3s, opacity .3s;
}
.image-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,5,5,.3) 23.17%, rgba(1,199,243,.3) 127.38%) }
.overlay{ color: var(--accent-color-2); opacity:.3 }
.bg-overlay, .bg-overlay-2, .cta-overlay, .contact-overlay, .video-overlay{
  position:absolute; inset:0;
}
.bg-overlay{ background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.5)) }
.bg-overlay-2{ background: linear-gradient(0deg, rgba(1,137,142,.28), rgba(1,137,142,.28)) }
.cta-overlay{ background: linear-gradient(180deg, rgba(0,0,0,0) 20.5%, rgba(1,199,243,.2) 100%) }
.contact-overlay{ background: linear-gradient(180deg, rgba(0,0,0,0) 27.06%, rgba(1,199,243,.61) 100%) }
.video-overlay{ background: linear-gradient(180deg, rgba(4,56,63,.144) 0%, rgba(4,56,63,.72) 100%); opacity:.5 }

.glass-effect{
  background: var(--accent-color-3); opacity:.9; backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
}


/* ------------------------------------------
   15) Utility Classes
   ------------------------------------------ */
.hover-transform:hover{ transform: translateY(-10px) }

.font-1{ font-family: var(--font-1) }
.font-2{ font-family: var(--font-2) }
.ls-2{ letter-spacing: 2px }
.fs-7{ font-size: .8rem !important }
.fs-very-large{ font-size: clamp(2.5rem, 7vw, 4.125rem) }
.fw-black{ font-weight: 900 !important }

.team-detail{ background: var(--background-color); color: var(--accent-color); transition: all var(--speed-2) ease }
.team-detail:hover{ background: var(--accent-color); color: var(--primary) }

.divider{ display:flex; align-items:center }
.divider::after{
  content:""; border-bottom: 0; flex-grow:1; border-top: 3px solid #8692af; max-width: 30px; min-width: 30px;
}
.divider-element{ letter-spacing: 2px; flex:1; margin-left: 1rem; font-weight: 400 }

.image-infinite-bg{ height: 90vh }
.animation-bg{ animation: background_animation 10s forwards }
.bg-attach-fixed{ background-attachment: fixed; background-position: center; width:100%; height:100% }
.bg-attach-cover{ background-size: cover; background-position: center; width:100%; height:100% }

.social-container{ display:flex; gap: 1rem }
.social-container.column{ flex-direction: column; gap: .5rem }

.character-img, .stock-img{ position: relative; z-index: 2 }
.w-70{ width: 70% }
.bg-box{ bottom:0; right:0; height:60%; width:50%; border: 3px solid var(--accent-color-2) }

.icon-box{
  display:flex; justify-content:center; align-items:center; text-align:center;
  font-size: 30px; aspect-ratio:1/1; transition: all var(--speed-2) ease; border-radius:50%;
  background: var(--accent-color); color: var(--primary); padding:10px; width:max-content; height:max-content;
}
.icon-box.hover{
  font-size: 15px; border:1px solid var(--accent-color); background: var(--accent-color); color: var(--primary);
}
.icon-box.hover:hover{ background: transparent; color: var(--accent-color) }

.icon-box-2{
  display:flex; justify-content:center; align-items:center; text-align:center;
  font-size: 60px; aspect-ratio:1/1; border-radius:50%; background: transparent; border:1px solid var(--accent-color);
  color: var(--accent-color); padding:10px; width:max-content; height:max-content; transition: all var(--speed-2) ease;
}

.author-box{ border-radius: 50%; aspect-ratio: 1/1; width: 15rem; display:flex; justify-content:center; align-items:center; overflow:hidden; transition: all var(--speed-2) }

.post-button{ background: transparent; color: var(--accent-color) !important; border: none !important }
.post-button:hover{ transform: scale(1.15) }

.position-xl-absolute{ position: absolute }
.w-60{ width: 60% !important }

.shadow-double{ box-shadow: 40px -40px 0 -4px var(--accent-color), -54px 44px 0 -3px var(--text-color-2) }
.shadow-single-left{ box-shadow: -54px 44px 0 -3px var(--accent-color) }
.shadow-single-right{ box-shadow: 40px -40px 0 -4px var(--accent-color) }
.shadow-accent-2{ box-shadow: -90px -23px 0 0 var(--accent-color) }

.text-404{ font-size: clamp(6rem, 20vw, 12.5rem); font-weight: 900; font-family: var(--font-2) }
.number-text{ font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 900 }
.text-banner{ font-size: clamp(3rem, 12vw, 12.5rem) }

.rounded-end{ border-top-right-radius: 1rem; border-bottom-right-radius: 1rem }
.swiperImage.floating-left{ margin-left: 16rem }
.floating-heading{ margin-left: -15rem }
.floating-image{ position: absolute }
.floating-price{ top:-2.5rem; right:-10rem }
.floating-banner{ margin-top: -15rem }
.floating-top{ margin-top:-10rem; margin-left:-5rem; margin-bottom:-5rem }
.floating-services{ position: relative; z-index: 9; margin: 3rem 0 -3rem }
.floating-testi{ margin: 19rem 0 -8rem 15rem }
.floating-services-2{ margin-left: -5rem }
.floating-services-2 .padding{ padding-left: 7rem }
.floating-services-3{ position: relative; margin: 3rem 0 -3rem }
.floating-services-3 .padding{ padding-left: 3rem; padding-right: 7rem }
.floating-bottom{ position: absolute; top:8rem; left:-5.5em }
.floating-bottom-1{ position: absolute; bottom:5rem; right:0 }
.floating-bottom-2{ position: absolute; bottom:5rem; right:0 }
.floating-contact{ margin-left: -7rem; border-bottom-left-radius: 1rem }
.floating-counter{ position: relative; margin-top:-6rem; z-index: 9 }
.floating-blog{ margin-top: -3rem }

.image-container{ position: relative; display:inline-block }
.hotspot{
  position:absolute; width:30px; height:30px; background: rgba(24,21,24,.5); border:.5px solid var(--text-color);
  backdrop-filter: blur(2px); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .3s ease, transform .2s; transform: translate(-50%,-50%); box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.hotspot:hover{ background: var(--accent-color) }
.hotspot i{ font-size:16px; font-weight:600; color: var(--text-color); transition: color .3s ease }
.hotspot:hover i{ color: #fff }
.hotspot::after{
  content: attr(data-text); position:absolute; top:-35px; left:50%; transform: translateX(-50%);
  background: rgba(0,0,0,.7); color:#fff; padding:5px 10px; border-radius:5px; font-size:14px; white-space: nowrap; display:none;
}
.hotspot:hover::after{ display:block }

.d-inline-block{ display:inline-block }
.position-responsive{ position: absolute }

.list .icon-box{ width: 4.3rem; height:4.3rem }
.list-flush-horizontal{ display:flex; flex-direction: row; list-style:none; padding:1rem; gap:0 }
.list-flush-horizontal .list-item, .list-flush-horizontal .list-item:first-child{ border-right: 1px solid #fff }
.list-flush-horizontal .list-item:last-child{ border-left: 1px solid #fff; border-right: none }
.list-flush-horizontal .list-item:nth-last-child(2){ border: none }

.list-group-item{ background: transparent; border-radius: 10px }
.list-group .link{
  background: transparent; border: none; color: var(--text-color-2); transition: all .5s; font-size:16px; font-family: var(--font-1);
}
.list-group .link.active{ color: var(--accent-color) }
.list-group .link:hover{ color: var(--accent-color) !important }
.list-group .list-group-item.active{ background: var(--accent-color-2); color: var(--accent-color) }
.list-group .list-group-item.list-group-item-action:hover{ background: var(--accent-color-2); color: #fff }

.list{ display:flex; flex-direction: column; gap:.25rem; padding-inline: .5rem }
.list .link{ font-weight: 400; text-wrap: nowrap }
.list li{ font-size: 16px; font-family: var(--font-2) }
.list li .link{ color: var(--text-color-2); transition: all .5s }
.list li i{ color: var(--accent-color); transition: all .5s }
.list.text-black i{ color: #131313 }
.list li .link:hover, .list li .link:hover i{ color: var(--accent-color) }

.countdown{ display:flex; gap:20px }
.countdown-box{ background: var(--accent-color); color:#fff; text-align:center; padding:30px; width:200px; border-radius:8px }
.countdown-box h2{ margin:0; font-size:2em }
.countdown-box p{ margin:0; font-size:1.2em }


/* ------------------------------------------
   16) Social & Contact
   ------------------------------------------ */
.customer-container{ display:flex; flex-direction: row-reverse }
.customer-item{
  border-radius: 50%; aspect-ratio:1/1; width:4rem; height:4rem; margin-left:-6px; overflow:hidden;
  font-size:19px; display:flex; justify-content:center; align-items:center; color: var(--text-color-2); transition: all .5s;
}
.customer-item.single{ margin-left: 0 }
.customer-item:nth-child(1){ z-index: 6 }
.customer-item:nth-child(2){ z-index: 5 }
.customer-item:nth-child(3){ z-index: 4 }
.customer-item:nth-child(4){ z-index: 3 }

.testimonial-item{ border-radius: 50%; aspect-ratio:1/1; width:5rem; height:5rem; margin-left:-6px; overflow:hidden; display:flex; justify-content:center; transition: all .5s }

.bg-box{ bottom:0; right:0 }

.contact-item{ border-radius: 50%; aspect-ratio:1/1; font-size:40px; height:2rem; display:flex; justify-content:center; align-items:center; color:#fff; transition: all .5s }

.social-item{
  border-radius: 50%; aspect-ratio:1/1; font-size:16px; width:28px; height:28px; display:flex; justify-content:center; align-items:center;
  color: var(--primary); background: var(--text-color); transition: all .3s;
}
.social-item:hover{ background: var(--accent-color) }
.social-item-2, .social-item-3{
  border-radius: 50%; aspect-ratio:1/1; font-size:24px; width:20px; height:20px; display:flex; justify-content:center; align-items:center; transition: all .3s;
}
.social-item-2{ color: var(--text-color-2) }
.social-item-2:hover{ color: var(--accent-color) }
.social-item-3{ color: var(--accent-color) }
.social-item-3:hover{ color: var(--text-color) }

.social-container.accent .social-item,
.social-container.share  .social-item{ background: var(--accent-color); color: white; border-color: var(--accent-color) }

.subscribe-container{ box-sizing: border-box; margin-bottom: -8em }


/* ------------------------------------------
   17) Breadcrumb
   ------------------------------------------ */
.breadcrumb{ align-items: center; font-family: var(--font-2) }
.breadcrumb .breadcrumb-item > a{ color: var(--text-color) }
.breadcrumb .breadcrumb-item.active{ color: var(--accent-color) }
.breadcrumb-item + .breadcrumb-item::before{ color: var(--accent-color) } /* fixed undefined var */


/* ------------------------------------------
   18) Specific Media / Video / Misc
   ------------------------------------------ */
.video-e119{ width:60%; margin-bottom:-3rem; margin-left:-3rem }
.ifr-video{ aspect-ratio:16/9; width:100% }
.video-container{ aspect-ratio:3/2; background-size:cover; background-position:center; position:relative; border:5px solid #fff; border-radius:10px }
.video-iframe{ position:absolute; inset:0; width:100%; height:100% }
.video-btn{
  border:none; border-radius:50%; aspect-ratio:1/1; width:4rem; background: var(--accent-color);
  display:flex; justify-content:center; align-items:center; padding:0; font-size:2rem; color:#fff; opacity:.7;
}
.video-btn:hover{ opacity:1; color:#fff }

.request-loader{
  position: relative; height:60px; width:60px; border-radius:50% !important;
  background: var(--text-color); border: 2px solid var(--text-color); display:flex; justify-content:center; align-items:center;
  color: var(--primary); font-size:25px;
}
.request-loader:hover{ color: var(--text-color); background: transparent }
.request-loader::after, .request-loader::before{
  opacity:.2; position:absolute; content:""; inset:0; border:4px solid currentColor; border-radius:50%;
  animation-name:ripple; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.65,0,.34,1);
}
.request-loader::after{ animation-delay:.5s; animation-duration: 3s }
.request-loader::before{ animation-delay:.2s; animation-duration: 3s }


/* ------------------------------------------
   19) Card Settings
   ------------------------------------------ */
.card{
  border: none; border-radius: var(--radius-sm); transition: transform var(--speed-2) var(--ease-2), box-shadow var(--speed-2) var(--ease-2);
  background: var(--primary);
}
.card:hover{ transform: translateY(-5px) }

.card-accent{
  color: var(--accent-color); position: relative; background-size: cover; background-position: center;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  border-image: linear-gradient(to left, #A502A8, #2F4A9D) 1;
}

.card-blog h4{ color: var(--text-color) }
.card-blog h6{ color: var(--text-color) }
.card-blog:hover h4, .card-blog:hover h6{ color: var(--accent-color) }

.card-service{
  color: var(--text-color); border-radius: 0; border: 1px solid transparent; padding: 30px; position: relative; overflow:hidden;
}
.card-service .background-hover{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition: opacity var(--speed-2) }
.card-service:hover{ color: var(--text-color); border-color: var(--accent-color); background: var(--accent-color-4) }
.card-service:hover .background-hover{
  opacity:1; background: linear-gradient(118.48deg, rgba(47,74,157,.4) 0%, rgba(165,2,168,.4) 100%), linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.9)); border-radius: 10px;
}
.card-service.img-hover:hover{ background-image: var(--url-image) }
.image-hover{ opacity:0; position: absolute; transition: opacity var(--speed-2) }
.card-service:hover .image-hover{ opacity: 1 }

.card-testimonial{
  border: none; border-radius: 20px; transition: all var(--speed-2); background: var(--accent-color-3);
}
.card-testimonial:hover{
  transform: translateY(-20px); box-shadow: 0 0 0 2px var(--accent-color);
}

.card.card-pricing-hover{
  color: var(--text-color); border: 1px solid #01c7f349; border-radius: 20px;
  background: linear-gradient(140.72deg, rgba(30,30,30,.7) -67.01%, rgba(5,5,5,.7) 100.85%);
  backdrop-filter: blur(12.4px);
}
.box-price{
  border: 1px solid; border-image: linear-gradient(210deg, #00000045, #01c7f349) 1;
  box-shadow: var(--shadow-1); border-radius: 10px;
  background: linear-gradient(140.72deg, rgba(30,30,30,.7) -67.01%, rgba(5,5,5,.7) 100.85%);
  backdrop-filter: blur(12.4px);
}
.card.card-pricing-hover:hover{ border-color: var(--accent-color-2); background: linear-gradient(180deg, #01C7F3 -81.79%, #111 100%); transform: scale(1.05) }
.card-pricing-hover-middle{
  transform: scale(1.04); flex: 1; box-shadow: 0 0 0 2px var(--accent-color); color: #fff;
}
.card.card-pricing-hover:hover .btn-accent-outline{ background: var(--text-color); color: var(--primary) }
.card.card-pricing-hover .btn-accent-outline i{ color: var(--text-color) }
.card.card-pricing-hover:hover .btn-accent-outline i{ color: var(--primary) }

.card.card-outline-hover{ box-shadow: var(--shadow-1); border: 1px solid var(--accent-color) }
.card.blog{ background: var(--background-color) }
.card.blog:hover{ border: 1px solid var(--accent-color-2); border-radius: 10px }
.card.with-border-bottom{ border-bottom: 5px solid var(--accent-color) !important }

.card-overlay{ background: transparent; position: relative; overflow:hidden }
.card-overlay .card-body{
  position:absolute; inset:0; opacity:0; transform: scaleY(0); transform-origin: bottom;
  transition: all var(--speed-2);
}
.card-overlay .artist-text{
  transition: all var(--speed-2); transform: rotate(270deg); color: var(--text-color); position:absolute; bottom:0; left:15px; z-index:2; line-height:0; transform-origin: left;
}
.card-overlay img{ padding-left: 40px; transition: all var(--speed-2) }
.card-overlay:hover img{ padding-left: 0 }
.card-overlay.service img{ padding-left: 0 }
.card-overlay:hover .artist-text{ padding-block: 2rem; transform: rotate(360deg); padding-inline: .5rem }
.card-overlay:hover .card-body{
  background: linear-gradient(180deg, rgba(207,171,130,0) 62.08%, #CFAB82 100%);
  transform: scaleY(1); opacity:1; padding: 0;
}

.card-about{
  background: var(--background-color); padding: 3rem; transition: all .8s; border-radius: var(--radius);
}
.card-about:hover{ background: var(--accent-color-2); color: var(--primary); margin-top:-5rem; height: calc(100% + 5rem) }
.card-about:hover p{ color: var(--primary) }
.card-about:hover .icon-box-2{ background: var(--primary); color: var(--accent-color-2) }

.testimonial-container{
  background: var(--background-color); padding: 30px; border-radius: 0; border: 1px solid transparent; color: var(--text-color-2);
  display:flex; flex-direction: column; gap:.5rem; height: 440px;
}
.testimonial-container:hover{
  border: 1px solid rgba(207,171,130,.2); background: var(--accent-color-4); backdrop-filter: blur(12.4px);
}
.testimonial-container:hover .team-name{ color: var(--accent-color) }
.testimonial-container .icon-hover{ color: var(--accent-color-3); font-size: 84px; transition: all var(--speed-2) }
.testimonial-container:hover .icon-hover{
  position:absolute; top:0; right:0; color: var(--accent-color-2); font-size: 37px; margin: 1rem 2rem 0 0;
}

.services-container{
  background: transparent; padding: 30px; display:flex; flex-direction: column; gap:.5rem; height: 100%;
  box-shadow: 0 0 18px rgba(0,0,0,.1);
}

.features-container{ display:flex; justify-content:center; align-items:flex-start; gap:1rem }
.feature-box{
  display:flex; flex-direction: column; gap:1rem; background: var(--accent-color); color: var(--primary);
  border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,.1); padding:3rem; text-align:center; transition: transform .3s ease; height:100%;
}
.feature-box-middle{ transform: scaleY(1.15) scaleX(1.05) }
.feature-box-middle h3, .feature-box-middle p{ position: relative; transform: none }

.class-container{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px }
.class-course{ display:none }
.class-course.active{ display:block }
.class-card:hover{ transform: translateY(-10px); transition: all .5s }
.class-card.active{ display:block }
.class-info{ color: var(--primary); margin:20px; font-family: var(--font-2); font-size:12px; position:absolute; bottom:0; left:0 }
.class-speakers{ display:flex; align-items:center; gap:15px; margin-top:10px }
.class-price{ font-size: 1.2em; color: var(--primary); display:flex; flex-direction:column; align-self:flex-end; width:max-content }
.class-link{ color:#ff3b3b; font-weight:700; margin-top:10px; text-align:left; display:inline-block }

.tab-container{ width:100%; position:relative; text-align:center }
.tab-container.allteam{ display:flex; gap:2rem; justify-content:center; align-items:center; margin: 20px 0; font-family: var(--font-2) }
.tab-container.team{ display:flex; gap:3rem; width:100%; align-items:center }
.tab-container.faq{ display:flex; gap:3rem; width:100% }

.background-container{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center }

.tabs{ display:flex; justify-content:space-around; gap:.75rem }
.tabs.team{ flex-direction: row }
.tabs.studio{ flex-direction: column; gap:1rem; position:absolute; z-index:2; background: rgba(35,31,32,.3); backdrop-filter: blur(17.5px); padding:30px }
.tabs.faq{ flex-direction: column; gap:1rem; padding:30px; background: var(--background-color); border:1px solid var(--accent-color-3) }

.tabs.faq .tab,
.tabs.team .tab,
.tabs.studio .tab{
  flex:1; text-align:left; cursor:pointer; font-size: clamp(1rem, 1.8vw, 1.5rem); font-weight:600; color: var(--text-color-2);
  transition: background .5s ease; border-right:none; padding: 10px 16px;
}
.tabs.faq .tab.active,
.tabs.studio .tab.active{ color: var(--primary); background: var(--accent-color) }

.tab{ flex:1; text-align:center; cursor:pointer; color: var(--text-color); transition: background .5s ease; border-right:1px solid var(--text-color) }
.tab.active{ color: var(--accent-color) }
.tab .title-tab{ font-size: clamp(1.1rem, 2.5vw, 2rem); font-weight: 800; padding: 30px }
.tab.active .title-tab{ background: var(--primary) }

.tab-content.studio, .tab-content.faq, .tab-content.team{
  position:relative; background: var(--primary); padding: 40px; text-align:left;
}
.tab-content.faq{ background: var(--accent-color-3) }

.content{ display:none }
.content.active{ display:block }

.tab .content{
  display:none; position:absolute; bottom:10rem; margin-left:-4rem; max-width:500px; padding: 40px; text-align:left;
  background: rgba(35,31,32,.3); backdrop-filter: blur(17.5px);
}
.tab.active .content{ display:block }

.grid-container{ display:grid; grid-template-columns: repeat(3,1fr) }
.grid-item-1,.grid-item-2,.grid-item-3,.grid-item-4,.grid-item-5,.grid-item-6{
  display:flex; justify-content:center; align-items:center; padding:50px
}
.grid-item-1{ border-right:1px solid rgba(255,255,255,.61); border-bottom:1px solid rgba(255,255,255,.61) }
.grid-item-2{ border-inline:1px solid rgba(255,255,255,.61); border-bottom:1px solid rgba(255,255,255,.61) }
.grid-item-3{ border-left:1px solid rgba(255,255,255,.61); border-bottom:1px solid rgba(255,255,255,.61) }
.grid-item-4{ border-right:1px solid rgba(255,255,255,.61); border-top:1px solid rgba(255,255,255,.61) }
.grid-item-5{ border-inline:1px solid rgba(255,255,255,.61); border-top:1px solid rgba(255,255,255,.61) }
.grid-item-6{ border-left:1px solid rgba(255,255,255,.61); border-top:1px solid rgba(255,255,255,.61) }


/* ------------------------------------------
   20) Progress & Rating + Player
   ------------------------------------------ */
.r-progress{
  --value: 17;
  --progress-color: var(--text-color);
  --secondary-progress-color: var(--accent-color-2);
  --animation-duration: 2000;
}
.r-progress-bar{ position:relative; height:8px; background: var(--secondary-progress-color); display:flex; border-radius: 3px }
.r-progress-bar .progress-value{
  height:100%; width: calc(var(--progress) * 1%); background: var(--progress-color); border-radius: 3px;
  animation: load forwards calc(var(--animation-duration) * 1ms) linear; animation-delay: 500ms;
}
.r-progress-bar.percentage-label::after{
  counter-reset: percentage var(--progress);
  content: counter(percentage) '%';
  position:absolute; left: calc(var(--progress) * 1%); bottom: calc(100% + .5rem);
  font-size: 18px; font-family: var(--font-1);
  animation: load forwards calc(var(--animation-duration) * 1ms) linear; animation-delay: 500ms;
}

.rating{ list-style:none; display:flex; gap:.75rem; padding:0; margin:0 }
.rating li{ color:#f1c644 }
.rating li.inactive{ color:#d9d9d9 }

/* Lightweight player styling (uses your existing markup/ids) */
#player-container{ width:100%; height:100%; margin-top:5rem }
#player-bg-artwork{ position:fixed; inset:-30px; background-size:cover; background-position:50%; filter: blur(40px); z-index:1 }
#player-bg-layer{ position:fixed; inset:0; background:#fff; opacity:.5; z-index:2 }
#player{ position:relative; height:100%; z-index:3 }
#player-track{ width:auto; height:100%; padding: 13px 10px 10px 13px; border-radius: 15px 15px 0 0; transition: .3s ease top; z-index:1 }
#album-name{ color: var(--text-color); font-size: 17px; font-weight: 700 }
#track-name{ color: var(--accent-color); font-size: 13px; margin: 2px 0 13px }
#track-time{ height: 12px; margin-bottom: 3px; overflow: hidden }
#current-time, #track-length{ color: var(--text-color); font-size: 11px; border-radius:10px; transition: .3s ease all }
#seek-bar-container, #seek-bar{ position:relative; height:4px; border-radius:4px }
#seek-bar-container{ background: var(--text-color); cursor: pointer }
#seek-time{ position:absolute; top:-29px; color:#fff; font-size:12px; white-space: pre; padding:5px 6px; border-radius:4px; display:none; background:#3b3d50 }
#s-hover{ position:absolute; inset:0 0 0 0; opacity:.2; z-index:2; background:#3b3d50 }
#seek-bar{ position:absolute; inset:0 0 0 0; width:0; background: var(--accent-color); transition: width .2s ease; z-index:1 }
#player-content{
  display:inline-flex; flex-direction: row; align-items:center; gap:1rem; justify-content:flex-start; padding:16px; width:100%;
  background: rgba(24,21,24,.3); backdrop-filter: blur(17.5px);
}
#album-art{ width:115px; height:115px; border-radius:50%; overflow:hidden; transition: .3s ease all }
#album-art:before{
  content:""; position:absolute; top:50%; left:0; right:0; width:20px; height:20px; margin:-10px auto 0; background: var(--accent-color-3);
  border-radius:50%; box-shadow: inset 0 0 0 2px #fff; z-index:2;
}
#album-art img{ position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:-1 }
#album-art img.active{ opacity:1; z-index:1 }
#album-art.active img.active{ animation: rotateAlbumArt 3s linear infinite }
#buffer-box{ position:absolute; top:50%; left:0; right:0; height:13px; color:#1f1f1f; font-size:13px; text-align:center; font-weight:bold; line-height:1; padding:6px; margin:-12px auto 0; opacity:0; z-index:2 }
#album-art.buffering img{ opacity:.25 }
#album-art.buffering img.active{ opacity:.8; filter: blur(2px) }
#album-art.buffering #buffer-box{ opacity:1 }
#player-controls{ width:auto; display:flex; gap:2rem; height:100%; float:right; overflow:hidden }
.control{ width:33.333%; float:left; padding: 12px 0 }
.button i{ display:block; color:#d6dee7; font-size:16px; text-align:center; line-height:1; transition: .2s ease all }
.button:hover i{ color:#fff }


/* ------------------------------------------
   21) Accordion
   ------------------------------------------ */
.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-padding-x: 0;
}
.accordion .accordion-item{
  background: transparent; border: none; color: var(--text-color-2); border-bottom: 1px solid var(--text-color-2);
}
.accordion-button:focus{ box-shadow: none }
.accordion .accordion-button{
  background: transparent; color: var(--text-color); border-radius:0 !important; font-family: var(--font-1);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 600; display:flex; justify-content:flex-start; padding-block: 1.2rem; position:relative; overflow:hidden;
}
.accordion .accordion-button.accent{ box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06) }
.accordion-button::after{
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23CFAB82" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>');
}
.accordion-button:not(.collapsed)::after{
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23CFAB82" class="bi bi-dash" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>');
}
.accordion .accordion-button:not(.collapsed){ background: transparent; box-shadow:none }
.accordion .accordion-body{
  background: transparent; font-size: 16px; color: var(--text-color-2); font-family: var(--font-2); padding-inline:0;
}


/* ------------------------------------------
   22) Responsive — 993px and below
   ------------------------------------------ */
@media only screen and (max-width: 993px){

  /* Type */
  h1{ font-size: 30px }
  h2{ font-size: 38px }
  h3{ font-size: 28px }
  h4{ font-size: 22px }
  h5{ font-size: 18px }
  h6{ font-size: 14px }
  p, button, a{ font-size: 13px }

  .text-banner{ font-size: 50px }

  /* Buttons */
  .btn{ font-size: 13px; width: 100% }

  /* Header */
  .logo-container{ max-width: 100px }
  .nav-link{ padding-block: .2rem; text-align:center }
  #header{ background: var(--background-color); backdrop-filter: blur(11px) }

  /* Utilities */
  .p-banner{ color: var(--text-color) }
  .w-max-content{ width: 100% }
  .section{ padding: 4em 2em }
  .divider{ width: 330px }
  .fs-very-large{ font-size: 3.125rem }
  .text-404{ font-size: 8rem; font-weight: 700 }
  .image-infinite-bg{ background-size: cover !important }
  .border-custom{ border-width: 0 0 1px 0 }
  .outer-margin{ margin-right: 0 }
  .banner-image, .testimonial-img{ margin:0; transform:none }

  .dropdown-menu{ width:100%; box-shadow:none }
  .video-e119{ width:85%; margin-left:-1.5rem }
  .dropdown-item{ padding-block: .35rem }

  .floating-image{ position: static }
  .floating-price{ top:-2.5rem; right:-7.5rem }
  .floating-heading{ margin-left: 0 }
  .floating-banner{ margin: -10rem 1rem 0 }
  .floating-top{ position: relative; margin: 0 }
  .floating-testi{ margin: 1rem }
  .floating-services{ position: relative; z-index: 9; margin: 3rem 0 1rem }
  .floating-services-2{ margin-left: 0 }
  .floating-services-2 .padding{ padding-left: 3rem }
  .floating-services-3{ position: relative; margin: 1rem 0 -3rem }
  .floating-services-3 .padding{ padding-inline: 3rem }
  .floating-bottom, .floating-bottom-1, .floating-bottom-2{ position: static; margin-top: 1rem }

  .floating-contact{ margin-left: 0 }
  .floating-counter{ position: relative; margin-top: -5rem; z-index: 9 }
  .floating-blog{ margin-top: 0 }
  .border-testimonial{ border-right: none }

  .service-container{
    background: transparent; padding: 30px; display:flex; flex-direction: column; gap: 1.75rem; box-shadow: 0 0 18px rgba(0,0,0,.1); height: 100%;
  }
  .appointment-box{ top:-2rem; height: 8rem }

  .w-md-70{ width: 70% }
  .w-md-60{ width: 60% }
  .position-responsive{ position: relative }
  .form-appointment-container{ position: relative; transform: translateY(0) }

  .list-flush-horizontal{ flex-direction: column }
  .list-flush-horizontal .list-item, .list-flush-horizontal .list-item:first-child{ border-right: none; border-bottom: 1px solid #fff }
  .list-flush-horizontal .list-item:last-child{ border-left: none; border-bottom: none; border-top: 1px solid #fff }

  .position-xl-absolute{ position: static }
  .banner-heading{ font-size: 2.5rem }

  .tabs.studio{
    position: relative; z-index: 2; background: rgba(35,31,32,.3); backdrop-filter: blur(17.5px); padding: 30px; align-items: center;
  }
  .tabs{ display:grid; grid-template-columns: 1fr }
  .tab-content{ position: relative; left: 0 }
  .tab-container{ display:grid; grid-template-columns: 1fr; justify-content:center; align-items:center }
  .class-container{ grid-template-columns: 1fr }

  footer .d-flex.flex-column{ text-align:center; justify-content:center; align-items:center; margin-bottom:20px; padding:0 }
  footer .link.d-flex.flex-row{ text-align:center; justify-content:center; align-items:center }
  footer .list{ padding:0 }
  .footer, .footer-img{ position: relative }

  .features-container{ flex-direction: column; justify-content:center; align-items:flex-start }

  .testimonial-container{ background: transparent; padding: 1rem; border-radius: 10px }

  .swiperImage{ padding-bottom: 0 }
  .service-scroll{ padding-right: 1rem }

  .swiper-button-next, .swiper-button-prev{ top: 15rem; height: 80px; width: 80px; border: 5px solid var(--primary) }
  .swiper-button-next::after, .swiper-button-prev::after{ font-size: 24px }

  .mySwiper .swiper-button-next, .mySwiper .swiper-button-prev{ top: 28rem; width: 40px; height: 40px }
  .mySwiper .swiper-button-next{ right: 0; transform: translateY(20px) }
  .mySwiper .swiper-button-prev{ left: 70%; transform: translateY(20px) }

  .swiperStep2 .swiper-button-next::after, .swiperStep2 .swiper-button-prev::after{ font-size: 16px }
  .swiperStep2 .swiper-button-next, .swiperStep2 .swiper-button-prev{ width: 50px; height: 50px; border: 3px solid var(--primary) }
  .swiperStep2 .swiper-button-next{ right: 7%; transform: translateY(20px) }
  .swiperStep2 .swiper-button-prev{ left: 7%;  transform: translateY(20px) }

  .icon-box.link{ font-size: 25px; padding: 25px }
  .tab .content{ margin-left: 0; position: static }
}