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

html {
    scroll-behavior: smooth;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    color: #ffffff;
    background-color: #000000;
    line-height: 1.6;
    padding-top: 0 !important;
    margin: 0 !important;
}

/* Background Color Enforcements */
.bg-black { background-color: #000000; color: #ffffff; }
.bg-light-grey { background-color: #E1E2E6; color: #000000; }
.bg-grey { background-color: #888888; color: #000000; }
.text-black { color: #000000 !important; }
.text-center { text-align: center; }
.bg-rosegold { background-color: #b76e79; color: #ffffff; }
.bg-blue-grey { background-color: #5a869d; color: #ffffff; }
.bg-blue-grey-light { background-color: #7b8ebb; color: #ffffff; }
.bg-red-grey { background-color: #6c0f0f; color: #ffffff; }
.bg-navy-blue { background-color: #11055e; color: #ffffff; }
/* Structural Container definitions */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

section {
    position: relative;
    width: 100%;
}

.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.p-0 { padding: 0 !important; }
.mt-4 { margin-top: 2rem; }

/* Header Elements */
header {
    background-color: #0a0a0aae;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 99999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid #222;
}

header .logo {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 2px;
    height: 80px;       /* Set fixed height */
    width: auto;        /* Maintain proportions */
    max-width: 100%;    /* Keep responsive */
    display: inline-block; 
}



header nav a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 30px;
    font-weight: 500;
    transition: color 0.3s;
}

header nav a:hover {
    color: #888888;
}

#google_translate_element {
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px; /* Adds consistent spacing between Home button and Google widget */
}


/* Button style matching your target image layout */
.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;                  /* Clean spacing buffer between flag icon and text */
    background: transparent;   /* Removes solid container boxes */
    border: none;              /* Matches your clean reference image background */
    color: #ffffff;            /* High visibility header contrast typography */
    font-family: sans-serif;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    padding: 8px 12px;
}

/* Adjust indicator arrow size and gray color from reference photo */
.dropdown-trigger .arrow-down {
    font-size: 0.65rem;
    color: #888888;            /* Soft slate gray down arrow layout */
    margin-left: 2px;
}

/* Forces flag proportions to look crisp */
.dropdown-trigger img,
.dropdown-menu-list img {
    width: 20px;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

/* The structural dropdown options panel */
.dropdown-menu-list {
    display: none;             /* Kept hidden until toggled by JavaScript click actions */
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #000000; /* Crisp theme match container fill */
    border: 1px solid #333333;
    border-radius: 4px;
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    min-width: 180px;
    max-height: 250px;         /* Prevents breaking layout pages downwards */
    overflow-y: auto;          /* Introduces uniform scrolling mechanics if long */
    z-index: 1000;
}

/* Styles individual language rows inside the menu panel */
.dropdown-menu-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Visual item row hover action state response */
.dropdown-menu-list li:hover {
    background-color: #222222; /* Clean high-contrast row feedback tracking */
}

/*

/* Big textboxes and structural boxes */
.big-textbox {
    margin-bottom: 2rem;
    max-width: 800px;
}

.big-textbox h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.big-textbox h2, .big-textbox h3, .big-textbox h4 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.big-textbox p {
    font-size: 1.15rem;
    color: #cccccc;
}



.bg-light-grey .big-textbox p {
    color: #333333;
}

.bg-grey .big-textbox p {
    color: #222222;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Section Subtitle Banner */
/* Outer slider container framing viewport boundaries */

/* MAIN BODY VIEWPORT BUFFER STRATEGY */
main {
    /* 🚀 CRITICAL CLEARANCE FIX: Pushes the main page content layout completely below the fixed header bounds */
    margin-top: var(--header-height); 
    width: 100%;
    display: block;
}

/* 3. FORCE DETACH STRATEGY: Pushes the outer banner box downwards */
.slider-container {
    position: relative !important;
    display: block !important;
    margin-top: 80px !important; /* 🚀 FORCED CLEARANCE: Pushes the container exactly below the 80px header height */
    width: 100% !important;
    height: calc(100vh - 80px) !important; /* Adapts height dynamically to prevent screen spillover */
    min-height: 550px !important;
    background-color: #000000;
    overflow: hidden;
}
    
/* 4. FIRST SLIDE CORRECTION: Overrides conflicting landing page classes */
.slide#landing {
    top: 0 !important;
    height: 100% !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

.slider-wrapper {
    width: 100%;
    height: 100%;
}

/* 🚀 THE FITTER ACTION: Forces image to fill the exact height/width of the slider box */
.slide-fitted-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* CRITICAL: Prevents your image from looking compressed or stretched out of shape */
    object-fit: cover; 
    
    z-index: 1;           /* Places the image layer at the absolute bottom floor */
}

/* Code-based dark dimming sheet that spreads exactly over the image tag layer */
.slide-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25); /* Dimming overlay filter for high readability contrast */
    z-index: 2;                      /* Sits right on top of the image graphic */
}

/* Forces your text and buttons to float cleanly above both underlying layers */
.slide .slide-content {
    position: relative;
    z-index: 3;           /* Highest interior layer: Floats safely above the dark overlay sheet */
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;      /* Restores safe buffer space so text never touches screen edges */
    box-sizing: border-box;
}

/* Individual hardware-accelerated cross-fading slide panels */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 80px;
}

/* Highly visible active slide state overlay controller hooks */
.slide.active-slide {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Visual slide typography internal structural block alignment */
.slide-content {
    max-width: 800px;
    color: #ffffff;
    transform: translateY(20px);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide.active-slide .slide-content {
    transform: translateY(0);
}

.slide-content h1 {
    font-family: sans-serif;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.slide-content p {
    font-family: sans-serif;
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #e5e5e5;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Action button component core styling properties */
.slider-cta {
    display: inline-block;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #000000;
    background-color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 4px;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.slider-cta:hover {
    background-color: #A0A0A0;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Manual directional layout buttons positioning settings */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.5rem;
    padding: 16px 20px;
    cursor: pointer;
    z-index: 10;
    border-radius: 4px;
    transition: background 0.2s ease;
    user-select: none;
}

.nav-arrow:hover { background: rgba(0, 0, 0, 0.8); }
.prev-arrow { left: 20px; }
.next-arrow { right: 20px; }

/* Lower visual dot tracking indicators alignment wrapper */
.dot-indicators {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.dot:hover, .dot.active-dot {
    background-color: #ffffff;
    transform: scale(1.2);
}

/* High-fidelity layout responsiveness settings rules for smaller screen dimensions */
@media(max-width: 768px) {
    .slider-container { height: 55vh; }
    .slide-content h1 { font-size: 1.85rem; }
    .slide-content p { font-size: 1rem; }
    .nav-arrow { padding: 10px 14px; font-size: 1.1rem; }
}

/*banner ends


/* Interactive Action Buttons */
.btn {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn:hover {
    background-color: #cccccc;
}

.btn-dark {
    background-color: #000000;
    color: #ffffff;
}

.btn-dark:hover {
    background-color: #222222;
}

/* Grid Framework Layers */
.image-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 1.5rem;
}

.img-placeholder {
    background-color: #0ca2a7;
    color: black;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px dashed #444;
}

.bg-light-grey .img-placeholder {
    background-color: #d1d2d6;
    color: #444444;
    border-color: #999;
}

.project-block {
    margin-bottom: 5rem;
}
.grid-display-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images crop neatly without stretching */
    display: block;
    border-radius: 4px; /* Optional: matches subtle card curves */
}

/* Split layout modules */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.single-img-container .img-placeholder {
    height: 350px;
}

/* --- Founder Image Grid Layout Configuration --- */

/* Parent Wrapper Box: Defines the container bounds and alignment coordinates */
.single-img-container {
    width: 100%;
    max-width: 500px;           /* 🚀 Adjust this to make the frame wider or narrower on screen */
    aspect-ratio: 1 / 1;        /* 📐 Keeps the framework perfectly square so the wood grid fits */
    border-radius: 12px;        /* Smooths out the box layout corners cleanly */
    overflow: hidden;           /* Prevents any image leakage outside the rounded framework edges */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    background-color: #eba8ae;  /* Soft baseline background tone */
    position: relative;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}
.big-textbox-founder {
    margin-bottom: 2rem;
    max-width: 800px;
    background-color: #eba8ae; /* Baseline grey fill color while the graphic is loading */
}
/* 🚀 THE FITTER CORE ACTIONS */
.single-img-container .founder-photo {
   width: 100%;
    height: auto;           /* Forces the image to preserve its native portrait ratio */
    object-fit: contain;    /* Prevents pixel compression stretching or background masks */
    display: block;
}

/* Team Component Matrix */
/* Team Component Matrix */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 35px; /* Generous gap between columns */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally centers the image and textbox contents */
    width: 100%;
    text-align: center;  /* Centers the text lines precisely beneath the images */
}

.team-card img {
    height: 360px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px; /* Smooth rounded photo frame corners */
    margin-bottom: 18px; /* Adds clear breathing space between image and text */
}

/* 🚀 Enhanced Name & Role Containers */
.big-textbox {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.team-name {
    font-size: 1.35rem !important;    /* 📈 Significantly increases name visibility */
    font-weight: 700 !important;      /* Extra bold appearance */
    color: #ffffff !important;         /* Crisp white text for perfect dark background contrast */
    margin: 0 0 6px 0 !important;      /* Tight baseline gap before the role */
    line-height: 1.3;
}

.team-role {
    font-size: 1.05rem !important;    /* 📈 Increases role description text size */
    font-weight: 500 !important;
    color: #e2e8f0 !important;         /* Clean, soft off-white to establish hierarchy */
    margin: 0 !important;
    line-height: 1.4;
    opacity: 0.9;
}

/* Process Component Layouts */
.process-text-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 3rem;
    margin-bottom: 3rem;
    background-color: #b76e79; /* Replace with your choice of color */
    padding: 40px 20px;       /* Adds breathing room inside the colored container */
}

.text-step-box {
    background-color: #111111;
    padding: 25px;
    border-radius: 4px;
    border-left: 3px solid #ffffff;
}

.text-step-box h4 {
    font-size: 1.3rem !important;
    margin-bottom: 0.5rem;
}

.text-step-box p {
    font-size: 0.95rem !important;
}

.process-step-10 {
    margin-top: 3rem;
}

.full-width {
    max-width: 100%;
    margin-bottom: 2rem;
    text-align: left;
}

/* Services Design Modules */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 3rem;
}

/* 1. Service Box Interaction States */
.service-box {
    background-color: #a9e2c7;
    padding: 25px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.service-box h5 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.service-box p {
    font-size: 0.9rem;
    color: #aaaaaa;
}
/* 4. Updated Close Button Styling */
.lightbox-close {
   position: absolute;
    top: 90px;
    right: 35px;
    color: #ffffff;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100000;
}

/* 5. Simple animation for crisp entrance */
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Adds a nice interactive visual feedback loop when the user mouse-hovers */
.lightbox-close:hover {
    color: #fadadd; /* Soft rose highlight tint */
    opacity: 1;
}

/* 2. Lightbox Modal Background Structure */
.lightbox-overlay {
    display: none; 
    position: fixed;
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); 
    justify-content: center;
    align-items: center;
}

/* 3. Lightbox Display Image dimensions (Updated to your preferred 50% scale from earlier) */
.lightbox-content {
    max-width: 45%;    
    max-height: 50vh;  
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin: auto; 
    display: block;
    animation: zoomIn 0.25s ease;
}
/* 1. Target the main parent container holding BOTH the text layout and the image block */
.services-section-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Splits space down the middle into two even spaces */
    gap: 30px;                      /* Forces a safe gap channel between content walls */
    align-items: center;            /* Perfectly centers text vertically against the image */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 2. Constrain the specific image capsule wrapper */

/* 🚀 This targets ONLY the image asset and locks it inside the block boundary */
.single-img-container img.services-matrix-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;  /* Crops the transparent sides out automatically */
    object-position: center !important;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/* Custom container that allows the portrait photo to scale fully and naturally */
.founder-img-card {
    position: relative;
    width: 100%;
    max-width: 400px;         /* Adjust this value to make the photo larger or smaller */
    height: auto;             /* Allows the container to match the exact height of the image */
    border-radius: 12px;
    overflow: hidden;
    display: block;
    margin: 0 auto;           /* Centers the container nicely in its grid column */
}

/* Forces the portrait image to display without any top/bottom cropping or squishing */
.founder-img-card .founder-photo-clean {
    width: 100%;
    height: auto;             /* Keeps the original portrait proportions */
    display: block;
    object-fit: contain;      /* Ensures zero cropping from head to toe */
}
/* Specific targeting to safely bypass the general matrix style rules */
.single-img-container img.founder-portrait-fit {
    object-fit: contain !important;      /* Displays the entire photo without cropping edges */
    object-position: center bottom !important; /* Grounds the shirt line exactly at the lower boundary */
    width: 100% !important;
    height: 100% !important;
    background-color: transparent;       /* Ensures no unexpected color boxes bleed through background gaps */
}
/* 📱 Responsive Mobile Rules - Safely drops image below text on phone widths */
@media (max-width: 768px) {
    .services-section-wrapper {
        grid-template-columns: 1fr; /* Shifts layout to single-file stack mode */
    }
}

/*Projects and Portfolio Layout Blocks */

.image-grid-4 .img-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
    height: auto; /* Overrides fixed heights meant for images */
}

.image-grid-4 .img-placeholder h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #2c3e50; /* Adjust color to fit your scheme */
}

.image-grid-4 .img-placeholder p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555555;
}

/* Q&A and Review Layout Blocks */
.qa-block {
    padding-top: 80px;
    padding-bottom: 80px;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 2rem;
}

.review-box-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Contact Validation Form Architecture */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #000000;
    background-color: #ffffff;
    color: #000000;
    font-size: 1rem;
    border-radius: 4px;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    background-color: #f7f7f7;
}

.feedback {
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.feedback.error { color: #b30000; }
.feedback.success { color: #006600; }

/* Footer Elements */
footer {
    border-top: 1px solid #222;
    padding: 60px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.footer-box h4 {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-box ul {
    list-style: none;
}

.footer-box ul li {
    margin-bottom: 0.75rem;
}

.footer-box ul li a {
    color: #888888;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-box ul li a:hover {
    color: #ffffff;
}

.footer-box p {
    color: #888888;
    margin-bottom: 0.5rem;
}

.copyright-box {
    display: flex;
    align-items: flex-end;
}

/* Responsive Adaptive Layers */
@media (max-width: 992px) {
    .split-layout, .contact-layout, .process-text-steps {
        grid-template-columns: 1fr;
    }
    .image-grid-4, .team-grid, .review-grid, .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .big-textbox h1 { font-size: 2.5rem; }
}

@media (max-width: 576px) {
    .image-grid-4, .team-grid, .review-grid, .footer-grid {
        grid-template-columns: 1fr;
    }

    /* --- Global Document Layout Variables --- */
:root {
    --header-height: 60px;      /* Sets a global constant for perfect section clearance calculations */
}

/* FIXED HEADER: Stays locked at the absolute top layer of the browser screen window */
    header {
    position: fixed;            /* 🚀 FIXED: Keeps header floating at the top on scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height); /* Strict layout tracking height footprint */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #A0A0A0;  /* Matches your exact grey background identity */
    padding: 0 30px;
    z-index: 9999;              /* 🚀 FORCED HIGH: Ensures navbar floats completely OVER the slider layers */
    box-shadow: 0 2px 10px rgba(0,0,0,0.15); /* Sleek structural dividing drop shadow element */
    box-sizing: border-box;
    }
    header nav {
        margin-top: 15px;
    }
    header nav a {
        margin: 0 10px;
    }
}