:root {
    --bg-color: #000000;
    --card-bg: #151515;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);

    /* Primary Red/Pink Gradient from Studio Prime */
    --primary-gradient: linear-gradient(to right, rgba(221, 9, 6, 0.6) 0%, rgba(255, 175, 207, 0.4) 64%, rgba(255, 175, 207, 0.2) 96%);

    /* Secondary Soft Gradient */
    --inactive-gradient: linear-gradient(to right, rgba(220, 99, 98, 0.4) 0%, rgba(186, 2, 0, 0.1) 100%);

    --accent-red: #D2042D;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
}

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


html {
    scroll-behavior: smooth;
}

body {
    /* Font Update to Avenir */
    font-family: 'Avenir', 'Montserrat', 'Inter', -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Mosafin Bold', sans-serif;
}

h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    text-align: center;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

/* Utilities */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.btn-primary {
    background: #8D0605;
    color: white;
    padding: 0.85rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.2s, opacity 0.2s;
    display: inline-block;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.85rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-outline:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    padding: 1.25rem 0;
}

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

.navbar .container {
    max-width: 100%;
    padding: 0 1.5rem;
}

@media (max-width: 768px) {
    .navbar .container {
        padding: 0 1.5rem;
    }
}

.mobile-menu {
    display: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    font-family: 'Mosafin Bold', sans-serif;
}

.logo img {
    height: 32px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    opacity: 0.8;
}

