/*
    Modern UI CSS for Government Weather Website
    - Glassmorphism Sections
    - Animated Gradients
    - Floating Weather Icons
    - Smooth Scroll Animations
    - Parallax Heroes
*/

/* --- Base & Scroll --- */
html {
    scroll-behavior: smooth;
}

/* --- Glassmorphism Container --- */
.glass-container {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 20px 40px rgba(0, 22, 122, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05) !important;
    padding: 3rem !important;
    margin-bottom: 2.5rem !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 10;
}

.glass-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 22, 122, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* readable text over glass */
.glass-container p,
.glass-container h1,
.glass-container h2,
.glass-container h3,
.glass-container h4,
.glass-container h5,
.glass-container h6,
.glass-container table,
.glass-container td,
.glass-container th,
.glass-container li,
.glass-container span {
    color: #1a1a1a !important;
    text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5);
}

.fontchange {
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.8 !important;
    color: #2d3748 !important;
}

.fontchange p,
.description p {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
}

/* --- Dynamic Backgrounds per Page --- */
.page-bg-container {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    overflow-x: hidden;
}

/* 1. Organisation Structure - abstract network */
.bg-org-structure {
    background: radial-gradient(circle at 50% 50%, #f0f7ff 0%, #d1e1fa 100%);
}

.bg-org-structure::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(0, 22, 122, 0.05) 1px, transparent 1px),
        linear-gradient(to right, rgba(0, 22, 122, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
}

#networkCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important; /* Above gradient overlay */
    pointer-events: none;
    opacity: 1;
}

/* 2. CS Message & PS Message & Director's Note - Professional/Leadership Themes */
.bg-cs-message,
.bg-ps-message,
.bg-directors {
    background: radial-gradient(circle at 0% 0%, #f8fafc 0%, #eef2f7 50%, #e2e8f0 100%);
    background-attachment: fixed;
}

.bg-cs-message::before,
.bg-ps-message::before,
.bg-directors::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><path d="M0 400 Q 200 300 400 400" fill="none" stroke="%233b82f6" stroke-width="0.8" opacity="0.1"/><path d="M0 380 Q 200 280 400 380" fill="none" stroke="%233b82f6" stroke-width="0.8" opacity="0.1"/></svg>') repeat;
    animation: flow-waves 20s linear infinite;
    z-index: -1;
}

@keyframes flow-waves {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 400px 0;
    }
}

/* 3. BMSK Logo - Subtle pattern using logo colors */
.bg-bmsk-logo {
    background: #ffffff;
    background-image:
        radial-gradient(rgba(0, 22, 122, 0.05) 1px, transparent 1px),
        radial-gradient(rgba(245, 158, 11, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}

/* 4. Achievements and Awards - Light editorial theme */
.bg-achievements {
    background: linear-gradient(160deg, #f0f4ff 0%, #eef1fb 50%, #f5f7ff 100%);
}

/* 5. Infrastructure - Tech/Weather stations */
.bg-infrastructure {
    background-color: #f0f9ff;
}

/* 6. Looking Ahead - Future/Progress */
.bg-looking-ahead {
    background: linear-gradient(to bottom, #eff6ff, #dbeafe);
}

.bg-looking-ahead::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: pulse-future 10s ease-in-out infinite;
    z-index: -1;
}

@keyframes pulse-future {

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

    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.8;
    }
}

/* --- Hero Section Improvements --- */
.hero-header.parallax-hero {
    background-image: none !important;
    background: transparent !important;
    position: relative !important;
    padding: 220px 0 120px 0 !important; /* Increased top padding to definitively clear headers */
    overflow: hidden;
    margin-top: 0 !important;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 500px;
}

.parallax-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 22, 122, 0.9) 0%, rgba(0, 22, 122, 0.4) 100%);
    z-index: 1;
}

.parallax-hero.hero-header::after {
    display: none !important;
}

