/* ========================================== */
/* --- CSS Variables & Color Palette ---      */
/* ========================================== */
:root {
    --primary-navy: #002147;
    --accent-red: #D52B1E;
    --silver: #8A9AAB;
    --bg-white: #FFFFFF;
    --bg-light-grey: #F4F6F9;
    --text-dark: #1A1A1A;
    --text-light: #F4F6F9;
    --news-blue: #3A7BAD;
    --brand-blue: #4A86B8;
    --transition: all 0.3s ease-in-out;
}

/* ========================================== */
/* --- Reset & Global Styles ---              */
/* ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', 'Kalpurush', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; 
    z-index: 2;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--primary-navy);
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--silver);
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================== */
/* --- Global Button Styles ---               */
/* ========================================== */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    font-family: inherit;
}

.btn-primary {
    background-color: var(--accent-red);
    color: var(--bg-white);
}

.btn-primary:hover {
    background-color: transparent;
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--bg-white);
    color: var(--bg-white);
}

.btn-outline:hover {
    background-color: var(--bg-white);
    color: var(--primary-navy);
}

.btn-blue {
    background-color: var(--news-blue);
    color: var(--bg-white);
    padding: 10px 40px;
    font-size: 0.85rem;
}

.btn-blue:hover {
    background-color: var(--primary-navy);
    color: var(--bg-white);
}

/* ========================================== */
/* --- Universal Animated CSS Particles ---   */
/* ========================================== */
.glowing-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.glowing-particles::before,
.glowing-particles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
}

/* Layer 1: Larger, rising red particles */
.glowing-particles::before {
    width: 6px; height: 6px;
    background: var(--accent-red);
    box-shadow: 
        15vw 20vh 4px rgba(213, 43, 30, 0.4),
        85vw 15vh 6px rgba(213, 43, 30, 0.3),
        50vw 80vh 5px rgba(213, 43, 30, 0.5),
        25vw 70vh 4px rgba(213, 43, 30, 0.4),
        75vw 60vh 7px rgba(213, 43, 30, 0.3),
        95vw 30vh 5px rgba(213, 43, 30, 0.5),
        10vw 50vh 4px rgba(213, 43, 30, 0.4),
        40vw 90vh 6px rgba(213, 43, 30, 0.3),
        65vw 10vh 5px rgba(213, 43, 30, 0.6);
    animation: floatParticlesUp 25s infinite alternate ease-in-out;
}

/* Layer 2: Smaller, sinking navy particles */
.glowing-particles::after {
    width: 4px; height: 4px;
    background: var(--primary-navy);
    box-shadow: 
        10vw 90vh 2px rgba(0, 33, 71, 0.5),
        90vw 80vh 3px rgba(0, 33, 71, 0.4),
        40vw 10vh 2px rgba(0, 33, 71, 0.6),
        60vw 30vh 2px rgba(0, 33, 71, 0.4),
        80vw 90vh 3px rgba(0, 33, 71, 0.4),
        20vw 40vh 2px rgba(0, 33, 71, 0.5),
        70vw 50vh 3px rgba(0, 33, 71, 0.6),
        30vw 70vh 2px rgba(0, 33, 71, 0.4),
        50vw 20vh 3px rgba(0, 33, 71, 0.5);
    animation: floatParticlesDown 30s infinite alternate ease-in-out;
}

/* Layer 3: Extra Silver particles for awesome density */
.particle-layer-3 {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.particle-layer-3::before {
    content: ''; position: absolute; border-radius: 50%;
    width: 3px; height: 3px; background: var(--silver); opacity: 0.5;
    box-shadow: 
        5vw 5vh 2px rgba(138, 154, 171, 0.5),
        95vw 95vh 2px rgba(138, 154, 171, 0.5),
        35vw 85vh 2px rgba(138, 154, 171, 0.5),
        65vw 15vh 2px rgba(138, 154, 171, 0.5),
        15vw 45vh 2px rgba(138, 154, 171, 0.5),
        85vw 55vh 2px rgba(138, 154, 171, 0.5);
    animation: floatParticlesDiag 22s infinite alternate linear;
}

@keyframes floatParticlesUp {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.2; }
    50% { transform: translateY(-120px) translateX(40px) scale(1.5); opacity: 0.9; }
    100% { transform: translateY(-20px) translateX(-20px) scale(1); opacity: 0.2; }
}

@keyframes floatParticlesDown {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.2; }
    50% { transform: translateY(100px) translateX(-30px) scale(1.3); opacity: 0.8; }
    100% { transform: translateY(20px) translateX(20px) scale(1); opacity: 0.2; }
}

