*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --burgundy: #7c171e;
     --burgundy-dk: #3f0d12;
     --saffron: #c78a2f;
     --saffron-lt: #f1bf62;
     --cream: #fff8ea;
     --cream-dk: #efe1bf;
     --charcoal: #17110e;
     --ink: #2b211c;
     --muted: #76695f;
     --terracotta: #a74725;
     --white: #FFFFFF;
     --gold-soft: rgba(199, 138, 47, .18);
     --border-soft: rgba(124, 23, 30, .12);
     --shadow: 0 18px 46px rgba(63, 13, 18, 0.10);
     --shadow-lg: 0 26px 70px rgba(63, 13, 18, 0.18);
     --ff-display: 'Cormorant Garamond', Georgia, serif;
     --ff-body: 'DM Sans', system-ui, sans-serif;
     --radius: 8px;
     --radius-lg: 18px;

     --site-max-width: 1280px;
     --detail-max-width: 1110px;

     --site-gutter: clamp(18px, 3vw, 40px);

     --section-space: clamp(70px, 7vw, 110px);
     --section-space-small: clamp(55px, 5vw, 80px);
 }

 @media (max-width: 767px) {
     :root {
         --site-gutter: 18px;
         --section-space: 70px;
         --section-space-small: 55px;
     }
 }

 html {
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
 }

 body {
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
     position: relative;
 }


 /* Prevent sliders / marquees from expanding page width */

 .swiper,
 .swiper-wrapper,
 .swiper-slide,
 .common-marquee,
 .common-marquee-viewport,
 .video-marquee-section {
     max-width: 100%;
 }

 body {
     font-family: var(--ff-body);
     background:
         radial-gradient(circle at top left, rgba(199, 138, 47, .16), transparent 34vw),
         linear-gradient(180deg, #fffaf0 0%, #ffffff 42%, #fff8ea 100%);
     color: var(--ink);
     font-size: 16px;
     line-height: 1.7;
     overflow-x: hidden;
 }

 /* Global Typography System */
 p {
     font-family: var(--ff-body);
     font-size: 16px;
     line-height: 1.8;
     color: var(--muted);
     margin-bottom: 16px;
 }

 p:last-child {
     margin-bottom: 0;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--ff-display);
     font-weight: 700;
     line-height: 1.2;
     color: var(--burgundy);
     margin-bottom: 16px;
 }

 h1:last-child,
 h2:last-child,
 h3:last-child,
 h4:last-child,
 h5:last-child,
 h6:last-child {
     margin-bottom: 0;
 }

 h1 {
     font-size: clamp(36px, 5.5vw, 54px);
 }

 h2 {
     font-size: clamp(28px, 4vw, 42px);
 }

 h3 {
     font-size: clamp(22px, 3vw, 32px);
 }

 h4 {
     font-size: 20px;
 }

 h5 {
     font-size: 18px;
 }

 h6 {
     font-size: 16px;
 }

 body::before {
     content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: -1;
     background-image:
         linear-gradient(rgba(124, 23, 30, .035) 1px, transparent 1px),
         linear-gradient(90deg, rgba(124, 23, 30, .035) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 65%);
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 ul {
     list-style: none;
 }

 img {
     max-width: 100%;
     display: block;
 }

 /* ===================== STICKY SOCIAL ===================== */
 .social-strip {
     position: fixed;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     z-index: 900;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .social-strip a {
     display: flex;
     align-items: center;
     gap: 0;
     background: var(--burgundy);
     color: var(--white);
     width: 40px;
     height: 40px;
     overflow: hidden;
     transition: width .3s ease, background .2s;
     white-space: nowrap;
 }

 .social-strip a:hover {
     width: 120px;
     background: var(--saffron);
 }

 .social-strip a i {
     width: 40px;
     height: 40px;
     line-height: 40px;
     font-size: 18px;
     text-align: center;
     flex-shrink: 0;
     color: var(--white);
 }

 .social-strip a span {
     font-size: 13px;
     font-family: var(--ff-body);
     padding-left: 4px;
 }

 /* ===================== WHATSAPP ===================== */
 .whatsapp-btn {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 900;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #25D366;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 16px rgba(37, 211, 102, .4);
     transition: transform .2s;
 }

 .whatsapp-btn:hover {
     transform: scale(1.1);
 }

 .whatsapp-btn i {
     font-size: 32px;
     color: #fff;
     display: block;
     line-height: 1;
 }

 /* ===================== TOP BAR ===================== */

 .top-bar {
     background: linear-gradient(90deg, var(--white), var(--cream));
     color: var(--ink);
     font-size: 13px;
     padding: 8px 0;
     border-bottom: 1px solid var(--border-soft);
 }


 .top-bar a {
     color: var(--muted);
     transition: color .2s;
 }

 .top-bar a:hover {
     color: var(--burgundy);
 }

 .top-bar i {
     color: var(--saffron);
 }


 /* ===================== TICKER ===================== */

 .ticker-wrap-top {
     width: 100%;
     overflow: hidden;
 }

 .ticker-inner-top {
     display: flex;
     width: max-content;
     animation: ticker 30s linear infinite;
 }

 .ticker-inner-top span {
     padding: 0 40px;

     color: var(--burgundy);

     font-family: var(--ff-display);
     font-size: 16px;
     font-weight: 600;

     white-space: nowrap;
 }

 .ticker-inner-top:hover {
     animation-play-state: paused;
 }


 /* ===================== CONTACT ===================== */

 .top-bar-contact {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     flex-wrap: wrap;

     gap: 12px;
 }

 .top-bar-contact a {
     display: inline-flex;
     align-items: center;

     color: var(--burgundy) !important;

     font-size: 13px;
     font-weight: 600;

     text-decoration: none;

     transition: color .2s ease;
 }

 .top-bar-contact a:hover {
     color: var(--saffron) !important;
 }

 .top-bar-contact i {
     color: var(--saffron) !important;
     font-size: 14px;
 }

 .top-bar-contact .separator {
     color: var(--border-soft);
     font-size: 12px;
 }


 /* ===================== MOBILE ===================== */

 @media (max-width: 991px) {

     .top-bar {
         display: none;
     }

 }

 /* ===================== ANNOUNCEMENT TICKER ===================== */
 .ticker-wrap {
     background: #fff3d5;
     border-top: 1px solid rgba(199, 138, 47, .35);
     border-bottom: 1px solid rgba(199, 138, 47, .35);
     overflow: hidden;
     padding: 6px 0;
 }

 .ticker-inner {
     display: flex;
     animation: ticker 30s linear infinite;
     width: max-content;
 }

 .ticker-inner:hover {
     animation-play-state: paused;
 }

 .ticker-inner span {
     font-family: var(--ff-display);
     font-size: 16px;
     font-weight: 600;
     color: var(--burgundy);
     padding: 0 40px;
     white-space: nowrap;

 }

 .ticker-inner span::before {
     content: '♪ ';
     color: var(--saffron);
 }

 @keyframes ticker {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* ===================== NAV ===================== */
 .site-nav {
     position: sticky;
     top: 0;
     z-index: 800;
     background: rgba(255, 255, 255, 0.88);
     backdrop-filter: blur(18px);
     border-bottom: 1px solid rgba(124, 23, 30, .12);
     box-shadow: 0 14px 36px rgba(63, 13, 18, .08);
 }

 /* .nav-inner {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 82px;
 } */

 .nav-menu {
     display: flex;
     gap: 4px;
     margin: 0;
     padding: 0;
     align-items: center;
 }

 .nav-logo {
     display: flex;
     justify-content: flex-start;
 }

 .nav-logo img {
     height: 62px;
     width: auto;
     filter: drop-shadow(0 8px 16px rgba(63, 13, 18, .12));
 }

 .site-nav .nav-link {
     position: relative;
     font-family: var(--ff-body);
     font-size: 16px;
     font-weight: 600;
     color: var(--ink);
     padding: 10px 12px;
     border-radius: 999px;
     transition: color .2s;
     cursor: pointer;
 }

 .site-nav .nav-link:hover {
     color: var(--burgundy);
     background: rgba(124, 23, 30, .06);
 }

 .site-nav .nav-link::after {
     content: '';
     position: absolute;
     bottom: 4px;
     left: 12px;
     right: 12px;
     height: 2px;
     background: var(--saffron);
     transform: scaleX(0);
     transition: transform .2s;
     border-radius: 2px;
 }

 .site-nav .nav-link:hover::after {
     transform: scaleX(1);
 }

 /* Dropdown */
 .nav-item {
     position: relative;
 }

 .nav-item .dropdown-menu {
     display: block !important;
     position: absolute;
     top: calc(100% + 12px);
     left: 0;
     background: var(--white);
     border: 1px solid var(--border-soft);
     border-top: 3px solid var(--saffron);
     border-radius: 14px;
     box-shadow: var(--shadow-lg);
     min-width: 200px;
     padding: 10px 0;
     opacity: 0;
     pointer-events: none;
     transform: translateY(-8px);
     transition: all .2s ease;
     z-index: 999;
 }

 /* Hover bridge to bridge the 12px gap between nav item and dropdown menu */
 .nav-item .dropdown-menu::before {
     content: '';
     position: absolute;
     top: -16px;
     left: 0;
     right: 0;
     height: 16px;
     background: transparent;
 }

 .nav-item:hover .dropdown-menu {
     opacity: 1 !important;
     pointer-events: all !important;
     transform: translateY(0);
 }

 .dropdown-menu a {
     display: block;
     padding: 9px 18px;
     font-size: 14px;
     color: var(--ink);
     transition: background .15s, color .15s;
 }

 .dropdown-menu a:hover {
     background: rgba(199, 138, 47, .10);
     color: var(--burgundy);
 }

 /* Mobile nav toggle */
 .nav-toggle {
     display: none;
     background: none;
     border: none;
     cursor: pointer;
     flex-direction: column;
     gap: 5px;
     padding: 8px;
 }

 .nav-toggle span {
     display: block;
     width: 24px;
     height: 2px;
     background: var(--ink);
     border-radius: 2px;
     transition: all .3s;
 }

 .mobile-nav {
     display: none;
     position: fixed;
     inset: 0;
     top: 0;
     background: var(--cream);
     z-index: 9999;
     overflow-y: auto;
     padding: 80px 24px 40px;
 }

 .mobile-nav.open {
     display: block;
 }

 .mobile-close {
     position: absolute;
     top: 20px;
     right: 24px;
     background: none;
     border: none;
     font-size: 28px;
     cursor: pointer;
     color: var(--ink);
 }

 .mobile-nav a {
     display: block;
     padding: 14px 0;
     font-size: 18px;
     font-family: var(--ff-display);
     border-bottom: 1px solid var(--cream-dk);
     color: var(--ink);
 }

 .mobile-nav a:hover {
     color: var(--burgundy);
 }

 .mobile-subnav {
     padding-left: 20px;
 }

 .mobile-subnav a {
     font-size: 15px;
     font-family: var(--ff-body);
 }


 /* ===================== GLOBAL CONTAINER SYSTEM ===================== */

 .top-bar-inner,
 .nav-inner {
     width: 100%;
     max-width: var(--site-max-width);
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--site-gutter);
     padding-right: var(--site-gutter);
 }

 .nav-inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 82px;
 }

 /* ===================== HERO ===================== */
 .hero {
     position: relative;
     min-height: 620px;
     background: var(--burgundy-dk);
     overflow: hidden;
     display: grid;
     align-items: center;
 }

 .hero-img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: .58;
     transform: scale(1.02);
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background:
         radial-gradient(circle at 50% 45%, rgba(199, 138, 47, .15), transparent 28%),
         linear-gradient(90deg, rgba(255, 248, 234, .70) 0%, rgba(255, 255, 255, .50) 48%, rgba(255, 248, 234, .60) 100%),
         linear-gradient(180deg, transparent 65%, rgba(255, 255, 255, .45) 100%);
 }

 .hero::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: -80px;
     width: min(86vw, 1040px);
     height: 160px;
     transform: translateX(-50%);
     border-radius: 50%;
     background: rgba(255, 248, 234, .92);
     filter: blur(.2px);
 }

 .hero-content {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: var(--site-max-width);
     margin: 0 auto;
     padding:
         clamp(90px, 8vw, 130px) var(--site-gutter) clamp(110px, 9vw, 150px);
     text-align: center;
 }

 .hero-eyebrow {
     font-family: var(--ff-body);
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--saffron-lt);
     margin-bottom: 16px;
 }

 .hero-title {
     font-family: var(--ff-display);
     font-size: clamp(44px, 6.8vw, 88px);
     font-weight: 700;
     color: var(--white);
     line-height: 1.05;
     margin-bottom: 24px;
     text-shadow: 0 18px 42px rgba(0, 0, 0, .28);
 }

 .hero-title em {
     font-style: italic;
     color: var(--saffron-lt);
 }

 .hero-ctas {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 32px;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 15px 30px;
     border-radius: 999px;
     font-family: var(--ff-body);
     font-size: 14px;
     font-weight: 600;
     letter-spacing: .5px;
     transition: all .25s;
     cursor: pointer;
     border: 2px solid transparent;
 }

 .btn-primary {
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron));
     color: #2b1609;
     border-color: var(--saffron);
     box-shadow: 0 14px 34px rgba(199, 138, 47, .34);
 }

 .btn-primary:hover {
     background: var(--saffron-lt);
     border-color: var(--saffron-lt);
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(212, 136, 42, .4);
 }

 .btn-outline {
     background: rgba(255, 255, 255, .10);
     color: var(--white);
     border-color: rgba(255, 255, 255, .6);
     backdrop-filter: blur(10px);
 }

 .btn-outline:hover {
     background: rgba(255, 255, 255, .1);
     border-color: var(--white);
     transform: translateY(-2px);
 }

 /* ===================== STRING DIVIDER (Signature) ===================== */
 .string-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 32px 0 8px;
 }

 .string-divider .s-line {
     width: 1px;
     background: var(--saffron);
     opacity: .6;
 }

 .string-divider .s-line:nth-child(1),
 .string-divider .s-line:nth-child(9) {
     height: 18px;
 }

 .string-divider .s-line:nth-child(2),
 .string-divider .s-line:nth-child(8) {
     height: 28px;
 }

 .string-divider .s-line:nth-child(3),
 .string-divider .s-line:nth-child(7) {
     height: 38px;
 }

 .string-divider .s-line:nth-child(4),
 .string-divider .s-line:nth-child(6) {
     height: 44px;
 }

 .string-divider .s-line:nth-child(5) {
     height: 48px;
     opacity: 1;
 }

 .string-divider .s-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--saffron);
     margin: 0 12px;
 }

 /* ===================== SECTIONS ===================== */

 .section {
     padding: var(--section-space) var(--site-gutter);
     position: relative;
 }

 .section-inner {
     width: 100%;
     max-width: var(--site-max-width);
     margin: 0 auto;
 }


 /* ===================== WHITE / DEFAULT ===================== */

 .section-white {
     background-color: #ffffff;
 }


 /* ===================== LIGHT CREAM ===================== */

 .section-cream {
     background:
         linear-gradient(135deg,
             rgba(255, 250, 240, 0.98),
             rgba(255, 246, 228, 0.92)),
         radial-gradient(circle at top right,
             rgba(199, 138, 47, 0.13),
             transparent 38%);
 }


 /* ===================== DEEPER CREAM ===================== */

 .section-cream-dk {
     background: #f3e5c7;
 }


 /* ===================== DARK ===================== */

 .section-dark {
     background: var(--charcoal);
     color: var(--cream);
 }


 /* ===================== BURGUNDY ===================== */

 .section-burgundy {
     background: var(--burgundy);
     color: var(--white);
 }


 /* ===================== PATTERN ===================== */

 .section-pattern {
     background-color: #fdf2dc;

     background-image:
         linear-gradient(135deg,
             rgba(255, 250, 239, 0.72),
             rgba(250, 235, 207, 0.82)),
         url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c78a2f' fill-opacity='0.09'%3E%3Cpath d='M26 0 L52 26 L26 52 L0 26 Z M26 12 L40 26 L26 40 L12 26 Z'/%3E%3C/g%3E%3C/svg%3E");
 }


 /* ===================== SECTION LABEL ===================== */

 .section-label {
     font-family: var(--ff-body);
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--saffron);
     margin-bottom: 12px;
 }


 /* ===================== SECTION TITLE ===================== */

 .section-title {
     margin-bottom: 20px;
 }

 .section-title-light {
     color: var(--cream);
 }

 .section-title span {
     color: var(--saffron);
 }


 /* ===================== SECTION SUBTITLE ===================== */

 .section-subtitle {
     max-width: 80%;
 }


 /* ===================== HELPERS ===================== */

 .text-center {
     text-align: center;
 }

 .mx-auto {
     margin-left: auto;
     margin-right: auto;
 }


 /* Remove top spacing when two related sections
   are placed one after another */

 .section-no-top {
     padding-top: 0 !important;
 }

 /* ===================== INTRO TEXT ===================== */
 .intro-text {
     max-width: 900px;
     margin: 0 auto;
     text-align: center;
     background: rgba(255, 255, 255, .72);
     border: 1px solid var(--border-soft);
     border-radius: 24px;
     box-shadow: var(--shadow);
     padding: clamp(28px, 5vw, 56px);
     backdrop-filter: blur(12px);
 }


 /* ===================== ABOUT SECTION ===================== */
 .about-section-wrap {
     width: 100%;
 }

 .about-heading {
     margin-bottom: 20px;
 }

 .about-text {
     font-size: 16px;
     line-height: 1.8;
     color: var(--muted);
     margin-bottom: 20px;
 }

 .about-text:last-of-type {
     margin-bottom: 0;
 }

 .about-image-wrapper {
     position: relative;
     padding: 12px;
     border-radius: var(--radius-lg);
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron));
     box-shadow: var(--shadow-lg);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .about-image {
     width: 100%;
     height: 360px;
     object-fit: cover;
     border-radius: calc(var(--radius-lg) - 6px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     position: relative;
     z-index: 2;
 }

 .about-image-contain {
     background-color: #ffffff;
 }

 .about-image-contain .about-image {
     object-fit: contain;
     background-color: #ffffff;
     cursor: zoom-in;
 }

 /* Lightbox */
 .about-image-lightbox {
     position: fixed;
     inset: 0;
     z-index: 99999;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 30px;
     background: rgba(0, 0, 0, 0.88);
 }

 .about-image-lightbox.active {
     display: flex;
 }

 .about-image-lightbox img {
     max-width: 90vw;
     max-height: 90vh;
     object-fit: contain;
 }

 .about-image-lightbox-close {
     position: absolute;
     top: 20px;
     right: 30px;
     border: 0;
     background: transparent;
     color: #ffffff;
     font-size: 40px;
     line-height: 1;
     cursor: pointer;
 }

 .about-decor-ring {
     position: absolute;
     top: -15px;
     right: -15px;
     width: 120px;
     height: 120px;
     border: 2px dashed rgba(199, 138, 47, 0.4);
     border-radius: 50%;
     z-index: 1;
     animation: rotateRing 30s linear infinite;
 }

 @media (max-width: 767px) {
     .about-decor-ring {
         top: -8px;
         right: -8px;
         width: 70px;
         height: 70px;
         border-width: 1px;
     }
 }

 /* ===================== INSTRUMENTS ===================== */

 .instruments-label {
     color: var(--burgundy);
     margin-bottom: 10px;
 }

 .instruments-sub {
     color: var(--muted);
 }


 /* =========================================================
   DESKTOP INSTRUMENT MARQUEE
========================================================= */

 .instruments-desktop {
     display: block;
 }

 .instruments-track-wrap {
     position: relative;
     overflow: hidden;
     padding: 20px 0;

     mask-image:
         linear-gradient(to right,
             transparent,
             #000 10%,
             #000 90%,
             transparent);

     -webkit-mask-image:
         linear-gradient(to right,
             transparent,
             #000 10%,
             #000 90%,
             transparent);
 }

 .instruments-track {
     display: flex;
     width: max-content;
     gap: 24px;

     animation: slide 40s linear infinite;
 }

 .instruments-track:hover {
     animation-play-state: paused;
 }


 /* Marquee Animation */

 @keyframes slide {

     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }

 }


 /* =========================================================
   INSTRUMENT CARD
========================================================= */

 .instrument-card {
     width: 250px;
     flex-shrink: 0;

     padding: 20px;

     text-align: center;

     background: var(--white);

     border: 1px solid var(--border-soft);
     border-radius: var(--radius-lg);

     transition:
         background 0.2s ease,
         border-color 0.2s ease,
         transform 0.2s ease,
         box-shadow 0.2s ease;
 }

 .instrument-card:hover {
     background: rgba(199, 138, 47, 0.06);

     border-color: var(--saffron);

     transform: translateY(-4px);

     box-shadow: var(--shadow);
 }

 .instrument-card img {
     display: block;

     width: 180px;
     height: 120px;

     margin: 0 auto;

     object-fit: contain;
 }

 .instrument-card p {
     margin-top: 12px;
     margin-bottom: 0;

     color: var(--saffron);

     font-weight: 600;
 }


 /* =========================================================
   MOBILE INSTRUMENT SLIDER
========================================================= */

 .instruments-mobile {
     display: none;
 }


 /* =========================================================
   MOBILE
========================================================= */

 @media (max-width: 767px) {

     /* Hide desktop marquee */

     .instruments-desktop {
         display: none;
     }


     /* Show mobile Swiper */

     .instruments-mobile {
         display: block;

         width: 100%;

         margin-top: 28px;

         overflow: hidden;
     }


     .instruments-mobile-swiper {
         padding-top: 12px;
         width: 100%;
         overflow: hidden;
     }


     .instruments-mobile-swiper .swiper-wrapper {
         align-items: stretch;
     }


     .instruments-mobile-swiper .swiper-slide {
         display: flex;

         height: auto;
     }


     /* Two cards visible */

     .instruments-mobile .instrument-card {
         width: 100%;
         height: 100%;

         flex-shrink: 0;

         padding: 14px 10px;

         border-radius: 14px;
     }


     .instruments-mobile .instrument-card img {
         width: 100%;
         height: 95px;

         object-fit: contain;
     }


     .instruments-mobile .instrument-card p {
         margin-top: 10px;
         margin-bottom: 0;

         font-size: 14px;
         line-height: 1.4;
     }


     /* ===================== NAVIGATION ===================== */

     .instruments-mobile-navigation {
         display: flex;

         align-items: center;
         justify-content: center;

         gap: 12px;

         margin-top: 22px;
     }


     .instruments-mobile-prev,
     .instruments-mobile-next {
         display: flex;

         align-items: center;
         justify-content: center;

         width: 42px;
         height: 42px;

         padding: 0;

         border: 1px solid var(--border-soft);
         border-radius: 50%;

         background: var(--white);

         color: var(--burgundy);

         box-shadow: var(--shadow);

         cursor: pointer;

         transition:
             background 0.3s ease,
             color 0.3s ease,
             border-color 0.3s ease,
             transform 0.3s ease,
             box-shadow 0.3s ease;
     }


     .instruments-mobile-prev i,
     .instruments-mobile-next i {
         font-size: 14px;
     }


     .instruments-mobile-prev:hover,
     .instruments-mobile-next:hover {
         background: var(--burgundy);

         border-color: var(--burgundy);

         color: var(--white);

         transform: translateY(-2px);

         box-shadow: var(--shadow-lg);
     }


     .instruments-mobile-prev.swiper-button-disabled,
     .instruments-mobile-next.swiper-button-disabled {
         opacity: 0.4;

         cursor: default;

         pointer-events: none;
     }

 }


 /* =========================================================
   SMALL MOBILE
========================================================= */

 @media (max-width: 480px) {

     .instruments-mobile {
         margin-top: 24px;
     }

     .instruments-mobile .instrument-card {
         padding: 12px 8px;
     }

     .instruments-mobile .instrument-card img {
         height: 85px;
     }

     .instruments-mobile .instrument-card p {
         font-size: 13px;
     }

     .instruments-mobile-prev,
     .instruments-mobile-next {
         width: 40px;
         height: 40px;
     }

 }

 /* ===================== MAESTROS ===================== */
 .section-maestros {
     padding-top: 50px;
     padding-bottom: 40px;
 }

 .maestros-swiper {
     margin-top: 15px;
     padding: 10px 60px 40px 60px;
     overflow: visible;
     /* To allow shadow/rings to render correctly outside the row */
 }

 .maestro-slide-row {
     background: transparent;
     border: none;
     border-radius: 0;
     box-shadow: none;
     transition: none;
 }

 /* Container for circular image, concentric rings and floating notes */
 .maestro-slide-img-container {
     position: relative;
     width: 340px;
     height: 340px;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Styled circular wrapper for the actual image */
 .maestro-slide-img-wrapper {
     width: 250px;
     height: 250px;
     border-radius: 50%;
     overflow: hidden;
     position: relative;
     z-index: 5;
     border: 5px solid var(--white);
     box-shadow: 0 12px 36px rgba(63, 13, 18, 0.18);
     opacity: 0;
     transform: scale(0.85);
     transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
 }

 .maestro-slide-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: saturate(.96) contrast(1.04);
 }

 /* Transition trigger on active slide */
 .swiper-slide-active .maestro-slide-img-wrapper {
     opacity: 1;
     transform: scale(1);
 }

 /* Concentric Musical / Soundwave Rings */
 .music-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     border-radius: 50%;
     z-index: 1;
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.8);
     transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease;
 }

 .swiper-slide-active .music-ring {
     opacity: 1;
 }

 .music-ring.ring-1 {
     width: 280px;
     height: 280px;
     border: 1px dashed rgba(199, 138, 47, 0.5);
     animation: rotateRing 25s linear infinite;
 }

 .music-ring.ring-2 {
     width: 310px;
     height: 310px;
     border: 1px solid rgba(124, 23, 30, 0.12);
     animation: pulseRing 5s ease-in-out infinite alternate;
 }

 .music-ring.ring-3 {
     width: 340px;
     height: 340px;
     border: 1px dashed rgba(199, 138, 47, 0.25);
     animation: rotateRingCounter 35s linear infinite;
 }

 /* Floating Music Notes */
 .float-note {
     position: absolute;
     font-size: 18px;
     z-index: 6;
     opacity: 0;
     transition: opacity 1s ease 0.3s;
 }

 .swiper-slide-active .float-note {
     opacity: 0.85;
 }

 .float-note.note-1 {
     top: 18%;
     left: 12%;
     color: var(--saffron);
     animation: floatNote1 4.5s ease-in-out infinite;
 }

 .float-note.note-2 {
     bottom: 20%;
     right: 10%;
     color: var(--burgundy);
     animation: floatNote2 5.5s ease-in-out infinite;
 }

 .float-note.note-3 {
     top: 25%;
     right: 14%;
     color: var(--saffron-lt);
     animation: floatNote3 6.5s ease-in-out infinite;
 }

 /* Right Content Layout styling */
 .maestro-slide-content-col {
     display: flex;
     align-items: center;
 }

 .maestro-slide-content {
     padding: 30px 40px;
     position: relative;
 }

 /* Elegant Music Quote Watermark */
 .maestro-quote-icon {
     font-size: 54px;
     color: rgba(124, 23, 30, 0.05);
     margin-bottom: -15px;
     line-height: 1;
     transform: translateY(10px);
     transition: transform 0.8s ease 0.1s;
 }

 .swiper-slide-active .maestro-quote-icon {
     transform: translateY(0);
 }

 .maestro-name {
     font-family: var(--ff-display);
     font-size: clamp(24px, 3.5vw, 32px);
     color: var(--burgundy);
     margin-bottom: 12px;
     opacity: 0;
     transform: translateY(20px);
     transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.15s, opacity 0.8s ease 0.15s;
 }

 .swiper-slide-active .maestro-name {
     opacity: 1;
     transform: translateY(0);
 }

 /* Saffron decorative separator */
 .maestro-divider {
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, var(--saffron), transparent);
     margin-bottom: 24px;
     opacity: 0;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.25s, opacity 0.8s ease 0.25s;
 }

 .swiper-slide-active .maestro-divider {
     opacity: 1;
     transform: scaleX(1);
 }

 .maestro-desc {
     font-family: var(--ff-body);
     font-size: 16px;
     line-height: 1.8;
     color: var(--muted);
     margin-bottom: 0;
     opacity: 0;
     transform: translateY(20px);
     transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.35s, opacity 0.8s ease 0.35s;
 }

 .swiper-slide-active .maestro-desc {
     opacity: 1;
     transform: translateY(0);
 }

 /* Swiper Navigation Custom Controls */
 .maestros-button-next,
 .maestros-button-prev {
     color: var(--burgundy) !important;
     background: var(--white);
     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: 1px solid var(--border-soft);
     box-shadow: 0 6px 20px rgba(63, 13, 18, 0.1);
     transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
     top: 50% !important;
     transform: translateY(-50%) !important;
 }

 .maestros-button-next::after,
 .maestros-button-prev::after {
     font-size: 16px !important;
     font-weight: bold;
 }

 .maestros-button-prev {
     left: 4px !important;
 }

 .maestros-button-next {
     right: 4px !important;
 }

 .maestros-button-next:hover,
 .maestros-button-prev:hover {
     background: var(--burgundy);
     color: var(--white) !important;
     box-shadow: 0 8px 24px rgba(124, 23, 30, 0.22);
     transform: translateY(-50%) scale(1.08) !important;
 }

 /* Swiper Pagination Styling */
 .maestros-pagination {
     bottom: 12px !important;
 }

 .maestros-pagination .swiper-pagination-bullet {
     background: var(--burgundy) !important;
     width: 8px;
     height: 8px;
     opacity: 0.25;
     transition: all 0.3s ease;
 }

 .maestros-pagination .swiper-pagination-bullet-active {
     background: var(--saffron) !important;
     width: 22px;
     border-radius: 4px;
     opacity: 1;
 }

 /* Keyframe Animations for Music elements */
 @keyframes rotateRing {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 @keyframes rotateRingCounter {
     0% {
         transform: translate(-50%, -50%) rotate(360deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
 }

 @keyframes pulseRing {
     0% {
         transform: translate(-50%, -50%) scale(0.96);
         opacity: 0.4;
     }

     100% {
         transform: translate(-50%, -50%) scale(1.04);
         opacity: 0.85;
     }
 }

 @keyframes floatNote1 {
     0% {
         transform: translateY(0) rotate(0deg);
     }

     50% {
         transform: translateY(-16px) rotate(15deg);
     }

     100% {
         transform: translateY(0) rotate(0deg);
     }
 }

 @keyframes floatNote2 {
     0% {
         transform: translateY(0) rotate(0deg);
     }

     50% {
         transform: translateY(12px) rotate(-15deg);
     }

     100% {
         transform: translateY(0) rotate(0deg);
     }
 }

 @keyframes floatNote3 {
     0% {
         transform: translateY(0) scale(1);
     }

     50% {
         transform: translateY(-12px) scale(1.18) rotate(10deg);
     }

     100% {
         transform: translateY(0) scale(1);
     }
 }

 /* Responsive Styling for Carousel */
 @media (max-width: 991px) {
     .maestro-slide-img-container {
         width: 300px;
         height: 300px;
     }

     .maestro-slide-img-wrapper {
         width: 220px;
         height: 220px;
     }

     .music-ring.ring-1 {
         width: 240px;
         height: 240px;
     }

     .music-ring.ring-2 {
         width: 270px;
         height: 270px;
     }

     .music-ring.ring-3 {
         width: 300px;
         height: 300px;
     }

     .maestro-slide-content {
         padding: 20px 30px;
     }
 }

 @media (max-width: 767px) {
     .maestros-swiper {
         padding: 10px 10px 40px 10px;
     }

     .maestro-slide-img-container {
         width: 280px;
         height: 280px;
         margin-bottom: 10px;
     }

     .maestro-slide-img-wrapper {
         width: 200px;
         height: 200px;
     }

     .music-ring.ring-1 {
         width: 220px;
         height: 220px;
     }

     .music-ring.ring-2 {
         width: 250px;
         height: 250px;
     }

     .music-ring.ring-3 {
         width: 280px;
         height: 280px;
     }

     .maestro-slide-content {
         padding: 20px 10px;
         text-align: center;
     }

     .maestro-divider {
         margin: 0 auto 20px auto;
     }

     .maestros-button-next,
     .maestros-button-prev {
         display: none !important;
     }
 }

 /* ===================== COURSES ACCORDION ===================== */
 .course-accordion-wrap {
     margin-top: 40px;
 }

 .course-display-img-container {
     position: relative;
     width: 100%;
     height: 380px;
     padding: 12px;
     border-radius: var(--radius-lg);
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron));
     box-shadow: var(--shadow-lg);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .course-display-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: calc(var(--radius-lg) - 6px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     opacity: 0;
     transform: scale(0.96);
     transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .course-display-img.active {
     opacity: 1;
     transform: scale(1);
 }

 .course-accordion-item {
     background: var(--white);
     border: 1.5px solid var(--border-soft) !important;
     border-radius: var(--radius-lg) !important;
     margin-bottom: 16px;
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: all 0.3s ease;
 }

 .course-accordion-item:last-of-type {
     margin-bottom: 0;
 }

 .course-accordion-item:hover {
     box-shadow: var(--shadow-lg);
     border-color: rgba(199, 138, 47, 0.3) !important;
 }

 .course-accordion-button {
     background-color: var(--white);
     color: var(--burgundy) !important;
     font-family: var(--ff-display);
     font-size: clamp(18px, 2.5vw, 22px);
     font-weight: 700;
     padding: 20px 24px;
     border: none;
     box-shadow: none !important;
     transition: all 0.3s ease;
 }

 .course-accordion-button:not(.collapsed) {
     background-color: var(--cream) !important;
     color: var(--burgundy) !important;
 }

 .course-accordion-button i {
     color: var(--saffron);
     transition: color 0.3s ease;
 }

 .course-accordion-button:not(.collapsed) i {
     color: var(--burgundy);
 }

 .course-accordion-button::after {
     filter: sepia(1) saturate(5) hue-rotate(340deg);
     /* Style Bootstrap arrow to saffron/burgundy */
 }

 .course-accordion-body {
     padding: 24px 28px;
     background-color: var(--white);
 }

 .course-accordion-body p {
     font-size: 16px;
     line-height: 1.8;
     color: var(--muted);
     margin-bottom: 20px;
 }

 .btn-read-more {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 24px;
     background: transparent;
     color: var(--burgundy) !important;
     border: 1.5px solid var(--saffron);
     font-family: var(--ff-body);
     font-weight: 600;
     font-size: 14px;
     border-radius: 999px;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     cursor: pointer;
 }

 .btn-read-more:hover {
     background: var(--saffron);
     color: var(--white) !important;
     transform: translateY(-2px);
     box-shadow: 0 6px 18px rgba(199, 138, 47, 0.15);
 }

 @media (max-width: 991px) {
     .course-display-img-container {
         height: 300px;
         margin-bottom: 20px;
     }
 }

 /* ===================== BENEFITS ===================== */
 .benefit-tabs {
     margin-top: 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .benefit-nav-tabs {
     border-bottom: none !important;
     display: inline-flex !important;
     justify-content: center;
     align-items: center;
     gap: 8px;
     background: rgba(255, 248, 234, 0.5);
     border: 1px solid var(--border-soft) !important;
     border-radius: 40px;
     padding: 8px;
     margin: 0 auto 40px auto;
     box-shadow: inset 0 2px 4px rgba(63, 13, 18, 0.02);
     width: max-content;
     max-width: 100%;
     position: relative !important;
 }

 .benefit-nav-tabs .nav-item {
     margin: 0;
     position: static !important;
 }

 .benefit-nav-tabs .nav-link {
     border: none !important;
     background: transparent !important;
     color: var(--ink) !important;
     font-family: var(--ff-body);
     font-weight: 600;
     font-size: 16px;
     padding: 12px 26px;
     border-radius: 30px;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     display: flex;
     gap: 5px;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
     z-index: 2;
 }

 .benefit-nav-tabs .nav-link i {
     color: var(--saffron);
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .benefit-nav-tabs .nav-link:hover {
     color: var(--burgundy) !important;
     background: rgba(124, 23, 30, 0.04) !important;
     transform: translateY(-2px);
 }

 .benefit-nav-tabs .nav-link:hover i {
     color: var(--burgundy);
     animation: bounceIcon 0.6s ease;
 }

 .benefit-nav-tabs .nav-link.active {
     color: white !important;
     transform: scale(1.03);
 }

 /* Standard active tab styling (when JS hasn't run yet) */
 .benefit-nav-tabs:not(.has-indicator) .nav-link.active {
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron)) !important;
     box-shadow: 0 10px 24px rgba(199, 138, 47, 0.22);
 }

 .benefit-nav-tabs .nav-link.active i {
     color: white !important;
 }

 /* Absolute sliding background indicator */
 .benefit-nav-tabs .nav-indicator {
     position: absolute;
     z-index: 1;
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron));
     border-radius: 30px;
     transition: all 0.38s cubic-bezier(0.25, 1, 0.5, 1);
     box-shadow: 0 10px 24px rgba(199, 138, 47, 0.22);
     pointer-events: none;
     transform: scale(1.03);
 }

 /* Custom fade-in and slide-up transition for tab panels */
 .benefit-tab-content .tab-pane {
     opacity: 0;
     transform: translateY(12px);
     transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .benefit-tab-content .tab-pane.show {
     opacity: 1;
     transform: translateY(0);
 }

 /* Keyframes for micro-animation */
 @keyframes bounceIcon {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-4px) scale(1.1);
     }
 }

 /* ===================== BENEFIT TABS - TABLET / MOBILE ===================== */

 @media (max-width: 991px) {

     .benefit-nav-tabs {
         display: flex !important;
         flex-wrap: nowrap !important;
         justify-content: flex-start;
         align-items: center;

         width: 100%;
         max-width: 100%;

         gap: 6px;
         padding: 8px;

         margin: 0 auto 32px;

         overflow-x: auto;
         overflow-y: hidden;

         border-radius: 40px;

         scroll-behavior: smooth;
         -webkit-overflow-scrolling: touch;

         scrollbar-width: none;

         white-space: nowrap;
     }


     /* Hide scrollbar - Chrome / Safari */
     .benefit-nav-tabs::-webkit-scrollbar {
         display: none;
     }


     /* Each tab must keep its own width */
     .benefit-nav-tabs .nav-item {
         flex: 0 0 auto;
         margin: 0;
     }


     .benefit-nav-tabs .nav-link {
         flex: 0 0 auto;

         padding: 10px 18px;

         font-size: 14px;

         white-space: nowrap;
     }

 }

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 28px;
     margin-top: 40px;
 }

 .benefit-card,
 .level-card {
     background: rgba(255, 255, 255, .84);
     border-radius: 20px;
     padding: 30px;
     border: 1px solid var(--border-soft);
     box-shadow: var(--shadow);
     transition: transform .25s, box-shadow .25s, border-color .25s;
 }

 .benefit-card:hover,
 .level-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
     border-color: rgba(199, 138, 47, .34);
 }

 .benefit-card h3 {
     margin-bottom: 12px;
 }

 .benefit-card ul {
     margin-top: 10px;
     padding-left: 18px;
     list-style: disc;
 }

 .benefit-card ul li {
     color: var(--muted);
 }

 .benefit-card img {
     border-radius: 20px;
     border: 1px solid var(--border-soft);
 }

 /* Levels */
 .level-tabs {
     margin-top: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .level-nav-pills {
     border-bottom: none !important;
     display: inline-flex !important;
     justify-content: center;
     align-items: center;
     gap: 8px;
     background: rgba(255, 248, 234, 0.55);
     border: 1px solid var(--border-soft) !important;
     border-radius: 40px;
     padding: 8px;
     margin: 0 auto 36px auto;
     box-shadow: inset 0 2px 4px rgba(63, 13, 18, 0.02);
     width: max-content;
     max-width: 100%;
     position: relative !important;
 }

 .level-nav-pills .nav-item {
     margin: 0;
     position: static !important;
 }

 .level-nav-pills .nav-link {
     border: none !important;
     background: transparent !important;
     color: var(--ink) !important;
     font-family: var(--ff-body);
     font-weight: 600;
     font-size: 16px;
     padding: 12px 28px;
     border-radius: 30px;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
     z-index: 2;
 }

 .level-nav-pills .nav-link i {
     color: var(--saffron);
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .level-nav-pills .nav-link:hover {
     color: var(--burgundy) !important;
     background: rgba(124, 23, 30, 0.04) !important;
     transform: translateY(-2px);
 }

 .level-nav-pills .nav-link:hover i {
     color: var(--burgundy);
     animation: bounceIcon 0.6s ease;
 }

 .level-nav-pills .nav-link.active {
     color: white !important;
     transform: scale(1.03);
 }

 /* Fallback active styling */
 .level-nav-pills:not(.has-indicator) .nav-link.active {
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron)) !important;
     box-shadow: 0 10px 24px rgba(199, 138, 47, 0.22);
 }

 .level-nav-pills .nav-link.active i {
     color: white !important;
 }

 /* Sliding Indicator */
 .level-nav-pills .nav-indicator {
     position: absolute;
     z-index: 1;
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron));
     border-radius: 30px;
     transition: all 0.38s cubic-bezier(0.25, 1, 0.5, 1);
     box-shadow: 0 10px 24px rgba(199, 138, 47, 0.22);
     pointer-events: none;
     transform: scale(1.03);
 }

 /* Fade transitions for levels contents */
 .level-tab-content .tab-pane {
     opacity: 0;
     transform: translateY(12px);
     transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .level-tab-content .tab-pane.show {
     opacity: 1;
     transform: translateY(0);
 }

 /* Responsive adjustments for level tabs */
 @media (max-width: 767px) {
     .level-nav-pills {
         width: 100%;
         flex-wrap: wrap;
         border-radius: 24px;
         padding: 12px;
         gap: 6px;
         display: flex !important;
     }

     .level-nav-pills .nav-link {
         padding: 10px 18px;
         font-size: 14px;
     }
 }

 .levels-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 24px;
     margin-top: 40px;
 }

 .level-badge {
     display: inline-block;
     background: var(--saffron);
     color: var(--white);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 20px;
     margin-bottom: 14px;
 }

 .level-card h5 {
     margin-bottom: 12px;
 }

 .level-card ul {
     padding-left: 18px;
     list-style: disc;
 }

 .level-card ul li {
     color: var(--muted);
 }

 /* ===================== CONTACT FORM ===================== */


 .contact-info {
     background: rgba(255, 255, 255, .70);
     border: 1px solid var(--border-soft);
     border-radius: 22px;
     padding: 34px;
     box-shadow: var(--shadow);
 }

 .contact-info h3 {
     margin-bottom: 24px;
 }

 .contact-info h3 span {
     color: var(--saffron);
 }

 .contact-info p {
     margin-bottom: 12px;
 }

 .contact-form {
     background: rgba(255, 255, 255, .92);
     border-radius: 22px;
     padding: clamp(28px, 4vw, 42px);
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border-soft);
     border-top: 5px solid var(--saffron);
 }

 .contact-form h3 {
     font-family: var(--ff-display);
     color: var(--burgundy);
     margin-bottom: 24px;
     font-weight: 700;
 }

 .contact-form h3 span {
     color: var(--saffron);
 }

 .form-group {
     margin-bottom: 18px;
 }

 .form-control {
     width: 100%;
     padding: 14px 16px;
     border: 1.5px solid rgba(124, 23, 30, .12);
     border-radius: 12px;
     font-family: var(--ff-body);
     font-size: 15px;
     color: var(--ink);
     background: #fffaf0;
     transition: border-color .2s, box-shadow .2s;
     outline: none;
 }

 .form-control:focus {
     border-color: var(--saffron);
     box-shadow: 0 0 0 3px rgba(212, 136, 42, .15);
 }

 textarea.form-control {
     resize: vertical;
     min-height: 120px;
 }

 .btn-submit {
     width: 100%;
     padding: 14px;
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron));
     color: var(--burgundy);
     border: none;
     border-radius: 999px;
     font-family: var(--ff-body);
     font-size: 15px;
     font-weight: 600;
     letter-spacing: .5px;
     cursor: pointer;
     transition: opacity .2s, transform .2s;
 }

 .btn-submit:hover {
     opacity: .9;
     transform: translateY(-1px);
 }

 /* ===================== TESTIMONIALS ===================== */
 .testi-section {
     background: white;
     color: var(--ink);
     padding: var(--section-space) var(--site-gutter);
 }

 .testi-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 24px;
     margin-top: 48px;
 }

 .testi-card {
     background: var(--white);
     border: 1px solid var(--border-soft);
     border-radius: 20px;
     padding: 28px;
     box-shadow: var(--shadow);
 }

 .testi-card p {
     color: var(--ink);
     margin-bottom: 20px;
     font-style: italic;
 }

 .testi-author {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .testi-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--saffron);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--ff-display);
     font-size: 18px;
     font-weight: 700;
     color: var(--white);
     flex-shrink: 0;
 }

 .testi-author-info strong {
     display: block;
     font-size: 15px;
     font-weight: 600;
     color: var(--burgundy);
 }

 .testi-author-info span {
     font-size: 13px;
     color: var(--muted);
     opacity: .8;
 }

 /* ===================== STATS BAR ===================== */
 .stats-bar {
     background: var(--burgundy);
     padding: var(--section-space-small) var(--site-gutter);
 }

 .stats-inner {
     width: 100%;
     max-width: var(--site-max-width);
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 24px;
     text-align: center;
 }

 .stat-num {
     font-family: var(--ff-display);
     font-size: 40px;
     font-weight: 700;
     color: var(--saffron-lt);
 }

 .stat-label {
     color: rgba(255, 255, 255, .7);
     font-size: 14px;
     margin-top: 4px;
 }

 /* ===================== FOOTER ===================== */
 .footer-main {
     background: linear-gradient(135deg, var(--cream) 0%, var(--white) 100%);
     color: var(--ink);
     padding:
         clamp(75px, 7vw, 100px) var(--site-gutter) 45px;
     border-top: 1px solid var(--border-soft);
 }

 .footer-grid {
     width: 100%;
     max-width: var(--site-max-width);
     margin: 0 auto 40px;
 }

 .footer-brand img {
     height: 54px;
     margin-bottom: 20px;
     opacity: 0.95;
 }

 .footer-brand p {
     font-size: 15px;
     line-height: 1.7;
     color: var(--muted);
     margin-bottom: 0;
 }

 /* Circular glowing social links */
 .footer-social-links {
     display: flex;
     gap: 12px;
 }

 .footer-social-links a {
     display: flex !important;
     justify-content: center;
     align-items: center;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--white) !important;
     border: 1px solid var(--border-soft) !important;
     color: var(--burgundy) !important;
     font-size: 16px !important;
     transition: all 0.3s ease !important;
     margin-bottom: 0 !important;
     opacity: 1 !important;
     box-shadow: var(--shadow);
 }

 .footer-social-links a:hover {
     background: var(--saffron) !important;
     color: #ffffff !important;
     border-color: var(--saffron) !important;
     transform: translateY(-3px) !important;
     box-shadow: 0 6px 15px rgba(199, 138, 47, 0.35) !important;
 }

 .footer-col h4 {
     color: var(--burgundy);
     font-family: var(--ff-display);
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 20px;
     padding-bottom: 8px;
     position: relative;
     border-bottom: none;
 }

 /* Styled short underline accent */
 .footer-col h4::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 40px;
     height: 3px;
     background: var(--saffron);
     border-radius: 2px;
 }

 .footer-col p {
     font-size: 15px;
     line-height: 1.7;
     color: var(--muted);
 }

 .footer-col a {
     display: flex;
     align-items: center;
     font-size: 15px;
     color: var(--muted);
     margin-bottom: 12px;
     transition: all 0.3s ease;
 }

 .footer-col a::before {
     content: "→";
     margin-right: 8px;
     color: var(--saffron);
     font-weight: bold;
     transition: transform 0.3s ease;
 }

 .footer-col a:hover {
     color: var(--burgundy);
     transform: translateX(4px);
     opacity: 1;
 }

 .footer-col i {
     margin-right: 8px;
     color: var(--saffron);
 }

 .footer-bottom {
     background: rgba(124, 23, 30, 0.04);
     padding: 20px var(--site-gutter);
     border-top: 1px solid var(--border-soft);
 }

 .footer-bottom-inner {
     width: 100%;
     max-width: var(--site-max-width);
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 12px;
 }

 .footer-bottom p {
     font-size: 14px;
     color: var(--muted);
     margin-bottom: 0;
 }

 .footer-bottom a {
     color: var(--muted);
     transition: color 0.2s;
 }

 .footer-bottom a:hover {
     color: var(--burgundy);
     text-decoration: none;
 }

 /* ===================== SEO LINK BLOCKS ===================== */
 .seo-links {
     background: #f4e8cd;
     padding: 24px var(--site-gutter);
 }

 .seo-links-inner {
     width: 100%;
     max-width: var(--site-max-width);
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
 }

 .seo-links a {
     display: block;
     font-size: 13px;
     color: var(--muted);
     padding: 4px 0;
     /* border-bottom: 1px solid transparent; */
     transition: color .2s, border-color .2s;
 }

 .seo-links a:hover {
     color: var(--burgundy);
     border-color: var(--saffron);
 }

 /* ===================== CALLBACK PANEL ===================== */
 #callback-panel {
     position: fixed;
     right: -360px;
     top: 50%;
     transform: translateY(-50%);
     width: 320px;
     background: rgba(255, 255, 255, .96);
     border-radius: 18px 0 0 18px;
     box-shadow: var(--shadow-lg);
     z-index: 800;
     transition: right .35s ease;
     border-top: 4px solid var(--saffron);
 }

 #callback-panel.open {
     right: 0;
 }

 .callback-trigger {
     position: absolute;
     left: -44px;
     top: 50%;
     transform: translateY(-50%) rotate(-90deg);
     background: var(--burgundy);
     color: var(--white);
     padding: 10px 16px;
     border-radius: 10px 10px 0 0;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 1px;
     cursor: pointer;
     white-space: nowrap;
 }

 .callback-body {
     padding: 28px;
 }

 .callback-body h2 {
     margin-bottom: 16px;
 }

 .callback-body .form-control {
     margin-bottom: 12px;
 }

 /* ===================== RESPONSIVE ===================== */
 @media (max-width: 900px) {
     .hero {
         min-height: 560px;
     }

     .courses-grid {
         grid-template-columns: 1fr;
     }

     .seo-links-inner {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 640px) {
     .top-bar-inner {
         justify-content: center;
         text-align: center;
     }

     /* Compact social strip on mobile */

     .social-strip {
         display: flex;

         left: 0;
         top: 50%;

         transform: translateY(-50%);

         gap: 2px;
     }


     .social-strip a {
         width: 30px;
         height: 30px;

         border-radius: 0 5px 5px 0;

         transition:
             width 0.3s ease,
             background 0.2s ease;
     }


     /* Do not expand on mobile */

     .social-strip a:hover {
         width: 30px;
     }


     /* Smaller icons */

     .social-strip a i {
         width: 30px;
         height: 30px;

         line-height: 30px;

         font-size: 14px;
     }


     /* Hide text on mobile */

     .social-strip a span {
         display: none;
     }

     .whatsapp-btn {
         width: 50px;
         height: 50px;
         right: 16px;
         bottom: 16px;
     }

     .whatsapp-btn i {
         font-size: 28px;
     }

     .nav-inner {
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 70px;
     }

     .nav-logo {
         justify-content: flex-start;
     }

     .nav-logo img {
         height: 50px;
     }

     .nav-menu {
         display: none;
     }

     .nav-toggle {
         display: flex;
         margin-left: auto;
     }

     .hero {
         min-height: 500px;
     }

     .hero-title {
         font-size: clamp(38px, 13vw, 56px);
     }

     .hero-ctas {
         flex-direction: column;
         align-items: stretch;
     }

     .btn {
         justify-content: center;
     }

     .seo-links-inner {
         grid-template-columns: 1fr;
     }

     .about-image {
         height: 260px;
     }

     .intro-text,
     .contact-info,
     .contact-form {
         padding: 24px;
     }

     .testi-grid {
         grid-template-columns: 1fr;
     }

     #callback-panel {
         right: -310px;
         width: 290px;
     }
 }

 /* =========================================================
   TABLET + MOBILE NAVIGATION
   Hamburger from 1030px and below
========================================================= */

 @media (max-width: 1030px) {

     /* Hide desktop navigation */
     .nav-menu {
         display: none;
     }

     /* Show hamburger */
     .nav-toggle {
         display: flex;
         margin-left: auto;
     }

 }


 /* ===================== HERO BANNER SWIPER ===================== */

 .hero-swiper-container {
     position: relative;
     width: 100%;
     overflow: hidden;
     background: var(--charcoal);
 }

 .hero-swiper {
     width: 100%;
 }

 .hero-swiper .swiper-slide {
     width: 100%;
 }

 .hero-swiper picture {
     display: block;
     width: 100%;
 }

 .hero-slide-img {
     display: block;
     width: 100%;
     height: auto;
     object-fit: cover;
 }


 /* ===================== NAVIGATION ===================== */

 .hero-swiper .swiper-button-next,
 .hero-swiper .swiper-button-prev {
     width: 42px;
     height: 42px;

     color: rgba(255, 255, 255, 0.88);

     background: rgba(63, 13, 18, 0.42);

     border: 1px solid rgba(255, 255, 255, 0.20);
     border-radius: 50%;

     backdrop-filter: blur(5px);

     transition:
         background 0.3s ease,
         color 0.3s ease,
         transform 0.3s ease;
 }

 .hero-swiper .swiper-button-next {
     right: 22px;
 }

 .hero-swiper .swiper-button-prev {
     left: 22px;
 }

 .hero-swiper .swiper-button-next::after,
 .hero-swiper .swiper-button-prev::after {
     font-size: 15px;
     font-weight: 700;
 }


 /* ===================== PAGINATION ===================== */

 .hero-swiper .swiper-pagination {
     bottom: 18px !important;
 }

 .hero-swiper .swiper-pagination-bullet {
     width: 7px;
     height: 7px;

     margin: 0 5px !important;

     background: rgba(255, 255, 255, 0.75);

     opacity: 0.45;
 }

 .hero-swiper .swiper-pagination-bullet-active {
     width: 20px;

     border-radius: 10px;

     background: var(--saffron-lt);

     opacity: 0.85;
 }


 /* ===================== MOBILE ===================== */

 @media (max-width: 767px) {

     .hero-swiper,
     .hero-swiper .swiper-wrapper,
     .hero-swiper .swiper-slide,
     .hero-swiper picture {
         height: 430px;
     }

     .hero-slide-img {
         width: 100%;
         height: 100%;

         object-fit: cover;
         object-position: center;
     }


     /* Smaller arrows */

     .hero-swiper .swiper-button-next,
     .hero-swiper .swiper-button-prev {
         width: 34px;
         height: 34px;

         background: rgba(63, 13, 18, 0.30);
     }

     .hero-swiper .swiper-button-next {
         right: 10px;
     }

     .hero-swiper .swiper-button-prev {
         left: 10px;
     }

     .hero-swiper .swiper-button-next::after,
     .hero-swiper .swiper-button-prev::after {
         font-size: 12px;
     }


     /* Smaller pagination */

     .hero-swiper .swiper-pagination {
         bottom: 12px !important;
     }

     .hero-swiper .swiper-pagination-bullet {
         width: 6px;
         height: 6px;

         margin: 0 4px !important;

         opacity: 0.4;
     }

     .hero-swiper .swiper-pagination-bullet-active {
         width: 17px;

         opacity: 0.8;
     }

 }


 /* ===================== SMALL MOBILE ===================== */

 @media (max-width: 480px) {

     .hero-swiper,
     .hero-swiper .swiper-wrapper,
     .hero-swiper .swiper-slide,
     .hero-swiper picture {
         height: 400px;
     }

 }

 /* ===================== TESTIMONIAL SWIPER ===================== */
 .testimonial-swiper {
     padding: 40px 0 80px !important;
     position: relative;
     width: 100%;
 }

 .testimonial-swiper .swiper-slide {
     height: auto;
     /* make slides equal height */
     display: flex;
     justify-content: center;
     perspective: 1000px;
 }

 .testimonial-swiper .testi-card {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     background: rgba(255, 255, 255, 0.6);
     border: 1px solid var(--border-soft);
     opacity: 0.45;
     filter: blur(1.5px);
     transform: scale(0.88);
 }

 .testimonial-swiper .swiper-slide-active .testi-card {
     background: var(--white);
     border-color: var(--border-soft);
     box-shadow: var(--shadow-lg);
     opacity: 1;
     filter: blur(0);
     transform: scale(1);
 }

 .testimonial-swiper .swiper-slide-active .testi-card:hover {
     background: var(--white);
     border-color: var(--saffron);
     transform: scale(1.03);
 }

 .testimonial-swiper .swiper-button-next,
 .testimonial-swiper .swiper-button-prev {
     color: var(--burgundy);
     width: 44px;
     height: 44px;
     background: rgba(255, 255, 255, 0.85);
     border-radius: 50%;
     border: 1px solid var(--border-soft);
     transition: all 0.3s ease;
     box-shadow: var(--shadow);
 }

 .testimonial-swiper .swiper-button-next::after,
 .testimonial-swiper .swiper-button-prev::after {
     font-size: 16px;
     font-weight: 700;
 }

 .testimonial-swiper .swiper-button-next:hover,
 .testimonial-swiper .swiper-button-prev:hover {
     background: var(--saffron);
     color: var(--white);
     border-color: var(--saffron);
 }

 .testimonial-swiper .swiper-pagination-bullet {
     background: var(--saffron);
     opacity: 0.3;
     width: 10px;
     height: 10px;
     transition: all 0.3s ease;
 }

 .testimonial-swiper .swiper-pagination-bullet-active {
     background: var(--saffron);
     opacity: 1;
     width: 24px;
     border-radius: 5px;
 }

 /* ===================== REDESIGNED INTRO SECTION ===================== */
 .intro-section {
     position: relative;
     overflow: hidden;
 }

 .intro-actions {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-top: 28px;
 }

 .btn-primary-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 30px;
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron));
     color: var(--burgundy) !important;
     font-family: var(--ff-body);
     font-weight: 600;
     font-size: 15px;
     border-radius: 999px;
     box-shadow: 0 6px 18px rgba(199, 138, 47, 0.25);
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     cursor: pointer;
 }

 .btn-primary-cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 24px rgba(199, 138, 47, 0.4);
     background: linear-gradient(135deg, var(--saffron), var(--saffron-lt));
 }

 .btn-secondary-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 30px;
     background: transparent;
     color: var(--burgundy) !important;
     border: 1.5px solid var(--saffron);
     font-family: var(--ff-body);
     font-weight: 600;
     font-size: 15px;
     border-radius: 999px;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     cursor: pointer;
 }

 .btn-secondary-cta:hover {
     background: var(--saffron);
     color: var(--white) !important;
     transform: translateY(-2px);
     box-shadow: 0 6px 18px rgba(199, 138, 47, 0.15);
 }

 .intro-grid {
     /* Layout handled by Bootstrap Grid */
 }

 .intro-image-wrapper {
     position: relative;
     border-radius: var(--radius-lg);
     padding: 12px;
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron));
     box-shadow: var(--shadow-lg);
 }

 .intro-image {
     width: 100%;
     height: auto;
     border-radius: calc(var(--radius-lg) - 6px);
     object-fit: cover;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     display: block;
 }

 .intro-heading {
     margin-top: 8px;
 }

 .string-divider-left {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 18px 0 24px;
 }

 .string-divider-left .s-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--saffron);
 }

 .string-divider-left .s-line-long {
     height: 2px;
     width: 120px;
     background: linear-gradient(90deg, var(--saffron), transparent);
 }

 /* Micro-animations: Floating Music Notes */
 .music-decoration {
     position: absolute;
     inset: 0;
     pointer-events: none;
     z-index: 5;
 }

 .music-decoration .note {
     position: absolute;
     font-size: 32px;
     color: var(--saffron-lt);
     text-shadow: 0 4px 12px rgba(63, 13, 18, 0.4);
     opacity: 0;
     animation: floatNote 5s ease-in-out infinite;
 }

 .music-decoration .note-1 {
     top: 15%;
     left: 8%;
     animation-delay: 0s;
 }

 .music-decoration .note-2 {
     top: 45%;
     right: 8%;
     animation-delay: 1.6s;
 }

 .music-decoration .note-3 {
     bottom: 15%;
     left: 15%;
     animation-delay: 3.2s;
 }

 @keyframes floatNote {
     0% {
         transform: translateY(20px) rotate(0deg) scale(0.8);
         opacity: 0;
     }

     30% {
         opacity: 0.85;
     }

     80% {
         opacity: 0.85;
     }

     100% {
         transform: translateY(-50px) rotate(25deg) scale(1.15);
         opacity: 0;
     }
 }

 /* Responsive details for intro grid */
 @media (max-width: 900px) {

     .intro-image-wrapper {
         max-width: 500px;
         margin: 0 auto;
     }
 }

 /* Custom cleanups for inline styles removal */
 .dropdown-menu.dropdown-menu-right {
     right: 0;
     left: auto;
 }

 .section-offerings {
     padding: 60px 0;
 }

 .offerings-header {
     text-align: center;
     /* padding: 0 24px 40px; */
 }

 .instruments-label span {
     color: var(--saffron-lt);
 }

 .benefit-spacing {
     margin-top: 12px;
 }

 .levels-subtitle {
     margin-bottom: 16px;
 }

 .levels-intro-title {
     font-family: var(--ff-display);
     font-size: 22px;
     color: var(--burgundy);
     text-align: center;
     margin-bottom: 32px;
 }

 .testi-section .section-label {
     color: var(--saffron);
 }

 .testi-card.featured {
     background: rgba(199, 138, 47, .06);
     border-color: rgba(199, 138, 47, .25);
     height: 100%;
 }

 .testi-card.featured .testi-avatar {
     background: var(--burgundy);
 }

 .testi-card.featured p {
     font-style: normal;
     font-size: 20px;
     font-weight: 600;
     color: var(--burgundy);
 }

 .contact-info p i {
     color: var(--saffron);
     margin-right: 8px;
 }

 .contact-info p a {
     color: var(--burgundy);
     font-weight: 600;
 }

 .footer-col p.footer-contact-email {
     margin-top: 16px;
 }

 .honeypot {
     display: none;
 }

 .callback-btn-submit {
     margin-top: 12px;
 }


 /* ===================== UNIFIED BUTTON SYSTEM ===================== */
 .btn-primary-cta,
 .btn-secondary-cta,
 .btn-submit,
 .btn-read-more {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 30px;
     background: linear-gradient(135deg, var(--saffron-lt), var(--saffron)) !important;
     color: var(--white) !important;
     font-family: var(--ff-body);
     font-weight: 600;
     font-size: 15px;
     border: none !important;
     border-radius: 999px !important;
     box-shadow: 0 6px 18px rgba(199, 138, 47, 0.25) !important;
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     text-transform: none;
     letter-spacing: normal;
 }

 /* Form submits should span full width */
 .btn-submit {
     width: 100% !important;
 }

 /* Shared premium hover effect */
 .btn-primary-cta:hover,
 .btn-secondary-cta:hover,
 .btn-submit:hover,
 .btn-read-more:hover {
     transform: translateY(-3px) scale(1.02) !important;
     box-shadow: 0 12px 28px rgba(199, 138, 47, 0.45) !important;
     background: linear-gradient(135deg, var(--saffron), var(--saffron-lt)) !important;
     opacity: 1 !important;
 }

 /* Sweep animation pseudo-element */
 .btn-primary-cta::after,
 .btn-secondary-cta::after,
 .btn-submit::after,
 .btn-read-more::after {
     content: '';
     position: absolute;
     top: 0;
     left: -50%;
     width: 25%;
     height: 100%;
     background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
     transform: skewX(-25deg);
     transition: all 0.75s ease;
     opacity: 0;
     pointer-events: none;
 }

 /* Hover trigger for sweep effect */
 .btn-primary-cta:hover::after,
 .btn-secondary-cta:hover::after,
 .btn-submit:hover::after,
 .btn-read-more:hover::after {
     left: 125%;
     opacity: 1;
 }

 /* form validation styles start here  */
.input-error {
    border-color: #dc3545 !important;
}

.error-message {
    color: #dc3545;
    font-size: 13px;
    margin-top: 5px;
}

.form-control:focus {
    outline: none;
}
 /* form validation styles ends here  */