/* --- FIX: Force Menu White on Homepage Header --- */
.site-header-transparent .clean-menu > li > a,
.site-header-transparent .user-smart-dropdown > li > a {
    color: #ffffff !important;
}

/* Ensure the Hover effect (Gold) still works */
.site-header-transparent .clean-menu > li > a:hover,
.site-header-transparent .user-smart-dropdown > li > a:hover {
    color: #FFD700 !important;
}
/* --- 1. HERO: CINEMATIC OPENING --- */
.hero-section {
    position: relative;
    /* GAP 2: Uses Dynamic Viewport Height for mobile browsers */
    height: 90dvh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url('../images/hero-bg.webp');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;
    width: 100%; /* GAP 5: Removed risky negative margins */
}

/* Vignette Overlay */
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(46,11,69,0.2) 0%, rgba(10,0,20,0.9) 100%);
    z-index: 1;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding: 20px;
    width: 100%; /* Ensure it doesn't overflow */
}

/* 1. Subtitle */
.hero-subtitle {
    color: #FFD700;
    /* GAP 1: Fluid Font Size (scales between 14px and 18px) */
    font-size: clamp(0.875rem, 4vw, 1.125rem); 
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
    opacity: 0;
    animation: letter-expand 1.5s ease-out forwards 0.5s;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 69, 0, 0.5);
}

/* 2. Main Title */
.hero-title {
    font-family: 'Cinzel', serif;
    /* GAP 1: Fluid Typography (Scales from 2.5rem mobile to 5rem desktop) */
    font-size: clamp(2.5rem, 8vw, 5rem); 
    line-height: 1.1;
    margin-bottom: 40px;
    color: #FFFFFF;
    opacity: 0;
    animation: cinematic-blur-in 1.5s ease-out forwards 0.2s;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 215, 0, 0.5), 0 0 50px rgba(255, 215, 0, 0.2);
}

.hero-title span {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 153, 51, 0.6), 0 0 40px rgba(255, 69, 0, 0.4);
    font-weight: 700;
    animation: star-glow-pulse 3s ease-in-out infinite alternate;
}

@keyframes star-glow-pulse {
    from { text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 153, 51, 0.6); }
    to { text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 153, 51, 0.8), 0 0 60px rgba(255, 69, 0, 0.6); }
}

