/* ========================================== */
/* 1. BASE VARIABLES & RESET                  */
/* ========================================== */
:root {
    --primary-orange: #f97316;
    --primary-orange-hover: #ea580c;
    --color-blue: #3b82f6;
    --color-emerald: #10b981;
    --text-dark: #0f172a;
    --text-muted: #475569;
    --bg-light: #f8fafc;
    --white: #ffffff;
    --font-main: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Typography --- */
h1 { font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 24px; }
h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 16px; }
h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
p { font-size: 1rem; color: var(--text-muted); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-main);
    font-weight: 600;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary { background-color: var(--primary-orange); color: var(--white); padding: 10px 24px; font-size: 0.875rem; box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3); }
.btn-primary:hover { background-color: var(--primary-orange-hover); transform: translateY(-1px); }
.btn-large { padding: 16px 32px; font-size: 1.125rem; }

/* ========================================== */
/* 2. NAVIGATION BAR                          */
/* ========================================== */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background-color 0.3s ease;
}

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

.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-dark); }
.brand img { height: 48px; width: auto; object-fit: contain; }
.logo-icon { background-color: transparent !important; width: auto; height: auto; display: flex; align-items: center; justify-content: center; }
.brand-name { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.025em; }

.nav-links { display: none; gap: 32px; }
.nav-links a { text-decoration: none; color: var(--text-muted); font-weight: 500; font-size: 0.875rem; transition: color 0.2s; }
.nav-links a:hover { color: var(--primary-orange); }
@media (min-width: 768px) { .nav-links { display: flex; } }

/* Dropdown Sub-menus */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle, .nav-item { background: none; border: none; font-family: var(--font-main); color: var(--text-muted); font-weight: 500; font-size: 0.875rem; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 8px 0; transition: color 0.2s; }
.dropdown-toggle:hover, .nav-item:hover { color: var(--primary-orange); }
.chevron { width: 16px; height: 16px; transition: transform 0.2s; }
.dropdown:hover .chevron { transform: rotate(180deg); }

.dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background-color: var(--white); min-width: 200px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); border-radius: 12px; border: 1px solid rgba(0,0,0,0.05); padding: 8px; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 100; }
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-menu a { display: block; padding: 10px 16px; color: var(--text-dark); text-decoration: none; border-radius: 8px; font-weight: 500; font-size: 0.875rem; transition: background-color 0.2s, color 0.2s; }
.dropdown-menu a:hover { background-color: var(--bg-light); color: var(--primary-orange); }

/* ========================================== */
/* 3. HOMEPAGE: NEO-MODERN HERO               */
/* ========================================== */
.neo-hero {
    position: relative;
    padding: 160px 0 140px; /* Optimized padding spacing */
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: #fcfdfc;
    overflow: hidden;
}

/* Ambient Background Video */
.hero-bg-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg-layer video { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.2); }
.hero-bg-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(1px); z-index: 1; }

/* Ambient Glows */
.glow-orb { position: absolute; border-radius: 50%; filter: blur(120px); z-index: 2 !important; opacity: 0.6; }
.orb-blue { top: -10%; right: 10%; width: 600px; height: 600px; background: rgba(59, 130, 246, 0.3); }
.orb-orange { bottom: 0; left: -10%; width: 500px; height: 500px; background: rgba(249, 115, 22, 0.2); }

