/*  TABLE OF CONTENTS
1.  Custom Properties
2.  Reset & Base
3.  Utility Classes
4.  Header / Nav
5.  Hero (parallax + glassmorphism)
6.  Services
7.  Why Us
8.  Industries
9.  Projects
10. Testimonials
11. CTA Band
12. Footer
13. Animations
14. Responsive
15. Dark-mode (system first)
16. Print
*/

/* 1. CUSTOM PROPERTIES */
:root{
    --blue:#0A2540;
    --blue-light:#132f4f;
    --grey:#f5f7fa;
    --grey-dark:#6b7280;
    --text:#1f2937;
    --accent:#f9a825;
    --white:#ffffff;
    --max:1200px;
    --radius:8px;
    --shadow:0 10px 30px rgba(0,0,0,.06);
    --shadow-hover:0 25px 50px -12px rgba(0,0,0,.15);
    --bg-secondary
}

/* 2. RESET & BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--text);line-height:1.6;background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit;transition:color .25s}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--blue);line-height:1.3}

/* 3. UTILITY CLASSES */
.container{width:90%;max-width:var(--max);margin:auto}
.btn{display:inline-block;padding:14px 32px;border-radius:var(--radius);font-weight:500;transition:all .25s ease;white-space:nowrap;cursor:pointer;border:none;font-size:1rem;text-align:center}
.btn-primary{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-light) 100%);color:var(--white);box-shadow:0 4px 15px rgba(10,37,64,.25)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(10,37,64,.35);transform:translateY(-2px)}
.btn-outline{border:1px solid var(--blue);color:var(--blue);background:transparent}.btn-outline:hover{background:var(--blue);color:var(--white)}
.section-title{font-size:2.25rem;margin-bottom:60px;text-align:center;position:relative}
.section-title::after{content:'';width:60px;height:3px;background:var(--accent);position:absolute;bottom:-12px;left:50%;transform:translateX(-50%)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}

/* 4. HEADER / NAV */
header{position:fixed;top:0;left:0;width:100%;z-index:999;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #e5e7eb;transition:background .3s,box-shadow .3s}
header.scrolled{background:var(--white);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.nav{height:76px;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.5rem;font-weight:700;color:var(--blue);letter-spacing:-.5px}
.nav-links{display:flex;gap:40px;align-items:center}
.nav-links a{font-size:.95rem;font-weight:500;color:var(--text);position:relative}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--blue);transition:width .3s}
.nav-links a:hover::after{width:100%}
.hamburger{display:none;font-size:1.8rem;cursor:pointer;color:var(--blue)}
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;        /* adjust as needed */
    width: auto;
    display: block;
}


@media (min-width: 768px) {
    .logo img {
        height: 46px;
    }
}



/* 5. HERO — FULLSCREEN VIDEO */
.hero.hero-video-full{
    position: relative;
    height: 100vh;
    min-height: 100svh;

    padding-bottom: 120px; /* ← CUT AMOUNT */
    overflow: hidden;

    display: flex;
    align-items: center;
    background: transparent;
}


/* Background video */
.hero-bg-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 140%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
    pointer-events: none;
}


/* Overlay for contrast */
.hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.55),
        rgba(0,0,0,.35),
        rgba(0,0,0,.65)
    );
    z-index: 1;
}

/* Content */
.hero-content{
    position: relative;
    z-index: 2;
    max-width: 720px;
}

/* Text */
.hero-video-full h1{
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.15;
    margin-bottom: 24px;
}

.hero-video-full p{
    color: rgba(255,255,255,.85);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    margin-bottom: 40px;
}

/* Buttons */
.hero-btns{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}




@media (max-width: 1024px){
    .hero.hero-video-full{
        padding-bottom: 110px;
    }
}

@media (max-width: 768px){
    .hero.hero-video-full{
        padding-bottom: 80px;
    }
}

@media (max-width: 480px){
    .hero.hero-video-full{
        padding-bottom: 60px;
    }
}