.nav-links a:hover {
    color: white;
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.mobile-menu-btn {
    display: none;
    color: white;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

/* Custom Gradients and Shapes */
.hero::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(221, 9, 6, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to top, #000000 0%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

/* Blue vignette frame effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 100px rgba(0, 10, 50, 0.3);
    pointer-events: none;
    z-index: 999;
}


.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
    padding-bottom: 2rem;
}

.hero-text-side {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.hero h1 {
    font-size: 5rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    /* Improve readability over video */
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    z-index: 10;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

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

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Clients */
.clients {
    padding: var(--spacing-xl) 0;
    background: linear-gradient(to bottom, #000000, #050505);
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 3rem;
    align-items: center;
    justify-items: center;
}

.client-logo {
    max-width: 120px;
    height: auto;
    filter: grayscale(100%) brightness(1.2) opacity(0.6);
    transition: all 0.4s;
}

.client-logo:hover {
    filter: grayscale(0%) brightness(1) opacity(1);
    transform: scale(1.05);
}

/* Services */
.services {
    padding: var(--spacing-xl) 0;
    position: relative;
}

.services-wrapper {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 3rem;
    align-items: stretch;
    /* Ensure both columns stretch to same height */
}

/* New class for the tabs container to distribute space */
.services-tabs {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; REMOVED to prevent excessive spacing */
    gap: 32px;
    /* Fixed 32px gap as requested */
    height: 100%;
    min-height: 100%;
    /* Force full height usage */
}

.services-accordion {
    display: none;
}

.service-tab-btn {
    width: 100%;
    text-align: left;
    padding: 2.5rem 2rem;
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 1.15rem;
    transition: background 0.3s, color 0.3s;
}

.service-tab-item {
    padding: 1px;
    /* Thin border for unselected */
    margin-bottom: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
    /* Lighter, subtle border color */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-tab-item:hover {
    background: rgba(255, 255, 255, 0.3);
    /* Slightly brighter on hover */
    transform: translateX(5px);
}

.service-tab-item.active {
    padding: 3px;
    /* Thicker border for selected */
    background: var(--primary-gradient);
    /* Keep the brand gradient */
    box-shadow: 0 0 15px rgba(221, 9, 6, 0.2);
    /* Add subtle glow */
}

.service-tab-item.active .service-tab-btn {
    color: white;
    font-weight: 700;
    background: #1a1a1a;
    border-radius: 6px;
    /* Adjust radius to fit inside thicker border */
}

/* Connect button and content visually when active */
.service-tab-item.active .service-tab-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.service-tab-item.active .accordion-content {
    background: #1a1a1a;
    border-radius: 0 0 6px 6px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: -1px;
    padding: 2rem;
}

.services-display {
    position: relative;
    /* Removed height:100% and flex to let grid row height be driven by siblings */
    min-width: 0;
}

.service-card-active {
    position: absolute;
    /* Take out of flow to avoid pushing height */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    padding: 2px;
    background: var(--primary-gradient);
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.service-img-container {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    flex-grow: 1;
    /* Make image container fill all available space */
    min-height: 0;
    /* Important for flex child scrolling/sizing behavior */
    display: flex;
}

.service-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.service-card-active p {
    background: var(--card-bg);
    margin: 0;
    padding: 1.5rem 2rem;
    /* Reduced padding */
    border-radius: 0 0 8px 8px;
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    /* Prevent description from shrinking */
    margin-top: auto;
    /* Push to bottom */
}

/* Animations for Service Transitions */
/* Animations for Service Transitions */
/* Base state is handled by JS swapping */
#service-active-img,
#service-active-desc {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.content-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.service-img-container img,
.service-card-active p {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Gallery - Grid */
.gallery {
    padding: var(--spacing-xl) 0;
}

/* Default Grid (used on Gallery Page) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

/* Homepage-specific override: Force 2x2 Grid */
body:not(.gallery-page) .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    /* Removed max-width to allow full width alignment */
}


/* Gallery - Card Layout */
.gallery-card {
    background: #0a0a0a;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.gallery-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.gallery-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-grow: 1;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.gallery-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.gallery-role {
    font-size: 0.85rem;
    color: #8D0605;
    /* Accent color */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 0.1rem;
    white-space: nowrap;
}

.gallery-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gallery-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: var(--text-secondary);
}

.gallery-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Play Button Overlay */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
}

.gallery-card:hover .play-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
}

/* Removed unused video container styles */



/* Solutions */
.solutions {
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
    /* Reduced bottom padding */
    text-align: center;
    background: linear-gradient(to bottom, #030303, #000000);
    /* Seamless fade to black */
    position: relative;
    overflow: hidden;
}

.solutions p {
    max-width: 800px;
    margin: 0 auto 3rem;
    color: var(--text-secondary);
    font-size: 1.25rem;
}

.solutions-slider-wrapper {
    width: 100%;
    /* Removed overflow: hidden so tags can wrap naturally if needed */
    padding: 2rem 0 0 0;
}

.slider-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 0;
    /* Removed animation */
}

/* Removed unused animation classes and keyframes */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.tag {
    padding: 0.85rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s;
    cursor: default;
    white-space: nowrap;
}

.tag:hover {
    background: white;
    color: black;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Contact */
/* Contact - Horizon Theme */
/* Contact - Horizon Theme */
.contact {
    position: relative;
    padding: var(--spacing-xl) 0;
    margin-top: -1px;
    /* Overlap to prevent thin line gap */
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Abstract Dark Gradient */
    /* Deep Void with subtle noise */
    background: #000000;
}

.contact::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(141, 6, 5, 0.08) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: block;
}

.contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 50px 160px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 80px 120px, #ffffff, transparent);
    background-size: 200px 200px;
    opacity: 0.2;
    mask-image: linear-gradient(to top, black, transparent);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
    display: block;
}

/* Cinematic Orbs Background */
.contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    display: block;
}

/* Vignette Overlay for Cinematic Focus */
.contact-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 30%, #000000 100%);
    pointer-events: none;
    z-index: 2;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    /* Increased blur for softness */
    opacity: 0.3;
    /* Slightly increased opacity */
    animation: floatOrb 30s infinite ease-in-out;
    /* Slower, more majestic */
    mix-blend-mode: screen;
    /* Blends colors like light */
}

.orb-1 {
    width: 600px;
    /* Larger */
    height: 600px;
    background: #5a0000;
    /* Deep crimson */
    top: -20%;
    left: -10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: #300000;
    bottom: -20%;
    right: -10%;
    animation-delay: -8s;
}

.deco-shape {
    position: absolute;
    z-index: 2;
    /* In front of orbs */
    opacity: 0.8;
    pointer-events: none;
    animation: floatShape 12s ease-in-out infinite;
    mix-blend-mode: multiply;
    /* Removes white background visually */
}

.shape-o {
    width: 300px;
    height: auto;
    top: 10%;
    left: 5%;
    transform: rotate(-15deg);
    animation-delay: 0s;
}

.shape-u {
    width: 280px;
    height: auto;
    bottom: 15%;
    right: 5%;
    transform: rotate(10deg);
    animation-delay: -6s;
}

@keyframes floatShape {

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

    50% {
        transform: translate(0, 30px) rotate(5deg);
    }
}

.flower-bg {
    position: absolute;
    width: 60%;
    min-width: 600px;
    height: auto;
    bottom: -10%;
    right: -10%;
    z-index: 0;
    opacity: 0.6;
    mix-blend-mode: screen;
    /* Drops the black background */
    pointer-events: none;
    transform-origin: bottom right;
    animation: floatFlower 20s ease-in-out infinite;
    filter: contrast(1.2) saturate(1.2);
    /* Enhance the red pop */
}

