:root {
    --accent: #0aa7c5;
    --muted: rgba(255, 255, 255, 0.85);
    --gold: #0aa7c5;
    /* Warm bronze gold */
    --gold-light: #e5c39c;
    /* Lighter gold for borders/hover */
    --gold-dark: #0aa7c5;
    /* Darker gold for active states */
    --dark-text: #222222;
    /* Charcoal black for nav text */
    --light-bg: #fcf9f6;
    /* Warm off-white */
    --border-color: #f1eae2;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    /* color: var(--muted);
    background: #111; */
    position: relative;
    /* allow pseudo-element layer */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    /* keep page content above decorative background */
    z-index: 1;
}

/* Decorative page background ornament (subtle, non-intrusive)
   Uses a fixed pseudo-element so it sits behind page content and is easy to tweak. */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url('../img/logo.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1200px auto;
    opacity: 0.06;
    /* adjust to make it more or less visible */
    z-index: -1;
}

p {
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
}

/* Top Bar */
/* Top Bar */
.header-top-bar {
    background-color: #0c3c43;
    /* Deep premium teal */
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 35px;
    display: flex;
    align-items: center;
    font-size: 12px;
    position: relative;
    z-index: 101;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.top-social {
    display: flex;
    gap: 10px;
}

.top-social a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    text-decoration: none !important;
}

.top-social a:hover {
    transform: translateY(-2px);
    color: #ffffff !important;
}

.top-social a[aria-label="Instagram"]:hover {
    background-color: #e1306c;
}

.top-social a[aria-label="Facebook"]:hover {
    background-color: #1877f2;
}

.top-social a[aria-label="Twitter"]:hover {
    background-color: #000000;
}

.top-social a[aria-label="YouTube"]:hover {
    background-color: #ff0000;
}

.top-social a[aria-label="TikTok"]:hover {
    background-color: #000000;
}

.top-social a[aria-label="Pinterest"]:hover {
    background-color: #bd081c;
}

/* Neutralize brand icon colors inside top bar */
.top-social a i {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color 0.3s ease;
}

.top-social a:hover i {
    color: #ffffff !important;
}

.top-contact a i {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color 0.3s ease;
}

.top-contact a:hover i {
    color: #ffffff !important;
}

.top-contact {
    display: flex;
    gap: 24px;
}

.top-contact a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.top-contact a:hover {
    color: #ffffff;
}

.top-contact a i {
    color: #0aa7c5;
    font-size: 13px;
}

.top-contact .whatsapp-link i {
    color: #25d366;
}

.site-header {
    position: relative;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(11, 59, 64, 0.03);
}

.site-header .container {
    max-width: 1350px;
    width: 100%;
}

.site-header.scrolled {
    position: fixed;
    top: -35px;
    left: 0;
    right: 0;
    box-shadow: 0 10px 30px rgba(11, 59, 64, 0.08);
}

.site-header.scrolled .header-top-bar {
    opacity: 0;
    pointer-events: none;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    /* spacious and breathing room */
    padding: 0 24px;
    transition: all 0.3s ease;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    color: #0c3c43;
    letter-spacing: 0.5px;
}

.logo-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: #0aa7c5;
    letter-spacing: 2px;
    margin-top: 2px;
}

.main-nav {
    display: flex;
    align-items: center;
}

.main-nav .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
    align-items: center;
}

.main-nav .nav-list>li {
    position: relative;
    padding: 25px 0;
}

.main-nav .nav-list>li>a {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.main-nav .nav-list>li>a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #0aa7c5;
    transform-origin: bottom center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav .nav-list>li:hover>a {
    color: #0aa7c5 !important;
}

.main-nav .nav-list>li:hover>a::after {
    transform: scaleX(1);
}

.nav-caret {
    font-size: 9px;
    color: #0aa7c5;
    transition: transform 0.3s ease;
    margin-left: 2px;
}

.main-nav .nav-list>li:hover .nav-caret {
    transform: rotate(180deg);
}

/* Header Enroll Button (CTA) */
.main-nav .nav-list>li>a.btn-enroll-nav::after {
    display: none !important;
}

.main-nav .nav-list>li:hover>a.btn-enroll-nav {
    color: #ffffff !important;
}

.btn-enroll-nav {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: linear-gradient(135deg, #0aa7c5, #088b9e);
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(10, 167, 197, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none !important;
    border: none;
}

.btn-enroll-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 167, 197, 0.35);
    background: linear-gradient(135deg, #0bc0e3, #0aa7c5);
}

.btn-enroll-nav:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(10, 167, 197, 0.2);
}

.nav-cta {
    padding-left: 6px;
}

/* Button & Common Helper classes */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn.small.ghost {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--gold);
}

.btn.small.ghost:hover {
    background: var(--light-bg);
    color: var(--gold-dark);
}

.btn.small.primary {
    background: var(--gold);
    color: #fff;
}

.btn.small.primary:hover {
    background: var(--gold-dark);
}

/* Footer styling safeguards (clean & isolated) */
.footer a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer a:hover {
    text-decoration: none;
}

.footer a,
.footer a i,
.footer a * {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.footer a,
.footer a i {
    display: inline-block;
    vertical-align: middle;
    line-height: 1 !important;
}

.footer a::before,
.footer a::after {
    content: none !important;
}

.social-svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.footer p {
    margin: 0;
}

/* Premium Hero Slider styling */
.hero-slider {
    position: relative;
    height: 85vh;
    min-height: 550px;
    overflow: hidden;
    background-color: #0a0a0a;
}

.slider-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
}

.slide.last-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: none;
    /* Keep the outgoing slide static underneath during cross-fade */
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
}

.slide-1 {
    background-position: center top;
}

.slide-2 {
    background-position: center top;
}

.slide-3 {
    background-position: center center;
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    /* Elegant semi-transparent overlay to ensure contrast and avoid blackout bug */
}

.slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    height: 100%;
    color: #ffffff;
    z-index: 3;
    padding-bottom: 70px;
    /* spacing offset for indicators */
}

.slide-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-style: italic;

    margin-bottom: 12px;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.slide-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 4.5vw, 56px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 1px;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.slide-title strong,
.slide-title .highlight {

    font-weight: 700;
}

.highlight-huge {
    font-size: clamp(55px, 8vw, 100px);
    display: block;
    line-height: 0.95;
    font-weight: 800;
    color: #ffffff;
    margin-top: 5px;
}

/* Slider Pagination Dots */
.slider-dots {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 5;
}

.slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dots .dot.active {
    background-color: #ffffff;
    transform: scale(1.1);
}

/* Floating Contact Widget bottom-left */
.floating-contact-widget {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
}

.whatsapp-float {
    background: #25D366;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: transform 0.3s ease;
    color: #ffffff !important;
    font-size: 28px;
}

.whatsapp-float i {
    color: #ffffff !important;
    line-height: 1;
}

.whatsapp-float:hover {
    transform: scale(1.08);
}

.enroll-float-btn {
    background-color: var(--gold);
    color: #ffffff !important;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.enroll-float-btn:hover {
    background-color: var(--gold-dark);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .hero-slider {
        height: 60vh;
        min-height: 400px;
    }

    .slider-dots {
        bottom: 15px;
    }

    .slide-content {
        align-items: center;
        text-align: center;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 45px;
    }

    .slide-subtitle {
        font-size: 20px;
    }

    .slide-title {
        font-size: 26px;
    }

    .highlight-huge {
        font-size: 48px;
    }

    .floating-contact-widget {
        bottom: 16px;
        left: 16px;
    }

    .whatsapp-float {
        width: 46px;
        height: 46px;
    }

    .enroll-float-btn {
        padding: 10px 16px;
        font-size: 11px;
    }

    .slide-1 {
        background-position: right top;
    }

    .slide-2 {
        background-position: left top;
    }

    .slide-3 {
        background-position: right bottom;
    }
}

/* small logos used in the join section */
.logo-small {
    max-width: 260px;
    display: block;
    height: auto;
    object-fit: contain
}

/* badges row under image: allow wrapping and prevent overflow */
.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 6px
}

.badges img {
    height: 44px;
    filter: grayscale(0);
    opacity: 1;
    max-width: 100%;
    height: auto
}

/* Responsive tweaks */
/* default: hide menu toggle; media query will show it on small screens */
.menu-toggle {
    display: none
}

/* Responsive nav: at smaller widths show a toggle and stacked two-row style */
@media (max-width:900px) {
    .main-nav {
        display: none
    }

    .menu-toggle {
        display: flex
    }

    .hero {
        height: 50vh
    }

    .logo {
        font-size: 20px
    }
}

/* hamburger */
.menu-toggle {
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.menu-toggle .hamburger {
    width: 20px;
    height: 2px;
    background: var(--dark-text);
    display: block;
    position: relative;
}

.menu-toggle .hamburger:before,
.menu-toggle .hamburger:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--dark-text);
}

.menu-toggle .hamburger:before {
    top: -6px;
}

/* Page banner section used on About page */
.page-banner {
    background-image: url('../gallery/DSC01404.webp');
    background-size: cover;
     background-position: center center; 
    padding: 60px 0;
    color: #fff;
    position: relative;
}

.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 4, 0.45);
}

.page-banner-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.page-banner h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 6vw, 56px);
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 1px;
    text-align: center;
}

@media (max-width:600px) {
    .page-banner {
        padding: 36px 0;
    }

    .page-banner h1 {
        font-size: clamp(20px, 7vw, 30px);
    }
}

.menu-toggle .hamburger:after {
    bottom: -6px
}

/* mobile nav panel that appears below header; two-row layout */
.mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 68px;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.9), rgba(6, 6, 6, 0.95));
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    align-items: center;
    z-index: 40;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease
}

.mobile-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 18px;
    padding: 6px 10px
}

