:root {
    --primary-dark: #0a0a12;
    --secondary-dark: #161626;
    --electric-blue: #00a8ff;
    --neon-purple: #9c27b0;
    --cyber-teal: #00ffff;
    --luxury-gold: #FFD700;
    --luxury-peach: #FF9E80;
    --vedic-saffron: #FF9933;
    --vedic-red: #CC3333;
    --sacred-orange: #FF6600;
    --text-light: #ffffff;
    --text-muted: #b3b3b3;
    --sanskrit-gold: #DAA520;
    /* Footer root */
    --footer-primary: #0a0a12;
    --footer-gold: #FFD700;
    --footer-teal: #00ffff;
    --footer-saffron: #FF9933;
    --footer-peach: #FF9E80;
    --footer-muted: #b3b3b3;
}

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

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

body {
    font-family: 'Inter', sans-serif;
    background: var(--primary-dark);
    color: var(--text-light);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

.sanskrit-text {
    font-family: 'Noto Sans Devanagari', sans-serif;
    color: var(--sanskrit-gold);
}

/* Enhanced Cosmic Background with Sacred Geometry */
.cosmic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 153, 51, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(0, 168, 255, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 50%, #1a1a2e 100%);
    z-index: -3; /* 🔥 FIX: Sent to very back */
    animation: cosmicShift 20s ease-in-out infinite alternate;
}

@keyframes cosmicShift {
    0% { background: 
        radial-gradient(circle at 20% 50%, rgba(255, 153, 51, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(0, 168, 255, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 50%, #1a1a2e 100%); }
    100% { background: 
        radial-gradient(circle at 80% 30%, rgba(255, 153, 51, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(156, 39, 176, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 60% 20%, rgba(0, 168, 255, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #0d0d1a 0%, #1a1a3a 50%, #2a2a4e 100%); }
}

.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* 🔥 FIX: Above cosmic-bg, behind everything else */
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite alternate;
}

.star.small { width: 1px; height: 1px; }
.star.medium { width: 2px; height: 2px; }
.star.large { width: 3px; height: 3px; }

@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 0.8; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, transparent, var(--cyber-teal), transparent);
    border-radius: 50%;
    animation: shoot 4s linear infinite;
    box-shadow: 0 0 6px var(--cyber-teal);
}

@keyframes shoot {
    0% { transform: translateX(-100px) translateY(100px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(400px) translateY(-400px); opacity: 0; }
}

/* Sacred Geometry Patterns */
.sri-yantra {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.05;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g stroke="%23FFD700" fill="none" stroke-width="0.5"><polygon points="100,20 160,80 140,140 60,140 40,80"/><polygon points="100,40 140,70 125,125 75,125 60,70"/><circle cx="100" cy="100" r="80"/><circle cx="100" cy="100" r="60"/><circle cx="100" cy="100" r="40"/><circle cx="100" cy="100" r="20"/></g></svg>');
    animation: rotateGeometry 60s linear infinite;
}

@keyframes rotateGeometry {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Enhanced Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(10, 10, 18, 0.9);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    z-index: 1000;
    transition: all 0.4s ease;
    animation: slideDown 0.8s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.header.scrolled {
    background: rgba(10, 10, 18, 0.95);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.1);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Merriweather', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--luxury-gold);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.logo-img { height: 45px; width: auto; display: inline-block; vertical-align: middle; }

.logo:hover { transform: scale(1.05); text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }

.nav-menu { display: flex; list-style: none; gap: 2rem; align-items: center; }

.nav-menu a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}

.nav-menu a:hover { color: var(--luxury-gold); transform: translateY(-2px); }

.nav-menu a::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    width: 0; height: 2px; background: linear-gradient(90deg, var(--luxury-gold), var(--cyber-teal));
    transition: all 0.4s ease; transform: translateX(-50%);
}

.nav-menu a:hover::after { width: 100%; }

.mobile-menu-toggle {
    display: none; flex-direction: column; cursor: pointer; gap: 4px; transition: all 0.3s ease;
}
.mobile-menu-toggle:hover { transform: scale(1.1); }
.mobile-menu-toggle span { width: 25px; height: 3px; background: var(--luxury-gold); border-radius: 2px; transition: all 0.3s ease; }
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

/* Enhanced Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 6rem 2rem 2rem;
    overflow: hidden;
    background: transparent; /* 🔥 FIX: Removed #0a0a12 so it doesn't mask background layers */
}

/* Video */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0; /* 🔥 FIX: Sits above negative z-indexes but below the overlay */
}

/* Overlay */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 18, 0.7);
    z-index: 1; /* 🔥 FIX: Sits exactly on top of video */
}

/* Content */
.hero-content {
    max-width: 900px;
    z-index: 2; /* 🔥 FIX: Highest layer in hero section */
    position: relative;
    animation: heroFadeIn 1.2s ease-out;
}

@keyframes heroFadeIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--luxury-gold), var(--cyber-teal), var(--neon-purple));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: textGlow 3s ease-in-out infinite alternate, typewriter 2s steps(20);
    position: relative;
}