/* 6. SERVICES */
.services{padding:100px 0;background:var(--white)}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.service-card{background:var(--white);border:1px solid #e5e7eb;border-radius:var(--radius);padding:40px 32px;text-align:center;transition:all .3s ease;transform-style:preserve-3d}
.service-card:hover{box-shadow:var(--shadow);transform:perspective(1000px) rotateX(2deg) rotateY(-4deg) scale(1.02)}
.card-icon{width:64px;height:64px;margin:0 auto 24px;background:var(--grey);border-radius:50%;display:grid;place-items:center;transition:transform .3s ease}
.card-icon svg{width:28px;height:28px;color:var(--blue)}
.service-card:hover .card-icon{transform:scale(1.15) rotate(5deg)}
.service-card h3{font-size:1.25rem;margin-bottom:12px}
.service-card p{color:var(--grey-dark);font-size:.95rem;margin-bottom:20px}
.learn-more{font-size:.9rem;font-weight:500;color:var(--blue);display:inline-flex;align-items:center;gap:4px;transition:gap .25s}
.learn-more:hover{gap:8px}

/* 7. WHY US */
.why{padding:100px 0;background:var(--grey)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}
.why-item{text-align:center;position:relative}
.why-item{
    text-align: center;
    position: relative;
}

.why-item::before{
    content: none;
}



.why-item .icon{width:80px;height:80px;margin:0 auto 20px;background:var(--white);border:1px solid #e5e7eb;border-radius:50%;display:grid;place-items:center}
.why-item .icon svg{width:32px;height:32px;color:var(--blue)}
.why-item h4{font-size:1.1rem;margin-bottom:8px}
.why-item p{font-size:.9rem;color:var(--grey-dark)}

/* 8. INDUSTRIES */
#industries{padding:100px 0}
.industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.industry-card{background:var(--white);border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden;transition:all .3s ease}
.industry-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.industry-card img{height:180px;object-fit:cover;width:100%}
.industry-card h3{font-size:1.125rem;padding:20px 24px 4px}
.industry-card p{padding:0 24px 24px;font-size:.9rem;color:var(--grey-dark)}

/* 9. PROJECTS */
.projects{padding:100px 0;background:var(--grey)}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px}
.project-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:all .3s ease}
.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.project-card img {
    width: 100%;          /* fill the card width */
    height: 200px;        /* same fixed height for all images */
    object-fit: cover;    /* fills the box without stretching */
    object-position: center; /* centers the important part of the image */
    border-radius: 8px 8px 0 0; /* optional, if your card has rounded corners */
}


.project-info{padding:24px}
.project-info h3{font-size:1.125rem;margin-bottom:8px}
.project-info p{font-size:.9rem;color:var(--grey-dark);margin-bottom:12px}
.tag{display:inline-block;background:var(--blue);color:var(--white);font-size:.7rem;padding:4px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.5px}

/* 10. TESTIMONIALS */
.testimonials{padding:100px 0;background:var(--white)}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
blockquote{background:var(--grey);padding:32px;border-radius:var(--radius);font-style:italic;position:relative;transition:transform .3s ease}
blockquote:hover{transform:translateY(-4px)}
blockquote::before{content:'“';font-size:4rem;color:var(--accent);position:absolute;top:8px;left:16px;opacity:.3}
blockquote p{margin-bottom:16px}
cite{font-size:.85rem;color:var(--grey-dark);font-style:normal;font-weight:600}

/* 11. CTA BAND */
.cta-band{background:var(--blue);color:var(--white);text-align:center;padding:100px 0;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0,rgba(255,255,255,0) 70%);transform:rotate(30deg)}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{font-size:2rem;margin-bottom:16px;color:var(--white)}
.cta-band p{margin-bottom:32px;font-size:1.05rem;opacity:.9}