.mobile-nav.open {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

/* When mobile menu open, dim hero behind it slightly */
.mobile-nav.open~.hero {
    filter: brightness(.85)
}

@media (max-width:480px) {
    .mobile-nav a {
        font-size: 16px
    }

    .hero {
        min-height: 420px
    }

    .cta {
        padding: 10px 18px
    }
}

@media (max-width:480px) {
    .hero {
        min-height: 420px
    }

    .cta {
        padding: 10px 18px
    }
}

/* Courses cards section (premium redesign) */
.courses-section {
    padding: 40px 0 90px;
    background: #fcf9f6;
    /* Warm off-white background matching body bg */
    color: #2c3e50;
    border-top: 1px solid rgba(10, 167, 197, 0.06);
    border-bottom: 1px solid rgba(10, 167, 197, 0.06);
    position: relative;
    z-index: 1;
}

.courses-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.courses-title {
    color: #0b3b40;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.courses-title .accent-title-text {
    color: #0aa7c5;
}

.courses-header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 12px 0 16px;
}

.courses-header-divider .divider-line {
    width: 80px;
    height: 1px;
    background-color: rgba(14, 131, 136, 0.2);
}

.courses-header-divider .divider-lotus {
    color: var(--accent);
    font-size: 16px;
}

.courses-header-divider .divider-arrow-left,
.courses-header-divider .divider-arrow-right {
    color: rgba(14, 131, 136, 0.3);
    font-size: 8px;
    transform: scaleY(0.7);
    display: inline-block;
}

.courses-subtitle-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #7f8c8d;
    font-weight: 500;
    text-align: center;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
    padding-top: 15px;
}

.course-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 12px 12px 20px;
    box-shadow: 0 10px 30px rgba(11, 59, 64, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(11, 59, 64, 0.08);
}

.popular-card {
    border: 2px solid #c2913f;
    box-shadow: 0 15px 40px rgba(194, 145, 63, 0.1);
}

.popular-card:hover {
    box-shadow: 0 25px 50px rgba(194, 145, 63, 0.16);
    border-color: #c2913f;
}

.popular-card-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #158393;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 18px;
    border-radius: 50px;
    text-transform: uppercase;
    z-index: 12;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.course-image-wrapper {
    position: relative;
    width: 100%;
}

.course-image {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
}

.course-image img {
    width: 100%;
    height: 165px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.course-card:hover .course-image img {
    transform: scale(1.05);
}

.course-badge-inline {
    display: inline-block;
    align-self: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.badge-teal-light {
    background-color: rgba(10, 167, 197, 0.1);
    color: #0aa7c5;
    border: 1px solid rgba(10, 167, 197, 0.15);
}

.badge-gold-light {
    background-color: rgba(194, 145, 63, 0.1);
    color: #c2913f;
    border: 1px solid rgba(194, 145, 63, 0.15);
}

.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.wishlist-btn:hover {
    color: #e74c3c;
    transform: scale(1.1);
}

.course-avatar-icon {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.bg-teal {
    background-color: #0aa7c5;
}

.bg-gold {
    background-color: #c2913f;
}

.course-body {
    padding: 24px 4px 4px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.course-title-card {
    font-size: 11px;
    font-weight: 700;
    color: #0c3c43;
    line-height: 1.25;
    text-align: center;
    margin: 0 0 4px;
}

.course-title-card span {
    font-weight: 400;
}

.course-desc-card {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #7f8c8d;
    text-align: center;
    margin: 0 0 10px;
}

.course-details-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 12px;
}

.course-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.course-detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    color: #555555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-label i {
    color: #7f8c8d;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.detail-val {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #2c3e50;
}

.course-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: auto;
}

.btn-know-more,
.btn-book-now {
    display: inline-block;
    padding: 10px 10px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none !important;
    flex: 1;
    transition: all 0.3s ease;
}

.btn-theme-teal.btn-know-more {
    border: 1px solid #0aa7c5;
    color: #0aa7c5;
    background: transparent;
}

.btn-theme-teal.btn-know-more:hover {
    background: rgba(10, 167, 197, 0.04);
}

.btn-theme-teal.btn-book-now {
    background: #0aa7c5;
    color: #ffffff;
    border: 1px solid #0aa7c5;
}

.btn-theme-teal.btn-book-now:hover {
    background: #088b9e;
    border-color: #088b9e;
}

.btn-theme-gold.btn-know-more {
    border: 1px solid #c2913f;
    color: #c2913f;
    background: transparent;
}

.btn-theme-gold.btn-know-more:hover {
    background: rgba(194, 145, 63, 0.04);
}

.btn-theme-gold.btn-book-now {
    background: #c2913f;
    color: #ffffff;
    border: 1px solid #c2913f;
}

.btn-theme-gold.btn-book-now:hover {
    background: #a87930;
    border-color: #a87930;
}

/* Features Bar styling */
.courses-features-bar {
    margin: 60px auto 0;
    max-width: 1170px;
    background: #ffffff;
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    box-shadow: 0 15px 40px rgba(11, 59, 64, 0.06);
    padding: 24px 20px;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px;
    border-right: 1px solid var(--border-color);
}

.feature-item:last-child {
    border-right: none;
}

.feature-icon {
    font-size: 24px;
    color: #0aa7c5;
    background-color: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.feature-text h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0c3c43;
    margin: 0;
}

.feature-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #7f8c8d;
    margin: 0;
    line-height: 1.35;
}

@media (max-width: 1200px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .courses-features-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 24px;
    }

    .feature-item {
        border-right: none;
        padding: 0 10px;
    }
}

@media (max-width: 720px) {
    .courses-grid {
        grid-template-columns: 1fr;
    }

    .course-image img {
        height: 280px;
    }

    .courses-inner {
        padding: 0 16px;
    }

    .courses-features-bar {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
}

/* 200-hour YTT section styles */
.ytt-section {
    background: #fff;
    color: #222;
    padding: 64px 0;
}

.ytt-inner {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 40px;
    align-items: start;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 24px
}

.ytt-left .ytt-tag {
    color: var(--sub);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 8px
}

.ytt-left h2 {
    font-family: 'Playfair Display', serif;

    color: var(--accent);
    margin: 0 0 18px;
    line-height: 1.05
}

.ytt-desc {
    max-width: 560px;
    line-height: 1.65;
    font-size: 14.5px;
    color: #444444;
}

.ytt-subheading {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: var(--accent);
    font-weight: 700;
    margin: 24px 0 12px 0;
    border-left: 3px solid var(--sub);
    padding-left: 10px;
    line-height: 1.3;
}

.ytt-features-simple {
    list-style-type: disc;
    padding-left: 18px;
    margin: 14px 0 0;
    display: grid;
    gap: 10px;
}

.ytt-features-simple li {
    font-size: 14px;
    font-weight: 500;
    color: #555555;
    line-height: 1.5;
    transition: transform 0.2s ease, color 0.2s ease;
}

.ytt-features-simple li::marker {
    color: var(--accent);
    font-size: 0.95em;
}

.ytt-features-simple li:hover {
    color: #111111;
    transform: translateX(4px);
}


.ytt-right {
    display: grid;
    gap: 16px
}

.ytt-img-main img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 14px
}

.ytt-img-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ytt-img-row img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 14px
}

/* Short Courses Hero styles */
.short-courses-hero {
    background: url('../img/prenatal.jpg') center/cover no-repeat;
    padding: 40px 0 80px;
    position: relative;
}

.short-inner {
    display: grid;
    grid-template-columns: 560px 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.short-box {
    background: #fff;
    border-radius: 48px 8px 8px 48px;
    padding: 36px;
    box-shadow: 0 20px 40px rgba(10, 20, 24, 0.08);
    max-width: 520px;
}

.short-tag {
    color: var(--sub);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.short-title {
    color: var(--accent);
    font-size: 28px;
    margin: 0 0 16px;
    line-height: 1.05
}

.short-desc {
    line-height: 1.7;
    margin-bottom: 18px
}

.short-fee {
    margin: 8px 0 18px
}

.fee-label {
    color: var(--sub);
    font-weight: 700
}

.fee-amount {
    color: var(--accent);
    font-size: 24px;
    font-weight: 700;
    margin-top: 6px
}

.short-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px
}

.short-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 8px
}

@media (max-width:980px) {
    .short-inner {
        grid-template-columns: 1fr;
    }

    .short-image img {
        height: 320px
    }

    .short-box {
        border-radius: 20px;
        padding: 24px 0;
        background-color: transparent;
    }
}

/* Aerial short course layout: image left, content right */
.course-aerial {
    padding: 36px 0;
    background: #f6f7f8;
}

.aerial-inner {
    display: grid;
    grid-template-columns: 1fr 560px;
    gap: 40px;
    align-items: center;
    background: #00000012;
}

.aerial-image img {
    width: 100%;
    /* height: 480px; object-fit: cover; */
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(10, 20, 20, 0.06);
}

.aerial-box .short-tag {
    color: var(--sub);
    font-weight: 700;
    margin-bottom: 10px
}

.aerial-box .short-title {
    color: var(--accent);
    margin-bottom: 12px
}

.aerial-box .short-desc {
    margin-bottom: 18px
}

@media (max-width:980px) {
    .aerial-inner {
        grid-template-columns: 1fr;
    }

    .aerial-image img {
        height: 260px
    }

    .aerial-box {
        padding: 20px 0
    }
}


@media (max-width: 980px) {
    .ytt-inner {
        grid-template-columns: 1fr;
    }

    .ytt-img-main img {
        height: 260px
    }

    .ytt-img-row img {
        height: 140px
    }
}

@media (max-width: 480px) {
    .ytt-inner {
        padding: 0 14px
    }

    .ytt-left h2 {
        font-size: 20px
    }

    .ytt-desc {
        font-size: 14px
    }

    .ytt-img-main img {
        height: 200px
    }

    .ytt-img-row {
        grid-template-columns: 1fr 1fr
    }
}


