/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #161716;
    color: #FFFFFF;
    line-height: 1.6;
    /* overflow-x: hidden; */
}
/* Contact Form Styles - Add to your existing CSS */
.form-status {
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    display: none;
    transition: all 0.3s ease;
}

.form-status.success {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid #00ff88;
    color: #00ff88;
}

.form-status.error {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid #ff4444;
    color: #ff4444;
}

.form-status.loading {
    background: rgba(0, 204, 255, 0.1);
    border: 1px solid #00ccff;
    color: #00ccff;
}

.status-message {
    margin: 0;
}

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

/* CSS Variables */
:root {
    --primary-black: #000000;
    --primary-white: #FFFFFF;
    --primary-gray: #B0B0B0;
    --silver: #C0C0C0;
    --steel: #8A8A8A;
    --dark-gray: #1A1A1A;
    --medium-gray: #2A2A2A;
    --light-gray: #3A3A3A;
    
    --font-primary: 'Orbitron', monospace;
    --font-secondary: 'Inter', sans-serif;
    
    --transition-fast: 0.3s ease;
    --transition-medium: 0.5s ease;
    --transition-slow: 0.7s ease;
    
    --border-radius: 8px;
    --shadow-subtle: 0 4px 20px rgba(255, 255, 255, 0.05);
    --shadow-prominent: 0 8px 40px rgba(255, 255, 255, 0.1);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-white);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

p {
    margin-top: 2rem;


    font-family: var(--font-secondary);
    color: var(--primary-gray);
    line-height: 1.7;
}
@media (max-width: 768px) {
   p{
      margin-top: 1rem;
    }
    
    /* Hide Innovation in Action section on mobile */
    #innovation {
        display: none !important;
    }
    
    /* Hide Innovation navigation link on mobile */
    .nav-item:has(a[href="#innovation"]) {
        display: none !important;
    }
}

/* Container */
.container {
    max-width: 1200px;
    margin: 52px auto;
    padding: 0 2rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2000;
    transition: all var(--transition-medium);
    pointer-events: auto;
}

.navbar.scrolled {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.nav-container {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-right: auto;
}

.logo {
    height: 40px;
    width: auto;
    border-radius: 4px;
    /* Remove filter to use original logo colors */
    /* filter: brightness(0) invert(1); */
}

.company-name {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    color: var(--primary-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-fast);
    position: relative;
    cursor: pointer;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--silver);
    transition: width var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-white);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.nav-hamburger span {
    width: 25px;
    height: 3px;
    background: var(--primary-white);
    margin: 3px 0;
    transition: var(--transition-fast);
}

/* Floating Contact Button */
.floating-contact {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-medium);
}

.floating-contact.visible {
    opacity: 1;
    transform: translateY(0);
}

.floating-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--dark-gray);
    color: var(--primary-white);
    border: 1px solid var(--steel);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--font-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-prominent);
}

.floating-btn:hover {
    background: var(--steel);
    transform: translateY(-2px);
    box-shadow: 0 12px 50px rgba(255, 255, 255, 0.15);
}
/* Mobile Navigation Styles */
@media (max-width: 768px) {
    /* Show hamburger button on mobile */
    .nav-hamburger {
        display: flex !important;
    }
    
    .nav-menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
        z-index: 9999;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    /* Style nav links for mobile */
    .nav-link {
        font-size: 1.2rem;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Animate hamburger lines */
    .nav-hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .nav-hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .nav-hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}
/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    z-index: -2;
    /* pointer-events: none; */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.6;
    /* pointer-events: none; */
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: -1;
    /* pointer-events: none; */
}

.hero-content {
    text-align: center;
    max-width: 900px;
    z-index: 1000;
    padding: 2rem 1rem;
    position: relative;
    width: 100%;
    pointer-events: auto;
}

.hero-company-name {
    font-family: var(--font-primary);
    font-size: clamp(3.5rem, 10vw, 7rem);
    font-weight: 900;
    letter-spacing: 4px;
    margin-top: 10rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary-white) 0%, var(--silver) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(30px);
    line-height: 0.9;
}

.hero-tagline {
    font-family: var(--font-primary);
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--silver);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
}

.hero-logo-container {
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(50px);
}

.hero-logo {
    height: 120px;
    width: auto;
    border-radius: 8px;
    /* Remove filter to use original logo colors */
    /* filter: brightness(0) invert(1); */
}

.hero-headline {
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
}

.headline-line {
    display: block;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.3rem);
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    color: var(--primary-gray);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

.hero-cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--primary-white);
    color: var(--primary-black);
    border: 2px solid var(--primary-white);
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-prominent);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-white);
    border: 2px solid var(--steel);
}

.btn-secondary:hover {
    background: var(--steel);
    border-color: var(--primary-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-prominent);
}

.btn-full {
    width: 100%;
}

/* Sections */
section {
    padding: 8rem 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    margin-bottom: 1.5rem;
    position: relative;
      
}
@media (max-width: 768px) {
  .section-title {
          margin-bottom: 1rem;
    }
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--silver);
}


/* About Section */
.about {
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--primary-black) 100%);
    padding: 2rem 1rem; /* reduced padding */
    animation: fadeInUp 0.8s ease-in-out;
}

/* Grid Layout */
.leaders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