.parallax-hero h1 {
    font-size: clamp(2.5rem, 8vw, 4.8rem) !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: #ffffff !important;
    letter-spacing: -1.5px;
    margin-bottom: 30px !important;
    line-height: 1.1 !important;
    position: relative;
    z-index: 2;
    max-width: 900px;
}

/* --- Organisational Structure Specific (User Design) --- */
.hero-header.parallax-hero.hero-org-structure {
    min-height: 240px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* Glassmorphism Global Utilities */
.glass-container,
.glassmorphism {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1) !important;
    padding: 2.5rem !important;
    margin-bottom: 2rem !important;
}

.dark-glass {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* --- Achievements & Awards Specific (Prestigious Theme) --- */
.bg-achievements .floating-weather {
    display: none !important;
}

/* --- Organisational Structure Specific --- */
.hero-org-structure {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%) !important;
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    min-height: 240px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-org-structure::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1.5" fill="white" opacity="0.1"/><path d="M50 0 L50 100 M0 50 L100 50" stroke="white" opacity="0.05" stroke-width="0.5"/></svg>');
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

.hero-org-structure h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.4) !important;
}

.wave-container-org {
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 5;
    pointer-events: none;
}

/* Base Box Refinement for Org Chart */
.org-chart .box {
    font-size: 16px !important;
    font-weight: 700 !important;
    position: relative;
    overflow: visible;
}

/* --- Infrastructure Specific --- */
.hero-infrastructure {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%) !important;
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    min-height: 240px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-infrastructure::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><rect width="60" height="60" fill="none" stroke="white" stroke-opacity="0.05" stroke-width="0.5"/></svg>');
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

.hero-infrastructure h1 {
    font-size: clamp(3rem, 10vw, 5rem) !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* --- Road Ahead (Looking Ahead) Specific --- */
.hero-roadahead {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 50%, #6d28d9 100%) !important;
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    min-height: 240px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-roadahead::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-opacity="0.04" stroke-width="0.5"/></svg>');
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

.hero-roadahead h1 {
    font-size: clamp(2.5rem, 8vw, 4.5rem) !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Shared Waves for these Pages */
.wave-container-infra,
.wave-container-ahead {
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 5;
    pointer-events: none;
}

.wave-shared {
    position: absolute;
    width: 200%;
    height: 240px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 40%;
    left: -50%;
}

.wave1-shared {
    animation: waveMove 15s linear infinite;
    bottom: -120px;
}

.wave2-shared {
    animation: waveMoveReverse 20s linear infinite;
    opacity: 0.4;
    bottom: -100px;
}

/* --- Directors Note Specific --- */
.hero-directors {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
    padding-top: 100px !important; /* Reduced from 140px */
    padding-bottom: 60px !important; /* Reduced from 120px */
    min-height: 280px !important; /* Reduced from 550px */
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-directors::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M10 20 L90 20 M10 40 L90 40 M10 60 L90 60 M10 80 L90 80" stroke="white" opacity="0.03" stroke-width="0.5"/></svg>');
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

.hero-directors .hero-title-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    z-index: 2;
    pointer-events: none;
    filter: blur(40px);
}

.hero-directors h1 {
    font-size: clamp(3rem, 10vw, 5rem) !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 15px !important;
}

.wave-container-directors {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 5;
    pointer-events: none;
}

.wave-directors {
    position: absolute;
    width: 200%;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 45%;
    left: -50%;
}

.wave1-directors {
    animation: waveMove 18s linear infinite;
    bottom: -100px;
}

.wave2-directors {
    animation: waveMoveReverse 25s linear infinite;
    opacity: 0.3;
    bottom: -80px;
}

/* --- Achievements & Awards Specific (User Custom Design) --- */
.hero-awards.award-hero {
    height: 420px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: linear-gradient(180deg, #1f2f6f, #4b5fb2) !important;
    color: white !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important; /* Reset padding for exact height control */
}

/* GOLDEN SPARKLES */
.award-hero::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 215, 0, 0.6) 2px, transparent 2px);
    background-size: 160px 160px;
    opacity: 0.25;
    animation: sparkleMove 20s linear infinite;
    z-index: 1;
}

@keyframes sparkleMove {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-160px);
    }
}