@keyframes textGlow {
    0% { filter: brightness(1); text-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
    100% { filter: brightness(1.3); text-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.3); }
}

.hero p {
    font-size: clamp(1rem, 1.5vw, 1.2rem); margin-bottom: 2rem; color: var(--text-muted);
    line-height: 1.8; animation: fadeInUp 1s ease-out 0.7s both;
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeInUp 1s ease-out 0.9s both; }

/* Enhanced Buttons */
.btn {
    padding: 1rem 2rem; border: none; border-radius: 30px; font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer; font-size: 1rem; position: relative; overflow: hidden;
}
.btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease;
}
.btn:hover::before { left: 100%; }
.btn-primary { background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-peach)); color: var(--primary-dark); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); }
.btn-primary:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 35px rgba(255, 215, 0, 0.4); }
.btn-secondary { background: transparent; color: var(--text-light); border: 2px solid var(--electric-blue); box-shadow: 0 0 20px rgba(0, 168, 255, 0.2); }
.btn-secondary:hover { background: rgba(0, 168, 255, 0.1); transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 35px rgba(0, 168, 255, 0.3); border-color: var(--cyber-teal); }

/* Cosmic Connection / Wisdom / Portfolio Grids */
.cosmic-connection { padding: 6rem 2rem; max-width: 1200px; margin: 0 auto; position: relative; }
.wisdom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 3rem; }
.wisdom-card {
    background: linear-gradient(135deg, rgba(22, 22, 38, 0.8), rgba(26, 26, 46, 0.8));
    border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 20px; padding: 2.5rem;
    text-align: center; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
}
.wisdom-card:hover { transform: translateY(-15px) scale(1.02); border-color: var(--luxury-gold); box-shadow: 0 25px 50px rgba(255, 215, 0, 0.2), 0 0 50px rgba(0, 255, 255, 0.1); }
.wisdom-icon { font-size: 3.5rem; color: var(--vedic-saffron); margin-bottom: 1.5rem; transition: all 0.4s ease; display: inline-block; }
.wisdom-card:hover .wisdom-icon { transform: scale(1.2) rotateY(360deg); color: var(--cyber-teal); text-shadow: 0 0 20px currentColor; }
.wisdom-card h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-light); transition: color 0.3s ease; }
.wisdom-card:hover h3 { color: var(--luxury-gold); }
.wisdom-card p { color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6; transition: color 0.3s ease; }
.wisdom-card:hover p { color: var(--text-light); }

/* Enhanced Services Section */
.services { padding: 6rem 2rem; max-width: 1200px; margin: 0 auto; }
.section-title { text-align: center; font-size: clamp(2.5rem, 5vw, 3rem); margin-bottom: 1rem; color: var(--luxury-gold); position: relative; }
.section-title::after {
    content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px;
    height: 3px; background: linear-gradient(90deg, var(--luxury-gold), var(--cyber-teal)); border-radius: 2px;
}
.section-subtitle { text-align: center; font-size: clamp(0.9rem, 1.5vw, 1.1rem); color: var(--text-muted); margin-bottom: 4rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.service-card {
    background: linear-gradient(135deg, rgba(22, 22, 38, 0.8), rgba(26, 26, 46, 0.8));
    border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 20px; padding: 2rem; text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
}
.service-card:hover { transform: translateY(-15px) scale(1.02); border-color: var(--luxury-gold); box-shadow: 0 25px 50px rgba(255, 215, 0, 0.2), 0 0 50px rgba(0, 255, 255, 0.1); }
.service-icon { font-size: 3rem; color: var(--luxury-gold); margin-bottom: 1rem; transition: all 0.4s ease; display: inline-block; }
.service-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-light); }
.service-card:hover h3 { color: var(--luxury-gold); }
.service-card p { color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6; }
.price { font-size: 1.3rem; color: var(--luxury-gold); font-weight: 700; margin-bottom: 1.5rem; transition: all 0.3s ease; }