/* Trusted Yoga Alliance section */
.trusted-section {
    position: relative;
    padding: 64px 0 48px;
    color: #fff;
    overflow: hidden;
}

.trusted-overlay {
    position: absolute;
    inset: 0;
    background-image: url('../gallery/130of42.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(0.35) saturate(0.7);
    z-index: 0;
}

.trusted-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}

.trusted-decor {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
}

.trusted-head h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 3.6vw, 48px);
    margin: 6px 0 8px;
    letter-spacing: 2px;
}

.trusted-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    margin-bottom: 14px;
}

.trusted-stars {

    gap: 8px;
    font-size: 28px;
    color: #ffd24a;
    margin: 10px 0 12px;
}

.trusted-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    margin-bottom: 22px;
}

.cert-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: end;
    margin-top: 22px;
}

.cert-card {
    background: transparent;
    /* padding: 12px; */
    border: 1px solid var(--accent);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (max-width:1100px) {
    .cert-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:720px) {
    .trusted-head h2 {
        font-size: 22px
    }

    .cert-card {
        border-width: 1px;
        gap: 6px !important;
        padding: 0px;
    }
}

/* --- Menu dropdowns (desktop) --- */
.main-nav .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    transform-origin: top center;
    background: #ffffff;
    padding: 12px 0;
    border-radius: 12px;
    min-width: 230px;
    display: block;
    box-shadow: 0 15px 35px rgba(11, 59, 64, 0.12);
    border-top: 3px solid var(--accent);
    z-index: 1000;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.3s ease;
}

.main-nav .submenu li {
    padding: 0;
    display: block;
    width: 100%;
}

.main-nav .submenu li a {
    color: var(--dark-text) !important;
    display: block;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.25s ease;
    text-align: left;
    text-decoration: none !important;
    border-left: 3px solid transparent;
}

.main-nav .submenu li a:hover {
    background-color: rgba(10, 167, 197, 0.04);
    color: var(--accent) !important;
    border-left: 3px solid var(--accent);
    padding-left: 28px;
}

.main-nav .has-submenu:hover>.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* --- Mobile panel (slide in from right) --- */
.mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9998;
    transition: opacity 300ms ease;
}

.mobile-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    color: var(--dark-text);
    z-index: 9999;
    padding: 24px 20px;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.08);
    transition: right 300ms ease;
    overflow-y: auto;
    border-left: 1px solid var(--border-color);
}

.mobile-panel.open {
    right: 0;
}

.mobile-panel .mobile-close {
    background: transparent;
    color: var(--dark-text);
    border: 0;
    font-size: 24px;
    float: right;
    cursor: pointer;
    transition: color 0.3s ease;
}

.mobile-panel .mobile-close:hover {
    color: var(--gold);
}

.mobile-panel .nav-list {
    list-style: none;
    padding: 60px 0 20px;
    margin: 0;
    display: block;
}

.mobile-panel .nav-list>li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.mobile-panel a {
    color: var(--dark-text) !important;
    text-decoration: none !important;
    display: block;
    padding: 8px 0;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s ease;
}

.mobile-panel a:hover {
    color: var(--gold) !important;
}

/* submenu accordion in mobile */
.mobile-panel .submenu {
    display: none;
    padding-left: 16px;
    list-style: none;
    margin: 8px 0 0;
}

.mobile-panel .submenu li {
    padding: 4px 0;
}

.mobile-panel .submenu li a {
    font-size: 14px;
    font-weight: 400;
    color: #555 !important;
    text-decoration: none !important;
}