/* CONTENT */
.award-content {
    position: relative;
    z-index: 2;
    animation: fadeUpAward 1s ease;
}

/* TROPHY ICON */
.trophy-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
    animation: floatTrophy 3s ease-in-out infinite;
}

@keyframes floatTrophy {
    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }
}

/* TITLE */
.award-title {
    font-size: clamp(2.5rem, 6vw, 60px) !important;
    font-weight: 700 !important;
    text-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
    margin: 0 !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    text-transform: none !important;
}

@keyframes fadeUpAward {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.award-icon-float {
    position: absolute;
    color: rgba(212, 175, 55, 0.05); /* Lowered opacity */
    font-size: 60px;
    z-index: 1;
    pointer-events: none;
    animation: awards-float-elegant 25s linear infinite;
}

@keyframes awards-float-elegant {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.15;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        transform: translateY(-700px) rotate(360deg);
        opacity: 0;
    }
}

.sparkle {
    position: absolute;
    background: radial-gradient(circle, #fef3c7 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

.gold-dot {
    position: absolute;
    background: #d4af37;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    filter: blur(1px);
}

/* --- CS & PS Message Specific --- */
.hero-cs-message,
.hero-ps-message {
    background: linear-gradient(135deg, #00167a 0%, #002e8c 50%, #0046b8 100%) !important;
    padding-top: 90px !important; /* Reduced from 110px */
    padding-bottom: 40px !important; /* Reduced from 70px */
    min-height: 250px !important; /* Reduced from 380px */
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-cs-message::after,
.hero-ps-message::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="white" opacity="0.1"/><line x1="2" y1="2" x2="100" y2="100" stroke="white" opacity="0.03" stroke-width="0.5"/></svg>');
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

.hero-cs-message .container,
.hero-ps-message .container {
    position: relative;
    z-index: 10;
}

.hero-cs-message h1,
.hero-ps-message h1 {
    font-size: clamp(2.2rem, 8vw, 3.8rem) !important; /* Reduced from 3rem-5rem */
    font-weight: 800 !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 10px !important;
}

/* Specific CS/PS Message Waves */
.wave-container-cs,
.wave-container-ps {
    position: absolute;
    bottom: -30px; /* Adjusted from -50px */
    left: 0;
    width: 100%;
    height: 100px; /* Reduced from 150px */
    z-index: 5;
    pointer-events: none;
}

.wave-cs,
.wave-ps {
    position: absolute;
    width: 200%;
    height: 200px; /* Reduced from 300px */
    background: rgba(255, 255, 255, 0.08);
    border-radius: 43%;
    left: -50%;
}

.wave1-cs,
.wave1-ps {
    animation: waveMove 15s linear infinite;
    bottom: -150px;
}

.wave2-cs,
.wave2-ps {
    animation: waveMoveReverse 20s linear infinite;
    opacity: 0.4;
    bottom: -130px;
}

/* --- BMSK Logo Page Specific Hero (Wave Design) --- */
.hero-bmsk-logo {
    position: relative !important;
    height: 560px !important;
    min-height: 580px !important;
    padding-top: 140px !important;
    padding-bottom: 20px !important;
    padding-left: 0;
    padding-right: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    overflow: hidden !important;
    z-index: 2 !important;
}

.hero-bmsk-logo::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 1;
}

.hero-bmsk-logo::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 247, 255, 0.6) 100%) !important;
    z-index: 1 !important;
}

/* Wave container */
.wave-container {
    position: absolute;
    bottom: -100px; /* Offset to center the wave bulge */
    left: 0;
    width: 100%;
    height: 300px;
    pointer-events: none;
    z-index: 5;
}