/* Leader Card */
.leader-card {
    position: relative;
    background: linear-gradient(145deg, #111, #1a1a1a);
    color: #fff;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.35s ease;
    text-align: center;
    overflow: hidden;
    will-change: transform, box-shadow;
    transform-origin: center; /* scales from center */
}
.section-subtitle_a{
    font-size: 1rem;

}

/* Laser border effect — thicker + brighter */
.leader-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 8px;
    background: linear-gradient(
        270deg, /* Start left-to-right */
        #00f7ff 0%,
        transparent 20%,
        #00f7ff 40%,
        transparent 60%,
        #00f7ff 80%,
        transparent 100%
    );
    background-size: 300% 300%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: laser-move 3s linear infinite;
    opacity: 0;
    pointer-events: none;
    filter: blur(4px) brightness(3);
}

/* Complete cycle animation */
@keyframes laser-move {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 100% 0%; }
    50%  { background-position: 100% 100%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* Desktop-only zoom hover effect */
@media (min-width: 769px) {
    .leader-card:hover {
        transform: scale(1.08) translateY(-12px) rotateX(5deg) rotateY(3deg) !important;
        box-shadow: 0 20px 40px rgba(0, 255, 255, 0.5) !important;
        z-index: 10 !important; /* Bring hovered card above others */
    }

    .leader-card:hover::before {
        opacity: 1 !important;
    }
}

/* Laser movement animation */
@keyframes laser-move {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 100% 0%; }
    50%  { background-position: 100% 100%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}


/* Leader Name */
.leader-title {
    font-weight: bold;
    font-size: 1.4rem; /* keep original size */
    color: #00eaff;
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem; /* reduced gap below name */
}

/* Leader Role */
.leader-role {
    font-weight: bold;
    font-size: 1rem; /* keep original size */
    color: #00eaff;
    margin-bottom: 0.4rem; /* reduced gap below role */
}

/* Leader Bio */
.leader-bio {
    font-size: 0.95rem;
    /* line-height: 1.4rem; keep readable but compact */
    color: #ddd;
    text-align: justify;
}
/* Contact Info */
.leader-contact {
    margin-top: 0.6rem; /* reduced spacing */
}

.leader-contact a {
    display: block;
    color: #00eaff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.leader-contact a:hover {
    text-decoration: underline;
    color: #66d9ff;
}


/* Mobile */
@media (max-width: 768px) {
    .leaders-grid {
        grid-template-columns: 1fr;
    }
    .leader-card {
        text-align: left;
        align-items: flex-start;
    }
    .section-subtitle_a {
        text-align: justify;
    }
    /* Center leader role text */
    .leader-title {
        text-align: center!important;
        width: 100%;
    }
    /* Simulate hover on mobile - only affect the specific card */
    .leader-card.mobile-glow {
        transform: scale(1.05) translateY(-8px) rotateX(4deg) rotateY(2deg);
        box-shadow: 0 15px 30px rgba(0, 255, 255, 0.4);
        z-index: 10; /* Bring glowing card above others */
    }
    .leader-card.mobile-glow::before {
        opacity: 1;
    }
    
    /* Center align contact info on mobile */
    .leader-contact {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        padding: 0 15px;
    }
    
    .leader-contact a {
        width: fit-content;
        margin: 0 auto;
    }
    
    /* Core Capabilities and Why Rapture Twelve mobile typography to match Innovation */
    .section-title {
        font-size: 1.8rem !important;
    }
    
    .section-subtitle {
        font-size: 0.9rem !important;
    }
    
    .section-subtitle_a {
        font-size: 0.9rem !important;
    }
}



/* Services Section */
.services {
    background: var(--primary-black);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}
.service-image {
    width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Crops image to fill without distortion */
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 1rem; /* Space below the image */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover .service-image {
    transform: scale(1.03); /* Slight zoom on hover */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.service-card {
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    text-align: center;
    transition: all var(--transition-medium);
    cursor: pointer;
    opacity: 0;
    transform: translateY(50px);
    height: auto;

}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--silver);
    box-shadow: var(--shadow-prominent);
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--medium-gray);
    border: 2px solid var(--steel);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    color: var(--silver);
    transition: all var(--transition-fast);
}

.service-card:hover .service-icon {
    background: var(--steel);
    border-color: var(--primary-white);
    color: var(--primary-white);
    transform: scale(1.1);
}

.service-card h3 {
    margin-bottom: 1rem;
    color: var(--primary-white);
}

.service-card p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.service-details {
    text-align: left;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition-medium);
}

.service-card:hover .service-details {
    opacity: 1;
    max-height: 200px;
}

.service-details ul {
    list-style: none;
    padding: 0;
}

.service-details li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--steel);
    color: var(--primary-gray);
    position: relative;
    padding-left: 1.5rem;
}

.service-details li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--silver);
    font-size: 0.8rem;
}

/* Case Studies Section */
.case-studies {
    background: linear-gradient(135deg, var(--primary-black) 100%, var(--medium-gray) 0%);
    padding: 6rem 0;
}

.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
    justify-content: center; /* Centers the grid items horizontally */
}

.case-study-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    background: var(--charcoal);
    border: 1px solid var(--steel);
    transition: all 0.4s ease;
    height: 400px; /* Keep for desktop */
    /* REMOVE fixed width */
    width: 100%; /* Let it fill available space */
    max-width: 500px; /* Optional so huge screens don't stretch too far */
}

.case-study-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-prominent);
    border-color: var(--silver);
}

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

.case-study-image img {
    width: 200%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    opacity: 0.5; /* Reduced from 0.8 for better text readability */
}

.case-study-card:hover .case-study-image img {
    transform: scale(1.25);
    filter: blur(2px); /* Slight blur on hover */
}