.submenu-toggle {
    background: transparent;
    border: 0;
    color: var(--dark-text);
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submenu-toggle .caret {
    color: var(--gold);
    font-size: 12px;
}

/* make sure desktop hides mobile-panel/backdrop */
@media (min-width: 901px) {

    .mobile-panel,
    .mobile-backdrop {
        display: none !important;
    }
}

@media (max-width: 1250px) and (min-width: 901px) {
    .main-nav .nav-list {
        gap: 10px;
    }

    .main-nav .nav-list>li>a {
        font-size: 11px;
        letter-spacing: 0.3px;
    }

    .btn-enroll-nav {
        padding: 7px 12px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

/* show mobile panel toggle and adapt nav on small screens */
@media (max-width:900px) {
    .main-nav {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .header-top-bar {
        display: none !important;
    }

    .site-header {
        position: relative;
    }

    .site-header.scrolled {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}

/* Timeline styles */
.timeline-section {
    background: #fff;
    color: #1b1b1b;
}

.timeline-inner {
    max-width: 920px;
    margin: 0 auto;
}

.timeline-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    margin-bottom: 32px;
    color: var(--accent);
}

.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(#e5b5a0, #0aa7c5);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 12px 24px;
    box-sizing: border-box;
}

.timeline-item .content {
    background: #fff;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.timeline-item .tag {
    display: inline-block;
    font-weight: 700;
    color: #0aa7c5;
    margin-bottom: 8px;
}

.timeline-item.left {
    left: 0;
}

.timeline-item.right {
    left: 50%;
}

.timeline-item.left {
    text-align: right;
    padding-right: 40px;
}

.timeline-item.right {
    text-align: left;
    padding-left: 40px;
}

.timeline-item.left::before,
.timeline-item.right::before {
    content: '';
    position: absolute;
    top: 28px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sub);
    box-shadow: 0 0 0 4px rgba(10, 167, 197, 0.06);
}

.timeline-item.left::before {
    right: -7px;
}

.timeline-item.right::before {
    left: -7px;
}

/* Position items properly */
.timeline-item.left {
    transform: translateX(-6%);
}

.timeline-item.right {
    transform: translateX(6%);
}

@media (max-width:900px) {
    .timeline::after {
        left: 8px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 36px;
        padding-right: 12px;
        margin-bottom: 18px;
    }

    .timeline-item.left,
    .timeline-item.right {
        left: 0;
        text-align: left;
        transform: none;
    }

    .timeline-item.left::before,
    .timeline-item.right::before {
        left: 0;
    }
}

/* Vision / Mission / Aims 3-column section */
.vision-section {
    padding: 60px 0;
    background: #f4f7f7;
}

.vision-inner {
    display: grid;
    grid-template-columns: 1fr 420px 1fr;
    gap: 28px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.vision-col h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    margin: 0 0 12px;
    color: var(--accent);
    letter-spacing: 1px;
}

.vision-col hr {
    border: 0;
    height: 3px;
    background: var(--sub);
    width: 80px;
    margin: 8px 0 20px;
}

.vision-left p {
    line-height: 1.9;
    text-align: justify;
}

.vision-image img {
    width: 100%;
    border-radius: 12px;
    border: 6px solid #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: block;
}

.vision-right .aims-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
    font-size: 14px;
}

.vision-right .aims-list li {
    padding-left: 28px;
    position: relative;
    line-height: 1.8;
}

.vision-right .aims-list li::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #ff8b3d;
}

@media (max-width:1000px) {
    .vision-inner {
        grid-template-columns: 1fr 360px 1fr;
    }
}

@media (max-width:820px) {
    .vision-inner {
        grid-template-columns: 1fr;
    }

    .vision-center {
        order: 2;
    }

    .vision-left,
    .vision-right {
        order: 1;
    }

    .vision-col {
        padding: 18px 24px;
    }
}






/* Premium intro / join styles */
:root {
    --join-max: 1170px;
    --accent: #0aa7c5;
    --sub: #ff6b4b;
    --text: #233;
}

.join {
    padding: 35px 0 25px 0;
    background: linear-gradient(180deg, #fff, #fbfcfd)
}

.join_header {
    text-align: center;
    padding: 0 24px 5px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.join_subheading {
    display: block;
    color: #ff6b4b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.join_main_heading {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--accent);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px 0;
}

.join_header_divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}

.join_header_divider .divider-line {
    width: 40px;
    height: 1px;
    background-color: rgba(11, 59, 64, 0.2);
}

.join_header_divider .divider-lotus {
    color: #0aa7c5;
    font-size: 14px;
}

@media (max-width: 768px) {
    .join_main_heading {
        font-size: 24px;
    }

    .join_subheading {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
}

.join_container {
    max-width: var(--join-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 36px;
    align-items: start;
    padding: 0 24px
}

.join_c2 {
    order: 1
}

.join_c3 {
    order: 2
}

.join_c2 .tag {
    color: var(--sub);

    letter-spacing: 0.6px;
    text-transform: uppercase;
    /* margin-bottom: 8px; */
    display: inline-block
}

.join_c2 h2 {
    font-size: 16px;
    color: var(--accent);
    margin: 4px 0 18px;
    font-weight: 800;
    line-height: 1.9
}

.join_c2 p {

    line-height: 1.9;
    text-align: justify;
    margin-bottom: 0px
}

.join_c4 p {


    line-height: 1.9;
    text-align: justify;
    margin-bottom: 0px
}

.join_c3 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px
}

.join_img {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    height: auto;
    border: 10px solid #fff;
    box-shadow: 0 30px 60px rgba(20, 40, 50, 0.12)
}

.join_c3 img.logo-small {
    max-width: 260px
}

.join_c4 {
    grid-column: 1/-1;
    padding-top: 5px;
}

.join_c4 p:first-of-type,
.join_c2 p:first-of-type {
    margin-top: 0 !important;
}

/* badges row under image */
.badges {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 6px
}

.badges img {
    height: 44px;
    filter: grayscale(0);
    opacity: 1
}

@media (max-width:980px) {
    .join_container {
        grid-template-columns: 1fr 360px
    }

    .join_img {
        max-width: 360px
    }
}

@media (max-width:760px) {
    .join_container {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .join_c3 {
        order: 1;
        align-items: center
    }

    .join_c2 {
        order: 2
    }

    .join_c3 .join_img {
        max-width: 94%;
        border-width: 6px
    }

    .join_c4 {
        padding-top: 18px
    }

    .join {
        padding: 36px 0
    }
}

/* Main video design Style */

/* Home main video Style */

.home_video {
    padding: 5% 10%;
    color: var(--muted);
    background: #111;
}

.home_container,
.home_video_container {
    display: flex;
    max-width: 1175px;
    margin: 0 auto;
    gap: 32px;
    justify-content: center;
}

.home_video_c1 {
    width: 100%;
    max-width: 1175px;
}

/* decorative flower */
.home_video_c1 .flower img {
    display: block;
    margin: 0 auto 12px;
    max-width: 90px;
    height: auto;
}

/* headings / text */
.home_video_c1 h2 {
    color: var(--main-color);
    text-align: center;
    font-size: clamp(20px, 2.4vw, 28px);
    margin: 6px 0;
}

.home_video_c1 p {
    color: var(--default-color);
    text-align: center;
    font-size: clamp(14px, 1.6vw, 16px);
    margin-bottom: 12px;
}

/* responsive video: keep aspect ratio and fill container */
.home_video_c1 iframe {
    width: 100%;
    /* prefer aspect-ratio when available */
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 200px;
    /* fallback for older browsers */
    margin-top: 1%;
    padding: 1%;
    background-color: white;
    border-radius: 12px;
    border: 0;
    display: block;
    box-sizing: border-box;
}

/* Tablet / small laptop */
@media (max-width: 900px) {
    .home_video {
        padding: 4% 6%;
    }

    .home_video_c1 .flower img {
        max-width: 70px;
        margin-bottom: 10px;
    }

    .home_video_c1 h2 {
        font-size: 22px;
    }

    .home_video_c1 iframe {
        min-height: 180px;
        padding: 8px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .home_video {
        padding: 3% 4%;
    }

    .home_video_c1 .flower img {
        max-width: 56px;
    }

    .home_video_c1 h2 {
        font-size: 18px;
    }

    .home_video_c1 p {
        font-size: 13px;
        padding: 0 6px;
    }

    .home_video_c1 iframe {
        min-height: 160px;
        padding: 6px;
        border-radius: 10px;
    }
}


/* Why Choose section styles */
.why-section {
    padding: 0px 0 40px;
    background: linear-gradient(180deg, #f6f8f9 0, #fff 100%)
}

.why-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 24px
}

.why-head {
    text-align: center;
    margin-bottom: 28px
}

.why-head .why-decor {
    font-size: 20px;
    color: #2f5960
}

.why-head h2 {
    color: var(--accent);
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    margin: 6px 0
}

.why-sub {
    color: #0b5c62;
    font-weight: 700;
    letter-spacing: 1px
}

/* Specific styling for short courses head to optimize font sizes and spacing */
.short-courses-head {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
    max-width: 1200px !important;
    text-align: center;
}

.short-courses-badge {
    display: inline-block;
    background-color: rgba(255, 107, 75, 0.08);
    color: #ff6b4b;
    border-radius: 30px;
    padding: 6px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 107, 75, 0.15);
    font-family: 'Montserrat', sans-serif;
}

.short-courses-head h2 {
    color: var(--accent) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 auto 15px auto !important;
    max-width: 820px;
}

.short-courses-head .courses-header-divider {
    margin: 15px 0 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.short-courses-head .short-courses-desc {
    font-family: 'Montserrat', sans-serif;
    color: #555555;
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px;
    max-width: 780px;
    margin: 0 auto !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .short-courses-head {
        margin-top: 40px !important;
        margin-bottom: 30px !important;
    }

    .short-courses-head h2 {
        font-size: 24px !important;
    }

    .short-courses-head .short-courses-desc {
        font-size: 14px !important;
    }
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 18px
}

.why-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(20, 30, 30, 0.12);
    background: #000
}

.why-card img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: brightness(.6);
    transition: transform .45s ease
}

/* dark gradient overlay and centered title area */
.why-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 16px;
    height: 88px;
    /* display:flex; */
    align-items: flex-end;
    justify-content: center;
    pointer-events: none
}

.why-title {
    color: #fff;
    font-weight: 800;
    text-align: center;
    font-size: 18px;
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6)
}

.why-ornament {
    width: 100%;
    height: 6px;
    margin-top: 8px;
    background: var(--accent);
    opacity: .95;
    border-radius: 4px
}

/* hidden white description that slides up from bottom on hover (matches screenshot) */
.why-desc {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: #fff;
    color: #222;
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(10, 20, 20, 0.12);
    transform: translateY(120%);
    transition: transform .36s cubic-bezier(.2, .9, .2, 1);
    font-size: 13px;
    line-height: 1.4
}

/* Hover behavior: raise image slightly and slide description into view */
.why-card:hover img {
    transform: scale(1.04)
}

.why-card:hover .why-desc {
    transform: translateY(0)
}

/* Make overlay title stay visible but fade slightly on hover so text box becomes primary */
.why-card:hover .why-overlay {
    opacity: .98
}

@media (max-width:980px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .why-card img {
        height: 200px
    }
}

@media (max-width:640px) {
    .why-grid {
        grid-template-columns: 1fr
    }

    .why-card img {
        height: 180px
    }

    .why-head h2 {
        font-size: 26px
    }
}

/* Home Gallery CSS */

.flower img {
    display: block;
    margin: 0 auto 12px;
    max-width: 70px;
    height: auto;
}

.home_gallery {
    padding: 10px 24px;
    background: #fff;
}

.home_gallery_container {
    margin: 0 auto;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.home_gallery_c1 {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 16px;
}

.home_gallery_c1 h2 {
    font-family: 'Playfair Display', serif;
    /* font-size: clamp(24px, 3vw, 36px); */
    color: var(--accent);
    margin: 10px 0;
    line-height: 1.3;
}

.home_gallery_c1 p {
    color: var(--default-color);
    font-size: clamp(14px, 1.6vw, 16px);
    max-width: 600px;
    margin: 0 auto;
}

.home_gallery_c2 {
    grid-column: 1 / -1;
    margin-bottom: 20px;
}

/* Gallery filter button styles */
.gallery-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.filter-btn {
    cursor: pointer;
    padding: 10px 22px;
    border-radius: 30px;
    border: 1px solid rgba(11, 92, 98, 0.15);
    background: rgba(255, 255, 255, 0.7);
    color: #555;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: 'Montserrat', sans-serif;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.filter-btn i {
    font-size: 13px;
    color: var(--accent);
    transition: color 0.3s;
}

.filter-btn:hover {
    background: rgba(11, 92, 98, 0.05);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(11, 92, 98, 0.25);
}

.filter-btn.active i {
    color: #fff;
}

/* Gallery cards */
.home_gallery_c3 {
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.gallery-card-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.home_gallery_c3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover overlay and effects */
.gallery-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 92, 98, 0.95) 0%, rgba(11, 92, 98, 0.6) 60%, rgba(11, 92, 98, 0.25) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.gallery-card-cat {
    color: var(--main-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
    transform: translateY(15px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.04s;
    display: inline-block;
}

.gallery-card-title {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px;
    transform: translateY(15px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s;
}

.gallery-card-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    transform: translateY(15px);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.gallery-zoom-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(5px);
}

/* Hover bindings */
.home_gallery_c3:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(11, 92, 98, 0.15);
    cursor: pointer;
}

.home_gallery_c3:hover img {
    transform: scale(1.08);
}

.home_gallery_c3:hover .gallery-hover-overlay {
    opacity: 1;
    pointer-events: auto;
}

.home_gallery_c3:hover .gallery-card-cat,
.home_gallery_c3:hover .gallery-card-title,
.home_gallery_c3:hover .gallery-card-desc {
    transform: translateY(0);
}

.home_gallery_c3:hover .gallery-zoom-icon {
    opacity: 1;
    transform: scale(1);
}

.gallery-zoom-icon:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
    transform: scale(1.1);
}

/* Smooth filtering out hidden items */
.home_gallery_c3[style*="display: none"] {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Premium Lightbox Modal */
.premium-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.premium-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 16, 17, 0.95);
    backdrop-filter: blur(12px);
}

.lightbox-container {
    position: relative;
    width: 90%;
    max-width: 1050px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.lightbox-close {
    position: absolute;
    top: -35px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 42px;
    cursor: pointer;
    transition: all 0.3s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.lightbox-close:hover {
    transform: rotate(90deg) scale(1.1);
    color: var(--main-color);
}

.lightbox-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.premium-lightbox.open img {
    transform: scale(1);
}

.lightbox-caption {
    width: 100%;
    max-width: 700px;
    text-align: center;
    margin-top: 24px;
    color: #fff;
}

.lightbox-cat-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-caption h4 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(20px, 2.5vw, 26px);
    margin: 4px 0 8px;
    color: #fff;
}

.lightbox-caption p {
    font-size: clamp(13px, 1.5vw, 15px);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin: 0 auto;
    font-weight: 300;
    max-width: 600px;
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 20px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 15;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 5px 15px rgba(11, 92, 98, 0.3);
}

.arrow-left {
    left: -74px;
}

.arrow-right {
    right: -74px;
}

/* Custom Gallery on Course Pages */
.custom-gallery {
    max-width: 1140px;
    margin: 40px auto;
    padding: 0 20px;
}

.custom-gallery .top-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.custom-gallery .side-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-gallery img {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(11, 92, 98, 0.15);
    padding: 5px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
}

.custom-gallery .side-col img {
    height: 180px;
    object-fit: cover;
}

.custom-gallery .main-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(11, 92, 98, 0.08);
}

.custom-gallery .thumb-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 12px;
}

.custom-gallery .thumb-scroll img {
    height: 110px;
    min-width: 170px;
    object-fit: cover;
}

.custom-gallery .thumb-scroll::-webkit-scrollbar {
    height: 6px;
}