@keyframes floatParticlesDiag {
    0% { transform: translate(0, 0) scale(1); opacity: 0.1; }
    50% { transform: translate(100px, 100px) scale(1.8); opacity: 0.7; }
    100% { transform: translate(-50px, 50px) scale(1); opacity: 0.1; }
}

/* ========================================== */
/* --- Background Animation Keyframes ---     */
/* ========================================== */
@keyframes heroPan {
    0% { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.15) translate(-1%, -1%); }
}

@keyframes floatShape {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(15deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

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

@keyframes driftParticle {
    0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(40px, -40px) scale(1.2); opacity: 0.7; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
}

@keyframes networkBlink {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 0.8; transform: scale(1.2); }
}

/* ========================================== */
/* --- Navigation Bar ---                     */
/* ========================================== */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    z-index: 1000;
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    max-height: 65px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links li a {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: var(--transition);
}

.nav-links li a:hover {
    color: var(--accent-red);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* ========================================== */
/* --- Hero Section & Slider ---              */
/* ========================================== */
.hero {
    position: relative;
    height: 100vh;
    color: var(--bg-white);
    overflow: hidden;
}

.hero-swiper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}

/* NEW: Make individual slides flex containers so content aligns properly */
.hero-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.slide-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    animation: heroPan 20s infinite alternate ease-in-out;
}

.slide-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0, 33, 71, 0.7), rgba(0, 33, 71, 0.8));
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    /* padding-top: 40px;  Removed to perfectly center inside slide */
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
    /* NEW: Animation logic to fade text inside Swiper slides */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    transition-delay: 0.2s;
}

/* Trigger animation only when slide becomes active */
.swiper-slide-active .hero-content {
    opacity: 1;
    transform: translateY(0);
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #E2E8F0;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* ========================================== */
/* --- Trust Counters / Stats Section ---     */
/* ========================================== */
.stats-section {
    position: relative;
    z-index: 10;
    margin-top: -100px;
    padding-bottom: 60px;
}

.stats-container {
    background-color: var(--bg-white);
    border-radius: 8px;
    padding: 50px 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    position: relative; 
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.stat-item h3 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary-navy); 
    margin-bottom: 5px;
    line-height: 1.1;
}

.stat-item p {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748B; 
}

/* ========================================== */
/* --- About Section ---                      */
/* ========================================== */
.about-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--bg-light-grey);
    overflow: hidden;
}

.about-bg-shape-1 {
    position: absolute; top: 10%; left: 5%; width: 150px; height: 150px; 
    background: rgba(0,33,71,0.03); border-radius: 50%; z-index: 1;
    animation: floatShape 8s infinite ease-in-out;
}
.about-bg-shape-2 {
    position: absolute; bottom: 10%; right: 5%; width: 250px; height: 250px; 
    border: 2px solid rgba(213,43,30,0.05); transform: rotate(45deg); z-index: 1;
    animation: floatShape 10s infinite ease-in-out reverse;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text h2 {
    font-size: 2.5rem;
    color: var(--primary-navy);
    margin-bottom: 20px;
    font-weight: 800;
}

.about-text p {
    margin-bottom: 20px;
    color: #555;
    font-size: 1.1rem;
}

.about-image {
    width: 100%;
    height: 400px;
    background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80') center/cover;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ========================================== */
/* --- Business Verticals (Grid) ---          */
/* ========================================== */
.verticals-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(-45deg, #ffffff, #F4F6F9, #ffffff, #eaedf2);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    overflow: hidden; 
}

.verticals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.vertical-card {
    background-color: var(--bg-light-grey);
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    transition: var(--transition);
    border-bottom: 4px solid transparent;
    z-index: 2;
    position: relative;
}

.vertical-card:hover {
    transform: translateY(-10px);
    background-color: var(--bg-white);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-bottom: 4px solid var(--accent-red);
}

.vertical-card i {
    font-size: 3rem;
    color: var(--primary-navy);
    margin-bottom: 20px;
}

.vertical-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--primary-navy);
}

.vertical-card p {
    color: #666;
    font-size: 0.95rem;
}

.vertical-list {
    text-align: left;
    margin-top: 15px;
    padding-left: 20px;
    color: #555;
    list-style-type: disc;
}

/* ========================================== */
/* --- Investment Opportunity ---             */
/* ========================================== */
.investment-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--primary-navy);
    color: var(--bg-white);
    overflow: hidden;
}

.invest-particle-1 {
    position: absolute; top: 10%; left: 5%; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(213,43,30,0.15) 0%, transparent 70%);
    border-radius: 50%; z-index: 1; pointer-events: none;
    animation: driftParticle 12s infinite alternate ease-in-out;
}
.invest-particle-2 {
    position: absolute; bottom: 5%; right: 10%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%; z-index: 1; pointer-events: none;
    animation: driftParticle 15s infinite alternate-reverse ease-in-out;
}

