/* ============================================================================

   PRANAVA YOGA - PREMIUM WORLD-CLASS DESIGN

   Indian Spiritual Aesthetic + International Modern UI

   ============================================================================ */



/* ============================================================================

   ROOT VARIABLES - BRAND COLORS

   ============================================================================ */

:root {

    /* Brand Colors */

    --color-bhagwa: #FF9933;

    --color-sage: #4A6741;

    --color-ivory: #FFF8F0;

    --color-gold: #D4A017;

    --color-white: #FFFFFF;

    

    /* Gradients */

    --gradient-sunrise: linear-gradient(135deg, #FF9933 0%, #FFB84D 50%, #FFF8F0 100%);

    --gradient-gold: linear-gradient(135deg, #D4A017 0%, #F4D03F 100%);

    --gradient-sage: linear-gradient(135deg, #4A6741 0%, #6B8E5F 100%);

    

    /* Shadows */

    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.06);

    --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.08);

    --shadow-strong: 0 12px 48px rgba(0, 0, 0, 0.12);

    --shadow-glow: 0 0 40px rgba(255, 153, 51, 0.15);

    

    /* Typography */

    --font-heading: 'Cormorant Garamond', serif;

    --font-body: 'Manrope', sans-serif;

    

    /* Spacing */

    --section-padding: 40px 0;

    --container-padding: 0 32px;

    

    /* Transitions */

    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-spring: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

}



/* Dark Mode Variables */

body.dark-mode {

    --color-ivory: #1a1a1a;

    --color-white: #ffffff;

    --shadow-soft: 0 4px 24px rgba(255, 255, 255, 0.06);

}



/* ============================================================================

   GLOBAL RESET & BASE STYLES

   ============================================================================ */



html {

    scroll-behavior: smooth;

}



/* ============================================================================

   SKELETON LOADING STATES

   ============================================================================ */



.skeleton {

    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

    background-size: 200% 100%;

    animation: skeleton-loading 1.5s infinite;

    border-radius: 8px;

}



@keyframes skeleton-loading {

    0% {

        background-position: 200% 0;

    }

    100% {

        background-position: -200% 0;

    }

}



.skeleton-text {

    height: 16px;

    margin-bottom: 8px;

}



.skeleton-text-lg {

    height: 24px;

    margin-bottom: 12px;

}



.skeleton-image {

    height: 200px;

    width: 100%;

}



.skeleton-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

}



/* ============================================================================

   ACCESSIBILITY IMPROVEMENTS

   ============================================================================ */



/* Focus visible for keyboard navigation */

*:focus-visible {

    outline: 3px solid var(--color-bhagwa);

    outline-offset: 2px;

}



/* Skip to main content link for screen readers */

.skip-to-content {

    position: absolute;

    top: -40px;

    left: 0;

    background: var(--color-bhagwa);

    color: white;

    padding: 8px 16px;

    z-index: 100;

    transition: top 0.3s;

}



.skip-to-content:focus {

    top: 0;

}



/* Reduced motion for users who prefer it */

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}



/* High contrast mode support */

@media (prefers-contrast: high) {

    .glass-card {

        border: 2px solid #000;

    }

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: var(--font-body);

    background: var(--color-ivory);

    color: #2C3E50;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;

}



::selection {

    background: var(--color-bhagwa);

    color: white;

}



/* ============================================================================

   PREMIUM NAVIGATION

   ============================================================================ */

.navbar-premium {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(255, 248, 240, 0.95);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(255, 153, 51, 0.1);

    transition: var(--transition-smooth);

}



body.dark-mode .navbar-premium {

    background: rgba(26, 26, 26, 0.95);

    border-bottom: 1px solid rgba(255, 153, 51, 0.2);

}



.navbar-premium.scrolled {

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

}



.container-wide {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 48px;

}



.navbar-container-premium {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 80px;

    padding: 0 48px;

}



.logo-premium {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: var(--color-bhagwa);

    font-family: var(--font-heading);

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 2px;

    transition: var(--transition-smooth);

}



.logo-premium:hover {

    transform: scale(1.05);

}



