/* TOP HEADER STYLES (Isolated) */
 .top-header-wrapper {
     font-family: Arial, sans-serif;
     position: relative;
     z-index: 1005;
 }

 .top-header-wrapper * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 .top-header-wrapper .header-slider {
     width: 100%;
     overflow: hidden;
     background: linear-gradient(to left, rgba(255, 123, 210, 0.6), rgba(123, 202, 255, 0.6), rgba(255, 234, 123, 0.6), rgba(123, 255, 178, 0.6));
     color: #000000;
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
 }

 .top-header-wrapper .slider-track {
     display: flex;
     align-items: center;
     width: max-content;
 }

 .top-header-wrapper .slide {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: clamp(10px, 3vw, 40px);
     padding: 4px 20px;
     white-space: nowrap;
     flex-shrink: 0;
 }

 .top-header-wrapper .slide img {
     width: clamp(40px, 5vw, 70px);
 }

 .top-header-wrapper .slide-text {
     font-size: clamp(14px, 2vw, 20px);
 }

 .top-header-wrapper .social-links {
     display: flex;
     align-items: center;
 }

 .top-header-wrapper .social-links a {
     color: rgba(255, 255, 255, 0.9);
     margin: 0 clamp(4px, 1vw, 8px);
     font-size: clamp(16px, 2vw, 22px);
     transition: 0.3s;
     text-decoration: none;
 }

 .top-header-wrapper .social-links a:hover {
     color: rgba(255, 234, 123, 1);
     /* sunny yellow highlight */
     transition: 0.3s ease;
 }

 /* Accommodate the fixed navbar below the top header */
 .custom-navbar {
     position: relative !important;
 }

 @media(max-width:480px) {
     .top-header-wrapper .slide {
         gap: 10px;
         padding: 4px 20px;
     }

     .top-header-wrapper .slide-text {
         font-size: 14px;
     }

     .top-header-wrapper .social-links {
         display: none;
     }
 }

 /* ========== */
 /* END TOP HEADER STYLES */

 /* CSS Variables for Light/Dark Mode */
 :root {
     --bg-gradient: linear-gradient(135deg, #e3c5f8 0%, #f6cbdb 40%, #fdf2c8 75%, #c8f5f0 100%);
     --text-color: #000000;
     --nav-bg: rgba(0, 0, 0, 0.4);
     --nav-link-color: #ffffff;
     --nav-pill-bg: rgba(255, 255, 255, 0.1);
     --nav-pill-border: rgba(255, 255, 255, 0.15);
     --dropdown-bg: #51494A;
     --dropdown-item-color: #ffffff;
     --btn-book-bg: rgba(255, 255, 255, 0.1);
     --btn-book-border: rgba(255, 255, 255, 0.2);
     --btn-book-color: #ffffff;
     --btn-book-hover-bg: rgba(255, 255, 255, 0.25);
     --overlay-gradient: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%);
     --hero-text-color: #ffffff;
     --hamburger-color: #ffffff;
 }

 [data-theme="dark"] {
     --bg-gradient: #000000;
     --text-color: #ffffff;
     --nav-bg: rgba(0, 0, 0, 0.8);
     --nav-link-color: #ffffff;
     --nav-pill-bg: rgba(255, 255, 255, 0.05);
     --nav-pill-border: rgba(255, 255, 255, 0.1);
     --dropdown-bg: #121212;
     --dropdown-item-color: #ffffff;
     --btn-book-bg: rgba(255, 255, 255, 0.05);
     --btn-book-border: rgba(255, 255, 255, 0.1);
     --btn-book-color: #ffffff;
     --btn-book-hover-bg: rgba(255, 255, 255, 0.15);
     --overlay-gradient: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%);
     --hero-text-color: #ffffff;
     --hamburger-color: #ffffff;
 }

 body {
     font-family: 'Inter', sans-serif;
     cursor: default;
     /* Full screen pastel gradient background matching the provided image */
     background: var(--bg-gradient);
     background-attachment: fixed;
     min-height: 100vh;
     max-width: 1920px;
     margin: 0 auto;
     position: relative;
     overflow-x: hidden;
     color: var(--text-color);
     transition: background 0.5s ease, color 0.5s ease;
 }

 /* Overlay to darken background slightly for better text contrast */
 .bg-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--overlay-gradient);
     z-index: -1;
     transition: background 0.5s ease;
 }

 /* ----- NAVBAR STYLES ----- */
 .custom-navbar {
     padding: 15px 0;
     background: var(--nav-bg);
     /* Active full navbar background by default */
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     position: relative;
     width: 100%;
     max-width: 1920px;
     left: 0;
     right: 0;
     margin: 0 auto;
     z-index: 1000;
     transition: all 0.3s ease-in-out;
 }

 /* Scrolled state for navbar */
 .custom-navbar.scrolled {
     background: var(--nav-bg);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     padding: 10px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .navbar-brand {
     color: var(--nav-link-color) !important;
     font-weight: 600;
     font-size: 1.5rem;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 /* Logo icon matching the style */
 .logo-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .custom-logo {
     height: 40px;
     /* Increased size for better visibility */
     width: auto;
     object-fit: contain;
     margin-right: 5px;
 }

 /* Pill Navigation Container */
 .nav-pill-wrapper {
     background: var(--nav-pill-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-radius: 50px;
     padding: 5px 15px;
     border: 1px solid var(--nav-pill-border);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     transition: background 0.5s ease, border 0.5s ease;
 }

 .navbar-nav .nav-link {
     color: var(--nav-link-color) !important;
     font-weight: 400;
     padding: 8px 18px !important;
     border-radius: 30px;
     transition: all 0.3s ease;
     font-size: 0.95rem;
     opacity: 0.85;
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-item.active .nav-link,
 .navbar-nav .nav-item.dropdown:hover>.nav-link {
     background: rgba(255, 255, 255, 0.15);
     opacity: 1;
 }

 /* Book a call Button */
 .btn-book {
     background: var(--btn-book-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid var(--btn-book-border);
     color: var(--btn-book-color);
     border-radius: 50px;
     padding: 6px 6px 6px 20px;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     font-weight: 500;
     font-size: 0.95rem;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .btn-book:hover {
     background: var(--btn-book-hover-bg);
     color: var(--btn-book-color);
 }

 .btn-book .icon-circle {
     background: var(--btn-book-color);
     color: var(--text-color);
     border-radius: 50%;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     transition: background 0.5s ease, color 0.5s ease;
 }

 /* ----- DROPDOWN & SUBMENU STYLES ----- */
 .dropdown-menu {
     background: var(--dropdown-bg);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     padding: 8px 0;
     min-width: 220px;
     margin-top: 15px !important;
     transition: background 0.5s ease;
 }

 /* Invisible bridge to fix hover dead zones (gap from margin-top) */
 .dropdown-menu::before {
     content: '';
     position: absolute;
     top: -20px;
     left: 0;
     width: 100%;
     height: 20px;
     background: transparent;
 }

 .dropdown-item {
     color: var(--dropdown-item-color);
     padding: 10px 20px;
     font-size: 0.95rem;
     font-weight: 400;
     transition: 0.2s;
     opacity: 0.85;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .dropdown-item:hover,
 .dropdown-item:focus {
     background: rgba(255, 255, 255, 0.1);
     color: var(--dropdown-item-color);
     opacity: 1;
 }

 .dropdown-item .chevron-right {
     width: 14px;
     height: 14px;
     opacity: 0.7;
 }

 /* Desktop Dropdown Hover */
 @media (min-width: 1200px) {
     .nav-item.dropdown:hover>.dropdown-menu {
         display: block;
         animation: fadeIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
     }

     .dropdown-submenu:hover>.dropdown-menu {
         display: block;
         animation: fadeIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
     }
 }

 /* Nested Dropdowns Main Config */
 .dropdown-submenu {
     position: relative;
 }

 .dropdown-submenu>.dropdown-menu {
     top: 0;
     left: 100%;
     margin-top: -8px !important;
     margin-left: 0;
 }

 /* Invisible bridge for nested submenu horizontal gap */
 .dropdown-submenu>.dropdown-menu::before {
     top: 0;
     left: -20px;
     width: 20px;
     height: 100%;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ----- MOBILE/TOGGLE BUTTON CUSTOMIZATION ----- */
 .navbar-toggler {
     border: none;
     padding: 5px;
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

 .hamburger-icon {
     width: 28px;
     height: 20px;
     position: relative;
     transform: rotate(0deg);
     transition: .5s ease-in-out;
     cursor: pointer;
 }

 .hamburger-icon span {
     display: block;
     position: absolute;
     height: 2px;
     width: 100%;
     background: var(--hamburger-color);
     border-radius: 9px;
     opacity: 1;
     left: 0;
     transform: rotate(0deg);
     transition: .25s ease-in-out, background 0.5s ease;
 }

 /* Hamburger lines positions */
 .hamburger-icon span:nth-child(1) {
     top: 0px;
 }

 .hamburger-icon span:nth-child(2) {
     top: 9px;
     width: 80%;
     right: 0;
     left: auto;
 }

 .hamburger-icon span:nth-child(3) {
     top: 18px;
 }

 /* Hamburger open state */
 .hamburger-icon.open span:nth-child(1) {
     top: 9px;
     transform: rotate(135deg);
 }

 .hamburger-icon.open span:nth-child(2) {
     opacity: 0;
     right: -60px;
 }

 .hamburger-icon.open span:nth-child(3) {
     top: 9px;
     transform: rotate(-135deg);
 }

 /* ----- THEME TOGGLE SWITCH ----- */
 .theme-toggle {
     display: flex;
     align-items: center;
     margin-right: 15px;
 }

 .theme-toggle-switch {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 26px;
 }

 .theme-toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .theme-toggle-slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     transition: .4s;
     border-radius: 34px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 5px;
 }

 .theme-toggle-slider:before {
     position: absolute;
     content: "";
     height: 20px;
     width: 20px;
     left: 2px;
     bottom: 2px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
     z-index: 2;
 }

 input:checked+.theme-toggle-slider {
     background-color: rgba(255, 255, 255, 0.1);
 }

 input:focus+.theme-toggle-slider {
     box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
 }

 input:checked+.theme-toggle-slider:before {
     transform: translateX(24px);
     background-color: #2a2a35;
 }

 .theme-toggle-icon {
     font-size: 12px;
     z-index: 1;
     line-height: 1;
 }

 /* Mobile specific styling */
 @media (max-width: 1199px) {
     .navbar-brand {
         font-size: 1.3rem;
         /* Slightly smaller text for mobile */
     }

     .custom-logo {
         height: 40px;
         /* Revert mobile scale down for better visibility */
         width: auto;
     }

     .custom-navbar {
         background: var(--nav-bg);
         backdrop-filter: blur(20px);
         -webkit-backdrop-filter: blur(20px);
         padding: 15px 0;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .navbar-collapse {
         background: transparent;
         padding: 15px 0 25px 0;
     }

     .nav-pill-wrapper {
         background: transparent;
         border: none;
         padding: 0;
         backdrop-filter: none;
         box-shadow: none;
         border-radius: 0;
     }

     .navbar-nav {
         align-items: flex-start;
         gap: 5px;
     }

     .navbar-nav .nav-link {
         padding: 12px 15px !important;
         border-radius: 8px;
         width: 100%;
     }

     .btn-book-wrapper {
         margin-top: 15px;
         /* Reduced from 25px to accommodate theme toggle better */
         width: 100%;
         display: flex;
         flex-direction: column;
         gap: 15px;
     }

     .theme-toggle {
         margin-right: 0;
         justify-content: flex-end;
         width: 100%;
         padding-right: 10px;
     }

     .btn-book {
         width: 100%;
         justify-content: space-between;
         padding: 10px 10px 10px 20px;
     }

     /* Dropdowns on mobile */
     .dropdown-menu {
         background: #847A82;
         /* match desktop */
         backdrop-filter: blur(15px);
         -webkit-backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.1);
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
         margin-top: 5px !important;
         padding: 10px;
         border-radius: 12px;
         display: none;
         /* hidden by default on mobile until toggled */
     }

     .dropdown-menu.show {
         display: block;
         /* Bootstrap toggles this class via JS */
     }

     .dropdown-item {
         padding: 10px 15px;
         border-radius: 8px;
     }

     .dropdown-submenu {
         padding-left: 0;
     }

     .dropdown-submenu>.dropdown-menu {
         position: static;
         padding-left: 15px;
         background: #847A82
     }
 }

 /* For desktop layout flex behavior */
 @media (min-width: 1200px) {
     .custom-navbar .container-fluid {
         position: relative;
     }

     .navbar-collapse {
         justify-content: flex-end;
     }

     .navbar__right {
         display: flex;
         justify-content: flex-end;
         align-items: center;
     }

     .navbar__center {
         margin-left: 2rem;
         margin-right: auto;
         z-index: 10;
     }
 }

 /* ----- SINGLE BOX MEGA MENU OVERRIDES ----- */
 .btn-all-courses {
     background: var(--nav-pill-bg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid var(--nav-pill-border);
     color: var(--nav-link-color) !important;
     border-radius: 8px;
     padding: 8px 16px;
     font-weight: 500;
     font-size: 0.95rem;
     transition: all 0.3s ease;
 }

 .btn-all-courses:hover,
 .btn-all-courses.show {
     background: rgba(255, 255, 255, 0.15);
     color: var(--nav-link-color);
 }

 .single-box-menu {
     width: 320px;
     max-height: 80vh;
     overflow-y: auto;
     border-radius: 12px;
     padding: 10px;
     background: var(--dropdown-bg) !important;
 }

 @media (max-width: 576px) {
     .single-box-menu {
         width: 280px;
     }
 }

 .custom-accordion {
     --bs-accordion-bg: transparent;
     --bs-accordion-color: var(--dropdown-item-color);
     --bs-accordion-border-color: rgba(255, 255, 255, 0.1);
     --bs-accordion-btn-bg: transparent;
     --bs-accordion-btn-color: var(--dropdown-item-color);
     --bs-accordion-active-bg: rgba(255, 255, 255, 0.05);
     --bs-accordion-active-color: var(--dropdown-item-color);
     --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
     --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
 }

 .custom-accordion .accordion-item {
     border: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .custom-accordion .accordion-button {
     box-shadow: none !important;
     padding: 12px 15px;
     font-size: 0.95rem;
     font-weight: 500;
     border-radius: 8px !important;
     transition: background 0.2s;
 }

 .custom-accordion .accordion-button:hover {
     background: var(--dropdown-bg);
 }

 .custom-accordion .accordion-body {
     padding: 5px 0 15px 0;
 }

 .custom-accordion .sub-item {
     padding: 8px 15px 8px 40px;
     font-size: 0.9rem;
     opacity: 0.8;
     border-radius: 6px;
     margin: 0 10px;
     width: auto;
 }

 .custom-accordion .sub-item:hover {
     opacity: 1;
     background: rgba(255, 255, 255, 0.1);
 }