/* Content overlay that appears on hover */
.case-study-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(0, 20, 40, 0.95) 0%, 
        rgba(0, 0, 0, 0.9) 100%
    );
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    color: #fff;
    padding: 2rem;
    z-index: 2;
    transition: opacity 0.4s ease;
}


.case-study-card:hover .case-study-overlay {
    opacity: 1;
}

.case-study-overlay h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.case-study-type {
    color: gold;
    font-size: 1.3rem; /* Increased from 0.9rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.2rem; /* Slightly more space */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
 } 
.case-study-type,
.metric-value {
    color: gold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.case-study-overlay p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 90%;
}

/* Metrics grid in overlay */
.case-study-metrics {
    display: grid;
    grid-template-columns: 1fr; /* one per line */
    gap: 0.6rem; /* tighter spacing */
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1rem;
}

.metric {
    text-align: center;
    border-radius: 6px;
    padding: 0.4rem 0.6rem; /* smaller padding */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.metric-value {
    display: block;
    font-size: 1.2rem; /* reduced */
    font-weight: 700;
    color: var(--neon-green);
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
    margin-bottom: 0.15rem;
}

.metric-label {
    display: block;
    font-size: 0.7rem; /* reduced */
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.1;
}
/* Fallback content for non-hover devices (mobile) */
.case-study-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        transparent 0%, 
        rgba(0, 0, 0, 0.8) 50%, 
        rgba(0, 0, 0, 0.95) 100%
    );
    color: white;
    padding: 2rem;
    z-index: 3;
    transform: translateY(60%);
    transition: transform 0.4s ease;
}

.case-study-card:hover .case-study-content {
    transform: translateY(0);
}

.case-study-content h3 {
    font-size: 1.5rem;
    margin-bottom: 3.2rem;
    color: #fff;
    text-align: left;
}

.case-study-content p {
    margin-bottom: 0.4rem;
    opacity: 0.9;
}

/* Mobile optimizations */
/* Mobile-specific case study auto-reveal on scroll */
/* Auto-trigger existing hover effects on scroll for mobile */
/* COMPLETE FIXED CSS FOR YOUR CASE STUDIES */
/* FIXED: Mobile-only auto-hover (Desktop completely untouched) */
@media (max-width: 768px) {
    /* ONLY on mobile - disable pointer events for auto-scroll behavior */
    .case-study-card {
        pointer-events: none !important; /* Only applies to mobile */
    }
    
    /* Base mobile state - cards start normal */
    .case-study-card {
        transform: translateY(0) !important;
        box-shadow: none !important;
        border-color: var(--steel) !important;
    }
    
    .case-study-overlay {
        opacity: 0 !important;
    }
        .case-study-overlay h3 {
        font-size: 1.8rem; /* Slightly smaller on mobile but still larger than before */
        margin-top: 0.8rem;
        margin-bottom: 0.6rem;
    }
        .case-study-type {
        font-size: 1.3rem; /* Increased from 0.75rem on mobile */
        margin-bottom: 1rem;
    }
    
   
    
    .case-study-image img {
        transform: scale(1) !important;
        filter: none !important;
        opacity: 0.4 !important;
    }
    
    .case-study-content {
        transform: translateY(60%) !important;
    }
    
    /* When card is in viewport on mobile - apply hover styles */
    .case-study-card.in-view {
        transform: translateY(-10px) !important;
        box-shadow: var(--shadow-prominent) !important;
        border-color: var(--silver) !important;
    }
    
    .case-study-card.in-view .case-study-overlay {
        opacity: 1 !important;
    }
    
    .case-study-card.in-view .case-study-image img {
        transform: scale(1.25) !important;
        filter: blur(2px) !important;
    }
    
    .case-study-card.in-view .case-study-content {
        transform: translateY(0) !important;
    }
    
    /* Mobile transitions */
    .case-study-card {
        transition: all 0.4s ease !important;
    }
    
    .case-study-overlay {
        transition: opacity 0.4s ease !important;
    }
    
    .case-study-image img {
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .case-study-content {
        transition: transform 0.4s ease !important;
    }
    
    /* Slower entrance when scrolling into view on mobile */
    .case-study-card.in-view {
        transition: all 0.8s ease !important;
    }
    
    .case-study-card.in-view .case-study-overlay {
        transition: opacity 0.8s ease !important;
    }
    
    .case-study-card.in-view .case-study-image img {
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .case-study-card.in-view .case-study-content {
        transition: transform 0.8s ease !important;
    }
    
    /* Faster exit when scrolling out of view on mobile */
    .case-study-card.leaving {
        transition: all 0.3s ease !important;
    }
    
    .case-study-card.leaving .case-study-overlay {
        transition: opacity 0.3s ease !important;
    }
    
    .case-study-card.leaving .case-study-image img {
        transition: transform 0.3s ease, filter 0.3s ease !important;
    }
    
    .case-study-card.leaving .case-study-content {
        transition: transform 0.3s ease !important;
    }
    
    /* Remove staggered delays - only one card active at a time */
    .case-study-card.in-view {
        transition-delay: 0s !important; /* No delays - immediate activation */
    }
    
    /* FORCE override any hover effects on mobile */
    .case-study-card:hover {
        transform: translateY(0) !important;
        box-shadow: none !important;
        border-color: var(--steel) !important;
    }
    
    .case-study-card:hover .case-study-overlay {
        opacity: 0 !important;
    }
    
    .case-study-card:hover .case-study-image img {
        transform: scale(1) !important;
        filter: none !important;
    }
    
    .case-study-card:hover .case-study-content {
        transform: translateY(60%) !important;
    }
    
    /* Mobile grid layout adjustments */
    .case-studies-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        justify-items: center !important;
    }
}

/* IMPORTANT: Make sure desktop styles are NOT affected */
@media (min-width: 769px) {
    /* Ensure desktop layout shows all 6 cards properly */
    .case-studies-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1rem;
        justify-content: center;
    }
    
    /* Ensure desktop cards work normally */
    .case-study-card {
        pointer-events: auto; /* Make sure hover works on desktop */
    }
    
    /* Remove any mobile classes that might interfere */
    .case-study-card.in-view,
    .case-study-card.leaving {
        /* Reset any mobile-specific classes on desktop */
    }
}

