/* ======================================================
   PHASE 1: BRANDING & GLOBAL FOUNDATION
   ====================================================== */
:root {
    --primary: #1a1a40;       /* Royal Deep Indigo */
    --secondary: #0d47a1;     /* Navy Blue */
    --gold: #ffc107;          /* Action Gold */
    --antique-gold: #d4af37;  /* Decorative Gold */
    --saffron: #f57c00;       /* Traditional Saffron */
    --white: #ffffff;
    --light-bg: #f8f9fa;
    --cream: #fffaf0;
    --glass: rgba(255, 255, 255, 0.15);
}

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

body { 
    font-family: 'Poppins', sans-serif; 
    background-color: var(--white); 
    color: #333; 
    overflow-x: hidden; 
    line-height: 1.6;
}

.hi-font { font-family: 'Tiro Devanagari Hindi', serif; }
h1, h2, h3, .brand-main-stylish { font-family: 'Playfair Display', serif; font-weight: 900; }

/* Navbar Institutional Design */
.navbar { 
    background: rgba(255, 255, 255, 0.98) !important; 
    backdrop-filter: blur(15px); 
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
    padding: 10px 0;
}
.main-logo { height: 70px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.brand-main {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    background: linear-gradient(to bottom, var(--primary), var(--secondary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.brand-sub {
    font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700;
    color: var(--saffron); letter-spacing: 4px; text-transform: uppercase;
}

/* ======================================================
   PHASE 2: VISUAL NARRATIVE (HERO & BANNERS)
   ====================================================== */
/* Hero Slider: Image Only */
.kg-hero-clean { width: 100%; overflow: hidden; background: #000; }
.kg-hero-img { width: 100%; height: auto; max-height: 85vh; object-fit: contain; }

/* Running Banner (851x315) Marquee */
.banner-marquee-track {
    display: flex; width: calc(871px * 10); 
    animation: scroll-left-to-right 40s linear infinite;
}
.banner-item { 
    width: 851px; height: 315px; margin-right: 20px; 
    border-radius: 15px; overflow: hidden; border: 4px solid var(--glass);
}
.banner-item img { width: 100%; height: 100%; object-fit: cover; }

@keyframes scroll-left-to-right { 0% { transform: translateX(calc(-871px * 5)); } 100% { transform: translateX(0); } }

/* ======================================================
   PHASE 3: MISSION, VISION & RESOLUTIONS
   ====================================================== */
/* Overlap Mission Style */
.kg-vm-main-img { border-radius: 40px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); width: 100%; height: 480px; object-fit: cover; }
.kg-vm-floating-card {
    position: absolute; bottom: 40px; left: -60px;
    background: #fff; padding: 30px; border-radius: 30px;
    min-width: 320px; z-index: 20; border: 1px solid rgba(0,0,0,0.05);
}

/* 13 Resolutions 4-Column Grid */
.kg-res-card {
    background: #fff; border-radius: 20px; padding: 30px 15px; border: 1px solid #f1f1f1;
    transition: 0.4s; text-align: center;
}
.kg-res-card:hover { transform: translateY(-10px); border-color: var(--gold); box-shadow: 0 15px 30px rgba(0,0,0,0.05) !important; }
.kg-res-icon-wrapper {
    width: 65px; height: 65px; border-radius: 20px; margin: 0 auto 15px;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}

/* ======================================================
   PHASE 4: SPECIALIZED SERVICES (PUJA & PROTECTOR)
   ====================================================== */
/* Puja Hub Tabs */
.puja-tab-list .nav-link { 
    border: 1px solid #ddd; margin: 5px; border-radius: 15px; padding: 10px 25px; 
}
.puja-tab-list .nav-link.active { background: var(--primary) !important; color: var(--gold) !important; }

/* Monthly Protector (Indigo & Cream) */
.indigo-gradient-box { background: linear-gradient(135deg, #1a1a40 0%, #2e2e6a 100%); }
.protector-hero-logo { 
    height: 120px; filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4)); 
    animation: floatingLogo 4s ease-in-out infinite;
}
@keyframes floatingLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* ======================================================
   PHASE 5: DYNAMIC ENGAGEMENT (NEWS & VIDEO)
   ====================================================== */
/* News Grid: Image 35 Style */
.news-master-container { border: 1px solid #e0e0e0 !important; background: #fff; }
.news-card-v3 { transition: 0.3s; }
.news-card-img { height: 200px; overflow: hidden; }
.btn-purple-sm { background: #5c59bd; color: #fff !important; font-size: 0.8rem; padding: 8px 18px; border-radius: 5px; }
.btn-yellow-sm { background: #ffb400; color: #000 !important; font-size: 0.8rem; font-weight: 700; padding: 8px 18px; border-radius: 5px; }

/* Video Pulse Effect */
.video-player-wrapper { border: 8px solid #fff; border-radius: 35px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.play-pulse-btn {
    width: 55px; height: 55px; background: var(--primary); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; animation: pulse-blue 2s infinite;
}
@keyframes pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(26, 35, 126, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(26, 35, 126, 0); } }

/* ======================================================
   PHASE 6: INFRASTRUCTURE (FOOTER & MOBILE)
   ====================================================== */
.footer-premium { background: #0a0e27; color: #fff; border-top: 5px solid var(--gold); padding-top: 60px; }
.footer-logo { height: 50px !important; width: auto; }
.footer-name-contrast { color: #fff !important; background: none !important; -webkit-text-fill-color: initial !important; font-size: 1.6rem !important; }
.footer-links li { border-bottom: 1px dotted rgba(255,255,255,0.1); padding-bottom: 8px; margin-bottom: 8px; }
.footer-links li a { color: rgba(255,255,255,0.6); font-size: 0.85rem; }
.footer-links li a:hover { color: var(--gold); padding-left: 8px; }

/* Responsive Media Queries */
@media (max-width: 991px) {
    .kg-vm-floating-card { position: relative; left: 0; bottom: 0; margin: -50px 20px 0; min-width: auto; }
    .main-logo { height: 50px; }
    .kg-res-card { padding: 20px 10px; }
}

@media (max-width: 768px) {
    .kg-hero-img { min-height: 250px; object-fit: cover; }
    .banner-item { width: 320px; height: 118px; }
    .footer-brand { flex-direction: column; text-align: center; }
    .footer-brand .ms-3 { margin-left: 0 !important; margin-top: 15px; }
}