/* Waves */
.wave {
    position: absolute;
    width: 200%;
    height: 400px;
    background: rgba(60, 120, 255, 0.15);
    border-radius: 43%;
    left: -50%;
}

/* Wave animations */
.wave1 {
    animation: waveMove 12s linear infinite;
    bottom: -50px;
}

.wave2 {
    animation: waveMoveReverse 16s linear infinite;
    opacity: 0.5;
    bottom: -30px;
}

.wave3 {
    animation: waveMove 20s linear infinite;
    opacity: 0.3;
    bottom: -10px;
}

/* Animations */
@keyframes waveMove {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes waveMoveReverse {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Content above waves */
.hero-bmsk-logo .hero-content {
    position: relative !important;
    z-index: 10 !important;
    text-align: center !important;
    animation: fadeUp 1s ease forwards;
}

.hero-main-logo {
    width: 220px;
    height: 220px;
    object-fit: contain;
    position: relative;
    z-index: 10;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.1));
}

.hero-main-logo:hover {
    transform: scale(1.1) !important;
}

.logo-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 650px;
    background: url('/images/logo.gif') no-repeat center;
    background-size: contain;
    opacity: 0.02; /* Extremely faint per requirement */
    filter: blur(4px);
    z-index: 0;
    pointer-events: none;
}

.logo-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.03) 0%, transparent 40%);
    z-index: 0;
}

.logo-glow {
    display: none; /* Removed for wave design simplicity */
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.glass-title-panel {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 40px rgba(0, 22, 122, 0.05) !important;
    margin-top: 30px;
    border-radius: 24px !important;
    padding: 2.5rem 4rem !important;
}

.hero-bmsk-logo h1 {
    font-size: 60px !important;
    font-weight: 700 !important;
    color: #0b2c8a !important;
    text-align: center !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    margin-bottom: 20px !important;
}

.hero-bmsk-logo .breadcrumb li,
.hero-bmsk-logo .breadcrumb li a {
    color: #00167a !important;
    opacity: 0.8 !important;
}

.hero-bmsk-logo .breadcrumb li a:hover {
    color: #f59e0b !important;
    opacity: 1 !important;
}

/* Particles */
.particles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}

/* --- Menu Hover Animations --- */
.navbar .links li a {
    position: relative;
    transition: all 0.3s ease;
}

.navbar .links li a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2.5px;
    background-color: #f59e0b;
    transition: width 0.3s ease;
    border-radius: 2px;
}

.navbar .links li:hover > a {
    color: #f59e0b !important;
}

.navbar .links li:hover > a::after {
    width: 100%;
}

/* --- Floating Weather Icons Widget --- */
.floating-weather {
    position: fixed;
    z-index: 0;
    opacity: 0.12;
    pointer-events: none;
    filter: blur(0.5px);
}