.hero-grid { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; }
@media (min-width: 992px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Hero Typography */
.status-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--white); padding: 8px 16px; border-radius: 9999px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 32px; }
.live-dot { width: 8px; height: 8px; background: var(--color-emerald); border-radius: 50%; animation: pulse 2s infinite; }
.pill-text { font-size: 0.875rem; font-weight: 600; color: var(--text-dark); }
.hero-text h1 { font-size: clamp(3rem, 5vw, 5rem); line-height: 1.05; margin-bottom: 24px; }
.gradient-text { background: linear-gradient(135deg, var(--primary-orange), #f43f5e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-text .hero-subtitle { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 40px; max-width: 550px; }

/* Hero Actions & Floating Video */
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.shadow-glow { box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.4); }
.btn-outline { background: white; color: var(--text-dark); border: 1px solid #e2e8f0; }
.btn-outline:hover { border-color: var(--text-dark); background: #f8fafc; }

.floating-video-wrapper { position: relative; border-radius: 32px; padding: 12px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 30px 60px -12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); transition: transform 0.5s ease; }
.floating-video-wrapper:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-10px); }
.neo-video { width: 100%; border-radius: 20px; aspect-ratio: 4/3; object-fit: cover; }
.float-badge { position: absolute; background: var(--white); padding: 12px 20px; border-radius: 16px; font-weight: 700; font-size: 0.875rem; display: flex; align-items: center; gap: 8px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.03); }
.badge-top { top: 40px; left: -30px; animation: floatUp 4s ease-in-out infinite; }
.badge-bottom { bottom: 40px; right: -30px; animation: floatUp 5s ease-in-out infinite reverse; }
@keyframes floatUp { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* ========================================== */
/* 4. HOMEPAGE: SYMMETRICAL TRI-CARD STATS    */
/* ========================================== */
.stats-section-alt { position: relative; z-index: 30; margin-top: -30px; padding-bottom: 40px; }
.stats-cards-wrapper { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 960px; margin: 0 auto; }
@media (min-width: 768px) { .stats-cards-wrapper { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.stat-box { background: var(--white); border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.01); border: 1px solid rgba(0,0,0,0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.stat-box:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1); }
.stat-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px auto; flex-shrink: 0; }
.stat-icon i { width: 28px; height: 28px; }

.box-blue .stat-icon { background: #eff6ff; color: var(--color-blue); }
.box-orange .stat-icon { background: #fff7ed; color: var(--primary-orange); }
.box-emerald .stat-icon { background: #ecfdf5; color: var(--color-emerald); }

.stat-box h2 { font-size: 2.5rem; margin-bottom: 4px; color: var(--text-dark); line-height: 1; }
.stat-box .stat-label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.stat-box .stat-sublabel { font-size: 0.75rem; margin-top: auto; padding-top: 16px; opacity: 0.8; }

/* ========================================== */
/* 5. HOMEPAGE: NEO BENTO FEATURES            */
/* ========================================== */
.neo-features { padding: 96px 0; }
.bento-home { display: flex; flex-direction: column; gap: 24px; max-width: 1100px; margin: 0 auto; }
.bento-main { display: grid; grid-template-columns: 1fr; border-radius: 32px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0,0,0,0.03); }
@media (min-width: 768px) { .bento-main { grid-template-columns: 1fr 1fr; align-items: center; } }
.bento-main .bento-content { padding: 48px; }
.bento-image-wrapper { height: 100%; min-height: 300px; }
.bento-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.bento-bottom-row { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .bento-bottom-row { grid-template-columns: 1fr 1fr; } }
.bento-bottom-row .bento-card { padding: 40px; border-radius: 32px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0,0,0,0.03); }

/* Reusable Icon Colors for Bento & Other Pages */
.icon-wrapper { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.bg-blue-light { background-color: #eff6ff; }
.bg-orange-light { background-color: #fff7ed; }
.bg-emerald-light { background-color: #ecfdf5; }
.icon-blue { color: var(--color-blue); }
.icon-orange { color: var(--primary-orange); }
.icon-emerald { color: var(--color-emerald); }
.feature-link { display: flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; margin-top: 24px; font-size: 0.875rem; }
.link-blue { color: var(--color-blue); }
.link-orange { color: var(--primary-orange); }
.link-emerald { color: var(--color-emerald); }

/* ========================================== */
/* 6. HOMEPAGE: 3D FOCUS LOGO CAROUSEL        */
/* ========================================== */
.partners-section { 
    padding: 64px 0; 
    border-top: 1px solid rgba(0,0,0,0.05); 
    background-color: var(--white); 
    overflow: hidden; 
}

.section-subtitle { 
    font-size: 0.875rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: var(--text-muted); 
    margin-bottom: 48px; 
}

/* 1. Increased height from 120px to 180px to fit larger logos */
.carousel-container { 
    position: relative; 
    width: 100%; 
    max-width: 1000px; 
    margin: 0 auto; 
    height: 200px; 
    display: flex; 
    align-items: center; 
}

.carousel-container::before, .carousel-container::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 150px; 
    height: 100%; 
    z-index: 2; 
    pointer-events: none; 
}

.carousel-container::before { left: 0; background: linear-gradient(to right, white, transparent); }
.carousel-container::after { right: 0; background: linear-gradient(to left, white, transparent); }
.carousel-track { display: flex; align-items: center; gap: 40px; transform: translateX(0); }

/* 2. Side logos: Blurred but keeping their original colors */
.carousel-item { 
    width: 200px; 
    flex-shrink: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    opacity: 0.5; /* Slightly increased opacity so the colors pop a bit more */
    filter: blur(2px); /* <-- Removed the grayscale rule here */
    transform: scale(0.85); 
}

/* 3. Center logo: Fully clear and massive */
.carousel-item.focused { 
    opacity: 1; 
    filter: blur(0px); /* <-- Removed the grayscale rule here too */
    transform: scale(1.45); 
    z-index: 10; 
}

/* 4. Increased max-height from 80px to 120px */
.partner-logo img { 
    width: 100%; 
    height: auto; 
    max-height: 120px; 
    object-fit: contain; 
    pointer-events: none; 
}

/* ========================================== */
/* 7. INTERNAL PAGES (Shared Elements)        */
/* ========================================== */
.internal-hero { padding: 160px 0 80px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.internal-hero h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 16px; }

/* Testimonials (Used on Gallery/Other pages) */
.video-testimonial-section { padding: 96px 0; background-color: #f1f5f9; }
.video-feature-card { background: var(--white); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05); max-width: 900px; margin: 0 auto; }
.video-thumbnail-container { position: relative; width: 100%; aspect-ratio: 16/9; background-color: #0f172a; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video-poster { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.3s ease; }
.play-button { position: absolute; width: 80px; height: 80px; background-color: var(--primary-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.4); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.play-icon { width: 32px; height: 32px; color: white; margin-left: 4px; }
.video-thumbnail-container:hover .play-button { transform: scale(1.1); background-color: var(--primary-orange-hover); }
.video-thumbnail-container:hover .video-poster { opacity: 0.6; }
.video-info { padding: 32px 40px; text-align: center; }
.video-info h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; color: var(--text-dark); }
.role { font-size: 0.875rem; color: var(--color-blue); font-weight: 600; margin-bottom: 16px; }
.quote { font-size: 1.125rem; font-style: italic; color: var(--text-muted); }

.student-testimonials { padding: 96px 0; }

/* ========================================== */
/* MODERN VIDEO TESTIMONIAL CARDS             */
/* ========================================== */

.cards-scroll-container {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    padding: 24px 24px 64px 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
    max-width: 1300px;
    margin: 0 auto;
}

.cards-scroll-container::-webkit-scrollbar {
    display: none;
}

.testi-card-modern {
    flex: 0 0 420px; /* INCREASED WIDTH: Makes the video & text larger */
    scroll-snap-align: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 0; /* Removed padding so video touches the edges */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Clips the top corners of the video to match the border radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* The New Video Container */
.testi-card-video {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #0f172a; 
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.testi-card-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The Text Container */
.testi-card-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Forces the card to stretch so the footer stays at the bottom */
}

/* Big Quote Marks */
.quote-mark {
    font-size: 64px;
    line-height: 0.5;
    color: #cbd5e1;
    font-family: Georgia, serif;
    margin-bottom: 16px;
    text-align: left;
}

/* Main Text */
.quote-text {
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    margin-bottom: 24px;
    flex-grow: 1; /* Pushes the profile footer to the very bottom perfectly */
    line-height: 1.6;
    text-align: left;
}

/* Gold Stars */
.stars {
    color: #fbbf24;
    font-size: 18px;
    margin-bottom: 24px;
    letter-spacing: 2px;
    text-align: left;
}

/* testimonial-section-updated.css */
.author-block {
    display: flex;
    flex-direction: column; /* Vertically center the info */
    align-items: center;
    gap: 8px; /* Remove large gap for frame, keep a small gap */
    text-align: center;
}

/* [REMOVE-FRAME-FIX] Remove all previous styling related to the frame */
.author-avatar {
    display: none; /* Directly remove any profile images from being shown */
}

/* Align and style the text for a clean, frame-less look */
.author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.author-name {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.author-role {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 2px;
}

.student-quote { font-size: 1rem; color: var(--text-dark); line-height: 1.6; margin-bottom: 24px; flex-grow: 1; }
.student-profile { display: flex; align-items: center; gap: 12px; border-top: 1px solid #f1f5f9; padding-top: 20px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; }
.text-blue { color: var(--color-blue); }
.text-orange { color: var(--primary-orange); }
.text-emerald { color: var(--color-emerald); }
.student-name { font-size: 0.875rem; font-weight: 700; margin-bottom: 2px; }
.student-grade { font-size: 0.75rem; color: var(--text-muted); }

/* Services Page (Bento Grid) */
.services-bento { padding: 80px 0; }
.bento-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; } .bento-large { grid-column: span 2; grid-row: span 2; } .bento-wide { grid-column: span 3; } }
.bento-item { border-radius: 24px; padding: 40px; transition: transform 0.3s ease; }
.bento-item:hover { transform: translateY(-4px); }
.bento-item.border { border: 1px solid rgba(0,0,0,0.05); }
.bento-item h3 { font-size: 1.5rem; margin-bottom: 12px; }
.bento-item h4 { font-size: 1.25rem; margin-bottom: 8px; color: var(--text-dark); }
.bento-item p { color: var(--text-muted); margin-bottom: 24px; }
.bento-features { list-style: none; padding: 0; }
.bento-features li { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-weight: 500; color: var(--text-dark); }
.flex-row { display: flex; gap: 24px; align-items: flex-start; }
.flex-icon { flex-shrink: 0; padding: 12px; background: #eff6ff; border-radius: 12px; }

/* Why BOT Page (Comparison) */
.comparison-section { padding: 80px 0; }
.comparison-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .comparison-grid { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.compare-card { background: var(--white); padding: 40px; border-radius: 24px; border: 1px solid rgba(0,0,0,0.05); }
.compare-card.standard { background: #f8fafc; opacity: 0.8; }
.compare-card.highlight { position: relative; box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.15); border: 2px solid var(--primary-orange); transform: scale(1.02); }
.highlight-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--primary-orange); color: white; padding: 6px 16px; border-radius: 20px; font-size: 0.875rem; font-weight: 700; }
.compare-list { list-style: none; margin-top: 24px; }
.compare-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--text-muted); }
.compare-card.highlight .compare-list li { color: var(--text-dark); font-weight: 500; }
.compare-list i { width: 20px; height: 20px; flex-shrink: 0; }
.standard .compare-list i { color: #ef4444; }

/* About Us Page (Timeline & Team) */
.timeline-section { padding: 80px 0; }
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #e2e8f0; }
.timeline-item { position: relative; padding-bottom: 48px; }
.timeline-dot { position: absolute; left: -29px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; border: 4px solid var(--white); box-shadow: 0 0 0 4px var(--bg-light); }
.timeline-dot.bg-blue { background: var(--color-blue); }
.timeline-dot.bg-orange { background: var(--primary-orange); }
.timeline-content { background: var(--white); padding: 24px 32px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
.timeline-content h3 { margin-bottom: 8px; font-size: 1.25rem; }
.timeline-content.border-orange { border-color: var(--primary-orange); background: #fff7ed; }
.text-orange { color: var(--primary-orange); }

.team-section { padding: 80px 0; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; }
.flip-card { background-color: transparent; height: 350px; perspective: 1000px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 24px; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }
.flip-card-front { background-color: var(--white); border: 1px solid rgba(0,0,0,0.05); }
.flip-card-front img { width: 180px; height: 180px; border-radius: 50%; margin-bottom: 16px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
.flip-card-front h4 { font-size: 1.25rem; margin-bottom: 4px; }
.flip-card-front p { color: var(--text-muted); font-size: 0.875rem; font-weight: 500; }
.flip-card-back { background-color: var(--color-blue); color: white; transform: rotateY(180deg); text-align: left; align-items: flex-start; justify-content: flex-start; padding: 40px 32px; }
.flip-card-back.bg-orange { background-color: var(--primary-orange); }
.flip-card-back.bg-emerald { background-color: var(--color-emerald); }
.flip-card-back h4 { color: white; margin-bottom: 8px; font-size: 1.5rem; }
.flip-card-back .hub { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; opacity: 0.9; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.2); width: 100%; }
.flip-card-back .hub i { width: 16px; height: 16px; }
.flip-card-back .bio { line-height: 1.6; font-size: 0.95rem; }

/* Contact Page (Split Form) */
.split-contact { display: grid; grid-template-columns: 1fr; min-height: 100vh; padding-top: 80px; }
@media (min-width: 992px) { .split-contact { grid-template-columns: 1fr 1fr; } }
.contact-visual { position: relative; background: var(--color-blue); color: white; padding: 64px 40px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.visual-overlay { position: absolute; inset: 0; background-image: url('https://via.placeholder.com/800x1000/1e3a8a/3b82f6'); background-size: cover; background-position: center; opacity: 0.4; mix-blend-mode: multiply; }
.visual-content { position: relative; z-index: 10; max-width: 450px; margin: 0 auto; }
.visual-content h2 { color: white; font-size: 3rem; margin-bottom: 16px; }
.visual-content p { font-size: 1.125rem; opacity: 0.9; margin-bottom: 48px; }
.contact-hubs h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; margin-bottom: 16px; }
.hub-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.hub-tags span { background: rgba(255,255,255,0.1); backdrop-filter: blur(4px); padding: 6px 16px; border-radius: 20px; font-size: 0.875rem; font-weight: 500; border: 1px solid rgba(255,255,255,0.2); }
.contact-form-container { padding: 64px 24px; display: flex; align-items: center; justify-content: center; background: var(--white); }
.guided-form { width: 100%; max-width: 500px; }
.form-title { font-size: 2rem; margin-bottom: 32px; color: var(--text-dark); }
.form-group { margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guided-form label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.form-input { width: 100%; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: var(--font-main); font-size: 1rem; color: var(--text-dark); background: #f8fafc; transition: all 0.2s; outline: none; }
.form-input:focus { border-color: var(--primary-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); background: var(--white); }
select.form-input { appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" stroke="%23475569" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
.w-full { width: 100%; }
.mt-4 { margin-top: 16px; }

/* Gallery Page (Masonry) */
.gallery-section { padding: 64px 0 96px; }
.gallery-filters { display: flex; justify-content: center; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; }
.filter-btn { background: var(--white); border: 1px solid #cbd5e1; padding: 8px 24px; border-radius: 9999px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.filter-btn:hover, .filter-btn.active { background: var(--primary-orange); color: white; border-color: var(--primary-orange); }
.masonry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 250px; gap: 24px; grid-auto-flow: dense; }
.masonry-item { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; }
.masonry-item.tall { grid-row: span 2; }
.masonry-item.wide { grid-column: span 2; }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.masonry-item:hover img { transform: scale(1.05); }
.item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 24px; }
.masonry-item:hover .item-overlay { opacity: 1; }
.item-overlay span { color: white; font-weight: 600; font-size: 1.125rem; transform: translateY(20px); transition: transform 0.3s ease; }
.masonry-item:hover .item-overlay span { transform: translateY(0); }

/* ========================================== */
/* RECENT EVENTS & UPDATES (IMAGE MATCH)      */
/* ========================================== */
.events-modern-section {
    padding: 80px 0;
    background-color: #f8fafc; /* Very light slate background */
}

.events-header {
    text-align: center;
    margin-bottom: 50px;
}

.events-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
    font-family: var(--font-header, 'Orbitron', sans-serif);
}

.events-header p {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
}

.events-modern-grid {
    display: grid;
    /* Adapts to 1, 2, or 3 columns based on screen size */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 24px;
}

/* The Card Styling */
.modern-event-card {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0,0,0,0.03);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modern-event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.1);
}

/* The Image Box */
.event-img-box {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.event-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.modern-event-card:hover .event-img-box img {
    transform: scale(1.08); /* Soft zoom on hover */
}

/* The Hover Overlay */
.event-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-weight: 600;
    font-size: 1.1rem;
    gap: 8px;
    backdrop-filter: blur(2px);
}

.modern-event-card:hover .event-overlay { 
    opacity: 1; 
}

/* The Text Box */
.event-text-box {
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes the button to the bottom evenly */
}

.event-category {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.event-category.upcoming { color: var(--primary-orange, #f97316); }
.event-category.completed { color: #10b981; } /* Emerald Green for past events */

.event-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    line-height: 1.3;
}

.event-description {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

.event-read-more {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-orange, #f97316);
    font-weight: 600;
    font-size: 1rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: gap 0.3s ease; /* Makes the arrow slide over slightly on hover! */
}

.event-read-more i {
    width: 18px;
    height: 18px;
}

.modern-event-card:hover .event-read-more {
    gap: 12px; /* The arrow slides right when card is hovered */
}
/* Blogs Page (Cards) */
.blog-section { padding: 80px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.blog-card { background: var(--white); border-radius: 24px; overflow: hidden; border: 1px solid rgba(0,0,0,0.05); transition: box-shadow 0.3s; display: flex; flex-direction: column; }
.blog-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05); }
.blog-image { width: 100%; height: 240px; object-fit: cover; }
.blog-content { padding: 32px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 0.875rem; font-weight: 600; }
.category { padding: 4px 12px; border-radius: 6px; }
.tag-blue { background: #eff6ff; color: var(--color-blue); }
.tag-orange { background: #fff7ed; color: var(--primary-orange); }
.tag-emerald { background: #ecfdf5; color: var(--color-emerald); }
.read-time { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.read-time i { width: 14px; height: 14px; }
.blog-content h3 { font-size: 1.25rem; line-height: 1.4; margin-bottom: 12px; }
.blog-content p { margin-bottom: 24px; flex-grow: 1; }
.read-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-dark); text-decoration: none; transition: color 0.2s; }
.read-more:hover { color: var(--primary-orange); }

/* ========================================== */
/* 8. MASTER FLOATING FOOTER                  */
/* ========================================== */
.site-footer { 
    padding-top: 40px; /* Reduced from 120px since the box is gone */
    margin-top: 0px; 
    background-color: #f8fafc; 
    border-top: 1px solid rgba(0,0,0,0.02); 
}
.relative-wrapper { position: relative; }

.floating-cta { position: absolute; top: -220px; left: 24px; right: 24px; background: linear-gradient(135deg, var(--color-blue), #1e3a8a); border-radius: 24px; padding: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.25); z-index: 40; }
@media (min-width: 992px) { .floating-cta { flex-direction: row; text-align: left; justify-content: space-between; left: 0; right: 0; padding: 56px 64px; } }
.cta-content { color: var(--white); max-width: 600px; }
.cta-content h2 { color: var(--white); margin-bottom: 16px; font-size: 2rem; }
.cta-content p { color: #bfdbfe; font-size: 1.125rem; }
.cta-btn { background-color: var(--white); color: var(--color-blue); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); white-space: nowrap; }
.cta-btn:hover { background-color: var(--bg-light); color: var(--text-dark); }

.footer-main { padding: 80px 0 64px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } }

.footer-brand .brand-bio { margin: 24px 0; max-width: 300px; font-size: 0.95rem; }
.footer-logo-wrapper { color: var(--text-dark); text-decoration: none; display: flex; align-items: center; gap: 8px;}
/* Footer Social Icons Visibility Fix for <img> tags */
.social-links {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.social-links a {
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    width: 40px !important; 
    height: 40px !important; 
    border-radius: 50% !important;
    background-color: #f1f5f9 !important; 
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.social-links a img {
    width: 20px !important; 
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
    /* This filter turns any colored SVG completely black */
    filter: brightness(0) !important; 
    transition: all 0.3s ease !important;
}

.social-links a:hover { 
    background-color: var(--primary-orange, #f97316) !important; 
}

.social-links a:hover img { 
    /* This filter turns the icon pure white when hovered */
    filter: brightness(0) invert(1) !important; 
}

.footer-links h4, .footer-contact h4 { font-size: 1.125rem; font-weight: 700; color: var(--text-dark); margin-bottom: 24px; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--primary-orange); }

.contact-info { list-style: none; padding: 0; }
.contact-info li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; font-weight: 500; }
.contact-info i { width: 20px; height: 20px; color: var(--color-blue); flex-shrink: 0; margin-top: 2px; }

.footer-bottom { border-top: 1px solid rgba(0,0,0,0.05); padding: 24px 0; }
.bottom-content { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
@media (min-width: 768px) { .bottom-content { flex-direction: row; justify-content: space-between; text-align: left; } }
.bottom-content p { font-size: 0.875rem; margin: 0; }
.legal-links { display: flex; gap: 24px; }
.legal-links a { color: var(--text-muted); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s; }
.legal-links a:hover { color: var(--primary-orange); }

/* ========================================== */
/* VIMEO-STYLE AUTO-SCROLLING TESTIMONIALS    */
/* ========================================== */
.principal-testimonials {
    padding: 96px 0;
    background-color: #f8fafc;
    overflow: hidden; 
}

.testimonial-scroll-wrapper {
    overflow: hidden;
    padding: 24px 0 48px;
    margin: 0 -24px;
    /* This creates the smooth fade-out effect on the left and right edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.testimonial-track {
    display: flex;
    gap: 24px;
    width: max-content;
    /* 40s is the speed. Change to 30s for faster, 50s for slower */
    animation: scroll-testimonials 40s linear infinite;
}

/* Pause the scrolling when a user hovers to read a quote */
.testimonial-scroll-wrapper:hover .testimonial-track {
    animation-play-state: paused;
}

/* The Infinite Loop Animation */
@keyframes scroll-testimonials {
    0% { transform: translateX(0); }
    /* Shifts exactly half the total width (the original 4 cards) + half the gap */
    100% { transform: translateX(calc(-50% - 12px)); }
}

.testi-card {
    flex: 0 0 350px; 
    background: var(--white);
    border-radius: 16px;
    padding: 48px 32px 40px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
    .testi-card { flex: 0 0 400px; } 
}

/* Quote Icon & Text */
.quote-icon-large { font-size: 4rem; line-height: 0.5; color: #cbd5e1; font-family: Georgia, serif; margin-bottom: 16px; }
.quote-text { font-size: 1.125rem; font-weight: 600; color: var(--text-dark); line-height: 1.5; margin-bottom: 24px; flex-grow: 1; }
.star-rating { color: #fbbf24; font-size: 1.25rem; letter-spacing: 2px; margin-bottom: 24px; }

/* Profile Block */
.testi-profile { display: flex; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid #f1f5f9; width: 100%; justify-content: center; }
.testi-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testi-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.testi-info strong { font-size: 0.9rem; color: var(--text-dark); line-height: 1.2; }
.testi-info span { font-size: 0.8rem; color: var(--text-muted); }

/* ========================================== */
/* STUDENT SPOTLIGHT (DARK CARDS)             */
/* ========================================== */

.student-grid { 
    display: grid; 
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 32px; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 24px;
}

/* 3 columns on desktop */
@media (min-width: 768px) {
    .student-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.student-card-dark { 
    background: #0f172a; 
    border-radius: 24px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    height: 100%; /* FORCES all cards in the row to be the exact same height */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
    border: 1px solid rgba(255,255,255,0.1); 
}

/* The Orange Glow Hover Effect */
.student-card-dark:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.15); 
    border-color: rgba(249, 115, 22, 0.4); 
}

/* --- STRICT VIDEO LOCK --- */
.student-video-wrap { 
    width: 100%; 
    height: 300px; /* LOCKS the video height so horizontal and vertical videos match perfectly */
    flex-shrink: 0; /* Prevents the video box from squishing */
    background: #000; 
}

.student-video-wrap video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* This is the magic line: it safely crops tall videos to fit the uniform box without stretching them */
    display: block; 
}

/* Text Section */
.student-content { 
    padding: 32px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
}

.student-quote-icon { 
    color: var(--primary-orange); 
    width: 32px; 
    height: 32px; 
    margin-bottom: 16px; 
    opacity: 0.9; 
}

.student-content p { 
    color: #f8fafc; /* Near white */
    font-size: 15px; 
    line-height: 1.6; 
    font-style: italic; 
    margin-bottom: 24px; 
    flex-grow: 1; 
}

/* Student Profile Block */
.student-info { 
    display: flex; 
    flex-direction: column; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 16px; 
}

.s-name { 
    color: var(--primary-orange); 
    font-weight: 700; 
    font-size: 16px; 
    margin-bottom: 4px; 
}

.s-grade { 
    color: #94a3b8; /* Slate gray */
    font-size: 13px; 
    font-weight: 500;
}

/* ========================================== */
/* PARTNERS PAGE (Fixed 4-Column & Modal)     */
/* ========================================== */
/* ========================================== */
/* TABS STYLING (OUTLINE PILL DESIGN)         */
/* ========================================== */
.state-tabs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px; /* Space between the buttons */
    margin-bottom: 48px;
}

.state-tab {
    background-color: #ffffff; /* Clean white background */
    border: 1px solid #cbd5e1; /* The delicate gray outline */
    padding: 8px 24px;
    border-radius: 9999px; /* Perfect pill shape */
    font-size: 0.95rem;
    font-weight: 500;
    color: #475569; /* Slate gray text */
    cursor: pointer;
    transition: all 0.3s ease;
}

.state-tab:hover {
    border-color: #94a3b8; /* Outline gets slightly darker on hover */
    background-color: #f8fafc;
}

/* The Active (Selected) Tab */
.state-tab.active {
    background-color: var(--primary-orange, #f97316); /* Solid orange fill */
    border-color: var(--primary-orange, #f97316); /* Replaces gray outline with orange */
    color: #ffffff; /* White text */
    box-shadow: none; /* Flat design, no heavy shadows */
}
.partners {
  background: var(--bg-color, #f8fafc); /* Fallback color added just in case */
  padding: 80px 20px;
  text-align: center;
}

.partners h2 {
  font-size: 2.2rem;
  color: var(--text-main, #0f172a);
  margin-bottom: 50px;
}

.partner-grid {
  display: grid;
  /* FORCES exactly 4 columns. */
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
}

.partner {
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ================= PARTNER LOGO FIX ================= */
.partner img {
  width: 100%;
  max-width: 200px;    /* Keeps logos from getting too huge */
  height: 120px;       /* CRITICAL: Reserves space so layout doesn't jump */
  object-fit: contain; /* Keeps logo shape correct (doesn't stretch) */
  
  /* Loading Style */
  background-color: #f0f0f0; /* Light grey box while image loads */
  border-radius: 8px;
  padding: 10px;       /* Nice whitespace around the logo */
  
  /* Interaction */
  cursor: pointer;     /* Shows 'Hand' icon so user knows to click */
  transition: all 0.3s ease;
}

/* Hover Effect (Combined to make them pop and turn white) */
.partner img:hover {
  transform: scale(1.1);
  background-color: #ffffff; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  filter: grayscale(0%);
  opacity: 1;
}

/* Optional: Dark Mode Placeholder */
body.dark-theme .partner img {
  background-color: rgba(255, 255, 255, 0.1); /* Dark grey placeholder */
}

/* --- MODAL STYLING (For the Pop-out effect) --- */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9); /* Dark background */
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px); /* Added a nice modern blur */
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 10px;
  object-fit: contain;
  background: white; /* White background for transparent logos */
  padding: 40px;
  animation: zoom 0.3s;
}

.modal-close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.modal-close:hover {
  color: var(--primary-orange, #f97316);
}

@keyframes zoom {
  from {transform:scale(0.5); opacity: 0;}
  to {transform:scale(1); opacity: 1;}
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .partner-grid { grid-template-columns: repeat(3, 1fr); } /* 3 on tablets */
}

@media (max-width: 600px) {
  .partner-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 on mobile */
    gap: 15px;
  }
}
/* ========================================== */
/* STATS TEXT ANIMATION: TECH SWEEP           */
/* ========================================== */
.partners h2, .stats-highlight {
    /* Creates a gradient using your dark text color and primary orange */
    background: linear-gradient(
        to right, 
        #0f172a 20%, 
        #f97316 50%, 
        #0f172a 80%
    );
    background-size: 200% auto;
    
    /* Clips the background to the shape of the text */
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Runs the animation continuously */
    animation: shineSweep 4s linear infinite;
}

@keyframes shineSweep {
    to {
        background-position: 200% center;
    }
}

/* ========================================== */
/* ABOUT US INTRODUCTION STYLING              */
/* ========================================== */

.about-intro-section {
    padding: 80px 0 20px 0; /* Less bottom padding so it flows naturally into the Team section */
    background-color: #ffffff; /* Clean white background */
}

.about-intro-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* The right text side is slightly wider */
    gap: 60px;
    align-items: start;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Left Side (Headline & Mission) --- */
.about-intro-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 32px;
    font-family: var(--font-header, 'Orbitron', sans-serif);
}

.about-intro-title span {
    color: var(--primary-orange, #f97316); /* Pops the word "Innovators" in orange */
}

.mission-box {
    background: #f8fafc; /* Very light slate gray */
    border-left: 4px solid var(--primary-orange, #f97316);
    padding: 32px;
    border-radius: 0 16px 16px 0; /* Rounds the right corners, keeps left flat against the border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.mission-icon {
    color: var(--primary-orange, #f97316);
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
}

.mission-box h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.mission-box p {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

/* --- Right Side (The Details) --- */
.about-intro-right p {
    font-size: 1.1rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 24px;
    font-family: var(--font-main, 'Poppins', sans-serif);
}

.about-intro-right p:last-child {
    margin-bottom: 0;
}

.about-intro-right strong {
    color: #111827; /* Makes bold words stand out darker */
    font-weight: 600;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 950px) {
    .about-intro-container {
        grid-template-columns: 1fr; /* Stacks the columns on top of each other for phones/tablets */
        gap: 40px;
    }
    
    .about-intro-title {
        font-size: 2.2rem;
    }
}

/* ========================================== */
/* WHY BOT? SECTION STYLING (VERTICAL TABS)   */
/* ========================================== */

.whybot-section {
    padding: 100px 0;
    background-color: #f9fafb; /* Light grey section background */
    text-align: center;
}

.whybot-main-title {
    margin-bottom: 60px;
    font-size: 2.8rem;
    font-weight: 800;
}

.whybot-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* List is narrower than content box */
    gap: 50px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    align-items: start;
    position: relative;
}

/* --- Left Side: Point List --- */
.whybot-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.whybot-point-btn {
    background-color: #ffffff; /* Default button color */
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 18px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-align: left;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.whybot-point-btn:hover {
    background-color: #f3f4f6;
    transform: translateX(5px);
}

/* Selected/Active Point State */
.whybot-point-btn.active {
    background-color: #0f172a; /* Dark background for selected point */
    border-color: #0f172a;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.point-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e5e7eb; /* Muted default number bg */
    color: #4b5563; /* Muted default number text */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Selected Number State */
.whybot-point-btn.active .point-number {
    background-color: var(--primary-orange, #f97316); /* Orange number bg on selection */
    color: #ffffff; /* White number text on selection */
}

.point-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937; /* Muted text default */
}

/* Selected Text State */
.whybot-point-btn.active .point-title {
    color: #ffffff; /* White text on selection */
}

/* --- Right Side: Content Box --- */
.whybot-detail-box {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08);
    position: relative;
    border: 1px solid rgba(0,0,0,0.03);
    min-height: 450px; /* Ensures consistent box height */
    opacity: 1;
    transition: opacity 0.3s ease;
}

.detail-box-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.detail-text {
    text-align: left;
}

.detail-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-orange, #f97316); /* Theme title color */
    margin-bottom: 20px;
}

.detail-description {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Image styling in box */
.detail-image-wrapper {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

.detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive adjust for mobile */
@media (max-width: 1024px) {
    .whybot-layout {
        grid-template-columns: 1fr; /* Stack layout on mobile */
        gap: 30px;
    }
    
    .whybot-list {
        order: 2; /* Move list below box on mobile */
    }
    
    .detail-box-inner {
        grid-template-columns: 1fr; /* Stack text/image in box */
        gap: 20px;
    }
}
/* ========================================== */
/* AIM, VISION, MISSION (DARK 3-COLUMN ROW)   */
/* ========================================== */

.avm-dark-section {
    padding: 100px 0;
    background-color: #0f172a; /* Dark Tech Background */
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px);
    background-size: 30px 30px;
}

.avm-row-grid {
    display: grid;
    /* This forces all 3 items into a single, perfectly spaced row */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: stretch; /* Makes sure all 3 boxes stretch to the exact same height */
}

/* --- THE CARDS (Sleek Dark Glass!) --- */
.avm-dark-card {
    background-color: rgba(30, 41, 59, 0.6); /* Semi-transparent dark blue/slate */
    backdrop-filter: blur(8px); /* Gives a premium glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Very subtle white border */
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.avm-dark-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-color: var(--primary-orange, #f97316); /* Lights up the border on hover */
}

.avm-dark-icon {
    width: 72px;
    height: 72px;
    background-color: #0f172a; /* Matches the deep background */
    border: 3px solid var(--primary-orange, #f97316);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-orange, #f97316);
    margin-bottom: 24px;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.3); /* Glowing orange effect */
}

.avm-dark-icon i {
    width: 32px;
    height: 32px;
}

.avm-dark-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff; /* Crisp white text */
    margin-bottom: 12px;
    letter-spacing: 1px;
    font-family: var(--font-header, 'Orbitron', sans-serif);
}

.title-underline-center {
    width: 50px;
    height: 3px;
    background-color: var(--primary-orange, #f97316);
    margin-bottom: 24px;
}

.avm-dark-card p {
    font-size: 1rem;
    color: #cbd5e1; /* Easy-to-read light slate gray */
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
    word-wrap: break-word; /* Prevents text from breaking out of the box */
}

/* ========================================== */
/* Mobile Devices: Stacks the boxes neatly    */
/* ========================================== */
@media (max-width: 950px) {
    .avm-row-grid {
        grid-template-columns: 1fr; /* Stacks them 1 on top of the other for small screens */
    }
}
/* ========================================== */
/* MODERN CONTACT US SECTION STYLING          */
/* ========================================== */

.contact-modern-section {
    padding: 100px 20px;
    background-color: #f8fafc; /* Subtle light background to make the white container pop */
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-modern-container {
    position: relative;
    max-width: 1100px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    overflow: hidden; /* Keeps the orange shape contained neatly inside the box */
}

/* The Orange Background Shape on the left */
.contact-shape {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%; /* Covers left side */
    background-color: var(--primary-orange, #f97316);
    border-top-right-radius: 120px; /* Gives it that custom rounded design */
    border-bottom-right-radius: 20px;
    z-index: 1;
}

.contact-modern-content {
    position: relative;
    z-index: 2; /* Keeps text and form above the background shape */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 60px;
    align-items: center;
}

/* --- Left Side: Info Styling --- */
.contact-info-side {
    color: #ffffff; /* White text on orange background */
    padding-right: 20px;
}

.contact-info-side h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    font-family: var(--font-header, 'Orbitron', sans-serif);
}

.contact-info-side p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.95;
    font-family: var(--font-main, 'Poppins', sans-serif);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.1rem;
    font-weight: 500;
}

.contact-item i {
    width: 24px;
    height: 24px;
}

.contact-socials {
    display: flex;
    gap: 16px;
}

.contact-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2); /* Slightly visible circle */
    color: #ffffff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-socials a:hover {
    background-color: #ffffff;
    color: var(--primary-orange, #f97316); /* Flips to orange on hover */
    transform: translateY(-3px);
}

/* --- Right Side: Form Styling --- */
.contact-form-side {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); /* Lifts the form slightly off the white box */
}

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

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    color: #1f2937;
    background-color: #f8fafc;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-orange, #f97316);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
    background-color: #ffffff;
}

.submit-btn {
    width: 100%;
    padding: 16px;
    background-color: var(--primary-orange, #f97316);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #ea580c; /* Darker orange */
    transform: translateY(-2px);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 950px) {
    /* Shifts the orange shape to the top for mobile devices */
    .contact-shape {
        width: 100%;
        height: 35%;
        border-top-right-radius: 0;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

    .contact-modern-content {
        grid-template-columns: 1fr; /* Stacks text on top of form */
        padding: 40px 24px;
        gap: 40px;
    }

    .contact-info-side {
        padding-right: 0;
        text-align: center; /* Centers text for mobile */
    }

    .contact-details {
        align-items: center;
    }

    .contact-socials {
        justify-content: center;
    }

    .modern-form .form-row {
        grid-template-columns: 1fr; /* Stacks First/Last name on mobile */
    }
}

/* ========================================== */
/* CONTACT US (DARK GLASS & CYAN THEME)       */
/* ========================================== */

.contact-glass-section {
    padding: 100px 0;
    background-color: #0f172a; /* Deep tech background to match the rest of the site */
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px);
    background-size: 30px 30px;
}

.contact-glass-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: center;
}

/* --- Left Side: Info --- */
.glass-title {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    font-family: var(--font-header, 'Orbitron', sans-serif);
}

.glass-subtitle {
    font-size: 1.1rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin-bottom: 40px;
}

.info-card-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-glass-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 24px;
    border-radius: 16px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.info-glass-card:hover {
    transform: translateX(10px);
    border-color: #38bdf8; /* Futuristic Cyan accent */
}

.info-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(56, 189, 248, 0.1); /* Soft cyan glow */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8; /* Cyan icon */
}

.info-text h4 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.info-text p {
    color: #94a3b8;
    font-size: 0.95rem;
    margin: 0;
}

/* --- Right Side: The Form --- */
.contact-glass-form-wrapper {
    background-color: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

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

.glass-input-group {
    margin-bottom: 24px;
}

.glass-input-group input,
.glass-input-group textarea {
    width: 100%;
    background-color: rgba(15, 23, 42, 0.6); /* Darker inner fields */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 20px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.glass-input-group input::placeholder,
.glass-input-group textarea::placeholder {
    color: #64748b;
}

/* Focus state turns the border Cyan */
.glass-input-group input:focus,
.glass-input-group textarea:focus {
    outline: none;
    border-color: #38bdf8;
    background-color: rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

/* The ONLY Orange Element */
.glass-submit-btn {
    width: 100%;
    background-color: var(--primary-orange, #f97316); /* The requested orange! */
    color: #ffffff;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.glass-submit-btn:hover {
    background-color: #ea580c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 950px) {
    .contact-glass-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .contact-glass-form-wrapper {
        padding: 30px 20px;
    }
    
    .form-row-dual {
        grid-template-columns: 1fr;
    }
}

/* ========================================== */
/* SIMPLE POSTER MODAL STYLING                */
/* ========================================== */
.poster-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 100000; /* A bit higher than the main gallery modal */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}

.poster-modal.active {
    display: flex; /* Shows modal when active class is added */
}

.poster-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Deep dark background */
    backdrop-filter: blur(5px);
}

.poster-close {
    position: absolute;
    top: 30px; right: 30px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 2;
}
.poster-close:hover { opacity: 1; transform: scale(1.1); }
.poster-close i { width: 40px; height: 40px; } /* A nice large close button */

.poster-content-area {
    position: relative;
    width: 100%;
    height: 90vh; /* Takes most of the screen height */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 20px;
}

.poster-wrapper {
    max-width: 90%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poster-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Keeps entire image in view without cropping */
    border-radius: 12px;
    border: 4px solid white; /* Adds a nice frame, making it look like a poster */
    box-shadow: 0 15px 50px rgba(0,0,0,0.6);
}

/* ========================================== */
/* HERO SECTION FIXED & MOBILE READY          */
/* ========================================== */

/* The image visual area */
.hero-visual {
    position: relative; /* KEY for positioning the cards! */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* 1. Fix Floating Badges Alignment with image */
.hero-image-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.hero-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Base style for the floating badges */
.float-badge {
    position: absolute;
    background: #ffffff;
    padding: 12px 24px;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 1rem;
    color: #111827;
    z-index: 10;
}

.float-badge i { width: 24px; height: 24px; }
.badge-top { top: 20px; left: -30px; } /* Now overlaps the top-left corner of the image */
.badge-bottom { bottom: 20px; right: -30px; } /* Now overlaps the bottom-right corner of the image */

/* 2. Center the "Trusted by..." text */
.partners-section .section-subtitle {
    text-align: center !important; /* Forces the text to center */
    margin: 0 auto 40px auto;
    display: block;
    width: 100%;
    font-size: 1.5rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 1px;
}


/* ========================================== */
/* MOBILE FRIENDLY RESPONSIVENESS (BREAKPOINTS) */
/* ========================================== */

/* A. For screens smaller than 950px (e.g., Tablets, Small Laptops) */
@media (max-width: 950px) {
    /* Main Hero Grid Stacks vertically */
    .hero-grid { 
        grid-template-columns: 1fr; 
        text-align: center; 
        gap: 50px; 
        padding-top: 120px; /* More space for the navbar */
    }
    
    .hero h1 { font-size: 2.8rem; }
    
    .hero-actions { 
        justify-content: center; 
        flex-direction: column; /* Buttons stack on top of each other */
        gap: 16px; 
    }
    
    .hero-actions .btn { width: 100%; } /* Buttons fill the width on mobile */

    /* [MOBILE FLX] Pull badges inside image bounds on mobile so they don't break width */
    .badge-top { top: 10px; left: 10px; padding: 10px 16px; font-size: 0.9rem;}
    .badge-bottom { bottom: 10px; right: 10px; padding: 10px 16px; font-size: 0.9rem;}

    /* Stats Section Stacks */
    .stats-cards-wrapper { 
        display: flex;
        flex-direction: column;
        gap: 24px; 
    }
    
    /* Center the partner text even on mobile */
    .partners-section .section-subtitle { font-size: 1.2rem; }
}

/* B. For screens smaller than 600px (e.g., Mobile Phones) */
@media (max-width: 600px) {
    .container { padding: 0 16px; }
    .hero h1 { font-size: 2.3rem; }
}

/* Modal Background */
.demo-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.demo-modal.active {
    display: flex; /* Shown when active */
}

.demo-modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
}

/* Modal Box */
.demo-modal-content {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 500px;
    padding: 40px;
    border-radius: 24px;
    z-index: 10;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    animation: modalSlideUp 0.3s ease-out forwards;
}

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

.demo-modal-close {
    position: absolute;
    top: 20px; right: 20px;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s;
}

.demo-modal-close:hover { color: var(--primary-orange, #f97316); }

/* Modal Text & Form */
.demo-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
    font-family: var(--font-header, 'Orbitron', sans-serif);
}

.demo-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 24px;
}

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

/* Re-using the clean form styles from your contact page */
.demo-form .form-group { margin-bottom: 16px; display: flex; flex-direction: column; }
.demo-form label { font-size: 0.85rem; font-weight: 600; color: #4b5563; margin-bottom: 6px; }
.demo-form input {
    width: 100%; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 10px;
    font-size: 1rem; color: #1f2937; background: #f8fafc; transition: all 0.3s;
}
.demo-form input:focus {
    outline: none; border-color: var(--primary-orange, #f97316);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); background: #ffffff;
}
/* ========================================== */
/* 1. HERO FLOATING BADGES - ABSOLUTE FIX     */
/* ========================================== */
.hero-visual {
    /* Remove relative positioning from here */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero-image-wrapper {
    /* THIS must be the relative container so badges stick to IT, not the screen */
    position: relative !important; 
    width: 100%;
    max-width: 600px; /* Crucial: restricts width so badges don't fly away */
    min-height: 216px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    /* Remove overflow: hidden if it's cutting off the badges */
}

.hero-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px; /* Ensure image is rounded */
    display: block;
}

.float-badge {
    position: absolute;
    background: #ffffff;
    padding: 12px 24px;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 1rem;
    color: #111827;
    z-index: 100; /* Ensure they are above the image */
}

/* Position them relative to the .hero-image-wrapper */
.badge-top { 
    top: -20px !important; 
    left: -20px !important; 
} 
.badge-bottom { 
    bottom: -20px !important; 
    right: -20px !important; 
}

/* ========================================== */
/* 2. CENTER "TRUSTED BY" TEXT - ABSOLUTE FIX */
/* ========================================== */
/* Target the specific section to override any other rules */
section.partners-section .section-subtitle,
.partners-section h3.section-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
}

/* ========================================== */
/* 3. COMPLETELY REMOVE TESTIMONIAL IMAGES    */
/* ========================================== */
.author-avatar {
    display: none !important; 
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
}

/* Re-center the text block now that the image is gone */
.author-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

/* ========================================== */
/* 4. MODAL Z-INDEX FIX (So Navbar doesn't hide it) */
/* ========================================== */
.demo-modal {
    z-index: 9999999 !important; /* Extremely high to guarantee it sits above the navbar */
}

/* ========================================== */
/* HOME PAGE STRICT OVERRIDES                 */
/* ========================================== */

/* 1. TESTIMONIALS: DESTROY THE EMPTY CIRCLES */
.testi-card-modern .author-avatar,
.testi-card-modern .author-image-placeholder,
.testi-card-modern .avatar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.author-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    margin-top: 15px !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* 2. CENTER THE "TRUSTED BY" TEXT */
.partners-section .section-subtitle {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.partners-section .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 3. HERO BADGE ALIGNMENT */
.hero-visual {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.hero-image-wrapper {
    position: relative !important; /* CRITICAL: This locks the badges to the image */
    max-width: 600px !important;
    margin: 0 auto !important;
}
.float-badge {
    position: absolute !important;
    z-index: 100 !important;
}
/* Lock badges tightly to the corners */
.badge-top { top: -15px !important; left: -15px !important; }
.badge-bottom { bottom: -15px !important; right: -15px !important; }

/* ========================================== */
/* GLOBAL BUG FIXES (APPLIES TO ALL PAGES)    */
/* ========================================== */

/* 1. FORCE CENTER "TRUSTED BY" TEXT */
.partners-section .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.partners-section h3, 
.partners-section .section-subtitle {
    text-align: center !important;
    margin: 0 auto 40px auto !important;
    width: 100% !important;
    display: block !important;
}

/* 2. HERO BADGE ALIGNMENT FIX */
.hero-visual {
    display: block !important; 
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important; 
}

.hero-image-wrapper {
    position: relative !important; 
    width: 100% !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
    /* Do NOT use overflow:hidden here */
}

.float-badge {
    position: absolute !important;
    z-index: 100 !important;
}

/* Pulls them slightly outside the image boundary */
.badge-top { top: -20px !important; left: -20px !important; } 
.badge-bottom { bottom: -20px !important; right: -20px !important; }

/* 3. TESTIMONIAL CLEANUP (REMOVES CIRCLES) */
.author-avatar, .testi-avatar, .author-image { 
    display: none !important; 
    visibility: hidden !important; 
    opacity: 0 !important; 
    width: 0 !important; 
    height: 0 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    position: absolute !important; 
}

.author-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e2e8f0 !important;
    gap: 4px !important;
}

/* 4. MODAL Z-INDEX FIX */
.demo-modal {
    z-index: 9999999 !important; 
}

/* 5. EVENT MODAL STYLES */
.event-media-modal {
    display: none; position: fixed; z-index: 9999999; padding-top: 50px; 
    left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); 
    align-items: center; justify-content: center;
}
.event-media-modal.active { display: flex; }
.event-media-content-wrapper {
    position: relative; width: 90%; max-width: 1000px; height: 80vh;
    display: flex; align-items: center; justify-content: center;
}
.event-media-item {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px;
    display: none; /* Hidden by default */
}
.event-media-item.active { display: block; }
.event-modal-close {
    position: absolute; top: -40px; right: 0; color: #f1f1f1; 
    font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10;
}
.event-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.2); border: none; color: white;
    padding: 15px; cursor: pointer; border-radius: 50%; z-index: 10;
    transition: background 0.3s;
}
.event-nav-btn:hover { background: rgba(255,255,255,0.4); }
.event-prev { left: -60px; }
.event-next { right: -60px; }
.event-counter {
    position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
    color: white; font-family: 'Inter', sans-serif; font-size: 1.1rem;
}

@media (max-width: 768px) {
    .event-prev { left: 10px; }
    .event-next { right: 10px; }
    .badge-top { top: 10px !important; left: 10px !important; padding: 8px 16px !important; font-size: 0.85rem !important; }
    .badge-bottom { bottom: 10px !important; right: 10px !important; padding: 8px 16px !important; font-size: 0.85rem !important; }
}