.custom-gallery .thumb-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.custom-gallery .thumb-scroll::-webkit-scrollbar-thumb {
    background: rgba(11, 92, 98, 0.35);
    border-radius: 10px;
    transition: background 0.3s;
}

.custom-gallery .thumb-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

.custom-gallery img:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 24px rgba(11, 92, 98, 0.15);
    border-color: var(--accent);
}

/* Media Breakpoints */
@media (max-width: 1200px) {
    .arrow-left {
        left: -15px;
    }

    .arrow-right {
        right: -15px;
    }
}

@media (max-width: 992px) {
    .home_gallery_container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .custom-gallery .top-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .custom-gallery .main-img {
        grid-column: 1 / -1;
    }

    .custom-gallery .side-col {
        display: contents;
    }

    .custom-gallery .side-col img {
        width: 100%;
        height: 140px;
    }

    .custom-gallery .main-img img {
        height: 260px;
    }

    .custom-gallery .thumb-scroll img {
        height: 80px;
        min-width: 110px;
    }
}

@media (max-width: 600px) {
    .home_gallery {
        padding: 40px 16px;
    }

    .home_gallery_container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-filters {
        gap: 8px;
    }

    .filter-btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    .lightbox-arrow {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .lightbox-close {
        top: -48px;
    }
}

/* Google Review Section */
.google-review-section {
    /* background: #f7f7f7; */
    padding: 20px 0;
    font-family: 'Roboto', sans-serif;
}

.gr-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 40px;
    align-items: center;
}

/* LEFT */
.gr-info {
    width: 20%;
}

.gr-info h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent);
}

.gr-rating {
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.gr-score {
    font-size: 28px;
    font-weight: 700;
}

.gr-stars {
    color: #fbbc04;
    font-size: 18px;
}

.gr-based {
    font-size: 14px;
    color: #555;
}

.gr-powered {
    margin: 10px 0;
}

.google-text {
    background: linear-gradient(90deg,
            #4285F4 0%,
            /* Blue */
            #4285F4 25%,
            #DB4437 25%,
            /* Red */
            #DB4437 50%,
            #F4B400 50%,
            /* Yellow */
            #F4B400 75%,
            #0F9D58 75%
            /* Green */
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.gr-btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
}

.gr-btn span {
    font-weight: 700;
}

/* SLIDER */
.gr-slider {
    width: 80%;
    position: relative;
}

.gr-track {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.gr-track::-webkit-scrollbar {
    display: none;
}

/* CARD */
.gr-card {
    /* background: #fff; */
    min-width: 320px;
    height: 260px;
    /* 🔥 height increased */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
}

.gr-header {
    display: flex;
    gap: 10px;
    align-items: center;
}

.gr-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.gr-header h4 {
    font-size: 14px;
    margin: 0;
}

.gr-header span {
    font-size: 12px;
    color: #777;
}

.gr-google {
    margin-left: auto;
    width: 18px;
}

.gr-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    /* max-height: 140px; */
    overflow-y: auto;
    padding-right: 6px;
}

/* ARROWS */
.gr-arrow {
    position: absolute;
    top: 40%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #e0e0e0;
    cursor: pointer;
    font-size: 18px;
}

.gr-arrow.left {
    left: -20px;
}

.gr-arrow.right {
    right: -20px;
}

/* DOTS */
.gr-dots {
    text-align: center;
    margin-top: 15px;
}

.gr-dots span {
    width: 8px;
    height: 8px;
    background: #ccc;
    display: inline-block;
    border-radius: 50%;
    margin: 0 4px;
}

.gr-dots .active {
    background: #1a73e8;
}

/* RESPONSIVE */
@media(max-width:992px) {
    .gr-container {
        flex-direction: column;
    }

    .gr-info,
    .gr-slider {
        width: 100%;
    }

    .gr-arrow {
        display: none;
    }
}

/* REVIEW TEXT SCROLL */
.gr-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    /* max-height:110px; */
    overflow-y: auto;
    padding-right: 5px;
}

.gr-text::-webkit-scrollbar {
    width: 4px;
}

.gr-text::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 10px;
}