.btn-pulse {
    position: relative;
    background: linear-gradient(90deg, #FF9933 0%, #FFD700 100%);
    color: #2E0B45 !important;
    padding: 20px 60px;
    border-radius: 50px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 10px 30px rgba(255, 153, 51, 0.4);
    opacity: 0;
    animation: cinematic-blur-in 1s ease-out forwards 1s, ripple-gold 2s infinite 2s;
    transition: transform 0.3s;
}
.btn-pulse:hover {
    transform: translateY(-5px) scale(1.05);
    background: #FFF5D1; color: #2E0B45 !important;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
}

/* --- 2. BRIDGE --- */
.bridge-section { background: linear-gradient(to bottom, #FFF8F0 0%, #FFFFFF 100%); padding: 120px 0; text-align: center; }
.bridge-text {
    /* Fluid Font Size */
    font-size: clamp(1.2rem, 3vw, 2rem);
    line-height: 1.6;
    color: #2E0B45; font-family: 'Cinzel', serif;
    max-width: 800px; margin: 0 auto;
}

/* --- 3. GUIDE --- */
.guide-section { padding: 100px 0; background-color: #FDFDFD; overflow: hidden; }

/* GAP 3: Tablet-Aware Grid (Stack at 900px, but handle resizing smoothly) */
.guide-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 80px; 
    align-items: center; 
}

.guide-image-box { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.2); }
.guide-image-box img { width: 100%; display: block; transition: transform 0.5s; }
.guide-image-box:hover img { transform: scale(1.05); }

.credential-list li {
    background: #FFF8F0; padding: 20px; margin-bottom: 15px; border-left: 5px solid #FF9933;
    font-weight: 700; color: #2E0B45; display: flex; align-items: center; gap: 15px; transition: 0.3s;
}
.credential-list li:hover { transform: translateX(10px); background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* --- 4. SERVICES (CONSTANT GLOW + FLOATING) --- */
.services-section { 
    padding: 100px 0; 
    background-color: #FFFFFF; 
    text-align: center; 
}

.feature-card-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 40px; 
    margin-top: 60px; 
}

/* --- CARD BASE STYLES --- */
.feature-card {
    background: white; 
    border-radius: 20px; 
    padding: 50px 30px; 
    text-decoration: none; 
    display: block; 
    position: relative;
    
    /* 1. RESTORED FLOATING ANIMATION */
    animation: float-complex 6s ease-in-out infinite; 
    
    /* 2. CONSTANT GLOW */
    border-bottom: 5px solid #FFD700; 
    box-shadow: 
        0 10px 30px rgba(46, 11, 69, 0.1), 
        0 0 20px rgba(255, 153, 51, 0.4); /* Saffron Glow */
        
    transition: all 0.4s ease; 
}

/* --- BASE ELEMENTS --- */
.feature-title { 
    color: #2E0B45; 
    font-family: 'Cinzel', serif; 
    font-size: 1.5rem; 
    margin-top: 0; 
    transition: all 0.3s ease; 
}

.feature-icon { 
    font-size: 50px; 
    margin-bottom: 20px; 
    transition: all 0.3s ease; 
}

.feature-desc { 
    color: #555; 
    margin-bottom: 20px; 
    transition: color 0.3s ease;
}

.feature-link-text { 
    color: #FF9933; 
    font-weight: bold; 
    letter-spacing: 1px; 
    transition: all 0.3s ease;
}

/* --- HOVER EFFECTS --- */
.feature-card:hover { 
    /* Pause float on hover so it doesn't fight the lift */
    animation-play-state: paused; 
    transform: translateY(-10px); 
    box-shadow: 
        0 20px 40px rgba(46, 11, 69, 0.2), 
        0 0 35px rgba(255, 153, 51, 0.7); /* Brighter Glow */
}

.feature-card:hover .feature-title { color: #D4AF37; } /* Gold Text */
.feature-card:hover .feature-icon { transform: scale(1.2) rotate(5deg); } /* Pop Icon */
.feature-card:hover .feature-link-text { color: #2E0B45; }

/* --- REQUIRED KEYFRAMES (Paste this at the bottom if missing) --- */
@keyframes float-complex {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* Moves up */
    100% { transform: translateY(0px); }
}

/* Added Classes to replace Inline Styles */
.feature-icon { font-size: 50px; margin-bottom: 20px; }
.feature-title { color: #2E0B45; font-family: 'Cinzel', serif; font-size: 1.5rem; margin-top: 0; }
.feature-desc { color: #555; margin-bottom: 20px; }
.feature-link-text { color: #FF9933; font-weight: bold; letter-spacing: 1px; }
.section-heading-lg { color: #2E0B45; font-family: 'Cinzel', serif; font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 40px; }

/* --- 5. SEAL --- */
.seal-section { background: radial-gradient(circle, #FFFFFF 0%, #FFF5E1 100%); padding: 60px 0; color: #2E0B45; font-weight: 700; border-top: 5px solid #FFD700; box-shadow: 0 0 30px rgba(255, 215, 0, 0.2); }
.seal-grid { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
.seal-item { display: flex; align-items: center; gap: 20px; }
.seal-icon { font-size: 35px; filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); }

/* --- 6. CLIMAX --- */
.climax-section { background: radial-gradient(circle at center, #3a0e57 0%, #2E0B45 80%); padding: 120px 0; text-align: center; color: white; }
.climax-heading { font-family: 'Cinzel', serif; color: #FFD700; font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: 15px; }

.climax-section .btn-pulse { background: #FFD700 !important; color: #2E0B45 !important; box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
.climax-section .btn-pulse:hover { background: #FFF5D1 !important; color: #2E0B45 !important; transform: translateY(-5px) scale(1.05); box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 900px) {
    .guide-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-section { background-attachment: scroll; } /* Fix for mobile parallax jitters */
    .btn-pulse { width: 100%; box-sizing: border-box; padding: 20px; } /* Full width buttons on mobile */
    .feature-card-grid { gap: 20px; } /* Tighter gap on tablet/mobile */
}

/* Header Tweaks */
.site-header-transparent { position: absolute; top: 0; left: 0; width: 100%; background-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.1); z-index: 1000; height: 90px; }
.site-header-transparent .clean-menu > li > a:hover { color: var(--gold) !important; }
.site-header-transparent .clean-dropdown { background-color: white; top: 90px; }
.site-header-transparent .mobile-menu-container { background-color: #2E0B45; top: 0; }
/* --- SPECIAL FIX: MAKE IMAGE ICON GLOW --- */
/* This forces the Vastu image to have a Golden Glow like the emojis */
.feature-card:hover .feature-icon img {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    transition: filter 0.3s ease;
}
/* Ensure SVG icons are centered and sized correctly */
.vedic-social-icons a svg {
    pointer-events: none; /* Helps with clicking */
    transition: transform 0.3s ease;
}

/* Hover Effect: Scale up slightly */
.vedic-social-icons a:hover svg {
    transform: scale(1.1);
}