/* Founder Section / About Me */
.founder-profile {
    display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: center; max-width: 900px;
    margin: 0 auto; padding: 3rem; background: rgba(22, 22, 38, 0.7); border-radius: 20px; border: 1px solid rgba(255, 215, 0, 0.2);
}
.founder-image {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--luxury-gold);
    box-shadow: 0 0 30px rgba(233, 176, 76, 0.4);
}

/* FIXED IMAGE */
.founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 🔥 ensures proper cropping */
    object-position: center;/* 🔥 keeps face centered */
    display: block;
}

/* Your existing styling */
.human-image {
    filter: sepia(15%) contrast(110%) brightness(90%);
    transition: all 0.3s ease;
}

.human-image:hover {
    filter: sepia(5%) contrast(120%) brightness(95%);
    box-shadow: 0 0 30px rgba(233, 176, 76, 0.3);
}

/* Client Gallery / Portfolio */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 0 2rem; max-width: 1200px; margin: 0 auto; }
.gallery-item { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(233, 176, 76, 0.2); transition: transform 0.3s ease; height: 250px; }
.gallery-item:hover { transform: translateY(-5px); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(1.1); transition: all 0.3s ease; }
.gallery-item:hover img { filter: grayscale(0%) contrast(1.2); }
.caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: #f5f5f5; padding: 1.5rem; font-size: 1.1rem; }

/* Enhanced Contact Form */
.contact { padding: 6rem 2rem; max-width: 800px; margin: 0 auto; }
.form-container {
    background: linear-gradient(135deg, rgba(22, 22, 38, 0.8), rgba(26, 26, 46, 0.8)); border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 20px; padding: 3rem; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); position: relative; overflow: hidden;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; position: relative; z-index: 2; }
.form-group { display: flex; flex-direction: column; }
.form-group label { color: var(--luxury-gold); margin-bottom: 0.5rem; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
    padding: 1rem; border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 10px; background: rgba(10, 10, 18, 0.8);
    color: var(--text-light); font-size: 1rem; transition: all 0.4s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--luxury-gold); box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 0 20px rgba(255, 215, 0, 0.05);
}
.form-group.full-width { grid-column: 1 / -1; }

/* Enhanced Footer */
.footer { background: var(--secondary-dark); padding: 3rem 2rem 1rem; border-top: 1px solid rgba(255, 215, 0, 0.2); position: relative; }
.footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.footer-section h3 { color: var(--luxury-gold); margin-bottom: 1rem; position: relative; }
.footer-section p, .footer-section a { color: var(--text-muted); text-decoration: none; line-height: 1.8; }
.footer-section a:hover { color: var(--luxury-gold); transform: translateX(5px); }
.social-links { display: flex; gap: 1rem; margin-top: 1rem; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); transition: all 0.4s ease; }
.social-links a:hover { transform: translateY(-5px) scale(1.1); background: var(--luxury-gold); color: var(--primary-dark); }
.footer-bottom { text-align: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 215, 0, 0.1); color: var(--text-muted); }