/* BIG GOOGLE G */
/* ORIGINAL GOOGLE G */
.google-g {
    margin-left: auto;
    font-size: 26px;
    /* thoda bada */
    font-weight: 700;
    font-family: 'Product Sans', Arial, sans-serif;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.google-g img {
    width: 55px;
    height: 24px;
}

.big-g {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(90deg,
            #4285F4 0%,
            /* Blue */
            #4285F4 25%,
            #DB4437 25%,
            /* Red */
            #DB4437 50%,
            #F4B400 50%,
            /* Yellow */
            #F4B400 75%,
            #0F9D58 75%
            /* Green */
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===========================
   MOBILE RESPONSIVE FIX
=========================== */
@media (max-width: 768px) {

    .google-review-section {
        padding: 50px 15px;
    }

    /* TITLE */
    .testimonial-title {
        font-size: 22px;
        text-align: center;
        line-height: 1.4;
        padding: 0 10px;
    }

    .testimonial-divider {
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }

    /* CONTAINER STACK */
    .gr-container {
        flex-direction: column;
        gap: 30px;
    }

    /* SLIDER FIRST */
    .gr-slider {
        width: 100%;
        order: 1;
    }

    /* TRACK */
    .gr-track {
        gap: 16px;
        padding-bottom: 5px;
    }

    /* CARD */
    .gr-card {
        min-width: 90%;
        height: auto;
        /* 🔥 important */
        padding: 16px;
        border-radius: 10px;
    }

    .gr-header h4 {
        font-size: 13px;
    }

    .gr-header span {
        font-size: 11px;
    }

    .google-g {
        font-size: 22px;
    }

    .gr-stars {
        font-size: 15px;
    }

    .gr-text {
        font-size: 13px;
        max-height: 140px;
    }

    /* HIDE ARROWS */
    .gr-arrow {
        display: none;
    }

    /* INFO SECTION */
    .gr-info {
        width: 100%;
        order: 2;
        text-align: center;
    }

    .gr-info h3 {
        font-size: 18px;
    }

    .gr-rating {
        justify-content: center;
    }

    .gr-btn {
        margin-top: 10px;
        padding: 12px 22px;
        font-size: 14px;
    }

    .gr-based,
    .gr-powered {
        text-align: center !important;
    }
}

.gr-track {
    scroll-snap-type: x mandatory;
}

.gr-card {
    scroll-snap-align: center;
}


/* Footer Redesign - Premium & Attractive */
.footer {
    padding: 80px 0 0 0;
    background: linear-gradient(135deg, #051c20 0%, #0c3c43 100%);
    color: var(--muted);
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 80% 20%, rgba(10, 167, 197, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.footer_container {
    display: flex;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 24px 60px 24px;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* Brand Card (Column 1) */
.footer_brand_card {
    width: 32%;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer_brand_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.footer_logo_wrap {
    width: 100%;
    max-width: 160px;
    margin-bottom: 20px;
}

.footer_logo_wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.footer_brand_desc {
    color: #444444;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 24px;
}

.footer_socials {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
}

.social_title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888888;
    margin-bottom: 12px;
}

.social_icons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.social_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.social_icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.social_icon.youtube {
    color: #ff0000 !important;
    border-color: rgba(255, 0, 0, 0.15);
}

.social_icon.facebook {
    color: #1877f2 !important;
    border-color: rgba(24, 119, 242, 0.15);
}

.social_icon.twitter {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.15);
}

.social_icon.instagram {
    color: #e4405f !important;
    border-color: rgba(228, 64, 95, 0.15);
}

.social_icon.whatsapp {
    color: #25d366 !important;
    border-color: rgba(37, 211, 102, 0.15);
}

.social_icon:hover {
    transform: translateY(-4px);
    color: #ffffff !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.social_icon.youtube:hover {
    background-color: #ff0000;
    border-color: #ff0000;
}

.social_icon.facebook:hover {
    background-color: #1877f2;
    border-color: #1877f2;
}

.social_icon.twitter:hover {
    background-color: #000000;
    border-color: #000000;
}

.social_icon.instagram:hover {
    background-color: #e4405f;
    border-color: #e4405f;
}

.social_icon.whatsapp:hover {
    background-color: #25d366;
    border-color: #25d366;
}

.footer_enroll_btn {
    width: 100%;
    text-align: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0aa7c5 0%, #078096 100%);
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(10, 167, 197, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer_enroll_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(10, 167, 197, 0.5);
    background: linear-gradient(135deg, #0bc0e2 0%, #0aa7c5 100%);
}

/* Right Content Area */
.footer_content {
    width: 68%;
    display: flex;
    flex-direction: column;

}

.footer_heading {
    margin-bottom: 40px;
}

.footer_heading h2 {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    color: #ffffff;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.heading_underline {
    width: 60px;
    height: 3px;
    background: #0aa7c5;
    border-radius: 2px;
}

/* Links Columns Grid */
.footer_links_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.footer_col h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 24px 0;
    position: relative;
    padding-bottom: 10px;
}

.footer_col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: #0aa7c5;
}

.footer_links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_links li {
    margin-bottom: 12px;
}

.footer_links li a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.footer_links li a i {
    font-size: 10px;
    color: #0aa7c5;
    transition: transform 0.3s ease;
}

.footer_links li a:hover {
    color: #ffffff;
    transform: translateX(6px);
}

.footer_links li a:hover i {
    transform: translateX(2px);
}

/* Contact Details Col */
.footer_contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.5;
}

.footer_contact li i {
    color: #0aa7c5;
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer_contact li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer_contact li a:hover {
    color: #ffffff;
}

/* Footer Bottom Copyright Bar */
.footer_bottom {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 0;
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

.footer_bottom_container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright_text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 0;
}

.footer_bottom_links {
    display: flex;
    gap: 24px;
}

.footer_bottom_links a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
}

.footer_bottom_links a:hover {
    color: #ffffff;
}

.footer_bottom_links a i {
    font-size: 11px;
    color: #0aa7c5;
}

/* Responsive Redesign */
@media (max-width: 1024px) {
    .footer_container {
        flex-direction: column;
        gap: 40px;
        padding-bottom: 40px;
    }

    .footer_brand_card {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .footer_content {
        width: 100%;
    }

    .footer_heading {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .footer {
        padding-top: 60px;
    }

    .footer_links_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer_col {
        /*text-align: center;*/
        display: flex;
        flex-direction: column;
        /*align-items: center;*/
    }

    .footer_col h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer_links li a {
        justify-content: center;
    }

    .footer_contact li {
        /*flex-direction: column;*/
        /*align-items: center;*/
        /*text-align: center;*/
        gap: 8px;
    }

    .footer_bottom_container {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* ======================= */
/* Your next steps timeline */
/* ======================= */
.next-steps {
    position: relative;
    padding: 0px 0 120px;
    background: url('../img/bn.jpg') center/cover no-repeat;
    color: #fff;
    overflow: visible;
}

.next-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.next-title {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    margin: 8px 0 28px;
    color: #fff;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.5)
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 90px;
    align-items: start;
    position: relative;
    z-index: 2
}

.step {
    background: rgba(255, 255, 255, 0.97);
    color: #111;
    padding: 26px;
    border-radius: 34px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
    position: relative;
    min-height: 140px
}

.step h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #0b2f2e;
    font-weight: 800
}

.step p {
    margin: 0;
    color: #444;
    line-height: 1.7;
    font-size: 14px
}

.step .num {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #5a8475;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    top: -18px;
    left: 22px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2)
}

/* stagger some cards to recreate the curved route layout */
.steps .step:nth-child(2) {
    transform: translateY(-36px)
}

.steps .step:nth-child(3) {
    transform: translateY(24px)
}

.steps .step:nth-child(4) {
    transform: translateY(-46px)
}

.steps .step:nth-child(5) {
    transform: translateY(32px)
}

.steps .step:nth-child(6) {
    transform: translateY(-12px)
}

.steps .step:nth-child(7) {
    transform: translateY(36px)
}

.route {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .9
}

/* Bank details section (matching screenshot) */
.bank-details {
    padding: 56px 0 80px;
    background: #fff6ef;
    color: #0b3b40;
}

.bank-details .bank-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    color: var(--accent);
    margin: 6px 0 6px;
    letter-spacing: 1px;
}

.bank-details .bank-sub {
    text-align: center;
    color: #0b6b6f;

    margin-bottom: 28px;
}

.bank-grid {
    max-width: 1100px;
    margin: 0 auto;
}

.bank-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.bank-row--full {
    grid-template-columns: 1fr 3fr;
    align-items: center
}

.bank-label,
.bank-value {
    background: #fff;
    padding: 18px 20px;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(10, 20, 20, 0.06);
    display: flex;
    align-items: center;
}

.bank-label {
    font-weight: 700;
    color: var(--accent);
    font-size: 18px
}

.bank-value {
    justify-content: flex-end;
    color: var(--sub);
    font-weight: 800;
    font-size: 18px
}

@media (max-width: 980px) {
    .bank-row {
        grid-template-columns: 1fr 1fr;
    }

    .bank-row--full {
        grid-template-columns: 1fr;
    }

    .bank-value {
        justify-content: flex-start
    }

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

@media (max-width: 560px) {
    .bank-row {
        grid-template-columns: 1fr;
    }

    .bank-value {
        justify-content: flex-start
    }

    .bank-details .bank-title {
        font-size: 28px
    }

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

/* Important Payment Notes */
.important-notes {
    padding: 56px 0;
}

.notes-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 28px;
    border-left: 6px solid var(--accent);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(10, 20, 20, 0.04)
}

.note-icon {
    width: 30px;
    height: 27px;
    border-radius: 50%;
    background: var(--sub);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px
}

.notes-content {
    flex: 1
}

.notes-title {
    margin: 0 0 10px;
    color: var(--accent);
    font-family: 'Playfair Display', serif;
    font-size: 28px
}

.notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px
}

.notes-list li {
    padding-left: 6px;
    color: #4b4b4b;
    font-size: 16px;
    position: relative
}

.notes-list li::before {
    content: '➛';
    position: absolute;
    left: -22px;
    color: var(--accent)
}

@media (max-width:900px) {
    .notes-box {
        flex-direction: column;
        gap: 12px
    }

    .notes-title {
        font-size: 22px
    }
}

/* Terms & Conditions */
.terms-conditions {
    padding: 80px 0 60px;
    background: linear-gradient(180deg, #fff8f2 0, #fff6ef 100%);
}

.terms-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    color: #c94a3a;
    font-size: 36px;
    margin: 6px 0 12px
}

.terms-list {
    max-width: 1000px;
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    list-style: none;
    padding: 0
}

.terms-list li {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(10, 20, 20, 0.04);
    border: 1px solid rgba(200, 80, 60, 0.06);
    font-size: 16px;
    color: #4b4b4b
}

@media (max-width:900px) {
    .terms-list {
        grid-template-columns: 1fr
    }

    .terms-title {
        font-size: 28px
    }
}

/* Detailed Terms & Conditions cards */
.terms-section {
    padding: 80px 0;
}

.terms-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center
}

.terms-heading {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    font-size: 36px;
    margin: 0 0 8px
}

.terms-sub {
    color: var(--sub);
    margin-bottom: 28px;
    text-align: center;
}

.terms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px
}

.term-card {
    border-radius: 18px;
    padding: 28px 26px;
    text-align: left;
    box-shadow: 0 18px 40px rgba(10, 20, 20, 0.06);
    border: 1px solid rgba(200, 80, 60, 0.06)
}

.term-card h4 {
    color: var(--accent);
    margin-top: 12px;
    margin-bottom: 12px;
    font-size: 22px
}

.term-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px
}

.term-card li {
    position: relative;
    padding-left: 18px;
    color: #4b4b4b
}

.term-card li::before {
    content: '➛';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.term-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6e9e6;
    color: var(--accent);
    font-size: 20px
}

.term-icon.alt {
    background: #e8f6ea;
}

@media (max-width:980px) {
    .terms-grid {
        grid-template-columns: 1fr
    }

    .term-card {
        padding: 22px
    }

    .terms-heading {
        font-size: 28px
    }
}

/* Course details session design */
.course-hero {
    position: relative;
}

.course-hero .hero-inner {
    height: 260px;
    background-size: cover;
    background-position: center;
    filter: contrast(.9) brightness(.9);
}

/* CARD */
.course-details-card {
    position: relative;
    margin-top: 40px;
    border-radius: 18px;
    padding: 5px;
    box-shadow: 0 18px 40px rgba(10, 20, 20, 0.08);
    border: 1px solid var(--accent);
}

/* PILL */
.course-pill {
    position: absolute;
    left: 40px;
    top: -28px;
    background: var(--accent);
    color: #fff;
    padding: 12px 30px;
    border-radius: 18px;
    font-weight: 700;
    font-size: 16px;
}

/* GRID */
.course-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: stretch;
}

.course-left {
    padding: 16px;
}

/* ROW */
.course-row {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.course-item {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    min-width: 240px;
}

/* ICON */
.ci-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px dashed #f0dad6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: #fff;
    flex-shrink: 0;
}

.ci-text .ci-title {
    font-weight: 800;
    color: var(--sub);
}

.ci-text .ci-sub {
    color: var(--accent);
}

/* RIGHT SIDE */
.course-right {
    background: #fff;
    border-left: 6px solid #f1f1f1;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    text-align: center;
}

.fee-title {
    color: var(--accent);
    font-weight: 800;
    margin-bottom: 6px;
}

.fee-amount {
    font-size: 32px;
    color: #073b3b;
    margin-bottom: 14px;
}

.fee-old {
    text-decoration: line-through;
    color: #c1c1c1;
    margin-right: 10px;
}

.book-now {
    background: var(--accent);
    color: #fff;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    display: inline-block;
}


/* =========================
   TABLET
========================= */
@media (max-width: 980px) {

    .course-details-card {
        margin-top: -40px;
        padding: 20px;
    }

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

    .course-right {
        border-left: none;
        border-top: 6px solid #f1f1f1;
        margin-top: 10px;
    }

    .course-pill {
        left: 20px;
        font-size: 14px;
        padding: 10px 22px;
    }

    .ci-icon {
        width: 56px;
        height: 56px;
    }
}


/* =========================
   MOBILE
========================= */
@media (max-width: 600px) {

    .course-hero .hero-inner {
        height: 180px;
    }

    .course-details-card {
        margin-top: 15px;
        padding: 18px 14px;
        border-radius: 14px;
        width: 335px;
    }

    .course-pill {
        position: static;
        display: inline-block;
        margin-bottom: 14px;
    }

    .course-left {
        padding: 0;
    }

    .course-row {
        flex-direction: column;
        gap: 14px;
    }

    .course-item {
        min-width: 100%;
    }

    .ci-icon {
        width: 48px;
        height: 48px;
    }

    .ci-text .ci-title {
        font-size: 14px;
    }

    .ci-text .ci-sub {
        font-size: 13px;
    }

    .fee-amount {
        font-size: 26px;
    }

    .book-now {
        width: 100%;
        text-align: center;
    }
}


/* EXTRA SMALL MOBILE */
@media (max-width: 400px) {

    .fee-amount {
        font-size: 22px;
    }

    .course-pill {
        font-size: 13px;
        padding: 8px 16px;
    }

}

/* FAQ section styles */
.faq-section {
    background: #e9eef0;
    padding: 56px 0
}

.faq-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center
}

.faq-head {
    margin-bottom: 18px
}

.faq-head .faq-decor {
    font-size: 26px;
    color: #2b5960;
    margin-bottom: 8px
}

.faq-head h2 {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    font-size: 34px;
    margin: 6px 0
}

/* Section design 20 - large centered heading + boxed accordion */
.section-design-20 .faq-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    color: var(--accent);
    margin: 0 0 6px
}