@keyframes floatFlower {

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

    50% {
        transform: scale(1.05) rotate(-2deg);
    }
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: #ff0000;
    top: 30%;
    left: 50%;
    opacity: 0.1;
    animation-delay: -15s;
    filter: blur(120px);
}

@keyframes floatOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-30px, 50px) scale(0.95);
    }
}

.contact-content {
    position: relative;
    z-index: 5;
    width: 100%;
}

.contact-form-wrapper {
    background: rgba(255, 255, 255, 0.05);
    /* Brighter glass lift */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle edge */
    border-radius: 12px;
    padding: 3rem;
    max-width: 900px;
    margin: 0 auto;
    transform: translateY(40px);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    /* Deep shadow to lift */
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 0;
    /* Handled by grid gap or row spacing */
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1.25rem;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s;
    border-radius: 8px;

    /* Solid Black background + Red Gradient Border */
    background: linear-gradient(#050505, #050505) padding-box,
        linear-gradient(135deg, #8D0605, #3a0000) border-box;
    border: 1px solid transparent;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    /* Brighter gradient on focus */
    background: linear-gradient(#000, #000) padding-box,
        linear-gradient(135deg, #ff1a1a, #8D0605) border-box;
    box-shadow: 0 0 20px rgba(141, 6, 5, 0.3);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Responsive Form */
@media (max-width: 768px) {
    .form-row-3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

footer {
    padding: 2rem 0;
    text-align: center;
    background: black;
    color: var(--text-secondary);
    border-top: 1px solid #1a1a1a;
    position: relative;
    z-index: 10;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 900px) {
    h1 {
        font-size: 2.5rem;
    }

    .hero-content {
        grid-template-columns: 1fr;
        padding-top: 4rem;
        gap: 2rem;
        text-align: center;
    }

    /* Force single column for gallery on mobile even on homepage */
    body:not(.gallery-page) .gallery-grid {
        grid-template-columns: 1fr;
    }

    .hero-text-side {
        order: 2;
    }

    .hero-image-side {
        order: 1;
    }

    .nav-links,
    .btn-primary.nav-cta {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .services-wrapper {
        display: block;
    }

    .services-tabs,
    .services-display {
        display: none;
    }

    .services-accordion {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile Menu Overlay */
    .mobile-menu {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: black;
        z-index: 99;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: transform 0.3s ease-in-out;
        transform: translateY(-100%);
    }

    .mobile-menu.active {
        transform: translateY(0);
    }

    .mobile-menu a {
        font-size: 1.5rem;
        color: white;
        text-decoration: none;
        font-weight: 600;
    }

    .mobile-menu button {
        color: white;
        /* Close button color */
    }

    /* Adjust padding for sections on mobile */
    /* Adjust padding for sections on mobile */
    .hero {
        min-height: auto;
        padding-top: 6rem;
        padding-bottom: 4rem;
    }

    /* Mobile Hero: No Image, Gradient bg */
    .hero-image-container {
        display: none;
    }

    .hero-bg {
        background: radial-gradient(circle at 50% 50%, #2a0808 0%, #000000 80%);
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .contact-form-wrapper {
        padding: 2rem;
        border-radius: 20px;
    }
}

/* Video Modal */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    background: black;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(141, 6, 5, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-modal.active .video-modal-content {
    transform: scale(1);
}

.close-modal-btn {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: #8D0605;
}

/* Inside the content, we might want the button visible inside or outside depending on design.
   Let's put it inside top-right for cleanliness, overlapping video if needed, or better yet, outside top right.
   Actually, moved purely outside standard flow might be tricky without extra wrapper.
   Let's place it inside the content but absolutely positioned. */

.video-modal-content .close-modal-btn {
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.team-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    border-color: rgba(141, 6, 5, 0.3);
}

.team-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

.team-card:hover .team-img {
    filter: grayscale(0%);
    border-color: #8D0605;
    box-shadow: 0 0 20px rgba(141, 6, 5, 0.2);
}

.team-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.team-role {
    font-size: 0.95rem;
    color: #cb1212;
    /* Red accent */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* WhatsApp Contact Card Styles */
.whatsapp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.whatsapp-text {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    max-width: 500px;
    line-height: 1.6;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #8D0605 0%, #6b0504 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(141, 6, 5, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(141, 6, 5, 0.5);
    background: linear-gradient(135deg, #a50706 0%, #8D0605 100%);
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    stroke-width: 2.5px;
}