.logo-premium svg {

    transition: var(--transition-smooth);

}



.logo-premium:hover svg {

    transform: rotate(360deg);

}



.nav-center {

    flex: 1;

    display: flex;

    justify-content: flex-end;

    padding-right: 32px;

}



.nav-menu-premium {

    display: flex;

    list-style: none;

    gap: 48px;

    align-items: center;

}



.nav-link {

    color: #050505;

    text-decoration: none;

    font-weight: 600;

    font-size: 15px;

    letter-spacing: 0.5px;

    position: relative;

    transition: var(--transition-smooth);

}



body.dark-mode .nav-link {

    color: #E8E8E8;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: -8px;

    left: 50%;

    transform: translateX(-50%) scaleX(0);

    width: 100%;

    height: 2px;

    background: var(--color-bhagwa);

    transition: var(--transition-smooth);

}



.nav-link:hover {

    color: var(--color-bhagwa);

}



.nav-link:hover::after {

    transform: translateX(-50%) scaleX(1);

}



.nav-right-premium {

    display: flex;

    align-items: center;

    gap: 24px;

}



.theme-toggle-premium {

    background: transparent;

    border: none;

    cursor: pointer;

    color: var(--color-bhagwa);

    font-size: 20px;

    transition: var(--transition-smooth);

    padding: 8px;

}



.theme-toggle-premium:hover {

    transform: rotate(20deg) scale(1.1);

}



.btn-trial {

    background: var(--color-bhagwa);

    color: white;

    padding: 12px 28px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;

    letter-spacing: 0.5px;

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

    transition: var(--transition-smooth);

    border: none;

    cursor: pointer;

}



.btn-trial:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 32px rgba(255, 153, 51, 0.3);

}



.mobile-menu-btn-premium {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: transparent;

    border: 2px solid var(--color-bhagwa);

    cursor: pointer;

    padding: 8px;

    z-index: 1001;

    border-radius: 4px;

    min-width: 40px;

    min-height: 30px;

}



.mobile-menu-btn-premium:hover {

    opacity: 0.8;

    background: rgba(255, 153, 51, 0.1);

}



.mobile-menu-btn-premium span {

    width: 24px;

    height: 2px;

    background: var(--color-bhagwa);

    transition: var(--transition-smooth);

}



.mobile-menu-btn-premium.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



.mobile-menu-btn-premium.active span:nth-child(2) {

    opacity: 0;

}



.mobile-menu-btn-premium.active span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}



/* ============================================================================

   HERO SECTION - FULL SCREEN

   ============================================================================ */

.hero-premium {

    position: relative;

    min-height: 80vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    margin-top: 80px;

    background: linear-gradient(135deg, #FFF8F0 0%, #FFE4CC 100%);

}



.hero-background-premium {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.hero-mountains {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 70%;

    background: linear-gradient(to bottom, 

        transparent 0%, 

        rgba(74, 103, 65, 0.1) 30%,

        rgba(74, 103, 65, 0.2) 60%,

        rgba(74, 103, 65, 0.3) 100%

    );

}



.hero-sunrise {

    position: absolute;

    top: 20%;

    left: 50%;

    transform: translateX(-50%);

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: radial-gradient(circle, 

        rgba(255, 153, 51, 0.4) 0%,

        rgba(255, 184, 77, 0.2) 40%,

        transparent 70%

    );

    animation: sunrise-glow 4s ease-in-out infinite;

}



@keyframes sunrise-glow {

    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }

    50% { opacity: 0.9; transform: translateX(-50%) scale(1.1); }

}



.hero-content-premium {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

    max-width: 1200px;

    padding: 0 48px;

    animation: fadeInUp 1s ease-out;

}



.hero-text-premium {

    text-align: left;

}



.hero-image-premium {

    height: 500px;

    animation: fadeInUp 1s ease-out 0.3s both;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.hero-subtitle-premium {

    font-family: var(--font-body);

    font-size: 40px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--color-bhagwa);

    font-weight: 600;

    margin-bottom: 24px;

    animation: fadeInUp 1s ease-out 0.2s both;

}



.hero-title-premium {

    font-family: var(--font-heading);

    font-size: 56px;

    font-weight: 700;

    line-height: 1.2;

    color: #050505;

    margin-bottom: 32px;

    animation: fadeInUp 1s ease-out 0.4s both;

}



.hero-description-premium {

    font-size: 20px;

    line-height: 1.8;

}

.about-story-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 0.95fr);
    grid-template-areas: "text image";
    gap: 80px;
    align-items: center;
}