.section-design-20 .faq-subtitle {
    color: var(--sub);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 22px
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 18px;
    margin-top: 18px
}

.faq-item {
    display: block;
    text-align: left;
    background: #fff;
    border-radius: 6px;
    padding: 20px 22px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    position: relative;
    box-shadow: 0 8px 20px rgba(10, 20, 24, 0.06)
}

.faq-item+.faq-item {
    margin-top: 12px
}

.faq-item .q {
    font-weight: 700;
    color: var(--accent);
    font-size: 18px
}

.faq-item .chev {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #0b6b6f;
    font-size: 18px;
    transition: transform .24s ease
}

.faq-item .a {
    margin-top: 14px;
    color: #4b4b6b;
    display: none;
    font-size: 15px;
    line-height: 1.8
}

.faq-item[aria-expanded="true"] {
    background: #fff
}

.faq-item[aria-expanded="true"] .a {
    display: block
}

.faq-item[aria-expanded="true"] .chev {
    transform: translateY(-50%) rotate(180deg)
}

.faq-cta {
    margin-top: 22px;
    text-align: center
}

.faq-cta .btn {
    padding: 12px 28px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff
}

@media (min-width:900px) {

    /* two-column layout on wide screens matches screenshot with large spacing */
    .faq-grid {
        grid-template-columns: repeat(1, 1fr);
        max-width: 980px;
        margin: 0 auto
    }

    .section-design-20 .faq-inner {
        padding: 0
    }
}

@media (max-width:980px) {
    .faq-grid {
        grid-template-columns: 1fr
    }

    .faq-head h2 {
        font-size: 28px
    }
}


/* food-accommodations */


.food {
    padding: 5%;
    padding-bottom: 0%;
}

.food_container {
    display: flex;
    max-width: 1175px;
    margin: auto;
    gap: 50px;

}

.food_c1 {
    width: 100%;
}

.food_c1 img {
    border-radius: 12px;
}

.food_c1 h2 {
    color: var(--accent);
    margin-bottom: 6px;
}

.food_c1 .tag {
    color: var(--sub);
    font-weight: 600;

}


.four {


    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 5%;

}

.four_container {
    max-width: 1175px;
    margin: auto;
    display: flex;

    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;


}

.four_c1 {
    flex: 1 1 calc(25% - 16px);
    min-width: 200px;

}

.four_c1 img {
    border-radius: 12px;
    margin-bottom: 10px;
    width: 100%;
    height: auto;
}

.four_c1 p {
    text-align: center;

}

.four_c1 i {
    color: orange;

}

.down {
    margin-top: 7%;
}

/* Responsive banner */
.banner {
    width: 100%;
    height: 340px;
    background-image: url('../img/300-hour-teacher-training-bali.webp');
    background-size: cover;
    background-position: center center;
    border-radius: 6px;
    margin: 0;
}

@media (max-width:900px) {
    .banner {
        height: 260px
    }

    .four_c1 {
        flex: 1 1 calc(50% - 16px)
    }
}

@media (max-width:600px) {
    .banner {
        height: 180px;
        border-radius: 0
    }

    .four_c1 {
        flex: 1 1 100%;
        min-width: 0
    }
}


.visit {
    padding: 5%;
}

.visit_container {
    max-width: 1175px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 5%;
}

.visit_c1 {
    width: 50%;
    text-align: center;
}

.visit_c2 {
    width: 50%;
}

.visit_c1 h2 {
    font-size: 38px;
    color: white
}

.visit_c1 h2 span {
    font-size: 32px;
    color: white
}

.visit_c2 img {
    width: 100%;
    /* border-radius: 80px; */
    margin: auto;
    padding: 8px;
    border: 2px solid white;
}

.visit_c2 p {
    text-align: center;
    color: white;
}


.accommodation {
    padding: 5%;
    padding-bottom: 0%;
}

.accommodation_container {
    display: flex;
    max-width: 1175px;
    margin: auto;
    gap: 50px;

}

.accommodation_c1 {
    width: 100%;
}

.accommodation_c1 img {
    border-radius: 12px;
}

.accommodation_c1 h2 {
    color: var(--accent);
    margin-bottom: 6px;
}

.accommodation_c1 .tag {
    color: var(--sub);
    font-weight: 600;

}


.review_video {
    padding: 5% 5%;
}

.review_video_container {
    display: flex;
    max-width: 1175px;
    margin: auto;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
}

.review_video_c1 {
    width: 100%;
    margin-bottom: 8px;
}

.review_video_c2 {
    flex: 1 1 calc(50% - 12px);
    min-width: 300px;
}

.review_video_c1 h3 {
    color: var(--sub);
    letter-spacing: 2px;
    font-size: 18px;
}

.review_video_c1 h2 {
    color: var(--accent);
    font-size: 28px;
    margin-bottom: 8px;
}

/* Aspect-ratio wrapper so iframes remain responsive and keep rounded corners */
.review_video_c2 .video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 18px;
    background: #000;
}

.review_video_c2 .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobile-specific responsive overrides */
:root {
    --site-header-height: 78px
}


@media (max-width:900px) {
    :root {
        --site-header-height: 64px
    }


    /* Stack main two-column areas */
    .food_container,
    .accommodation_container,
    .visit_container,
    .review_video_container,
    .four_container {
        flex-direction: column;
        gap: 12px;
        padding: 0 12px;
    }

    .visit_c1,
    .visit_c2 {
        width: 100%;
        text-align: center
    }

    .visit_c1 h2 {
        font-size: 22px
    }



    .four_c1 {
        flex: 1 1 calc(50% - 12px);
        min-width: 160px
    }

    .review_video_c2 {
        width: 100%
    }

    .review_video_c2 iframe {
        height: 200px;
        zoom: unset;
        -ms-zoom: unset;
        transform: none;
        -moz-transform: none
    }

    .food,
    .accommodation,
    .four,
    .review_video {
        padding: 4% 4% 0
    }
}

@media (max-width:600px) {
    :root {
        --site-header-height: 56px
    }


    .food,
    .accommodation,
    .four,
    .visit,
    .review_video {
        padding: 4% 3%
    }

    .four_container {
        gap: 12px
    }

    .four_c1 {
        flex: 1 1 100%;
        min-width: 0
    }

    .visit_c1 h2 {
        font-size: 20px;
        line-height: 1.05
    }

    /* .review_video_c2 iframe {
                height: 150px
            } */

    /* Teachers grid (if present) should become single column */
    .teachers-grid {
        grid-template-columns: 1fr 1fr !important
    }

    /* make teacher cards full width in any carousel mode */
    .teachers-grid.carousel-mode .teacher {
        flex: 0 0 90%;
        min-width: 0
    }
}

/* Payment section styles (cards + QR modal) */
.payment-section {
    background: #e9eef0;
    padding: 56px 0
}

.payment-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center
}

.payment-title {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    font-size: 30px;
    margin: 6px 0
}

.payment-sub {
    color: #0b6b6f;
    font-weight: 700;
    margin-bottom: 28px
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: start;
    justify-items: center
}

.pay-card {
    background: #fff;
    border-radius: 12px;
    padding: 26px 18px;
    position: relative;
    box-shadow: 0 18px 36px rgba(10, 20, 24, 0.06);
    border: 6px solid #fff;
    max-width: 460px;
    width: 100%
}

.pay-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -18px;
    background: var(--accent);
    color: #fff;
    padding: 8px 22px;
    border-radius: 24px;
    font-weight: 700
}

.pay-card--india .pay-pill {
    right: auto;
    left: 50%;
    transform: translateX(-50%)
}

.pay-body {
    padding-top: 12px
}

.pay-tag {
    color: var(--sub);
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 8px
}

.pay-amount {
    font-size: 20px;
    color: var(--accent);
    font-weight: 800;
    margin: 12px 0
}

.pay-note {
    color: #0b6b6f;
    font-weight: 700;
    margin-bottom: 8px
}

.pay-small {
    color: #3f6b6c;
    font-size: 14px;
    margin-bottom: 20px
}

.pay-btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 8px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 8px;
    border: none
}

/* QR modal */
.qr-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000
}

.qr-modal-inner {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 420px;
    width: 92%;
    text-align: center;
    position: relative
}

.qr-close {
    position: absolute;
    right: 12px;
    top: 8px;
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer
}

.qr-image {
    width: 260px;
    height: 260px;
    object-fit: contain;
    margin: 8px auto;
    display: block
}

.qr-caption {
    color: #444;
    margin-top: 8px
}

@media (max-width:980px) {
    .payment-grid {
        grid-template-columns: 1fr;
        padding: 0 12px
    }

    .pay-card {
        max-width: 720px
    }

    .pay-pill {
        left: 50%;
        transform: translateX(-50%);
        top: -18px
    }

    .pay-card--india .pay-pill {
        right: auto;
        left: 50%;
        transform: translateX(-50%)
    }
}

/* Yoga Teacher Training Styles */

.ytt-sections {
    padding: 0px;
}

.ytt-container {
    max-width: 1100px;
    margin: auto;
    text-align: center;
}

.ytt-title {

    color: var(--accent);
    font-weight: 500;
    margin-bottom: 20px;
}

/* Divider */

.ytt-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 25px 0 40px;
}

.ytt-divider .line {
    width: 90px;
    height: 2px;
    background: var(--accent);
    position: relative;
}

.ytt-divider .line::before,
.ytt-divider .line::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid var(--sub);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.ytt-divider .line::before {
    left: -12px;
}

.ytt-divider .line::after {
    right: -12px;
}

.ytt-divider .icon {
    font-size: 22px;
    color: var(--accent);
}