/* Large screen adjustments to ensure all 6 cards show */
@media (min-width: 1200px) {
    .case-studies-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1400px;
        margin: 0 auto;
    }
}
/* IMPORTANT: Make sure desktop styles are NOT affected */
@media (min-width: 769px) {
    /* Ensure desktop layout shows all 6 cards properly */
    .case-studies-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1rem;
        justify-content: center;
    }
    
    /* Ensure desktop cards work normally */
    .case-study-card {
        pointer-events: auto; /* Make sure hover works on desktop */
    }
    
    /* Remove any mobile classes that might interfere */
    .case-study-card.in-view,
    .case-study-card.leaving {
        /* Reset any mobile-specific classes on desktop */
    }
}

/* Large screen adjustments to ensure all 6 cards show */
@media (min-width: 1200px) {
    .case-studies-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1400px;
        margin: 0 auto;
    }
}
/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .case-study-overlay h3 {
        font-size: 2rem;
        margin-top: 0.8rem;
    }
    
    .case-study-type {
        font-size: 1.3rem;
    }
}
/* Trusted By Section */
.trusted-by {
    background: var(--primary-black);
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(50px);
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    opacity: 0.7;
}

.partner-logo:hover {
    opacity: 1;
    transform: scale(1.05);
    border-color: var(--silver);
}

.partner-logo img {
    max-width: 100%;
    max-height: 60px;
    filter: grayscale(100%) brightness(0) invert(1);
    transition: filter var(--transition-fast);
}

.partner-logo:hover img {
    filter: grayscale(0%) brightness(1) invert(0);
}

.certifications {
    text-align: center;
    opacity: 0;
    transform: translateY(50px);
}

.certifications h3 {
    margin-bottom: 2rem;
    color: var(--primary-white);
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.certification-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--dark-gray);
    border: 1px solid var(--steel);
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.certification-item:hover {
    transform: translateY(-5px);
    border-color: var(--silver);
}

.certification-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.certification-item span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-gray);
    text-align: center;
}
/* Innovation Section */
.innovation {
    background: linear-gradient(135deg, #0a0f1f 0%, #050810 100%);
    padding: 4rem 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Animated background particles */
.innovation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.01) 0%, transparent 50%);
    animation: backgroundShift 8s ease-in-out infinite alternate;
    z-index: 1;
}

@keyframes backgroundShift {
    0% {
        transform: translateX(-10px) translateY(-10px) rotate(0deg);
    }
    100% {
        transform: translateX(10px) translateY(10px) rotate(1deg);
    }
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.section-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--primary-white), var(--accent-blue), #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 3s ease-in-out infinite alternate;
}

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

.innovation-showcase {
    position: relative;
    border-radius: 16px;
    overflow: visible;
    background: #0b1020;
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.08);
    background-clip: padding-box;
    z-index: 2;
    margin: 0 auto;
    
    /* Full screen width with increased height */
    width: min(95vw, 1400px);
    height: min(90vh, 1000px);
    
    /* Dark theme shadow */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}

/* Dynamic border glow - REMOVED
.innovation-showcase::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    background: linear-gradient(45deg, 
        rgba(0, 247, 255, 0.8),
        rgba(0, 220, 240, 0.7),
        rgba(0, 200, 225, 0.6),
        rgba(0, 247, 255, 0.7),
        rgba(0, 247, 255, 0.8)
    );
    background-size: 300% 300%;
    border-radius: 17px;
    z-index: -1;
    animation: borderFlow 6s linear infinite;
    opacity: 0.7;
}
*/

@keyframes borderFlow {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* Floating particles effect - REMOVED
.innovation-showcase::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(0, 212, 255, 0.4), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 0, 255, 0.4), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(0, 255, 127, 0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 0, 0.4), transparent);
    background-repeat: repeat;
    background-size: 150px 100px;
    animation: particleFloat 6s linear infinite;
    pointer-events: none;
    opacity: 0.3;
}
*/

@keyframes particleFloat {
    0% { transform: translateY(0px) translateX(0px); }
    33% { transform: translateY(-10px) translateX(5px); }
    66% { transform: translateY(-5px) translateX(-5px); }
    100% { transform: translateY(0px) translateX(0px); }
}

.showcase-iframe {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    border-radius: 14px;
    padding: 12px;
    box-sizing: border-box;
    background: #0a0f1f;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.showcase-iframe iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    display: block;
}

.mobile-only {
    display: none;
}

/* Desktop optimizations */
@media (min-width: 1200px) {
    .innovation {
        padding: 6rem 0;
    }
    
    .innovation-showcase {
        width: min(90vw, 1600px);
        height: min(92vh, 1200px);
        border-radius: 20px;
    }
    
    .showcase-iframe,
    .showcase-iframe iframe {
        border-radius: 16px;
    }
    
    .innovation-showcase::before {
        border-radius: 24px;
    }
}