.fw-sun {
    top: 15%;
    left: 8%;
    width: 140px;
    height: 140px;
    background: url('data:image/svg+xml;utf8,<svg fill="%23f59e0b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.25v-1.5m0 18.5v-1.5M4.25 12h-1.5m18.5 0h-1.5M6.343 6.343l-1.06-1.06m13.434 13.434l-1.06-1.06M6.343 17.657l-1.06 1.06M19.778 5.282l-1.06 1.06M17 12a5 5 0 11-10 0 5 5 0 0110 0z" stroke="%23f59e0b" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
    background-size: contain;
    animation: float 12s ease-in-out infinite;
}

.fw-cloud {
    top: 55%;
    right: 10%;
    width: 160px;
    height: 160px;
    background: url('data:image/svg+xml;utf8,<svg fill="%2360a5fa" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5 19C20.5 19 22 17 22 14.5C22 12.015 20.015 10 17.5 10C17.135 10 16.784 10.044 16.452 10.126C16.142 6.643 13.315 4 9.8 4C5.49 4 2 7.49 2 11.8C2 12.43 2.072 13.045 2.208 13.637C1.49 14.28 1 15.228 1 16.3C1 18.343 2.657 20 4.7 20H17.5V19Z" opacity="0.6"/></svg>') no-repeat center;
    background-size: contain;
    animation: float 15s ease-in-out infinite reverse;
}

.fw-rain {
    bottom: 12%;
    left: 18%;
    width: 110px;
    height: 110px;
    background: url('data:image/svg+xml;utf8,<svg fill="%2338bdf8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21v-4m-4 4v-4m8 4v-4M17.5 14C20.5 14 22 12 22 9.5C22 7.015 20.015 5 17.5 5C17.135 5 16.784 5.044 16.452 5.126C16.142 1.643 13.315-1 9.8-1C5.49-1 2 2.49 2 6.8C2 7.43 2.072 8.045 2.208 8.637C1.49 9.28 1 10.228 1 11.3C1 13.343 2.657 15 4.7 15H17.5V14Z" opacity="0.5"/></svg>') no-repeat center;
    background-size: contain;
    animation: float 18s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-35px) translateX(15px) rotate(3deg);
    }

    66% {
        transform: translateY(-15px) translateX(-15px) rotate(-3deg);
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
}

/* --- Global UI Refinements --- */
#backtotop {
    background: linear-gradient(135deg, #00167a 0%, #3b82f6 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 22, 122, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

#backtotop:hover {
    transform: scale(1.1) translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 22, 122, 0.4) !important;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
    border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --- Header Utility Styles for Light Hub --- */
.layer-header {
    z-index: 10 !important; /* Force to top */
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
}


.slide-up {
    animation: slideUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
    opacity: 0;
}

