:root{--accent:#1f6f3b;--dark:#0b0b0b;--muted:#666}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;color:var(--dark);line-height:1.5}
.container{max-width:1000px;margin:0 auto;padding:24px}
.navbar{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#fff;border-bottom:1px solid #eee}
.logo{font-weight:700;letter-spacing:2px}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.nav-links a{text-decoration:none;color:inherit}
.hero{background:linear-gradient(180deg, #eaf6ed 0%, #fff 100%);padding:48px 0 24px 0}
.hero-logo{max-width:140px;height:auto;display:block;margin-bottom:12px}
.hero h1{margin:0 0 8px;font-size:28px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none}
.btn.outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.section{padding:16px 0}
.section.alt{background:#fafafa}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:#fff;padding:16px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.product{background:#fff;padding:12px;border-radius:8px;text-align:center}
.product img{max-width:100%;height:120px;object-fit:contain}
.price{font-weight:600;margin:8px 0}
.site-footer{padding:20px;text-align:center;font-size:14px;color:var(--muted);border-top:1px solid #eee}

/* Hero banner background and responsive rules */
.hero{min-height:420px;background-image:linear-gradient(rgba(12,20,12,0.35),rgba(12,20,12,0.25)),url('banner.jpg');background-size:cover;background-position:center;display:flex;align-items:center;color:#fff;position:relative}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.15));pointer-events:none}
.hero .hero-content{position:relative;z-index:1;padding:32px;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.hero h1{margin:0 0 8px;font-size:clamp(1.6rem,4vw,2.4rem);text-shadow:0 2px 6px rgba(0,0,0,0.45)}

/* bottom-aligned hero text */
.hero-bottom{align-self:stretch;text-align:center;color:inherit;margin-bottom:12px}
.hero-bottom h2{margin:0 0 8px;color:inherit}
.hero-bottom p{margin:0 0 8px}

@media(max-width:1199px){.hero .hero-content{padding:24px 16px 24px 16px}}
@media(max-width:480px){.hero .hero-content{padding:16px 16px 16px 16px}}
.burger{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--dark);margin:4px 0;transition:all .2s}
.nav-links.open{display:flex;flex-direction:column;gap:8px;padding:12px}

@media(max-width:1199px){.container{padding:16px}.hero{min-height:320px}.nav-links{display:none}.burger{display:block}}
@media(max-width:480px){.hero{min-height:260px}.product img{height:100px}}{\rtf1\ansi\ansicpg1252\cocoartf2822
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0

\f0\fs24 \cf0 /* General Setup */\
* \{\
    margin: 0;\
    padding: 0;\
    box-sizing: border-box;\
\}\
\
body \{\
    font-family: 'Helvetica Neue', Arial, sans-serif;\
    line-height: 1.6;\
    color: #333;\
    scroll-behavior: smooth;\
\}\
\
/* Color Variables */\
:root \{\
    --primary: #1a253a; /* Dark Navy */\
    --accent: #ffffff;  /* White */\
    --highlight: #70a1ff; /* Lighter Blue accent */\
    --bg-dark: #0d1117; /* Very dark background */\
\}\
\
/* Navigation */\
.navbar \{\
    display: flex;\
    justify-content: space-between;\
    align-items: center;\
    background-color: var(--bg-dark);\
    padding: 20px 5%;\
    position: sticky;\
    top: 0;\
    z-index: 1000;\
\}\
\
.logo \{\
    color: var(--accent);\
    font-weight: bold;\
    font-size: 1.5rem;\
    letter-spacing: 2px;\
\}\
\
.nav-links \{\
    list-style: none;\
    display: flex;\
\}\
\
.nav-links li \{\
    margin-left: 30px;\
\}\
\
.nav-links a \{\
    text-decoration: none;\
    color: var(--accent);\
    font-weight: 500;\
    transition: color 0.3s;\
\}\
\
.nav-links a:hover \{\
    color: var(--highlight);\
\}\
\
/* Hero Section */\
.hero \{\
    height: 90vh;\
    background-color: var(--primary);\
    background: linear-gradient(rgba(13, 17, 23, 0.8), rgba(13, 17, 23, 0.9)), url('https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');\
    background-size: cover;\
    background-position: center;\
    display: flex;\
    justify-content: center;\
    align-items: center;\
    text-align: center;\
    color: var(--accent);\
    padding: 20px;\
\}\
\
.hero-logo \{\
    max-width: 250px; /* Adjust size of your logo */\
    margin-bottom: 20px;\
\}\
\
.hero h1 \{\
    font-size: 2.5rem;\
    margin-bottom: 10px;\
    letter-spacing: 3px;\
    text-transform: uppercase;\
\}\
\
.hero p \{\
    font-size: 1.2rem;\
    margin-bottom: 30px;\
    max-width: 600px;\
    margin-left: auto;\
    margin-right: auto;\
\}\
\
/* Sections */\
.section-dark \{\
    background-color: var(--bg-dark);\
    color: var(--accent);\
    padding: 80px 20px;\
    text-align: center;\
\}\
\
.section-light \{\
    background-color: #f4f4f4;\
    color: var(--primary);\
    padding: 80px 20px;\
    text-align: center;\
\}\
\
.container \{\
    max-width: 1100px;\
    margin: 0 auto;\
\}\
\
h2 \{\
    font-size: 2rem;\
    margin-bottom: 40px;\
    text-transform: uppercase;\
    letter-spacing: 2px;\
\}\
\
/* Grid for Services */\
.grid \{\
    display: grid;\
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\
    gap: 30px;\
\}\
\
.card \{\
    background: white;\
    padding: 30px;\
    border-radius: 8px;\
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);\
    transition: transform 0.3s ease;\
\}\
\
.card:hover \{\
    transform: translateY(-10px);\
\}\
\
.card h3 \{\
    margin-bottom: 15px;\
    color: var(--primary);\
\}\
\
/* Buttons */\
.btn \{\
    display: inline-block;\
    background: var(--accent);\
    color: var(--primary);\
    padding: 12px 30px;\
    text-decoration: none;\
    border-radius: 5px;\
    font-weight: bold;\
    transition: background 0.3s;\
\}\
\
.btn:hover \{\
    background: #ccc;\
\}\
\
.btn-outline \{\
    background: transparent;\
    border: 2px solid var(--accent);\
    color: var(--accent);\
\}\
\
.btn-outline:hover \{\
    background: var(--accent);\
    color: var(--primary);\
\}\
\
/* Video Placeholder */\
.video-placeholder \{\
    background: #222;\
    height: 300px;\
    max-width: 600px;\
    margin: 0 auto;\
    display: flex;\
    justify-content: center;\
    align-items: center;\
    border-radius: 10px;\
    border: 1px solid #444;\
\}\
\
/* Footer */\
footer \{\
    background: #000;\
    color: white;\
    text-align: center;\
    padding: 20px;\
\}\
\
/* Mobile Responsive */\
@media (max-width: 768px) \{\
    .nav-links \{\
        display: none;\
    \}\
    .hero h1 \{\
        font-size: 1.8rem;\
    \}\
\}}

/* Fullscreen hero video styles */
.hero-section, .hero {
    width: 100%;
    height: 100vh; /* full viewport height */
    min-height: 0; /* allow exact 100vh sizing */
    position: relative;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* cover effect, crop sides on narrow viewports */
    z-index: 0; /* keep behind content but above hero background */
    pointer-events: none;
    transition: opacity 0.2s linear;
    opacity: 1;
}

/* Ensure content and overlay stack above the video */
.hero .hero-content { z-index: 2; position: relative; }
.hero::before { z-index: 1; }

/* Remove the legacy static background so the video shows through */
.hero { background: none !important; background-image: none !important; background-size: initial !important; }

/* If the video fails to load, restore the banner as a background fallback */
.hero.video-failed {
    background: linear-gradient(rgba(12,20,12,0.35), rgba(12,20,12,0.25)), url('banner.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Notify form styles */
.notify-wrapper{margin-top:18px;padding:12px;background:rgba(255,255,255,0.9);border-radius:8px;display:block}
.notify-wrapper p{margin:8px 0}
.notify-wrapper input[type="email"]{padding:8px 10px;border:1px solid #ddd;border-radius:6px;margin-right:8px;max-width:320px}
.notify-wrapper .btn.small{padding:8px 12px;font-size:0.9rem}
.notify-wrapper .muted{color:#666;margin-top:8px}