/* 12. FOOTER */
footer{background:#06152b;color:#cbd5e1;font-size:.875rem}
.footer-top{padding:80px 0 60px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px}
.footer-top strong{color:var(--white);display:block;margin-bottom:16px}
.footer-top ul li{margin-bottom:8px}
.footer-top a:hover{text-decoration:underline}
.social{display:flex;gap:12px;margin-top:16px}
.social svg{width:20px;height:20px;color:#9ca3af;transition:color .25s}
.social svg:hover{color:var(--white)}
.footer-bottom{padding:24px 0;border-top:1px solid #132f4f;text-align:center;font-size:.8rem;opacity:.7}

@media (prefers-color-scheme: dark) {
    /* FOOTER DARK MODE */
    footer {
        background: #0b1118;
        color: #e5e7eb;
    }

    footer .footer-top strong,
    footer .footer-top a {
        color: #e5e7eb; /* make headings and links visible */
    }

    footer .footer-top a:hover {
        color: #f9a825; /* optional: accent on hover */
    }

    footer .social svg {
        color: #e5e7eb;
    }

    footer .footer-bottom {
        border-top-color: #1f2937;
        color: #9ca3af;
    }
}






/* 13. ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* 14. RESPONSIVE */
@media(max-width:900px){
    .nav-links{display:none;flex-direction:column;position:absolute;top:76px;right:0;background:var(--white);width:220px;box-shadow:0 10px 20px rgba(0,0,0,.06);padding:24px;border-radius:0 0 0 8px;align-items:flex-start;gap:24px}
    .nav-links.open{display:flex}
    .hamburger{display:block}
    .hero-inner{grid-template-columns:1fr;text-align:center}
    .hero h1{font-size:2.25rem}
    .footer-top{grid-template-columns:1fr;text-align:center;gap:40px}
}
@media(max-width:600px){
    .hero{padding:120px 0 80px}
    .hero h1{font-size:1.75rem}
    .section-title{font-size:1.75rem}
    .btn{padding:12px 24px;font-size:.9rem}
}

/* 15. DARK-MODE (system first) */
@media (prefers-color-scheme: dark){
    :root{
        --white:#0b1118;
        --grey:#0a1422;
        --text:#e5e7eb;
        --blue:#5eead4;
        --blue-light:#34d399;
        --accent:#f9a825;
        --grey-dark:#9ca3af
    }
    img{opacity:.9}
    .service-card,.industry-card,.project-card{background:#111827;border-color:#1f2937}
    header{background:rgba(11,17,24,.85)}
}


/* ===== CONTACT FORM ===== */
.contact {
    padding: 80px 0;
    background: var(--grey); /* light grey background for contrast */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-form-wrapper {
    background: #f1efef; /* light grey so form stands out */
    border: 1px solid #888888; /* subtle border */
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); /* optional subtle shadow */
}

.contact-form-wrapper h3 {
    font-size: 1.5rem;
    margin-bottom: 24px;
    color: var(--text);
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid #7a7a7ab4;
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

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

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-card {
    background: #f1efef; /* grey box for better visibility */
    border: 1px solid #888888; /* slightly darker border */
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); /* soft shadow */
}

.contact-card h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
    color: var(--text);
}

.contact-item strong {
    display: block;
    color: var(--blue); /* accent color for headings */
}
.contact-item p {
    color: #1f2937; /* darker text for readability */
    margin-bottom: 20px; /* bigger gap after each line (Email, Phone, Location) */
    line-height: 1.6; /* keeps text readable */
}

.benefits-list {
    list-style: none;
}

.benefits-list li {
    color: var(--text-secondary);
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.benefits-list li::before {
    content: '•';
    color: var(--accent-blue);
    position: absolute;
    left: 0;
    font-size: 16px;
}




@media (max-width: 600px) {

    /* Hide Get in Touch */
    .contact-info {
        display: none !important;
    }

    /* Center the grid */
    .contact-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0;
        margin: 0;
    }

    /* Center the form card */
    .contact-form-wrapper {
        width: 100%;
        max-width: 420px;   /* 👈 controls size */
        margin: 0 auto;
        padding: 16px;
        border-radius: 16px;
    }

    /* Reduce section padding */
    .contact {
        padding: 24px 16px;
    }
}


@media (max-width: 600px) {

    /* Reduce overall padding */
    .contact-form-wrapper {
        padding: 16px;
    }

    /* Slightly smaller heading */
    .contact-form-wrapper h3 {
        font-size: 1.2rem;
        margin-bottom: 16px;
    }

    /* Tighten form spacing */
    .form-group {
        margin-bottom: 14px;
    }

    /* Inputs: still touch-friendly but not huge */
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px;
        font-size: 15px;
    }

    /* Button slightly smaller */
    .contact-form-wrapper button {
        padding: 12px;
        font-size: 15px;
    }
}




@media (max-width: 600px) {

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px;
        font-size: 16px; /* prevents mobile zoom */
    }

    .contact-form-wrapper button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }
}





@media (prefers-color-scheme: dark) {
    /* CONTACT FORM DARK MODE */
    .contact {
        background: #0a1422; /* dark background matching site */
    }

    .contact-form-wrapper {
        background: #111827; /* dark form background */
        border-color: #1f2937; /* subtle dark border */
        box-shadow: 0 8px 24px rgba(0,0,0,0.3); /* slightly stronger shadow for contrast */
    }

    .contact-form-wrapper h3 {
        color: var(--text); /* light text */
    }

    .form-group label {
        color: var(--text); /* labels visible in dark mode */
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        background: #1f2937; /* dark input background */
        border: 1px solid #374151; /* subtle border */
        color: var(--text); /* light text inside inputs */
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: var(--accent); /* accent color on focus */
    }

    .contact-info {
        gap: 24px;
    }

    .contact-card {
        background: #111827; /* dark card background */
        border-color: #1f2937; /* dark border */
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }

    .contact-card h3 {
        color: var(--text);
    }

    .contact-item strong {
        color: var(--accent); /* accent for headings */
    }

    .contact-item p {
        color: var(--text); /* readable text */
    }

    .benefits-list li {
        color: var(--text); /* readable bullets */
    }

    .benefits-list li::before {
        color: var(--accent); /* bullet accent color */
    }
}






/* 16. PRINT */
@media print{
    header,footer,.hero-btns,.cta-band{display:none}
    body{color:#000;background:#fff}
    .container{width:100%;max-width:100%}
    h1,h2,h3{color:#000}
    a{color:#000;text-decoration:underline}
    img{max-width:100%;page-break-inside:avoid}
    blockquote{border-left:4px solid #ccc;padding-left:16px;margin:16px 0}
}