/* =========================================
   1. GLOBAL STYLES, TYPOGRAPHY & ACCESSIBILITY
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #2c3e50; background-color: #f4f7f6; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; color: #0b3d91; margin-bottom: 1rem; }
p { margin-bottom: 1.2rem; font-size: 1.05rem; }
*:focus-visible { outline: 3px solid #f4a261; outline-offset: 3px; }

/* =========================================
   2. SCROLL ANIMATIONS & NAVIGATION
   ========================================= */

   /* =========================================
   2. SCROLL ANIMATIONS & SPLIT HEADER
   ========================================= */
.hidden { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.show { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }

/* The main header wrapper */
header { 
    background-color: white; /* Top branding bar is now white */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}

/* Top Branding Bar Layout */
.top-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1200px; 
    margin: auto; 
    padding: 1rem 20px; 
}

.header-brand { display: flex; align-items: center; gap: 20px; }
.header-logo { height: 90px; width: auto; } /* Enlarged logo */
.header-text { display: flex; flex-direction: column; }
.header-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.4rem; color: #0b3d91; line-height: 1.2; letter-spacing: 0.5px; } /* Changed text to dark blue to contrast with white */
.header-contact { font-size: 0.9rem; color: #555; margin-top: 5px; display: flex; gap: 15px; align-items: center; font-weight: 500;}
.header-contact i { color: #f4a261; }

.header-cert img { height: 80px; width: auto; object-fit: contain; } /* Sizes the ISO badge */

/* Bottom Navigation Bar Layout */
.main-nav { 
    background-color: #0b3d91; /* Keeps the deep blue for navigation */
    padding: 0.8rem 0; 
}
.nav-container { 
    max-width: 1200px; 
    margin: auto; 
    padding: 0 20px; 
    display: flex; 
    justify-content: flex-start; /* Left Aligned */
}
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links a { color: white; text-decoration: none; font-weight: 600; font-family: 'Montserrat', sans-serif; transition: color 0.3s ease; }
.nav-links a:hover { color: #f4a261; }
.nav-links a.active { color: #f4a261; border-bottom: 2px solid #f4a261; padding-bottom: 4px; }

/* Mobile Adjustments (Inline Row: Logo - Text - ISO) */
@media (max-width: 850px) {
    .top-bar { 
        display: grid; 
        grid-template-columns: auto 1fr auto; /* Creates Left, Middle, Right columns */
        gap: 8px; 
        padding: 0.8rem 10px; /* Tighter padding to maximize screen width */
        align-items: center;
    }
    
    .header-brand { 
        display: contents; /* Unboxes elements to sit directly in the grid */
    }
    
    .header-logo { 
        grid-column: 1; 
        height: 40px; /* Scaled down slightly to fit the row */
        width: auto;
    }
    
    .header-text { 
        grid-column: 2; 
        text-align: center; 
        display: flex;
        flex-direction: column;
    }
    
    .header-title { 
        font-size: 0.9rem; /* Scaled down to prevent text wrapping awkwardly */
        line-height: 1.1;
    }
    
    .header-contact { 
        flex-direction: column; /* Stacks email and phone to save horizontal space */
        gap: 2px; 
        font-size: 0.7rem; 
        margin-top: 4px;
        font-weight: 500;
    }
    
    .header-cert { 
        grid-column: 3; 
    }
    
    .header-cert img { 
        height: 40px; /* Matches the logo height */
        margin-top: 0; 
    }
    
    /* Navigation Bar */
    .main-nav { padding: 0.6rem 0; }
    .nav-container { justify-content: center; } 
    .nav-links { gap: 15px; font-size: 0.9rem; }
}

/* =========================================
   3. HERO, METRICS & CTA
   ========================================= */
main { max-width: 1000px; margin: 3rem auto; padding: 0 20px; }

.video-hero { position: relative; overflow: hidden; padding: 8rem 3rem; text-align: center; border-radius: 12px; margin-bottom: 3rem; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 60vh; }
.video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(11, 61, 145, 0.7), rgba(26, 37, 47, 0.8)); z-index: -1; }
.video-hero h1, .video-hero p { position: relative; z-index: 1; color: white; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.video-hero h1 { font-size: 3rem; }

/* UPDATED: Wide White Hero Headers */
.hero { 
    background-color: white !important; /* Forces background to white */
    background-image: none !important; /* Removes the previous dark image overlays */
    color: #2c3e50; /* Sets paragraph text to dark gray/black */
    padding: 5rem 3rem; 
    
    /* NEW: Margin of 40px from the screen borders */
    margin: 0 0px 3rem 0px; 
    
    border-radius: 12px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
    border: 1px solid #e1e8ed; /* Subtle border for definition */
    text-align: center; 
    max-width: none; /* Allows it to ignore the 1000px main container limit */
}

.hero h1 { 
    color: #0b3d91 !important; /* Keeping headers in your corporate blue */
    font-size: 2.8rem; 
    text-shadow: none; /* Removes shadow for a cleaner look */
    margin-bottom: 1.5rem;
}

.hero p { 
    color: #444; 
    text-shadow: none; 
    max-width: 850px; 
    margin: 0 auto; 
    font-size: 1.1rem;
}

.cert-bar { display: flex; justify-content: center; gap: 2rem; background: white; padding: 1.5rem; border-radius: 8px; margin-bottom: 3rem; flex-wrap: wrap; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.cert-item { font-weight: bold; color: #555; display: flex; align-items: center; gap: 8px; }
.cert-item i { color: #0b3d91; font-size: 1.2rem; }

/* NEW: Construction Lifecycle (Process) Section */
.process-section { margin-bottom: 4rem; margin-top: 1rem; }
.process-section h2 { text-align: center; font-size: 2.2rem; }
.process-section > p { text-align: center; max-width: 700px; margin: 0 auto 3rem auto; color: #555; }

.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.process-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease; position: relative; }
.process-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.12); }
.process-img { width: 100%; height: 180px; object-fit: cover; display: block; }

.step-badge { position: absolute; top: 15px; left: 15px; background: #f4a261; color: #0b3d91; font-family: 'Montserrat', sans-serif; font-weight: bold; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.2); font-size: 1.2rem; z-index: 10; }

.process-content { padding: 1.5rem; border-top: 3px solid #0b3d91; }
.process-content h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.process-content p { font-size: 0.95rem; color: #555; margin-bottom: 0; line-height: 1.5; }

.cta-banner { background: linear-gradient(135deg, #0b3d91, #1a252f); color: white; padding: 4rem 20px; text-align: center; border-radius: 12px; margin-bottom: 3rem; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.cta-banner h2 { color: white; font-size: 2rem; }
.cta-button { display: inline-block; margin-top: 1.5rem; padding: 1rem 2.5rem; background: #f4a261; color: #0b3d91; text-decoration: none; font-weight: bold; border-radius: 6px; transition: 0.3s; font-size: 1.1rem; }
.cta-button:hover { background: white; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* =========================================
   4. SECTIONS: CLIENTS, VISION, CASE STUDIES
   ========================================= */
/* NEW: Multi-column client list for your extensive portfolio */
.client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.5rem; margin-bottom: 3rem; }
.client-item { background: white; padding: 1rem 1.5rem; border-radius: 6px; font-weight: 500; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 10px; border-left: 4px solid #f4a261; }

/* NEW: Vision & Mission Layout */
.vision-mission-wrapper { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
@media(min-width: 768px) { .vision-mission-wrapper { grid-template-columns: 1fr 1fr; } }
.vm-card { background: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.vm-card h2 { display: flex; align-items: center; gap: 10px; color: #f4a261; }
.vm-list { list-style: none; }
.vm-list li { margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 10px; }
.vm-list i { color: #0b3d91; margin-top: 5px; }

.case-study-card { display: grid; grid-template-columns: 1fr; gap: 2rem; background: white; padding: 2rem; margin-bottom: 3rem; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease; }
@media(min-width: 768px) { .case-study-card { grid-template-columns: 1fr 1.5fr; align-items: center; } }
.case-study-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.12); }
.case-study-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; max-height: 350px; }
.case-content h4 { color: #f4a261; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 1rem; margin-bottom: 0.25rem; }
.case-content p { font-size: 0.95rem; margin-bottom: 0.5rem; color: #555; }

.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.cap-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 4px solid #0b3d91; }

.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); margin-bottom: 3rem; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form input, .contact-form textarea { padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }
.contact-form button { padding: 0.8rem; background: #0b3d91; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.contact-form button:hover { background: #f4a261; color: #0b3d91; }
.map-container iframe { width: 100%; height: 100%; min-height: 250px; border-radius: 8px; border: none; }

/* =========================================
   5. FOOTER, WHATSAPP & COOKIE BANNER
   ========================================= */
footer { text-align: center; padding: 2rem 20px; margin: 4rem 20px 2rem 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); background-color: #1a252f; color: white; }
.contact-info { 
    margin-bottom: 1.5rem; 
    padding-bottom: 1.5rem; 
    border-bottom: 1px solid #34495e; 
    max-width: 1100px; /* Widened to comfortably fit all 3 columns */
    margin: 0 auto 1.5rem auto; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 30px; /* Gives nice spacing between the columns */
}

.contact-info div { 
    text-align: left; 
    flex: 1; /* Tells columns to take up equal space */
    min-width: 250px; /* Prevents columns from getting too squished on smaller screens */
}

.contact-info p { 
    margin-bottom: 0.5rem; 
    font-size: 0.95rem; 
    color: #bdc3c7; 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
}
.contact-info i { color: #f4a261; margin-top: 4px; }

.whatsapp-btn { position: fixed; bottom: 25px; right: 25px; background-color: #25d366; color: white; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 1000; transition: transform 0.3s ease; text-decoration: none; }
.whatsapp-btn:hover { transform: scale(1.1); color: white; }

.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: #1a252f; color: white; padding: 1rem 20px; display: flex; justify-content: center; align-items: center; gap: 20px; z-index: 1001; font-size: 0.9rem; transform: translateY(100%); transition: transform 0.5s ease-in-out; border-top: 2px solid #0b3d91; }
.cookie-banner.show-banner { transform: translateY(0); }
.cookie-btn { background: #f4a261; color: #0b3d91; border: none; padding: 0.5rem 1.5rem; border-radius: 4px; font-weight: bold; cursor: pointer; transition: 0.3s; }

@media (max-width: 768px) {
    .nav-container { flex-direction: column; gap: 1rem; }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .contact-wrapper { grid-template-columns: 1fr; }
    .video-hero h1 { font-size: 2.2rem; }
    .cookie-banner { flex-direction: column; text-align: center; gap: 10px; padding: 1.5rem 20px; }
}