.investment-section .section-title {
    color: var(--bg-white);
}

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

.invest-card {
    background: rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
}

.invest-card h4 {
    color: var(--accent-red);
    font-size: 1.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.invest-card ul li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.invest-card ul li i {
    color: var(--accent-red);
    margin-top: 5px;
}

.invest-form-container {
    max-width: 800px;
    margin: 50px auto 0;
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.invest-form-container h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--bg-white);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--silver);
    font-size: 0.95rem;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: var(--bg-white);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-red);
    background: rgba(255, 255, 255, 0.1);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

select.form-control option {
    background-color: var(--primary-navy);
    color: var(--bg-white);
}

/* ========================================== */
/* --- Brands We Collaborate With (SLIDER) -- */
/* ========================================== */
.brands-section {
    position: relative;
    padding: 100px 0;
    background-color: #F8F9FA; 
    overflow: hidden;
}

.brands-section .section-title {
    color: var(--brand-blue);
    font-size: 2.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.brands-section .section-subtitle {
    color: var(--brand-blue);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 50px;
}

.brand-bg-shape-1 {
    position: absolute; top: -50px; left: -50px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,33,71,0.03) 0%, transparent 70%);
    border-radius: 50%; z-index: 1; animation: floatShape 12s infinite ease-in-out;
}

.brand-bg-shape-2 {
    position: absolute; bottom: -50px; right: -50px; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(213,43,30,0.03) 0%, transparent 70%);
    border-radius: 50%; z-index: 1; animation: floatShape 15s infinite ease-in-out reverse;
}

.brands-swiper-container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
}

.brand-card {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: grab;
    user-select: none;
    opacity: 0.8;
}

.brand-card:hover {
    opacity: 1;
    transform: scale(1.05);
}

.brand-card:active {
    cursor: grabbing;
}

/* Specific CSS styles replicating image logos natively */
.logo-fresh {
    color: #E31837;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 800;
    font-size: 3rem;
    letter-spacing: -2px;
}

.logo-no1 {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #FDB813, #F68B1F);
    padding: 10px 25px;
    border-radius: 50px;
    border: 4px solid #E31837;
    color: #fff;
    font-weight: 900;
    font-style: italic;
    font-size: 2rem;
    text-shadow: 2px 2px 0px #000;
}
.logo-no1 span {
    display: block;
    font-size: 0.6rem;
    color: #000;
    text-shadow: none;
    text-align: center;
    margin-top: -5px;
    font-weight: 800;
}

.logo-pure {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.9;
}
.logo-pure .super {
    color: #00A651;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: -5px;
    z-index: 1;
}
.logo-pure .pure {
    color: #E31837;
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    font-weight: 800;
    font-style: italic;
}

.logo-actifit {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo-actifit .af-fresh {
    border: 1.5px solid #E31837;
    color: #E31837;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 0.6rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 800;
    margin-bottom: 2px;
}
.logo-actifit .af-text {
    color: #007A3D;
    font-size: 2.2rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -1px;
}

.logo-meghna {
    display: flex;
    flex-direction: column;
    transform: skewX(-10deg);
}
.logo-meghna .m-top {
    background-color: #00A651;
    color: white;
    padding: 4px 15px;
    font-size: 1.5rem;
    font-weight: 600;
}
.logo-meghna .m-bot {
    background-color: #E31837;
    color: white;
    padding: 4px 15px;
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 2px;
}

.logo-gear {
    font-family: 'Montserrat', sans-serif;
    color: #000;
    font-size: 2.5rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -2px;
    transform: skewX(-15deg);
}

/* ========================================== */
/* --- Our Team Section ---                   */
/* ========================================== */
.team-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(-45deg, #F4F6F9, #e2e8f0, #F4F6F9, #ffffff);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    overflow: hidden;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 30px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

.team-card {
    background-color: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    transition: var(--transition);
    border-bottom: 4px solid transparent;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    border-bottom: 4px solid var(--accent-red);
}

.team-img {
    width: 100%;
    height: 280px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-light-grey);
}

.team-info {
    padding: 25px 20px;
}

.team-info h4 {
    color: var(--primary-navy);
    font-size: 1.3rem;
    margin-bottom: 5px;
    font-weight: 800;
}

.team-info p {
    color: var(--accent-red);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.team-socials a {
    color: var(--silver);
    transition: var(--transition);
    font-size: 1.2rem;
}

.team-socials a:hover {
    color: var(--primary-navy);
    transform: translateY(-2px);
}

/* ========================================== */
/* --- News and Updates Section ---           */
/* ========================================== */
.news-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--bg-white);
    overflow: hidden;
}