/* Content */

.ytt-content {
    max-width: 1136px;
    margin: auto;
    padding: 0 24px;
}


@media (max-width: 768px) {

    .ytt-title {
        font-size: 18px;
        padding: 0 27px;
    }



    .ytt-divider span {
        width: 50px;
    }

}

/* ==========================================================================
   Enquiry Popup Modal (Teal Theme Matching)
   ========================================================================== */

/* The Modal Container */
.enquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.enquiry-modal.open {
    opacity: 1;
    visibility: visible;
}

/* Overlay background with slight blur */
.enquiry-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 24, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

/* Modal Content Card */
.enquiry-modal-content {
    position: relative;
    z-index: 2;
    background: #fcfdfd;
    /* Premium off-white */
    border: 1px solid #cbe6eb;
    /* Soft teal border */
    width: 90%;
    max-width: 580px;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(10, 80, 90, 0.12);
    padding: 30px;
    overflow-y: auto;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.enquiry-modal.open .enquiry-modal-content {
    transform: translateY(0) scale(1);
}

/* Close Button */
.enquiry-modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    background: #e9f7f9;
    color: #0aa7c5;
    border: none;
    font-size: 16px;
    font-weight: bold;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.enquiry-modal-close:hover {
    background: #0aa7c5;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Header Text styling */
.enquiry-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 4px;
    text-align: left;
}

.enquiry-modal-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #5b8e96;
    margin: 0 0 16px;
    text-align: left;
}

/* Badges section */
.enquiry-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e2f4f7;
    padding-bottom: 16px;
}

.enquiry-badge {
    background: #e9f7f9;
    color: #088da5;
    font-size: 10px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #d1ebf0;
}

/* Form Styles */
.enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.enquiry-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Fields Container with Icons */
.enquiry-field {
    position: relative;
    display: flex;
    align-items: center;
}

.enquiry-field>i:first-of-type {
    position: absolute;
    left: 16px;
    color: #0aa7c5;
    font-size: 14px;
    pointer-events: none;
    z-index: 5;
}

.enquiry-field input[type="text"],
.enquiry-field input[type="email"],
.enquiry-field input[type="tel"],
.enquiry-field select,
.enquiry-field textarea {
    width: 100%;
    padding: 13px 16px 13px 44px;
    border: 1px solid #cbe6eb;
    background: #ffffff;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #222222;
    outline: none;
    transition: all 0.3s ease;
}

/* Focus state matching theme */
.enquiry-field input:focus,
.enquiry-field select:focus,
.enquiry-field textarea:focus {
    border-color: #0aa7c5;
    box-shadow: 0 0 0 3px rgba(10, 167, 197, 0.15);
}

/* Select Dropdown specific tweaks */
.enquiry-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Custom caret icon on the right side of select elements */
.select-caret {
    position: absolute;
    right: 16px;
    color: #0aa7c5;
    font-size: 11px;
    pointer-events: none;
}

/* Textarea tweaks */
.textarea-field {
    align-items: flex-start;
}

.textarea-field>i {
    top: 16px;
}

.textarea-field textarea {
    resize: none;
    padding-top: 14px;
}

/* Phone Field with Flag and Select */
.phone-field input[type="tel"] {
    padding-left: 125px;
    /* Spacing for flag/country dropdown */
}

.country-code-select {
    position: absolute;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f2fafc;
    border-right: 1px solid #cbe6eb;
    padding: 6px 8px;
    border-radius: 6px 0 0 6px;
    height: calc(100% - 2px);
    z-index: 10;
}

.flag-icon {
    font-size: 16px;
    line-height: 1;
}

.country-code-select select {
    background: transparent;
    border: none;
    padding: 0 16px 0 2px;
    font-weight: 600;
    font-size: 13px;
    color: #075a5f;
    outline: none;
    width: auto;
    height: auto;
    cursor: pointer;
}

.country-caret {
    position: absolute;
    right: 6px;
    color: #0aa7c5;
    font-size: 9px;
    pointer-events: none;
}

/* Checkbox alignment */
.enquiry-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
}

.enquiry-checkbox-wrapper input[type="checkbox"] {
    accent-color: #0aa7c5;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.enquiry-checkbox-wrapper label {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #333333;
    cursor: pointer;
    font-weight: 500;
}

/* Submit Button */
.enquiry-submit-btn {
    background: #0aa7c5;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(10, 167, 197, 0.2);
    margin-top: 10px;
}

.enquiry-submit-btn:hover {
    background: #088da5;
    box-shadow: 0 6px 20px rgba(10, 167, 197, 0.3);
    transform: translateY(-2px);
}

.enquiry-submit-btn:active {
    transform: translateY(0);
}

/* Modal Scrollbar tweaks */
.enquiry-modal-content::-webkit-scrollbar {
    width: 6px;
}

.enquiry-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.enquiry-modal-content::-webkit-scrollbar-thumb {
    background: #cbe6eb;
    border-radius: 10px;
}

.enquiry-modal-content::-webkit-scrollbar-thumb:hover {
    background: #0aa7c5;
}

/* Mobile Responsiveness for Modal */
@media (max-width: 600px) {
    .enquiry-modal-content {
        padding: 24px 20px;
        max-height: 95vh;
        border-radius: 10px;
    }

    .enquiry-modal-title {
        font-size: 20px;
    }

    .enquiry-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .enquiry-badges {
        gap: 6px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .enquiry-badge {
        font-size: 9px;
        padding: 4px 8px;
    }
}

/* Success Popup Modal */
.enquiry-success-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease forwards;
}

.enquiry-success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 24, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.enquiry-success-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 14px;
    padding: 35px 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(10, 80, 90, 0.15);
    border: 1px solid #cbe6eb;
    transform: scale(0.9);
    animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.enquiry-success-icon {
    font-size: 54px;
    color: #25d366;
    /* Green success circle */
    margin-bottom: 15px;
}

.enquiry-success-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #075a5f;
    margin: 0 0 10px;
}

.enquiry-success-card p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 24px;
    text-align: center;
}

.enquiry-success-close-btn {
    background: #0aa7c5;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.enquiry-success-close-btn:hover {
    background: #088da5;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleUp {
    from {
        transform: scale(0.9);
    }

    to {
        transform: scale(1);
    }
}

/* Custom reCAPTCHA Widget */
.captcha-wrapper {
    display: flex;
    justify-content: flex-start;
    margin: 8px 0;
}

.captcha-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 302px;
    height: 76px;
    background: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    padding: 0 12px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

.captcha-checkbox-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.captcha-checkbox-container input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #c1c1c1;
    border-radius: 2px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: border-color 0.2s ease;
}

.captcha-checkbox-container input[type="checkbox"]:focus {
    border-color: #4a90e2;
}

/* Checkmark logic for reCAPTCHA look */
.captcha-checkbox-container input[type="checkbox"]:checked {
    border-color: #25d366;
    /* green border */
    background: #ffffff;
}

.captcha-checkbox-container input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    color: #25d366;
    /* green checkmark */
    font-size: 20px;
    font-weight: 900;
}

.captcha-label {
    font-family: 'Roboto', 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
    user-select: none;
}

.captcha-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.captcha-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.captcha-logo-text {
    font-family: 'Roboto', 'Montserrat', sans-serif;
    font-size: 8px;
    font-weight: 500;
    color: #555555;
    margin-top: 2px;
    letter-spacing: 0.2px;
}

.captcha-privacy-text {
    font-family: 'Roboto', 'Montserrat', sans-serif;
    font-size: 7px;
    color: #9b9b9b;
    margin-top: 1px;
}

/* ==========================================
   Premium Bali Video Section Styles
   ========================================== */
.bali-video-section {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    /* Changed from fixed to scroll to prevent scrolling lags/freezes */
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}

/* Fallback for touch devices where fixed background causes bugs */
@media (max-width: 900px) {
    .bali-video-section {
        background-attachment: scroll;
        padding: 80px 0;
    }
}

.bali-video-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.bali-video-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bali-video-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #e5c39c;
    /* Elegant gold color */
    margin-bottom: 5px;
    display: inline-block;
    animation: fadeInUp 0.8s ease;
}

.bali-video-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.bali-video-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Pulsing Play Button */
.bali-play-btn {
    position: relative;
    width: 86px;
    height: 86px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.play-icon-wrapper {
    position: relative;
    width: 76px;
    height: 76px;
    background: linear-gradient(135deg, #0aa7c5, #088da5);
    /* Primary brand/accent gradient */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(10, 167, 197, 0.45);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    z-index: 3;
}

.play-icon-wrapper i {
    color: #ffffff;
    font-size: 24px;
    margin-left: 5px;
    /* Offset to perfectly center triangle icon */
    transition: transform 0.3s ease;
}

.bali-play-btn:hover .play-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(10, 167, 197, 0.65);
}

.bali-play-btn:hover .play-icon-wrapper i {
    transform: scale(1.15);
}

.play-pulse {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid rgba(10, 167, 197, 0.5);
    z-index: 1;
    pointer-events: none;
    animation: playPulse 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pulse-2 {
    animation-delay: 0.6s;
}

@keyframes playPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

/* Video Modal Lightbox with Premium Glassmorphism */
.video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12000;
    /* Must sit on top of header-scrolled and enrollment modals */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.video-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.video-modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s ease;
}

.video-modal-container {
    position: relative;
    width: 90%;
    max-width: 960px;
    z-index: 10;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.video-modal-overlay.open .video-modal-container {
    transform: scale(1);
}

.video-modal-close {
    position: absolute;
    top: -35px;
    right: 0;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    outline: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.video-modal-close:hover {
    color: #e5c39c;
    /* Gold accent on hover */
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .video-modal-close {
        top: -45px;
        right: 10px;
        font-size: 36px;
    }
}

.video-iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #000000;
}

.video-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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