/* Responsive Overrides from original */
body { overflow-x: hidden; }
@media (max-width: 768px) {
    .header, .hero, .cosmic-connection, .services, .contact, .footer { padding-left: 1rem; padding-right: 1rem; }
    .form-container, .footer-content, .gallery-grid, .cosmic-connection, .services, .contact, .founder-profile { max-width: 100%; box-sizing: border-box; }
    .gallery-grid { grid-template-columns: 1fr; padding: 0; }
    .sri-yantra { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .wisdom-grid, .services-grid { grid-template-columns: 1fr; }
    .hero-content { width: 100%; padding: 1rem; }
    .cta-buttons { flex-direction: column; }
    .btn { width: 100%; max-width: 100%; }
    .founder-profile { grid-template-columns: 1fr; text-align: center; }
    .founder-image { margin: 0 auto; }
}


/* ==========================================================================
   About Founder Section Styles
   (Paste this at the bottom of your global styles.css)
   ========================================================================== */

/* Wrapper replacing the old body tag to ensure scoping */
.about-section-wrapper {
    font-family: 'Inter', sans-serif;
    background-color: var(--primary-dark);
    color: var(--text-light);
    position: relative;
    width: 100%;
    overflow: hidden;
}

.about-cosmic-connection {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
}

@media (max-width: 968px) {
    .about-cosmic-connection {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
}

.about-founder-image-container {
    flex: 1;
    max-width: 500px;
    position: relative;
}

.about-founder-image {
    width: 100%;
    height: auto; /* let image decide height */
    object-fit: contain; /* show full image */
    border-radius: 20px; /* reduce from 50px for better look */
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    display: block;
}

.about-founder-content {
    flex: 1.2;
    text-align: left;
}

@media (max-width: 968px) {
    .about-founder-content {
        text-align: left;
    }
}

.about-experience-tag {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--luxury-peach);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.about-experience-tag::before {
    content: "";
    width: 3px;
    height: 24px;
    background-color: var(--sacred-orange);
    display: inline-block;
}

.about-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--text-light);
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.about-section-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.about-cta-button {
    display: inline-block;
    background-color: var(--sacred-orange);
    color: var(--text-light);
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, background-color 0.2s;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
}

.about-cta-button:hover {
    background-color: var(--vedic-saffron);
    transform: translateY(-2px);
}

.about-stats-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.about-stats-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-muted);
    font-size: 1rem;
}

.about-stats-item i {
    color: var(--sanskrit-gold);
    font-size: 1.1rem;
    width: 20px;
}

.about-social-sidebar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

@media (max-width: 1200px) {
    .about-social-sidebar { display: none; }
}

.about-social-icon {
    width: 40px;
    height: 40px;
    background: var(--secondary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-muted);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    transition: all 0.2s;
}

.about-social-icon:hover {
    background: var(--sacred-orange);
    color: var(--text-light);
}


/* ==========================================================================
   Recensiones (Reviews Section) Styles - Scoped
   Addideris hoc ad finem fasciculi styles.css tui
   ========================================================================== */

/* Variables (Fallback if not defined in your root) */
:root {
    --luxury-gold: #ffd700;
    --luxury-peach: #ffdab9;
    --secondary-dark: #1a1a2e;
    --text-muted: #a0a0a0;
    --sanskrit-gold: #d4af37;
}

.reviews-v2 {
    margin-top: 5rem;
    overflow: hidden;
    position: relative;
    padding-bottom: 5rem;
    background-color: transparent; /* Ensure background matches your theme */
}

.reviews-title-v2 {
    text-align: center;
    margin-bottom: 4rem;
}

.reviews-title-v2 p {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    color: var(--luxury-gold);
    text-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
}

.reviews-card-v2 {
    display: grid;
    /* FIX: Set to 30% for image and 70% for text */
    /* grid-template-columns: 30% 70%;  */
    width: 781px; 
    background: var(--secondary-dark);
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    flex-shrink: 0; /* Prevents cards from squishing in the flex row */
    padding: 2rem;
}

/* .card-img-v2 {
    width: 100%; 
    height: 100%;
    overflow: hidden;
}

.card-img-v2 img {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the 30% space perfectly */
*/

.card-text-v2 {
    background: linear-gradient(135deg, rgba(22, 22, 38, 0.9), rgba(26, 26, 46, 0.9));
    padding: 2rem 3rem; 
    height: 359px; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-title-v2 p {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--luxury-peach);
    margin-bottom: 1rem;
}

.card-para-v2 {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.card-para-v2 p {
    margin-bottom: 0.8rem;
}

.card-author-v2 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--sanskrit-gold);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1rem;
}

.reviews-row-v2 {
    display: flex;
    gap: 2rem;
    width: max-content; /* Important for the horizontal animation */
}

/* --- Animationes Continuae --- */
.row-first-v2, .row-third-v2 {
    animation: move-first-v2 25s linear infinite;
    margin-bottom: 2rem;
}