@keyframes slideUp {
    from {
        transform: translateY(70px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Ensure mobile responsiveness for glass containers */
@media (max-width: 768px) {
    .glass-container {
        padding: 1.5rem !important;
        margin: 1rem !important;
        width: auto !important;
    }

    .parallax-hero h1 {
        font-size: 2.5rem !important;
    }
}

/* --- Logo Explanation Section --- */
.logo-explanation {
    max-width: 1200px;
    margin: auto;
    padding: 60px 20px;
}

.logo-card {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: center;
    background: #ffffff;
    padding: 50px;
    margin-bottom: 60px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.logo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.logo-card.reverse {
    grid-template-columns: 1fr 1.3fr;
}

.logo-card.reverse .logo-image {
    order: -1;
}

.logo-text h3 {
    font-size: 22px;
    color: #2d3e8b;
    margin-bottom: 15px;
}

.logo-text p {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

.step {
    display: inline-block;
    background: #2d3e8b;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 10px;
}

.logo-image {
    text-align: center;
    position: relative;
}

.logo-image img {
    max-width: 260px;
    height: auto;
    transition: transform 0.4s ease;
}

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

@media (max-width: 900px) {
    .logo-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .logo-card.reverse .logo-image {
        order: 0;
    }
}

/* --- Premium Apple-Style Scrollytelling Redesign --- */
.logo-explanation-section {
    position: relative;
    max-width: 1400px;
    margin: 0px auto;
    padding: 150px 80px;
    display: flex;
    gap: 100px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Dotted grid background */
    background-image:
        radial-gradient(rgba(45, 62, 139, 0.1) 1.5px, transparent 1.5px);
    background-size: 40px 40px;
    border-radius: 60px;
    overflow: visible;
    box-shadow: 0 40px 100px rgba(0, 22, 122, 0.05);
}

/* Background Atmosphere Layer */
.bg-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: 60px;
}

.atmos-cloud {
    position: absolute;
    opacity: 0.1;
    filter: blur(40px);
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    animation: driftSlow 30s infinite alternate ease-in-out;
}

@keyframes driftSlow {
    from {
        transform: translate(-20%, -20%) scale(1);
    }

    to {
        transform: translate(20%, 20%) scale(1.2);
    }
}

/* LEFT: Visual Column with Progress Line */
.logo-visual-column {
    flex: 1.2;
    position: sticky;
    top: 15vh;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Progress Line Container */
.scroll-progress-container {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 4px;
    background: rgba(45, 62, 139, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.scroll-progress-line {
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, #2d3e8b, #3b82f6);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(45, 62, 139, 0.3);
}

.progress-dots {
    display: none; /* Removed for a cleaner look */
}

.visual-canvas {
    position: relative;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 20px 60px rgba(0, 22, 122, 0.08),
        inset 0 0 40px rgba(255, 255, 255, 1);
    overflow: hidden;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Base style for all logo parts */
.visual-part {
    position: absolute;
    width: 85%;
    height: 85%;
    object-fit: contain;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: blur(10px) brightness(0.8);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.visual-part.active-part {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translate(-50%, -50%) scale(1) rotate(0);
}

.visual-part.highlighted {
    filter: drop-shadow(0 15px 30px rgba(45, 62, 139, 0.4));
    transform: translate(-50%, -50%) scale(1.05) !important;
}

/* RIGHT: Content Cards */
.logo-content-column {
    flex: 1;
    padding-bottom: 30vh;
}

.story-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 60px;
    margin-bottom: 50vh;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0, 22, 122, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0.3;
    transform: translateY(50px) scale(0.95);
}

.story-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

.story-card.active-step {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 30px 60px rgba(45, 62, 139, 0.1);
    border-color: rgba(255, 255, 255, 1);
}

.step-badge {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(45, 62, 139, 0.05);
    color: #2d3e8b;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 35px;
    transition: all 0.4s ease;
    border: 1px solid rgba(45, 62, 139, 0.1);
}

.story-card.active-step .step-badge {
    background: #2d3e8b;
    color: white;
    box-shadow: 0 10px 20px rgba(45, 62, 139, 0.2);
    transform: translateY(-5px);
}

.story-card h3 {
    font-size: 42px;
    font-weight: 800;
    color: #00167a;
    margin-bottom: 25px;
    letter-spacing: -1px;
    line-height: 1.2;
}

.story-card p {
    font-size: 20px;
    line-height: 1.8;
    color: #4b5563;
    margin: 0;
    font-weight: 400;
}

/* Final Celebration Glow */
.halo-glow {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
    z-index: -1;
}

.story-card[data-step="7"].active-step ~ .logo-visual-column .halo-glow {
    opacity: 1;
}

@media (max-width: 1100px) {
    .logo-explanation-section {
        flex-direction: column-reverse;
        padding: 0px 30px;
        gap: 60px;
        border-radius: 0;
    }

    .logo-visual-column {
        position: relative;
        top: 0;
        height: 350px;
    }

    .scroll-progress-container {
        display: none;
    }

    .visual-part {
        width: 320px;
    }

    .story-card {
        padding: 40px;
        margin-bottom: 120px;
    }
}

/* Removed targeted font-size reductions that were causing issues on International Collaboration page */

/* --- High-End Profile Card Design (BMSK Modern UI) --- */
.internal-our-team-details {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important; /* Solid clean background */
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.internal-our-team-details .blob-3,
.internal-our-team-details::before,
.internal-our-team-details::after {
    display: none !important; /* Remove all background blobs */
}

@keyframes moveBlob1 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(40%, 20%) scale(1.3) rotate(90deg); }
}

@keyframes moveBlob2 {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(-30%, -30%) scale(1.4) rotate(-90deg); }
}

@keyframes moveBlob3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-50%, 40%) scale(1.2); }
}

.internal-our-team-details .row.mt-3 {
    background: #ffffff; /* Solid white card */
    border-radius: 12px; /* Further reduced to professional radius */
    padding: 60px;
    max-width: 1100px;
    margin: 20px auto !important;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
    position: relative;
    z-index: 10;
}

/* Remove animated glowing borders and aura */
.internal-our-team-details .row.mt-3::before,
.internal-our-team-details .row.mt-3::after {
    display: none !important;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.internal-our-team-details .row.mt-3:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.section.active .internal-our-team-details .row.mt-3 {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.internal-our-team-details .col-md-4 {
    position: relative;
    display: flex;
    justify-content: center;
    border-radius: 12px;
}

.internal-our-team-details .col-md-4 img {
    width: 270px !important;
    height: 320px !important;
    max-width: 270px !important;
    max-height: 320px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 2;
}

.internal-our-team-details .col-md-4::before {
    display: none !important;
}

/* Removed Image Shine/Sweep and Dynamic Hover Effects */
.internal-our-team-details .col-md-4::after {
    display: none !important;
}

.internal-our-team-details .col-md-4:hover img {
    transform: none !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.internal-our-team-details .col-md-8 {
    padding-left: 35px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.internal-our-team-details h2,
.internal-our-team-details h4,
.internal-our-team-details p,
.internal-our-team-details .d-flex {
    opacity: 1 !important; /* Force visibility */
    transform: none !important;
    transition: none !important;
}

.internal-our-team-details h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    letter-spacing: -0.5px;
}

.internal-our-team-details h4 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #86868b !important;
    margin-bottom: 18px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 8px;
    display: inline-block;
}

.internal-our-team-details p {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #3a3a3c !important;
    text-align: justify !important;
    margin-bottom: 24px !important;
}

.internal-our-team-details .d-flex a.btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
}

.internal-our-team-details .d-flex a.btn:hover {
    transform: scale(1.1) translateY(-2px);
}

/* Dashboard View Button */
.exploreCollection {
    background: #00167a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 22px !important;
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 22, 122, 0.2);
    cursor: pointer;
    margin-top: 15px;
}

.exploreCollection:hover {
    background: #000b4d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 22, 122, 0.3);
}

/* --- Premium Hero Background Animations (Know Us Banner) --- */
.hero-header {
    position: relative;
}

/* 1. Animated Gradient Overlay */
.hero-header .hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(99, 102, 241, 0.15) 50%,
        rgba(59, 130, 246, 0.15) 100%
    );
    background-size: 300% 300%;
    z-index: 1 !important;
    animation: gradientDiagonal 12s ease infinite;
    pointer-events: none;
}

@keyframes gradientDiagonal {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. Floating Light Particles */
.hero-header .hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1 !important;
    pointer-events: none;
    overflow: hidden;
}

.p1 { left: 10%; bottom: -10%; animation: floatUp 10s infinite linear; }
.p2 { left: 30%; bottom: -10%; animation: floatUp 14s infinite linear 2s; }
.p3 { left: 50%; bottom: -10%; animation: floatUp 12s infinite linear 5s; }
.p4 { left: 70%; bottom: -10%; animation: floatUp 16s infinite linear 1s; }
.p5 { left: 90%; bottom: -10%; animation: floatUp 11s infinite linear 8s; }

@keyframes floatUp {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 0.3; }
    80% { opacity: 0.3; }
    100% { transform: translateY(-300px) translateX(20px); opacity: 0; }
}

/* 3. Smooth Blur Light Glow Blobs */
.hero-header .hero-glow-blobs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1 !important;
    pointer-events: none;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.2;
}

.b1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent 70%);
    top: -150px;
    left: -50px;
    animation: blobPulse 15s infinite alternate ease-in-out;
}

.b2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
    bottom: -150px;
    right: -50px;
    animation: blobPulse 20s infinite alternate-reverse ease-in-out;
}

@keyframes blobPulse {
    0% { transform: scale(1) translate(0, 0); opacity: 0.15; }
    50% { transform: scale(1.1) translate(30px, -20px); opacity: 0.2; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.15; }
}

/* Ensure content visibility */
.hero-header .container {
    position: relative;
    z-index: 10 !important;
}