:root {

    --primary: #1a365d;    /* Deep Industrial Blue */

    --brand-red: #E31E24;  /* Fire Red Logo */

    --secondary: #4a5568;  /* Steel Grey */

    --accent: #2b6cb0;     /* Accent Blue */

    --white: #ffffff;

    --light: #f8fafc;      

    --dark: #2d3748; 

}



/* --- FIXES OVERLAPPING NAV ON ANCHOR CLICK --- */

html {

    scroll-behavior: smooth; 

    scroll-padding-top: 95px; /* Creates a clean offset matching the sticky navbar height */

}



body {

    background-color: var(--white);

    color: var(--dark);

    font-family: 'Inter', sans-serif;

    margin: 0;

    -webkit-font-smoothing: antialiased;

}



.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }



/* --- NAVIGATION --- */

nav {

    position: sticky; 

    top: 0; 

    z-index: 1000;

}

.logo { transition: opacity 0.2s ease; }

.logo:hover { opacity: 0.9; }

.nav-links { list-style: none; display: flex; margin: 0; padding: 0; }

.nav-links a { text-decoration: none; transition: color 0.2s ease; }

.nav-links a:hover { color: var(--brand-red) !important; }



/* --- HERO SECTION --- */

.hero { 

    width: 100%;

    overflow: hidden;

    margin-bottom: 0px !important; 

    padding-bottom: 0px !important;

}

.hero h1 { 

    font-size: clamp(2rem, 5vw, 3rem) !important; 

    margin-top: 0px !important;    

    margin-bottom: 10px !important;

}

.hero h3 {

    margin-top: 0px !important;

    margin-bottom: 0px !important;

}



/* --- THE COLLECTION: BENTO GRID --- */

.section { 

    padding: 40px 0; 

}

.bg-light { background-color: var(--light); }

.section-title { 

    font-size: 2.5rem; 

    font-weight: 700; 

    color: var(--primary); 

    margin-top: 0px; 

    margin-bottom: 30px; 

    text-align: center; 

}



.bento-item {

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;

}

.bento-item:hover { 

    transform: translateY(-6px); 

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;

}

.bento-img {

    transition: transform 0.5s ease;

}

.bento-item:hover .bento-img {

    transform: scale(1.04);

}



/* --- INQUIRY SECTION --- */

.inquiry-card {

    background: var(--light);

    padding: 60px;

    border-radius: 28px;

    border: 1px solid #e2e8f0;

    max-width: 800px;

    margin: 0 auto;

}

.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

input, textarea { 

    padding: 16px; 

    border-radius: 12px; 

    border: 1px solid #cbd5e0; 

    width: 100%; 

    box-sizing: border-box; 

    font-family: inherit;

    font-size: 0.95rem;

    transition: border-color 0.2s, box-shadow 0.2s;

}

input:focus, textarea:focus {

    outline: none;

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);

}

textarea { resize: vertical; margin-bottom: 20px; }



.btn-submit {

    background: var(--brand-red);

    color: white;

    padding: 16px 40px;

    border-radius: 12px;

    font-weight: 700;

    border: none;

    cursor: pointer;

    font-size: 1rem;

    width: 100%;

    transition: background 0.2s;

}

.btn-submit:hover { background: var(--primary); }



/* --- FOOTER & WHATSAPP --- */

footer { padding: 40px 0; text-align: center; background: #0f172a; color: #94a3b8; font-size: 0.9rem; }



.whatsapp-float {

    position: fixed;

    bottom: 30px;

    right: 30px; 

    background: #25D366;

    color: white;

    padding: 14px 24px;

    border-radius: 50px;

    font-weight: 700;

    text-decoration: none;

    z-index: 999;

    font-size: 0.95rem;

    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);

    transition: transform 0.2s;

}

.whatsapp-float:hover {

    transform: scale(1.03);

}



/* ========================================== */

/* MOBILE & SAFARI RESPONSIVENESS OVERRIDES   */

/* ========================================== */

@media (max-width: 992px) {

    .bento-grid { grid-template-columns: 1fr !important; }

    .input-row { grid-template-columns: 1fr; gap: 0; }

    input { margin-bottom: 20px; }

    .inquiry-card { padding: 30px 20px; }

}



@media (max-width: 768px) {

    div[style*="display: grid"], 

    div[style*="grid-template-columns"] {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

    }



    .navbar {

        flex-direction: column !important;

        gap: 20px !important;

        padding: 0 10px !important;

    }

    

    .navbar > div {

        flex-direction: column !important;

        gap: 20px !important;

        width: 100%;

    }



    .nav-links {

        flex-direction: row !important;

        flex-wrap: wrap;

        justify-content: center !important;

        gap: 15px !important;

    }



    div[style*="width: 1px; background: #334155"],

    div[style*="height: 25px; width: 1px"] {

        display: none !important;

    }



    .section { padding: 30px 0; }

    .section-title { font-size: 2rem; margin-bottom: 20px; }

    .hero { height: 35vh !important; }

    .hero h1 { font-size: 2.2rem !important; }

}