.about-story-text {
    grid-area: text;
}

.about-story-image {
    grid-area: image;
}

.about-story-image img {
    width: 100%;
    height: 680px;
    display: block;
    max-height: 760px;
}

.about-story-text {
    grid-area: text;
    display: grid;
    gap: 18px;
}

@media (max-width: 768px) {
    .about-story-image img {
        max-height: 320px;
        height: auto;
    }

    .about-story-grid {
        gap: 28px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "image";
        align-items: stretch;
    }

    .about-story-grid + p {
        margin-top: 20px;
    }

    .about-story-text p,
    .about-story-text h2,
    .about-story-text .section-label {
        margin-bottom: 0;
    }

    .about-story-text p {
        margin-top: 0;
    }
}

.hero-cta-premium {

    display: inline-grid;

    gap: 30px;

    row-gap: 20px;

    flex-wrap: wrap;

    align-items: center;

    animation: fadeInUp 1s ease-out 0.8s both;

    margin-top: 15px;

}
.hero-cta-premium > * {

    margin: 0;

}

.hero-cta-premium > * + * {

    margin-left: 0;

    margin-top: 0;

}

.btn-secondary-alt {

    background: var(--color-bhagwa);

    color: white;

    border-color: var(--color-bhagwa);

}

.btn-secondary-alt:hover {

    background: #e68a1c;

}

.btn-primary-premium,

.btn-secondary-premium {

    padding: 18px 42px;

}



.btn-primary-premium {

    background: var(--color-bhagwa);

    color: white;

    padding: 18px 48px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    font-size: 16px;

    letter-spacing: 0.5px;

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

    transition: var(--transition-smooth);

    border: none;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 12px;

}

.hero-cta-premium .btn-primary-premium,

.hero-cta-premium .btn-secondary-premium {

    padding: 14px 30px;

    font-size: 15px;

}



.btn-primary-premium:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 40px rgba(255, 153, 51, 0.4);

}



.btn-secondary-premium {

    background: transparent;

    color: var(--color-bhagwa);

    padding: 18px 48px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    font-size: 16px;

    letter-spacing: 0.5px;

    border: 2px solid var(--color-bhagwa);

    transition: var(--transition-smooth);

    display: inline-flex;

    align-items: center;

    gap: 12px;

}



.btn-secondary-premium:hover {

    background: var(--color-bhagwa);

    color: white;

    transform: translateY(-3px);

}



.hero-scroll-indicator {

    display: none !important;

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

    animation: none;

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }

    40% { transform: translateX(-50%) translateY(-10px); }

    60% { transform: translateX(-50%) translateY(-5px); }

}



.scroll-icon {

    color: var(--color-bhagwa);

    font-size: 32px;

    opacity: 0.6;

}



/* ============================================================================

   GLASSMORPHISM CARDS

   ============================================================================ */

.glass-card {

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

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.3);

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

    transition: var(--transition-smooth);

    padding: 32px;

}