/* Large desktop */
@media (min-width: 1440px) {
    .innovation-showcase {
        width: min(88vw, 1800px);
        height: min(90vh, 1300px);
    }
}

/* Laptop/Tablet landscape */
@media (max-width: 1199px) and (min-width: 768px) {
    .innovation {
        padding: 4rem 0;
    }
    
    .innovation-showcase {
        width: min(92vw, 1200px);
        height: min(85vh, 900px);
        border-radius: 16px;
    }
    
    .showcase-iframe {
        padding: 16px;
    }
    
    .section-header {
        margin-bottom: 2rem;
    }
    
    .innovation-showcase::before {
        border-radius: 17px;
    }
}

/* Tablet portrait */
@media (max-width: 768px) and (min-width: 481px) {
    .innovation {
        padding: 3rem 0;
        min-height: auto;
    }
    
    .innovation::before {
        display: none;
    }
    
    .section-header {
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }
    
    .innovation-showcase {
        width: min(94vw, 700px);
        height: min(80vh, 600px);
        border-radius: 12px;
        margin: 0 auto;
        
        box-shadow: 
            0 15px 30px rgba(0, 0, 0, 0.4);
    }
    
    .showcase-iframe {
        padding: 12px;
    }
    
    .innovation-showcase::before {
        display: none;
    }
    
    .showcase-iframe,
    .showcase-iframe iframe {
        border-radius: 10px;
    }
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .innovation {
        padding: 2rem 0;
        min-height: auto;
    }
    
    .innovation::before {
        display: none;
    }
    
    .section-header {
        margin-bottom: 1rem;
        padding: 0 0.5rem;
    }
    
    .section-title {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
    }
    
    .innovation-showcase {
        width: min(96vw, 470px);
        height: min(75vh, 450px);
        border-radius: 10px;
        margin: 0 auto;
        
        /* Simpler effects on mobile for performance */
        box-shadow: 
            0 10px 20px rgba(0, 0, 0, 0.4);
    }
    
    .showcase-iframe {
        padding: 8px;
    }
    
    .innovation-showcase::before {
        display: none;
    }
    
    .innovation-showcase::after {
        opacity: 0.2;
        animation-duration: 8s;
    }
    
    .showcase-iframe,
    .showcase-iframe iframe {
        border-radius: 6px;
    }
}

/* Extra small mobile phones */
@media (max-width: 360px) {
    .innovation {
        padding: 1.5rem 0;
    }
    
    .innovation-showcase {
        width: min(98vw, 360px);
        height: min(70vh, 350px);
        border-radius: 8px;
        margin: 0 auto;
    }
    
    .showcase-iframe {
        padding: 6px;
    }
    
    .innovation-showcase::before {
        display: none;
    }
    
    .showcase-iframe,
    .showcase-iframe iframe {
        border-radius: 4px;
    }
}

/* Loading animation */
.showcase-iframe::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 212, 255, 0.3);
    border-top: 3px solid #00d4ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

.showcase-iframe iframe {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.showcase-iframe iframe.loaded {
    opacity: 1;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hide loading spinner when iframe loads */
.showcase-iframe.iframe-loaded::before {
    display: none;
}

/* Hover effects for desktop */
@media (min-width: 769px) {
    .innovation-showcase:hover {
        transform: translateY(-5px) scale(1.02);
        transition: all 0.3s ease;
        box-shadow: 
            0 35px 70px rgba(0, 0, 0, 0.6),
            0 0 100px rgba(0, 212, 255, 0.4);
    }
    
    .innovation-showcase:hover::before {
        opacity: 0.9;
        animation-duration: 4s;
        background-size: 400% 400%;
    }
}

/* Ensure proper container */
.container {
    position: relative;
    z-index: 2;
    max-width: 100%;
    padding: 0 1rem;
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    .innovation::before {
        animation-duration: 12s;
        opacity: 0.4;
    }
    
    .section-title {
        animation-duration: 4s;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .innovation-showcase {
        width: min(85vw, 2000px);
        height: min(88vh, 1400px);
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .innovation {
        padding: 2rem 0;
    }
    
    .innovation-showcase {
        width: min(90vw, 600px);
        height: min(92vh, 500px);
    }
    
    .section-header {
        margin-bottom: 1rem;
    }
    
    .section-title {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }
}
.section-title {
    font-size: clamp(3rem, 3vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #00d4ff, #8b5cf6, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 300% 300%;
    animation: gradientShift 4s ease-in-out infinite, titleFloat 6s ease-in-out infinite;
    line-height: 1.1;
    position: relative;
}
.section-subtitle{
    font-size: clamp(1.25rem, 4vw, 1.2rem);
}
/* Contact Section - Compact Version */
/* Enhanced Contact Section */
.contact {
    background: var(--primary-black);
    position: relative;
    padding: 2rem 0;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.05) 0%, transparent 50%);
    pointer-events: none;
    animation: backgroundShift 20s ease-in-out infinite;
}

@keyframes backgroundShift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(2deg); }
}

.contact .section-header {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.contact .section-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #00d4ff, #8b5cf6, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 300% 300%;
    animation: gradientShift 4s ease-in-out infinite, titleFloat 6s ease-in-out infinite;
    line-height: 1.1;
    position: relative;
}

.contact .section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    border-radius: 2px;
    animation: underlineGlow 2s ease-in-out infinite alternate;
}

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

@keyframes titleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

@keyframes underlineGlow {
    0% { box-shadow: 0 0 5px rgba(0, 212, 255, 0.5); }
    100% { box-shadow: 0 0 15px rgba(0, 212, 255, 0.8); }
}