.news-section .section-title {
    color: var(--news-blue);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 2rem;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
}

.news-card {
    background-color: var(--bg-white);
    border-radius: 8px;
    text-align: center;
    transition: var(--transition);
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-img {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-light-grey);
    border-radius: 8px;
    margin-bottom: 15px;
}

.news-info {
    padding: 10px 10px 20px 10px;
}

.news-info h4 {
    color: var(--news-blue);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
}

.news-btn-container {
    text-align: center;
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

/* ========================================== */
/* --- Global Footprint ---                   */
/* ========================================== */
.global-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--bg-light-grey);
    text-align: center;
    overflow: hidden;
}

.network-node-1 { position: absolute; top: 30%; right: 20%; width: 6px; height: 6px; background: var(--silver); border-radius: 50%; animation: networkBlink 3s infinite; z-index: 1;}
.network-node-2 { position: absolute; bottom: 40%; left: 15%; width: 8px; height: 8px; background: var(--silver); border-radius: 50%; animation: networkBlink 4s infinite 1s; z-index: 1;}
.network-node-3 { position: absolute; top: 60%; right: 10%; width: 5px; height: 5px; background: var(--silver); border-radius: 50%; animation: networkBlink 2.5s infinite 0.5s; z-index: 1;}

.map-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    height: 400px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg') no-repeat center/contain;
    opacity: 0.7;
    position: relative;
    z-index: 2;
}
 
.pulse {
    position: absolute;
    top: 25%; left: 20%;
    width: 20px; height: 20px;
    background: var(--accent-red);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(213, 43, 30, 0.7);
    animation: pulsing 2s infinite;
}

/* ========================================== */
/* --- Modern Footer ---                      */
/* ========================================== */
footer {
    background: linear-gradient(135deg, #001226, #001a33, #001226);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    color: var(--silver);
    padding: 70px 0 20px;
    position: relative;
    overflow: hidden; 
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 50px;
}

.footer-logo {
    font-size: 1.6rem;
    color: var(--bg-white);
    font-weight: 800;
    margin-bottom: 20px;
    display: inline-block;
}

.footer-about p {
    margin-bottom: 25px;
    font-size: 0.95rem;
    line-height: 1.7;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--bg-white);
    border-radius: 50%;
    font-size: 1.1rem;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-socials a:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(213, 43, 30, 0.3);
}

.footer-links h4 {
    color: var(--bg-white);
    margin-bottom: 25px;
    font-size: 1.2rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--accent-red);
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    display: inline-block;
    transition: var(--transition);
    color: var(--silver);
}

.footer-links ul li a:hover {
    color: var(--accent-red);
    transform: translateX(5px);
}

.footer-links ul li i {
    margin-right: 10px;
    color: var(--accent-red);
    width: 15px;
    text-align: center;
}

.footer-newsletter {
    margin-top: 20px;
}

.footer-newsletter form {
    display: flex;
    margin-top: 15px;
}

.footer-newsletter input {
    flex: 1;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px 0 0 4px;
    color: var(--bg-white);
    outline: none;
    transition: var(--transition);
}

.footer-newsletter input:focus {
    border-color: var(--accent-red);
    background: rgba(255, 255, 255, 0.1);
}

.footer-newsletter button {
    padding: 12px 20px;
    background: var(--accent-red);
    border: none;
    border-radius: 0 4px 4px 0;
    color: var(--bg-white);
    cursor: pointer;
    transition: var(--transition);
}

.footer-newsletter button:hover {
    background: #b02318;
}

.footer-bottom {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p span {
    color: var(--accent-red);
}
 
.footer-bottom a {
    color: var(--accent-red);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
 
.footer-bottom a:hover {
    color: var(--bg-white);
}

/* ========================================== */
/* --- Responsive Design (Media Queries) ---  */
/* ========================================== */
@media (max-width: 992px) {
    .hero-content h1 { font-size: 3rem; }
    .about-grid { grid-template-columns: 1fr; }
    .about-image { height: 300px; }
}

@media (max-width: 768px) {
    .nav-links {
        display: none; flex-direction: column; position: absolute;
        top: 80px; left: 0; width: 100%;
        background: var(--bg-white); padding: 20px 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 1000; /* Fixed overlapping issue */
    }
    .nav-links.active { display: flex; }
    .mobile-menu-btn { display: block; }
    .hero-content h1 { font-size: 2.5rem; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .stats-section { margin-top: -50px; }
}