body.dark-mode .glass-card {

    background: rgba(40, 40, 40, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.glass-card:hover {

    transform: translateY(-6px);

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

}



/* ============================================================================

   SECTION STYLES

   ============================================================================ */

.section-premium {

    padding: var(--section-padding);

    position: relative;

}



.container-premium {

    max-width: 1200px;

    margin: 0 auto;

    padding: var(--container-padding);

}



.section-header-premium {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 30px;

}



.section-label {

    font-size: 14px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--color-bhagwa);

    font-weight: 600;

    margin-bottom: 6px;

}



.section-title-premium {

    font-family: var(--font-heading);

    font-size: 56px;

    font-weight: 400;

    line-height: 1.2;

    color: #2C3E50;

    margin-bottom: 14px;

}



body.dark-mode .section-title-premium {

    color: #E8E8E8;

}



.section-description-premium {

    font-size: 18px;

    line-height: 1.8;

    color: #5A6C7D;

}



/* ============================================================================

   RESPONSIVE DESIGN

   ============================================================================ */

@media (max-width: 1024px) {

    .container-wide {

        padding: 0 32px;

    }

    

    .nav-menu-premium {

        gap: 32px;

    }

    

    .hero-title-premium {

        font-size: 56px;

    }

    

    .hero-content-premium {

        gap: 24px;

    }

    

    .hero-content-premium {

        gap: 32px;

    }

    

    .hero-content-premium {

        gap: 32px;

    }

    .hero-premium {

        margin-top: 72px;

    }

    .navbar-container-premium {

        height: 72px;

    }

    .logo-premium img {

        height: 72px !important;

    }

}



@media (max-width: 768px) {

    .navbar-container-premium {

        padding: 0 24px;

        height: 64px;

    }



    .nav-center {

        display: none;

    }



    .mobile-menu-btn-premium {

        display: flex;

    }



    .hero-premium {

        margin-top: 64px;

        min-height: calc(100vh - 64px);

    }



    .hero-content-premium {

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 0 24px;

        text-align: center;

    }



    .hero-text-premium {

        text-align: center;

    }



    .hero-image-premium {

        height: 300px;

    }



    .hero-title-premium {

        font-size: 42px;

    }



    .hero-description-premium {

        font-size: 18px;

    }



    .hero-cta-premium {

        flex-direction: column;

        justify-content: center;

    }



    .btn-primary-premium,

    .btn-secondary-premium {

        width: 100%;

        justify-content: center;

    }



    .section-title-premium {

        font-size: 40px;

    }



    .container-premium {

        padding: 0 24px;

    }



    .section-premium {

        padding: 60px 0;

    }



    /* Footer responsive */
    footer > .container-premium > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }



    footer[style*="padding: 80px 0 40px"] {

        padding: 60px 0 40px !important;

    }



    footer .container-premium {

        padding: 0 20px !important;

    }



    /* Footer contact info fix */

    footer p {

        word-wrap: break-word !important;

        overflow-wrap: break-word !important;

        hyphens: auto !important;

        font-size: 14px !important;

    }



    footer a {

        word-wrap: break-word !important;

        overflow-wrap: break-word !important;

    }



    /* Force footer content left-aligned on mobile only */
    footer > .container-premium > div:first-child > div {
        text-align: left !important;
    }

    footer > .container-premium > div:first-child > div > div {
        text-align: left !important;
    }

    footer > .container-premium > div:first-child > div > ul {
        text-align: left !important;
    }

    footer > .container-premium > div:first-child > div > ul > li {
        text-align: left !important;
    }

    footer > .container-premium > div:first-child > div > h4 {
        text-align: left !important;
    }

    /* Remove centering margins from newsletter section on mobile */
    footer > .container-premium > div[style*="border-top: 1px solid"] > div {
        margin: 0 !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    footer > .container-premium > div[style*="border-top: 1px solid"] > div > form {
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* Remove bottom footer centering on mobile */
    footer > .container-premium > div[style*="padding-bottom: 40px; text-align: center;"] {
        text-align: left !important;
    }



    /* Keep Why Choose section centered on mobile */

    section[style*="background: #FFF8F0;"] > .container-premium > div > div {

        text-align: center !important;

    }



    section[style*="background: #FFF8F0;"] > .container-premium > div > div > div {

        text-align: center !important;

    }



    /* Responsive grid fixes for inline styles */

    [style*="grid-template-columns: repeat(3, 1fr)"] {

        grid-template-columns: 1fr !important;

    }



    [style*="grid-template-columns: 1fr 1fr"] {

        grid-template-columns: 1fr !important;

    }



    [style*="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] {

        grid-template-columns: 1fr !important;

    }



    [style*="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {

        grid-template-columns: 1fr !important;

    }



    @media (max-width: 768px) {
        .about-hero {
            padding-top: 120px !important;
            min-height: auto !important;
        }

        .about-story-grid {
            display: grid !important;
            grid-template-columns: 1fr !important;
            grid-template-areas: "text" "image" !important;
            gap: 40px !important;
            align-items: start !important;
        }

        .about-story-image img {
            width: 100% !important;
            height: auto !important;
            max-height: 420px !important;
        }
    }

    /* Day tabs responsive */

    .day-tab {

        padding: 10px 20px !important;

        font-size: 14px !important;

    }



    /* Timings grid responsive */

    [style*="grid-template-columns: 120px 1fr auto"] {

        grid-template-columns: 1fr !important;

        gap: 16px !important;

    }



    /* Form responsive */

    [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] {

        grid-template-columns: 1fr !important;

    }

}



@media (max-width: 480px) {

    .hero-title-premium {

        font-size: 32px;

    }



    .section-title-premium {

        font-size: 32px;

    }



    .section-description-premium {

        font-size: 16px;

    }



    .section-premium {

        padding: 40px 0;

    }



    .container-premium {

        padding: 0 16px;

    }



    .day-tab {

        padding: 8px 16px !important;

        font-size: 13px !important;

    }



    /* Footer responsive */

    footer[style*="grid-template-columns: 2fr 1fr 1fr 1.5fr"] > .container-premium > div:first-child {

        grid-template-columns: 1fr !important;

        gap: 32px !important;

    }



    footer[style*="padding: 80px 0 0"] {

        padding: 60px 0 0 !important;

    }



    footer form {

        flex-direction: column !important;

    }



    footer form input,

    footer form button {

        width: 100% !important;

    }

}



/* ============================================================================

   UTILITY CLASSES

   ============================================================================ */

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

.mb-8 { margin-bottom: 8px; }

.mb-16 { margin-bottom: 16px; }

.mb-24 { margin-bottom: 24px; }

.mb-32 { margin-bottom: 32px; }

.mb-48 { margin-bottom: 48px; }

.mb-64 { margin-bottom: 64px; }



/* ============================================================================

   RESPONSIVE - MOBILE & TABLET

   ============================================================================ */



@media (max-width: 1200px) {

    .container-wide {

        padding: 0 32px;

    }

    

    .navbar-container-premium {

        padding: 0 32px;

    }

}



@media (max-width: 1024px) {

    .hero-title-premium {

        font-size: 56px;

    }

    

    .section-title-premium {

        font-size: 48px;

    }

    

    .nav-menu-premium {

        gap: 32px;

    }

}



@media (max-width: 768px) {

    /* Navigation Mobile */

    .navbar-container-premium {

        padding: 0 24px;

    }



    .nav-center {

        display: none;

    }



    .mobile-menu-btn-premium {

        display: flex !important;

    }



    .btn-trial {

        display: none;

    }



    /* Mobile Menu - Right Sidebar */

    .mobile-menu-only {

        display: flex;

        position: fixed;

        top: 0;

        right: 0;

        transform: translateX(100%);

        width: min(320px, 85vw);

        height: 100vh;

        flex-direction: column;

        gap: 0;

        background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

        padding: 90px 28px 28px;

        box-shadow: -14px 0 48px rgba(0, 0, 0, 0.18);

        z-index: 9999;

        overflow-y: auto;

        list-style: none;

        margin: 0;

        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;

        opacity: 0;

        pointer-events: none;

    }



    .mobile-menu-only.active {

        transform: translateX(0);

        opacity: 1;

        pointer-events: auto;

    }



    .mobile-menu-only::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        height: 5px;

        background: linear-gradient(90deg, var(--color-bhagwa), var(--color-sage));

    }



    .mobile-menu-close {

        position: absolute;

        top: 22px;

        right: 22px;

        background: transparent;

        border: none;

        color: #2C3E50;

        font-size: 32px;

        line-height: 1;

        cursor: pointer;

        transition: transform 0.2s ease, color 0.2s ease;

    }



    .mobile-menu-close:hover {

        color: var(--color-bhagwa);

        transform: scale(1.05);

    }



    .mobile-menu-only .nav-menu-premium {

        display: flex;

        flex-direction: column;

        gap: 16px;

        width: 100%;

    }



    .mobile-menu-only li {

        width: 100%;

    }



    .mobile-menu-only a {

        padding: 18px 20px;

        border-radius: 14px;

        color: #2C3E50;

        font-size: 16px;

        font-weight: 600;

        text-decoration: none;

        display: block;

        transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;

        border: 1px solid transparent;

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

    }



    .mobile-menu-only a:hover {

        color: var(--color-bhagwa);

        background: rgba(255, 153, 51, 0.12);

        border-color: rgba(255, 153, 51, 0.2);

        transform: translateX(-4px);

    }



    .mobile-menu-only li:first-child a {

        margin-top: 0;

    }



    .mobile-menu-overlay {

        opacity: 0;

        pointer-events: none;

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: rgba(0, 0, 0, 0.48);

        backdrop-filter: blur(3px);

        z-index: 9998;

        transition: opacity 0.3s ease;

    }



    .mobile-menu-overlay.active {

        opacity: 1;

        pointer-events: auto;

    }



    body.mobile-menu-open {

        overflow: hidden;

    }



    .navbar-premium {

        position: relative;

    }

    

    /* Hero Mobile */

    .hero-content-premium {

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 0 24px;

        text-align: center;

    }



    .hero-text-premium {

        text-align: center;

    }



    .hero-image-premium {

        height: 300px;

    }



    .hero-title-premium {

        font-size: 42px !important;

    }



    .hero-description-premium {

        font-size: 18px;

    }



    .hero-cta-premium {

        flex-direction: column;

        justify-content: center;

    }



    .btn-primary-premium,

    .btn-secondary-premium {

        width: 100%;

        justify-content: center;

    }

    

    /* Section Mobile */

    .section-title-premium {

        font-size: 36px !important;

    }

    

    .section-description-premium {

        font-size: 16px;

    }

    

    /* Contact Page Mobile */

    div[style*="grid-template-columns: 1fr 1fr"] {

        grid-template-columns: 1fr !important;

    }

    

    /* Footer Mobile */

    footer div[style*="grid-template-columns: 2fr 1fr 1fr 1.5fr"] {

        grid-template-columns: 1fr !important;

    }

}



@media (max-width: 480px) {

    .hero-title-premium {

        font-size: 32px !important;

    }

    

    .section-title-premium {

        font-size: 28px !important;

    }

    

    .container-premium {

        padding: 0 20px;

    }

}



/* ============================================================================

   MOBILE SIDEBAR

   ============================================================================ */

.mobile-sidebar-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

    z-index: 1998;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.mobile-sidebar-overlay.active {

    opacity: 1;

    visibility: visible;

}



.mobile-sidebar {

    position: fixed;

    top: 0;

    right: -320px;

    width: 320px;

    height: 100%;

    background: linear-gradient(135deg, #FFF8F0 0%, #FFFFFF 100%);

    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.1);

    z-index: 1999;

    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    overflow-y: auto;

}



body.dark-mode .mobile-sidebar {

    background: linear-gradient(135deg, #1a1a1a 0%, #2C3E50 100%);

}



.mobile-sidebar.active {

    right: 0;

}



.sidebar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 24px;

    border-bottom: 1px solid rgba(255, 153, 51, 0.1);

}



.sidebar-close {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: none;

    background: rgba(255, 153, 51, 0.1);

    color: var(--color-bhagwa);

    font-size: 18px;

    cursor: pointer;

    transition: var(--transition-smooth);

    display: flex;

    align-items: center;

    justify-content: center;

}



.sidebar-close:hover {

    background: var(--color-bhagwa);

    color: white;

    transform: rotate(90deg);

}



.sidebar-menu {

    list-style: none;

    padding: 24px 0;

    margin: 0;

    flex: 1;

}



.sidebar-menu li {

    padding: 0;

}



.sidebar-menu a {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 18px 24px;

    color: #2C3E50;

    text-decoration: none;

    font-weight: 500;

    font-size: 16px;

    transition: var(--transition-smooth);

    border-left: 3px solid transparent;

}



body.dark-mode .sidebar-menu a {

    color: #E8E8E8;

}



.sidebar-menu a:hover {

    background: rgba(255, 153, 51, 0.08);

    border-left-color: var(--color-bhagwa);

    color: var(--color-bhagwa);

}



.sidebar-menu a i {

    width: 24px;

    font-size: 18px;

    color: var(--color-bhagwa);

}



.sidebar-footer {

    padding: 24px;

    border-top: 1px solid rgba(255, 153, 51, 0.1);

}



.mobile-menu-only {

    display: none;

}



/* Mobile Menu Panel */

.mobile-menu-panel {

    position: fixed;

    top: 0;

    right: -320px;

    width: 320px;

    height: 100vh;

    background: linear-gradient(135deg, #FFF8F0 0%, #FFFFFF 100%);

    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);

    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 2000;

    overflow-y: auto;

    padding: 24px;

}



body.dark-mode .mobile-menu-panel {

    background: linear-gradient(135deg, #1a1a1a 0%, #2C3E50 100%);

}



.mobile-menu-panel.active {

    right: 0;

}



.mobile-menu-panel .nav-menu-premium {

    flex-direction: column;

    gap: 0;

    width: 100%;

    text-align: left !important;

    list-style: none;

    padding: 0 !important;

    margin: 0 !important;

}



.mobile-menu-panel .nav-menu-premium li {

    text-align: left;

}



.mobile-menu-panel .nav-link {

    display: flex !important;

    align-items: center;

    gap: 16px;

    padding: 18px 20px;

    border-radius: 12px;

    font-size: 16px;

    transition: all 0.3s ease;

    text-align: left;

    justify-content: flex-start;

    text-decoration: none;

    color: #2C3E50;

    width: 100%;

}



.mobile-menu-panel .nav-link i {

    width: 20px;

    color: var(--color-bhagwa);

}



.mobile-menu-panel .nav-link:hover {

    background: rgba(255, 153, 51, 0.1);

    transform: translateX(5px);

}



.mobile-menu-close {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: none;

    background: rgba(255, 153, 51, 0.1);

    color: var(--color-bhagwa);

    font-size: 28px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}



.mobile-menu-close:hover {

    background: var(--color-bhagwa);

    color: white;

    transform: rotate(90deg);

}



/* Mobile Menu Overlay */

.mobile-menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

    z-index: 1999;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* Mobile Menu Button Animation */

.mobile-menu-btn-premium.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



.mobile-menu-btn-premium.active span:nth-child(2) {

    opacity: 0;

}



.mobile-menu-btn-premium.active span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}



/* Body Scroll Lock */

body.mobile-menu-open {

    overflow: hidden;

}



@media (min-width: 769px) {

    .mobile-menu-panel,

    .mobile-menu-overlay {

        display: none !important;

    }

}



@media (min-width: 769px) {

    .mobile-sidebar,

    .mobile-sidebar-overlay {

        display: none;

    }

}

@media (max-width: 768px) {
    .hero-cta-premium {
        display: flex !important;
        flex-direction: column !important;
        row-gap: 28px !important;
        gap: 28px !important;
        margin-top: 28px !important;
        align-items: stretch !important;
    }
    .hero-cta-premium > * + * {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
    }
}

/* Extra mobile tweaks for small phones */
@media (max-width: 480px) {
    .navbar-container-premium {
        height: 56px !important;
        padding: 0 16px !important;
    }

    .navbar-premium {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 56px !important;
        background: rgba(255,248,240,0.98) !important;
    }

    .logo-image {
        height: 44px !important;
        object-fit: contain !important;
    }

    .btn-trial {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .nav-right-premium {
        gap: 12px !important;
    }

    .mobile-menu-btn-premium {
        min-width: 36px !important;
        min-height: 28px !important;
        padding: 6px !important;
    }

    /* Ensure hero sits below the fixed navbar on very small screens */
    .hero-premium {
        margin-top: 56px !important;
        min-height: calc(100vh - 56px) !important;
    }
}