.contact .section-subtitle {
    font-size: 1rem;
    color: var(--silver);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.4;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInUp {
    to {
        opacity: 0.9;
        transform: translateY(0);
    }
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    align-items: start;
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
}

/* Compact Contact Info */
.contact-info {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInLeft 0.8s ease forwards;
    animation-delay: 0.5s;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.contact-leaders {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-leader {
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--medium-gray) 100%);
    border: 1px solid var(--steel);
    border-radius: var(--border-radius);
    padding: 1rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    p{
        margin-top: 1rem;
    }
}

.contact-leader::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.contact-leader::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #00d4ff, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.contact-leader:hover::before {
    left: 100%;
}

.contact-leader:hover::after {
    opacity: 1;
}

.contact-leader:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.5);
}

.contact-leader h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: var(--primary-white);
    position: relative;
    z-index: 2;
}

.contact-leader p {
    color: var(--silver);
    margin-bottom: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem;
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, #00d4ff, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary-gray);
    text-decoration: none;
    padding: 0.6rem;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 0.85rem;
}

.contact-method::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), rgba(139, 92, 246, 0.1));
    transition: left 0.4s ease;
    z-index: -1;
}

.contact-method:hover::before {
    left: 0;
}

.contact-method:hover {
    color: var(--primary-white);
    transform: translateX(10px);
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.15);
}

.contact-method svg {
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.3));
    width: 16px;
    height: 16px;
}

.contact-method:hover svg {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
}

/* Compact Contact Form */
.contact-form-container {
    opacity: 0;
    transform: translateX(50px);
    animation: slideInRight 0.8s ease forwards;
    animation-delay: 0.7s;
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.contact-form {
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--medium-gray) 100%);
    border: 1px solid var(--steel);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Smaller Circular Rotating Beam */
.contact-form::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 40deg,
        rgba(0, 212, 255, 0.08) 70deg,
        rgba(0, 212, 255, 0.15) 90deg,
        rgba(139, 92, 246, 0.15) 120deg,
        rgba(139, 92, 246, 0.08) 150deg,
        transparent 180deg,
        transparent 220deg,
        rgba(0, 255, 136, 0.08) 250deg,
        rgba(0, 255, 136, 0.12) 270deg,
        rgba(0, 212, 255, 0.08) 290deg,
        transparent 320deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: perfectCircularRotate 25s linear infinite;
    z-index: -1;
    overflow: hidden;
}

@keyframes perfectCircularRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* For users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .contact-form::before {
        animation: none;
        background: radial-gradient(
            circle,
            transparent 70%,
            rgba(0, 212, 255, 0.08) 80%,
            transparent 90%
        );
    }
}

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

.form-group {
    margin-bottom: 1rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--primary-white);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
    transition: color 0.3s ease;
}

.form-group:focus-within label {
    color: #00d4ff;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    background: rgba(42, 42, 42, 0.8);
    border: 2px solid var(--steel);
    border-radius: var(--border-radius);
    color: var(--primary-white);
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 
        0 0 0 3px rgba(0, 212, 255, 0.1),
        0 5px 15px rgba(0, 212, 255, 0.15);
    transform: translateY(-1px);
    background: rgba(42, 42, 42, 0.95);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--primary-gray);
    transition: color 0.3s ease;
    font-size: 0.85rem;
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    color: rgba(192, 192, 192, 0.7);
}