.row-second-v2 {
    animation: move-second-v2 25s linear infinite;
    margin-bottom: 2rem;
}

@keyframes move-first-v2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1000px); }
}

@keyframes move-second-v2 {
    0% { transform: translateX(-1000px); }
    100% { transform: translateX(0); }
}

/* --- Mobile Responsiveness --- */
@media (max-width: 425px) {
    .reviews-card-v2 {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        width: 85vw;
        margin: 0 auto;
    }

    .card-text-v2 {
        padding: 1.5rem 2rem;
        height: auto;
        width: 100%;
    }

    .card-title-v2 p {
        font-size: 1.2rem;
    }

    .card-para-v2 p {
        font-size: 0.85rem;
    }

    .card-author-v2 {
        font-size: 0.75rem;
    }
    
    .reviews-row-v2 {
        flex-direction: column;
        width: 100%;
        animation: none !important; /* Stop animations on mobile for usability */
        transform: none !important;
        align-items: center;
    }

    .row-second-v2, .row-third-v2 {
        display: none; /* Matches your original request to hide extra rows on mobile */
    }
}
/* Contact CSS */
/* Unique Scoped CSS */
.contact-main-wrapper {
    background-color:transparent; /* Deep black background */
    color: #ffffff;
    padding: 60px 20px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.contact-header-content {
    text-align: center;
    margin-bottom: 40px;
}

.contact-section-title {
    color: #d4af37; /* Metallic Gold */
    font-size: 2.2rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 700;
}

.contact-section-subtitle {
    color: #94a3b8;
    max-width: 550px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
}

@media (min-width: 992px) {
    .contact-layout-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

/* Form Styling */
.contact-form-card {
    background: #11121c;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #262736;
}

.contact-input-group {
    margin-bottom: 22px;
}

.contact-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    color: #d4af37;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.contact-field {
    width: 100%;
    background: #0a0b14;
    border: 1px solid #2d2e3d;
    border-radius: 10px;
    padding: 14px;
    color: #ffffff;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.contact-field:focus {
    outline: none;
    border-color: #d4af37;
    background: #0f101a;
}

.contact-textarea {
    resize: none;
}

/* Submit Button */
.contact-submit-btn {
    width: 100%;
    background: linear-gradient(90deg, #d4af37 0%, #b38f2d 100%);
    color: #000;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Sidebar Styling */
.contact-sidebar-info {
    text-align: center;
}

.contact-sidebar-title {
    color: #d4af37;
    font-size: 1rem;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.contact-qr-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 24px;
    display: inline-block;
    border: 3px solid #d4af37;
}

.contact-qr-img {
    width: 200px;
    height: 200px;
    display: block;
    border-radius: 10px;
}

.contact-username {
    color: #64748b;
    display: block;
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.contact-social-prompt {
    margin-top: 40px;
    color: #94a3b8;
    font-size: 0.85rem;
}

.contact-social-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.contact-social-link {
    width: 48px;
    height: 48px;
    border: 1.5px solid #d4af37;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.contact-social-link:hover {
    background: #d4af37;
    color: #000;
}

/* Specific highlight for WhatsApp Icon circle in green as per some branding */
.contact-wa-link {
    border-color: #25d366;
    color: #25d366;
}

.contact-wa-link:hover {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}
/* Footer */


.footer-sacred-wrap {
    background-color: var(--footer-primary);
    color: #ffffff;
    padding: 60px 20px 30px;
    font-family: 'Segoe UI', sans-serif;
}

.footer-main-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.footer-brand-title {
    color: var(--footer-gold);
    font-size: 1.5rem;
    margin-bottom: 12px;
    display: inline-block;
    border-bottom: 2px solid var(--footer-teal);
    padding-bottom: 4px;
}

.footer-brand-tagline {
    color: var(--footer-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-social-row {
    display: flex;
    gap: 12px;
}

.footer-social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--footer-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s ease;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.footer-social-link:hover {
    background: var(--footer-saffron);
    color: var(--footer-primary);
    transform: translateY(-3px);
}

.footer-section-heading {
    color: var(--footer-gold);
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
}

.footer-section-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 35px;
    height: 2px;
    background: var(--footer-teal);
}

.footer-nav-list, .footer-contact-details {
    list-style: none;
    padding: 0;
}

.footer-nav-item {
    color: var(--footer-muted);
    text-decoration: none;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 12px;
    transition: 0.2s ease;
}

.footer-nav-item:hover {
    color: var(--footer-peach);
    transform: translateX(5px);
}

.footer-contact-item {
    color: var(--footer-muted);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.footer-icon {
    color: var(--footer-teal);
    font-size: 1rem;
}

.footer-legal-bar {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.85rem;
    color: var(--footer-muted);
}

.footer-text-gold { color: var(--footer-gold); }
.footer-text-saffron { color: var(--footer-saffron); }

@media (max-width: 768px) {
    .footer-main-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .footer-main-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-section-heading::after { left: 50%; transform: translateX(-50%); }
    .footer-social-row { justify-content: center; }
    .footer-contact-item { justify-content: center; }
}
html {
    scroll-behavior: smooth;
}

/* Optional: Offset the scroll position so the header doesn't cover the title */
[id] {
    scroll-margin-top: 100px;
}

/* ==========================================================
   MODERN MOBILE NAVIGATION (GLASS + SMOOTH + OVERLAY)
   ========================================================== */

@media (max-width: 768px) {

    .mobile-menu-toggle {
        display: flex;
        z-index: 1100;
    }

    /* Overlay (adds depth + focus) */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(6px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 998;
    }

    .nav-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    /* Modern Drawer */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%); /* smoother than right:-100% */
        
        height: 100vh;
        width: min(80%, 320px);

        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.8rem;

        padding: 2.5rem 2rem;

        background: linear-gradient(
            135deg,
            rgba(10, 10, 18, 0.95),
            rgba(22, 22, 38, 0.92)
        );

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

        border-left: 1px solid rgba(255, 215, 0, 0.15);

        box-shadow: 
            -10px 0 40px rgba(0, 0, 0, 0.6),
            -2px 0 10px rgba(255, 215, 0, 0.1);

        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1099;
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-menu li {
        margin: 0;
        width: 100%;
    }

    .nav-menu a {
        font-size: 1.1rem;
        width: 100%;
        padding: 0.8rem 0;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Slight stagger animation feel */
    .nav-menu.active li {
        animation: navFade 0.5s ease forwards;
    }

    @keyframes navFade {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* Lock background scroll */
body.menu-open {
    overflow: hidden;
}
/* ==========================================================
   🔥 PRODUCTION FIX: MOBILE NAV + HEADER + HERO
   (APPEND ONLY – DO NOT REMOVE EXISTING CODE)
   ========================================================== */

@media (max-width: 768px) {

    /* ---------------------------
       HEADER FIX
    ---------------------------- */
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .logo {
        font-size: 1.2rem;
        white-space: nowrap;
    }

    .logo-img {
        height: 32px;
    }

    /* ---------------------------
       MOBILE TOGGLE
    ---------------------------- */
    .mobile-menu-toggle {
        display: flex;
        z-index: 1100;
    }

    /* ---------------------------
       NAV MENU (FIXED DRAWER)
       🔥 THIS IS THE REAL FIX
    ---------------------------- */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;

        width: 80%;
        max-width: 320px;
        height: 100vh;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1.5rem;

        padding: 2rem;

        background: linear-gradient(
            135deg,
            rgba(10, 10, 18, 0.98),
            rgba(22, 22, 38, 0.95)
        );

        backdrop-filter: blur(20px);

        /* 🔥 CRITICAL FIX */
        transform: translateX(100%);
        visibility: hidden;

        transition: all 0.35s ease;

        z-index: 1099;
    }

    .nav-menu.active {
        transform: translateX(0);
        visibility: visible;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu a {
        display: block;
        width: 100%;
        font-size: 1.1rem;
        padding: 0.8rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* ---------------------------
       HERO FIX (OVERLAP ISSUE)
    ---------------------------- */
    .hero {
        padding-top: 7rem;
    }

    .hero h1 {
        font-size: 2.2rem;
        line-height: 1.3;
    }

    .hero p {
        font-size: 0.95rem;
    }

    /* ---------------------------
       BUTTON FIX
    ---------------------------- */
    .cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 0.8rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------
   LOCK SCROLL WHEN MENU OPEN
---------------------------- */
body.menu-open {
    overflow: hidden;
}