/* Compact Submit Button */
.btn-submit {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #00d4ff, #8b5cf6);
    border: none;
    border-radius: var(--border-radius);
    color: var(--primary-white);
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.btn-submit:hover::before {
    left: 100%;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 212, 255, 0.4);
    background: linear-gradient(135deg, #00b8e6, #7c3aed);
}

.btn-submit:active {
    transform: translateY(0px);
}

.form-status {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.form-status.success {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: #00FF88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.form-status.error {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.2);
}

/* Compact Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: linear-gradient(135deg, var(--dark-gray), var(--medium-gray));
    border: 1px solid var(--steel);
    border-radius: var(--border-radius);
    max-width: 450px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 212, 255, 0.1);
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--steel);
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.05), transparent);
}

.modal-header h3 {
    margin: 0;
    color: var(--primary-white);
    font-size: 1.3rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    color: var(--primary-white);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--steel);
    transform: rotate(90deg);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.modal-body {
    padding: 1.5rem;
}

.contact-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.contact-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: rgba(42, 42, 42, 0.8);
    border: 1px solid var(--steel);
    border-radius: var(--border-radius);
    color: var(--primary-white);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-size: 0.95rem;
}

.contact-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), rgba(139, 92, 246, 0.1));
    transition: left 0.4s ease;
    z-index: -1;
}

.contact-option:hover::before {
    left: 0;
}

.contact-option:hover {
    background: rgba(68, 68, 68, 0.8);
    transform: translateX(8px);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2);
}

.contact-option svg {
    transition: all 0.3s ease;
    width: 18px;
    height: 18px;
}

.contact-option:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.6));
}

/* Responsive Design - Compact Version */
@media (max-width: 1200px) {
    .contact-grid {
        gap: 2.5rem;
    }
    
    .contact {
        padding: 3.5rem 0;
    }
}

@media (max-width: 968px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 700px;
    }
    
    .contact {
        padding: 3rem 0;
        min-height: auto;
    }
    
    .section-header {
        margin-bottom: 2rem;
    }
    
    .contact .section-title {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
    }
}

@media (max-width: 768px) {
    .contact {
        padding: 2.5rem 0;
        min-height: auto;
    }
    
    .contact::before {
        background: 
            radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 60%),
            radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 60%),
            radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.06) 0%, transparent 50%);
    }
    
    .section-header {
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }
    
    .contact .section-title {
        font-size: clamp(1.4rem, 4.5vw, 1.8rem);
        margin-bottom: 0.8rem;
    }
    
    .contact .section-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .contact-grid {
        gap: 1.5rem;
        padding: 0 1rem;
        max-width: none;
    }

    .contact-info,
    .contact-form-container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        transform: none !important;
        opacity: 1 !important;
        animation: none;
    }
    
    .contact-leaders {
        gap: 1.2rem;
    }

    .contact-leader {
        padding: 1.2rem;
        text-align: center;
    }
    
    .contact-leader h3 {
        font-size: 1.2rem;
        margin-bottom: 0.3rem;
    }
    
    .contact-leader p {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .contact-methods {
        gap: 0.8rem;
    }
    
    .contact-method {
        padding: 0.8rem;
        font-size: 0.9rem;
        gap: 0.6rem;
    }
    
    .contact-method svg {
        width: 16px;
        height: 16px;
    }
    
    .contact-form {
        padding: 1.5rem;
    }
    
    /* .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
    }
     */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 0.9rem;
        font-size: 0.95rem;
    }
    
    .form-group textarea {
        min-height: 90px;
    }
    
    .btn-submit {
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    .modal-content {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
    
    .modal-header,
    .modal-body {
        padding: 1.2rem;
    }
}

@media (max-width: 480px) {
    .contact {
        padding: 2rem 0;
    }
    
    .section-header {
        margin-bottom: 1.2rem;
        padding: 0 0.5rem;
    }
    
    .contact .section-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }
    
    .contact .section-subtitle {
        font-size: 0.95rem;
    }
    
    .contact-grid {
        padding: 0 0.5rem;
        gap: 1.2rem;
    }
    
    .contact-leader {
        padding: 1rem;
    }
    
    .contact-leader h3 {
        font-size: 1.1rem;
    }
    
    .contact-method {
        padding: 0.7rem;
        font-size: 0.85rem;
    }
    
    .contact-form {
        padding: 1.2rem;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    .form-group textarea {
        min-height: 80px;
    }
    
    .btn-submit {
        padding: 0.9rem;
        font-size: 0.9rem;
    }
    
    .modal-content {
        margin: 0.5rem;
    }
    
    .modal-header,
    .modal-body {
        padding: 1rem;
    }
}
/* Extra Small Mobile */
@media (max-width: 360px) {
    .contact {
        padding: 2rem 0;
    }
    
    .contact .section-title {
        font-size: 1.6rem;
    }
    
    .contact-form {
        padding: 1.5rem 1rem;
    }
    
    .contact-leader {
        padding: 1.25rem 0.75rem;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 0.75rem;
    }
    
    .btn-submit {
        padding: 0.875rem 1.25rem;
        min-height: 48px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .contact-method:hover,
    .contact-leader:hover,
    .contact-option:hover,
    .btn-submit:hover {
        transform: none;
    }
    
    .contact-method:active,
    .contact-option:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .btn-submit:active {
        transform: translateY(2px);
        transition: transform 0.1s ease;
    }
}

/* Dark mode safe colors for mobile */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .contact-form {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    }
    
    .contact-leader {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .contact::before,
    .contact-form::before {
        animation: none;
    }
    
    .contact .section-title {
        animation: none;
    }
    
    .contact-method,
    .contact-leader,
    .contact-option,
    .btn-submit {
        transition: none;
    }
}

/* Footer */
.footer {
    background: linear-gradient(145deg, var(--dark-gray), #0a0a0a);
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
    margin-top: auto;
}

/* Subtle grain texture overlay for depth */
.footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    opacity: 0.05;
    z-index: 1;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 120px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 280px;
}

.footer-logo {
    height: 40px;
    width: auto;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.footer-company {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #00f7ff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.footer-tagline {
    color: var(--primary-gray);
    font-size: 1rem;
    letter-spacing: 1.5px;
    margin-top: 0.5rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-width: 120px;
    text-align: center;
    justify-content: flex-start;
    align-items: center;
}

.footer-links a {
    color: var(--primary-gray);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    font-size: 1rem;
}

.footer-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00f7ff, #ff00ff);
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(5px);
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1.65rem;
    flex: 1;
    min-width: 280px;
    text-align: right;
    position: relative;
    top: -33px; /* adjust this to move it up */
}

.footer-contact p {
    color: var(--primary-gray);
    margin-bottom: 0.05rem;
    font-size: 1rem;
    transition: color 0.3s ease;
    line-height: 1.5;
}

.footer-contact p:hover {
    color: #00f7ff;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.footer-bottom p {
    color: var(--primary-gray);
    font-size: 0.9rem;
}

/* Contact button (if needed) */
.contact-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(90deg, #00f7ff, #ff00ff);
    color: #000;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.contact-btn:hover {
    transform: scale(1.05);
}

/* Mobile Responsive Design - MAJOR IMPROVEMENTS */
@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 2rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 2.5rem;
        text-align: left;
        padding: 0 1.5rem;
        min-height: auto;
    }

    .footer-brand,
    .footer-links,
    .footer-contact {
        flex: none;
        width: 100%;
        min-width: auto;
        text-align: left; /* Consistent left alignment on mobile */
    }

    .footer-brand {
        margin-bottom: 1rem;
    }

    .footer-company {
        font-size: 1.3rem;
        letter-spacing: 2px;
        line-height: 1.3;
    }

    .footer-tagline {
        font-size: 0.95rem;
        letter-spacing: 1px;
        margin-top: 0.8rem;
    }

    .footer-links {
        align-items: flex-start; /* Left align links on mobile */
        gap: 1.2rem;
    }

    .footer-links a {
        font-size: 1rem;
        padding: 0.3rem 0;
    }

    /* Fix contact section positioning on mobile */
    .footer-contact {
        text-align: left; /* Left align on mobile */
        top: 0; /* Remove the negative top positioning on mobile */
        margin-top: 0;
    }

    .footer-contact p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }

    .footer-bottom {
        padding-top: 2rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-top: 1rem;
    }

    .footer-bottom p {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Mobile contact button adjustments */
    .contact-btn {
        bottom: 15px;
        right: 15px;
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 2.5rem 0 1.5rem;
    }

    .footer-content {
        gap: 2rem;
        padding: 0 1rem;
    }

    .footer-brand {
        margin-bottom: 0.5rem;
    }

    .footer-company {
        font-size: 1.1rem;
        letter-spacing: 1.5px;
    }

    .footer-tagline {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
        margin-top: 0.5rem;
    }

    .footer-links {
        gap: 1rem;
    }

    .footer-links a {
        font-size: 0.9rem;
        padding: 0.2rem 0;
    }

    .footer-contact p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.4rem;
    }

    .footer-bottom {
        padding-top: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }

    /* Small mobile contact button */
    .contact-btn {
        bottom: 12px;
        right: 12px;
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

/* Extra small phones */
@media (max-width: 360px) {
    .footer {
        padding: 2rem 0 1rem;
    }

    .footer-content {
        gap: 1.5rem;
        padding: 0 0.8rem;
    }

    .footer-company {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .footer-tagline {
        font-size: 0.8rem;
        letter-spacing: 0.3px;
    }

    .footer-links a,
    .footer-contact p {
        font-size: 0.85rem;
    }

    .footer-bottom {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .footer-bottom p {
        font-size: 0.75rem;
    }
}
/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .nav-container {
        padding: 1rem 1.5rem;
    }
    
    section {
        padding: 6rem 0;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
        .case-study-card:focus {
        outline: none;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        border-color: gold;
    }
}

/* Large Desktop Optimizations */
@media (min-width: 1200px) {
    .hero-content {
        max-width: 1000px;
        padding: 3rem 2rem;
    }
    
    .hero-company-name {
        font-size: clamp(5rem, 8vw, 8rem);
        margin-bottom: 0.8rem;
        line-height: 0.9;
    }
    
    .hero-tagline {
        font-size: clamp(1.4rem, 2vw, 2.2rem);
        letter-spacing: 6px;
        margin-bottom: 2rem;
    }
    
    .hero-subtitle {
        font-size: clamp(1.2rem, 1.5vw, 1.5rem);
        margin-bottom: 2.5rem;
        max-width: 800px;
    }
    
    .hero-cta {
        gap: 2rem;
    }
}

/* Ensure full viewport coverage on all devices */
@media screen {
    .hero {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    .hero-video {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    .hero-background,
    .hero-overlay {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

@media (max-width: 78px) {
    .nav-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 3rem;
        transition: right var(--transition-medium);
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-hamburger {
        display: flex;
    }
    
    .nav-hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .nav-hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .nav-hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    /* Mobile hero full coverage */
    .hero {
        height: 100vh;
        height: -webkit-fill-available;
        width: 100vw;
        position: relative;
    }
    
    .hero-video {
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        object-fit: cover;
        object-position: center;
    }
    
    .hero-background,
    .hero-overlay {
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available;
    }
    
    .hero-content {
        padding: 1rem 0.5rem;
        max-width: 100%;
    }
    
    .hero-company-name {
        font-size: clamp(2.5rem, 12vw, 4.5rem);
        margin-bottom: 0.3rem;
        line-height: 0.85;
    }
    
    .hero-tagline {
        font-size: clamp(0.8rem, 4vw, 1.2rem);
        letter-spacing: 2px;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem);
        margin-bottom: 1.5rem;
        max-width: 90%;
        line-height: 1.3;
    }
    
    .hero-cta .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .services-grid,
    .case-studies-grid {
        grid-template-columns: 1fr;
    }
    
    .leadership-grid {
        grid-template-columns: 1fr;
    }
    
    /* .form-row {
        grid-template-columns: 1fr;
    }
     */
    .floating-contact {
        bottom: 1rem;
        right: 1rem;
    }
    
    .floating-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .nav-container {
        padding: 1rem;
    }
    
    section {
        padding: 4rem 0;
    }
    
    .hero-logo {
        height: 80px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .leader-card,
    .service-card,
    .case-study-card {
        padding: 1.5rem;
    }
    
    .contact-form {
        padding: 1.5rem;
    }
    
    .modal-content {
        width: 95%;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .floating-contact,
    .modal {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}
.contact-form-container {
   
    /* padding: 2rem; */
    border-radius: 12px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    margin: auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
   
}
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
}
.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #e2e8f0; /* light text */
}

input, textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #1e293b;
    color: white;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

input:focus, textarea:focus {
    border-color: #38bdf8; /* cyan highlight */
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

textarea {
    resize: vertical;
}

.btn-submit {
    background: linear-gradient(90deg, #38bdf8, #3b82f6);
    color: white;
    padding: 0.85rem;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background: linear-gradient(90deg, #0ea5e9, #2563eb);
    transform: translateY(-1px);
}

.form-status {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.95rem;
    text-align: center;
}