/* =========================================================
   Installazioni Generali — Full CSS (mobile fixes included)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
    --bg:#f7f8fa; --ink:#1e1f25; --muted:#5c6b7e;
    --royal:#2b65f8; --vivid:#ff3131; --silver:#b5bcc8; --navy:#0a1f46;
    --line:rgba(0,0,0,.08); --radius:16px; --shadow:0 10px 28px rgba(0,0,0,.08);

    /* Services section */
    --bg-dark:#041830; --card-bg:#07213f; --text:#ffffff; --muted2:#a0b4c4;
    --gold:#ffd200; --accent:#0a84ff; --radius2:12px;

    /* Vision/Mission split */
    --ink2:#eaf6ff; --muted3:#9db1c1; --panel:#0b2233; --accent2:#f2b705; --dot2:#2ec4ff;
    --btn:#f7ad2a; --btn-ink:#0a2230; --radius3:16px;

    /* Contact */
    --bgc:#081521; --panelc:#0f2233; --inkc:#f4f6fa; --mutedc:#a2b5c7; --linec:rgba(255,255,255,.1);
    --brand:#f6c343; --brand-2:#d2a92e; --radiusc:18px; --shadowc:0 20px 48px rgba(0,0,0,.35);

    /* Footer */
    --footer-bg:#06121b; --footer-line:rgba(255,255,255,.08);
    --footer-ink:#f4f6fa; --footer-muted:#a1b4c5; --footer-brand:#f6c343;

    --nav-mobile-h: 72px;   /* was 64px */
    /* height of the top bar on phone */

}

/* ---------- Base / reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
    font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55;
    overflow-x:hidden; opacity:0; animation:fadeIn 800ms ease forwards;
}
@keyframes fadeIn{ to{ opacity:1 } }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

.section{ padding:80px 20px }
.container{ max-width:1200px; margin:auto }
h2{ font-size:clamp(24px,3.2vw,32px); margin-bottom:18px }

/* =========================================================
   Navigation (Silver & Navy)
   ========================================================= */
.site-nav{
    position:sticky; top:0; z-index:50;
    background:linear-gradient(180deg, rgba(10,31,70,.92), rgba(10,31,70,.85));
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
    max-width:1200px; margin:auto; padding:14px 20px;
    display:flex; align-items:center; gap:18px;
    /*font-size: 21px;*/
}
.brand{
    display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; letter-spacing:.2px;
    text-decoration:none;
}
.brand .logo{ width:42px; height:42px; display:inline-grid; place-items:center; }
.brand .logo img{ max-width:100%; max-height:100%; height:auto; }
.brand-text strong{ color:var(--silver); font-weight:800 }

.nav-menu{ margin-left:auto; display:flex; gap:22px }
.nav-menu a{ color:#e7ecf6; font-weight:600; opacity:.9; padding:10px 12px; border-radius:10px }
.nav-menu a:hover{ opacity:1; color:#fff; background:rgba(255,255,255,.06) }

.nav-phone{
    margin-left:24px; color:#fff; font-weight:800; display:flex; align-items:center; gap:8px;
}
.nav-phone i{ color:#ffd24a }

/* Burger */
.nav-burger{
    display:none; margin-left:auto; width:42px; height:53px; border:0; background:transparent;
    position:relative; cursor:pointer;
}
.nav-burger span{
    position:absolute; left:9px; right:9px; height:2px; background:#fff; border-radius:2px;
    transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-burger span:nth-child(1){ top:12px }
.nav-burger span:nth-child(2){ top:20px }
.nav-burger span:nth-child(3){ top:28px }
.nav-burger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg) }
.nav-burger.is-open span:nth-child(2){ opacity:0 }
.nav-burger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg) }

@media (max-width: 980px){
    .nav-burger{ display:inline-block }
    .nav-menu{
        position:absolute; inset:auto 0 0 0; top:60px;
        display:flex; flex-direction:column; gap:8px;
        background:rgba(10,31,70,.96); border-top:1px solid rgba(255,255,255,.08);
        padding:12px 16px; max-height:0; overflow:hidden; transition:max-height .24s ease;
    }
    .site-nav .nav-menu.open{
        max-height:320px }
    .nav-phone{ display:none }
    .nav-inner{ position:relative;
        font-size: 21px;
    }
}

/* =========================================================
   Hero — Tanks Background (mobile-safe)
   ========================================================= */
.hero-tanks{
    position:relative; min-height:115vh; height:auto; display:grid; place-items:center;
    overflow:hidden;
    background:url("../images/final_back.png") center/cover no-repeat;
}
.hero-tanks::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:
            radial-gradient(1200px 600px at 65% 55%, rgba(0,0,0,.15), transparent 60%),
            linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 70%);
}
.hero-content{
    position:relative; z-index:1; width:min(100%, 1100px);
    padding: clamp(32px, 8vw, 72px) 20px; text-align:left;
}

/* ===== Full-height hero (fills screen under the sticky nav) ===== */
:root{ --nav-h: 64px; }             /* tweak if your nav is taller/shorter */

@media (min-width: 980px){
    :root{ --nav-h: 72px; }           /* slightly taller nav on desktop */
}

.hero-tanks{
    /* fallback for older browsers */
    min-height: calc(115vh - var(--nav-h));

    /* modern, correct on mobile when the URL bar shows/hides */
    min-height: calc(115svh - var(--nav-h));
    min-height: calc(115dvh - var(--nav-h));

    /* keep the background truly edge-to-edge */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    /* keep content vertically centered nicely */
    display: grid;
    place-items: center;
}

.hero-content{
    /* add some breathing room so the text never hugs the top */
    padding-block: clamp(32px, 10vh, 120px);
    margin-bottom:240px ;
}

.hero-title{
    margin:0 0 16px; color:#fff; font-weight:800; line-height:1.4;
    font-size: clamp(30px, 7vw, 64px);
    text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero-title .dot{ color:#ffd24a }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap }
.btn-primary,.btn-ghost{
    height:52px; padding:0 22px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:800; letter-spacing:.4px; transition:transform .15s, filter .2s, box-shadow .2s;
}
.btn-primary{
    background:#ffd24a; color:#1a2233; border:1px solid rgba(0,0,0,.08);
    box-shadow:0 14px 30px rgba(255,210,74,.25);
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.02) }
.btn-ghost{
    background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7);
    box-shadow:0 10px 26px rgba(0,0,0,.15);
}
.btn-ghost:hover{ transform:translateY(-2px); filter:brightness(1.03) }

/* =========================================================
   Services (dark section)
   ========================================================= */
.services { background: var(--bg-dark); padding: 90px 20px; }
.section-header { text-align: left; margin-bottom: 50px; }
.section-header h2 { color: var(--text); font-size: 2.2rem; font-weight: 700; }
.section-header .accent { color: var(--gold); }
.section-header p { color: var(--muted2); margin-top: 10px; font-size: 1rem; }

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.service-card {
    background: var(--card-bg);
    border-radius: var(--radius2);
    padding: 32px 26px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.icon { margin-bottom: 16px; }
.icon img { width: 50px; height: 50px; object-fit: contain; filter: brightness(1) invert(0) sepia(1) saturate(800%) hue-rotate(15deg); }
.service-card h3 { color: var(--text); margin-bottom: 12px; font-size: 1.3rem; font-weight: 600; }
.service-card p { color: var(--muted2); font-size: 0.96rem; line-height: 1.5; margin-bottom: 14px; }
.learn-more { color: var(--accent); text-transform: uppercase; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; }
.learn-more:hover { color: var(--gold); }

/* =========================================================
   Divider (stats)
   ========================================================= */
.divider{
    border-top: 2px ridge #FFD24A;
    border-bottom: 2px ridge #FFD24A;
    display: flex; justify-content: center; align-items: center;
    gap: clamp(18px, 8vw, 120px);
    text-align: center;
    padding: 18px clamp(12px, 5vw, 32px);
    background: linear-gradient(135deg, #0A1F46, #1B2E5A);
}
.divider h3 {
    color: white; padding:6px 20px; border-radius: 22px; font-size: clamp(16px, 4.6vw, 20px);
    background: linear-gradient(180deg, rgba(10, 31, 70, 0.92), rgba(10, 31, 70, 0.85));
}
.divider span { font-size: clamp(22px, 7vw, 36px) }

/* =========================================================
   Quality + Gallery
   ========================================================= */
.quality-section{ background:#0b2233; color:#e6f0f8; padding:72px 0 }
.quality-wrap{ max-width:1100px; margin:0 auto; padding:0 16px }
.quality-head{ position:relative; margin-bottom:18px }
.quality-head h2{
    font:700 42px/1.15 Poppins,system-ui,Segoe UI,Roboto,Arial;
    color:#eaf6ff; margin:0 0 10px
}
.quality-head .accent{ color:#f2b705; margin-right:8px }
.quality-head .dot{ color:#2ec4ff }
.quality-head p{ color:#9db1c1; margin:0 0 6px; font-weight:500 }

.gallery-bar{
    display:flex; align-items:center; justify-content:space-between;
    margin:14px 0 16px;
}
.gallery-status{ font-size:13px; color:#9db1c1 }
.gallery-controls{ display:flex; gap:10px }
.nav-btn{
    width:44px; height:44px; border-radius:10px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06); color:#eaf6ff; cursor:pointer;
    font-size:20px; line-height:1; display:grid; place-items:center;
    transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.nav-btn:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px) }
.nav-btn:active{ transform:translateY(0) }
.nav-btn:disabled{ opacity:.45; cursor:not-allowed }

/* Default: 3 columns */
.gallery-grid{
    display:grid; gap:22px;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
.tile{
    position:relative; overflow:hidden; border-radius:10px; background:#0d2a3c;
    box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.tile::before{ content:""; display:block; aspect-ratio:4/3 }
.tile > img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    transform:none;
}
.gallery-grid img{ image-orientation: from-image; }

/* Optional: on very small phones, go 2 columns */
@media (max-width: 420px){
    .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* =========================================================
   Vision / Mission / Quality Split
   ========================================================= */
.svc-split{ display:grid; grid-template-columns: 1fr 1fr; min-height:540px; background:#061a28; }
.svc-media{ position:relative; overflow:hidden; }
.svc-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.svc-panel{
    background:var(--panel); color:var(--ink2); padding:64px 64px 72px;
    display:flex; flex-direction:column; gap:24px;
}
.svc-head h2{
    margin:0 0 12px; font:800 40px/1.15 Poppins,system-ui,Segoe UI,Roboto,Arial; letter-spacing:.2px;
}
.svc-head .accent{ color:var(--accent2); margin-right:8px }
.svc-head .dot{ color:var(--dot2) }
.svc-head p{ margin:0 0 8px; font-weight:600 }
.svc-head .muted{ color:var(--muted3); font-weight:500 }

.svc-list{
    --gap:18px;
    list-style:none; margin:8px 0 12px; padding:0;
    display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap) 22px;
}
.svc-list li{ position:relative; padding-left:18px; color:var(--ink2); opacity:.95; font-weight:600; }
.svc-list li::before{
    content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--dot2);
    box-shadow: 10px 0 0 rgba(255,255,255,.06);
}
.btn-primary.svc{
    align-self:flex-start; display:inline-grid; place-items:center;
    height:48px; padding:0 22px; border-radius:12px; background:var(--btn); color:var(--btn-ink);
    font:700 14px/1 Poppins,system-ui; text-transform:uppercase; letter-spacing:.08em;
    box-shadow: 0 12px 28px rgba(247,173,42,.25);
}

@media (max-width: 1100px){ .svc-head h2{ font-size:34px } }
@media (max-width: 900px){
    .svc-split{ grid-template-columns:1fr }
    .svc-media{ height:48vh; min-height:320px }
    .svc-panel{ padding:32px 22px 40px }
    .svc-list{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
@media (max-width: 520px){
    .svc-head h2{ font-size:28px }
    .svc-list{ grid-template-columns: 1fr }
    .svc-panel{ padding:24px 18px 28px }
}

/* =========================================================
   Contact card (floating labels)
   ========================================================= */
.contact-wrap{ min-height:100vh; display:grid; place-items:center; padding:48px 16px; background:var(--bgc) }
.contact-card{
    width:min(100%,940px);
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border:1px solid var(--linec); border-radius:24px; box-shadow:var(--shadowc); overflow:hidden;
}
.contact-head{ padding:28px 28px 8px; border-bottom:1px solid var(--linec) }
.contact-head h1{ margin:0 0 6px; font:800 32px/1.15 Poppins,system-ui;color: #F6C343 }
.contact-head .brand{color:var(--brand)}
.contact-head p{margin:0 0 12px;color:var(--mutedc);font-weight:600}

.contact-form{padding:22px 28px 28px;}
.grid{ display:grid; gap:16px; grid-template-columns: 2fr 0.9fr; align-items:start; }
.form-fields{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.span-2{ grid-column:span 2 }

.field{ position:relative; background:rgba(255,255,255,.02); border:1px solid var(--linec); border-radius:var(--radius); }
.field input, .field select, .field textarea{
    width:100%; padding:22px 16px 10px; background:transparent; color:var(--inkc);
    border:0; font:600 15px/1.4 Poppins,system-ui; outline:none;
}
.field textarea{ resize:vertical; min-height:140px; }
.field label{
    position:absolute; left:14px; top:12px; font:600 12px/1 Poppins; color:var(--mutedc);
    transition:all .18s ease; pointer-events:none;
}
.field:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(246,195,67,.18) inset; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
    transform:translateY(-8px) scale(.94); color:var(--brand);
}

.contact-socials{
    background:rgba(255,255,255,.02); border:1px solid var(--linec); border-radius:18px;
    padding:28px 24px; text-align:center;
}
.contact-socials h3{ font:700 20px/1.2 Poppins; color:var(--brand); margin:0 0 8px; }
.contact-socials p{ color:var(--mutedc); font-weight:500; margin:0 0 16px; line-height:1.5; }
.contact-icons{ display:flex; justify-content:center; gap:18px; margin-bottom:14px; }
.soc{
    width:56px;height:56px;border-radius:50%;
    display:grid;place-items:center;color:#fff;font-size:28px;text-decoration:none;
    box-shadow:0 12px 28px rgba(0,0,0,.3); transition:transform .15s ease, filter .2s ease;
}
.soc:hover{transform:translateY(-2px);filter:brightness(1.05);}
.soc.wa{background:#25D366;}
.soc.ms{background:#0078FF;}
.soc.ig{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.soc-note{ font-size:13px; color:var(--mutedc); margin-top:6px; line-height:1.4; }

.consent{ display:flex; align-items:flex-start; gap:10px; margin:14px 0 8px; color:var(--mutedc); font-weight:600; }
.consent input{width:18px;height:18px;margin-top:3px}
.actions{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.btn{
    height:48px; padding:0 22px; border-radius:14px; border:0; cursor:pointer;
    font:800 13px/1 Poppins; letter-spacing:.08em; text-transform:uppercase;
    color:#0b0f1a; background:linear-gradient(135deg,var(--brand),var(--brand-2));
    box-shadow:0 14px 32px rgba(246,195,67,.25);
    transition:transform .15s ease,filter .2s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn:active{transform:translateY(0)}
.small{color:var(--mutedc);font-weight:600}
.hp{position:absolute !important;left:-9999px !important;opacity:0 !important;height:0 !important;width:0 !important;}

@media(max-width:960px){
    .contact-form .grid{ grid-template-columns:1fr }
    .form-fields{ grid-template-columns:1fr }
}

/* Title + logo tweaks */
.contact-title{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.contact-logo{ width:52px; height:auto; filter:drop-shadow(0 0 6px rgba(246,195,67,.25)); transition:transform .25s ease; }
.contact-logo:hover{ transform:scale(1.06) }

@media(max-width:640px){
    .contact-logo{ width:95px; border-radius:17px; }
    .contact-head h1{ font-size:26px;
        line-height:1.2;
        color: #F6C343 }
}

/* Toast */
.toast{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
    background:var(--panelc); color:var(--inkc); border:1px solid var(--linec);
    border-radius:14px; padding:12px 16px; box-shadow:var(--shadowc);
    opacity:0; transition:all .25s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(246,195,67,.4)}
.toast.error{border-color:rgba(255,86,86,.4)}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
    background:var(--footer-bg); color:var(--footer-ink); border-top:1px solid var(--footer-line);
    padding:72px 24px 0;
}
.footer-inner{
    display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:48px;
    max-width:1200px; margin:0 auto 48px;
}
.footer-logo{ width:160px; margin-bottom:18px; }
.footer-brand p{ color:var(--footer-muted); font-weight:500; line-height:1.6; max-width:320px; }
.socials{ display:flex; gap:14px; margin-top:20px; }
.socials a{ width:38px;height:38px;display:grid;place-items:center; border-radius:50%; background:rgba(255,255,255,.08); color:var(--footer-ink); transition:all .2s ease; }
.socials a:hover{ background:var(--footer-brand); color:#0b0f1a; }
.footer-links h4,.footer-contact h4{ color:var(--footer-brand); font:700 15px/1.3 Poppins; letter-spacing:.04em; margin:0 0 12px; }
.footer-links ul,.footer-contact ul{ list-style:none; margin:0; padding:0; }
.footer-links li,.footer-contact li{ color:var(--footer-muted); font-weight:500; margin-bottom:8px; line-height:1.5; }
.footer-links a{ color:var(--footer-muted); transition:color .2s ease; }
.footer-links a:hover{ color:var(--footer-brand) }
.footer-contact li i{ color:var(--footer-brand); margin-right:8px; font-size:15px; }
.footer-bottom{
    border-top:1px solid var(--footer-line);
    display:flex; justify-content:space-between; align-items:center;
    max-width:1200px; margin:0 auto; padding:20px 0 28px;
    font-size:13px; color:var(--footer-muted);
}
.footer-bottom a{ color:var(--footer-muted); transition:color .2s ease; }
.footer-bottom a:hover{ color:var(--footer-brand) }
@media(max-width:960px){ .footer-inner{grid-template-columns:repeat(2,1fr);gap:32px;} }
@media(max-width:640px){ .footer-inner{grid-template-columns:1fr;} .footer-bottom{flex-direction:column;gap:6px;text-align:center;} }

/* =========================================================
   WhatsApp FAB
   ========================================================= */
.wa-fab{
    position:fixed; right:18px; bottom:18px; z-index:9999;
    width:58px; height:58px; border-radius:50%;
    display:grid; place-items:center; background:linear-gradient(135deg, #25D366, #1ebe57);
    color:#fff; text-decoration:none; box-shadow:0 14px 30px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.25); transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.wa-fab:hover{ transform:translateY(-2px); filter:brightness(1.05) }
.wa-fab svg{ width:28px; height:28px; fill:#fff }
@media (max-width:480px){ .wa-fab{ right:14px; bottom:14px; width:54px; height:54px } }

/* =========================================================
   Global safety: no sideways scroll
   ========================================================= */
html, body{ max-width:100%; overflow-x:hidden }
img, svg, video, canvas{ max-width:100%; height:auto }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }



/*LANGUAGE*/
.language ul{

    list-style-type: none;  /* remove bullet points */
    padding: 0;
    margin: 0;
}

.language  li {
    display: inline;        /* make list items inline */
    margin-right: 15px;     /* space between links */

}

.language a{

    text-decoration: none;  /* remove underline */
    color: #ffffff;         /* link color */
    font-weight: bold;

}
.language #worldsymbol{
    color: #ffd24a;         /* link color */

}


/*#PHONE-NAV*/
/* ========== MOBILE NAV ONLY ========== *//*#PHONE-NAV*/
/* ========== MOBILE NAV ONLY ========== */

/* mobile (phone / tablet) */
@media (max-width: 991.98px){

    /* make nav fixed and keep it above the slide menu */
    .site-nav{
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1000;
    }
    .hero-title{
        font-size: clamp(30px, 10vw, 127px);

    }

    /* push page content down so it doesn't sit under the bar */
    body{
        padding-top: var(--nav-mobile-h);
    }

    /* hide desktop inline menu / phone / language */
    .site-nav .nav-menu,
    .site-nav .nav-phone,
    .language{
        display: none !important;
    }

    /* inline top bar */
    .site-nav .nav-inner{
        padding: 20px 14px;
        gap: 10px;

    }

    /* language button */
    .m-lang{
        margin-left: auto;
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    .m-lang-btn{
        display:flex; align-items:center; gap:6px;
        background:transparent; color:#fff;
        border:1px solid rgba(255,255,255,.18);
        padding:8px 10px; border-radius:10px;
        font-weight:700;
    }
    .m-lang-menu{
        position:absolute; right:0; top:calc(100% + 8px);
        list-style:none; margin:0; padding:6px;
        background:rgba(10,31,70,.98);
        border:1px solid rgba(255,255,255,.12);
        border-radius:12px;
        min-width:110px; display:none;
        z-index: 1002;
    }
    .m-lang.open .m-lang-menu{ display:block; }
    .m-lang-menu a{
        display:block; padding:10px 12px;
        color:#e7ecf6; border-radius:8px;
        text-decoration:none;
    }
    .m-lang-menu a:hover{
        background:rgba(255,255,255,.08);
        color:#fff;
    }

    /* slide menu PANEL – under the bar */
    .m-menu{
        position: fixed;
        left: 0;
        right: 0;
        top: var(--nav-mobile-h);        /* <── key change */
        background: rgba(10,31,70,.98);
        border-bottom: 1px solid rgba(255,255,255,.08);
        display: grid;
        gap: 6px;
        padding: 0 16px;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease, padding .25s ease;
        z-index: 1001;
    }
    .m-menu.open{
        max-height: 60vh;
        padding: 12px 16px 16px;
    }
    .m-menu a{
        color:#e7ecf6;
        font-weight:700;
        padding:12px 10px;
        border-radius:10px;
        text-decoration:none;
    }
    .m-menu a:hover{
        background:rgba(255,255,255,.08);
        color:#fff;
    }
    .m-call{
        margin-top:6px;
        display:flex;
        align-items:center;
        gap:8px;
    }

    /* dark backdrop behind open menu */
    .m-backdrop{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.35);
        backdrop-filter:blur(1px);
        z-index: 999;
    }

    /* lock scroll when menu open */
    body.m-locked{
        overflow:hidden;
        touch-action:none;
    }
}

/* desktop (>= 992px): only desktop nav visible */
@media (min-width: 992px){
    .m-burger,
    .m-lang,
    .m-menu,
    .m-backdrop{
        display:none !important;
    }

    .nav-menu,
    .nav-phone,
    .language{
        display:flex !important;
    }
    .language2{
        display: none;
    }






}

/* burger icon + X animation (global, used on mobile only) */
.m-burger{

    width:44px;
    height:18px;
    margin-left:8px;
    border:0;
    background:transparent;
    display:inline-grid;
    place-items:center;
    cursor:pointer;
    z-index:1002;           /* above the menu panel */
}
.m-burger span{
    width:24px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:.2s;
}
.m-burger span:nth-child(2){ transform:translateY(6px); }
.m-burger span:nth-child(3){ transform:translateY(12px); }

/* when menu is open → show X */
.m-burger.is-open span:nth-child(1){
    transform: translateY(6px) rotate(45deg);
}
.m-burger.is-open span:nth-child(2){
    opacity:0;
}
.m-burger.is-open span:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
}

.brand{
    flex: 1 1 auto;
    min-width: 0;
}

.brand .logo{
    width: 32px;
    height: 32px;
}

.brand-text{
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* keep lang + burger fixed size, no shrinking */
.m-lang,
.m-burger{
    flex-shrink: 0;
}

/* slightly tighter padding so everything breathes */
.site-nav .nav-inner{
    padding-inline: 10px;
}

.m-burger :last-child {
    /* Styles for the last child element inside .m-burger */
    color: red;
}

/*.language2{*/
/*    font-size: 18px;*/
/*    color: white;*/
/*    text-align: center;*/
/*    justify-self: end;*/
/*    margin-right: 20px*/
/*}*/
/*.language2 ul{*/

/*    list-style: none;*/

/*}*/


/* default: desktop visible, mobile hidden */
.language {
    display: flex;
}

.lang-switcher-mobile {
    display: none;
}

/* mobile only */
@media (max-width: 768px) {
    .language {
        display: none;                /* hide desktop language on phone */
    }

    .lang-switcher-mobile {
        display: block;               /* show globe only on phone */
        position: relative;
        margin-left: 0.75rem;
        margin-right: 14px;
    }

    .lang-toggle-mobile {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 999px;
        padding: 6px 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #fff;
    }

    .lang-menu-mobile {
        position: absolute;
        top: 120%;
        right: 0;
        background: rgba(0, 0, 0, 0.9);
        border-radius: 8px;
        padding: 6px 0;
        list-style: none;
        margin: 0;
        min-width: 70px;
        display: none;
        z-index: 999;
    }

    .lang-menu-mobile li {
        margin: 0;
    }

    .lang-menu-mobile a {
        display: block;
        padding: 6px 12px;
        font-size: 0.85rem;
        text-decoration: none;
        color: #fff;
        white-space: nowrap;
    }

    .lang-menu-mobile a:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .lang-switcher-mobile.open .lang-menu-mobile {
        display: block;
    }

    .lang-menu-mobile a.active {
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
    }

    .nav-inner {
        display: flex;
        align-items: center;
    }

    /* This pushes the globe all the way to the right */
    .lang-switcher-mobile {
        margin-left: auto;
    }
}

/* ==== SERVICES: horizontal slide on phones only ==== */
@media (max-width: 768px) {
    .services {
        padding: 60px 0 40px;
    }

    .services .container {
        padding-inline: 16px;
    }

    .section-header {
        text-align: left;
        margin-bottom: 28px;
    }

    /* Make the cards horizontal + swipeable */
    .service-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; /* smooth on iOS */
    }

    .service-card {
        flex: 0 0 82%;          /* show ~1 card at a time */
        scroll-snap-align: start;
        min-width: 82%;
    }

    /* Optional: hide ugly scrollbar on most mobile browsers */
    .service-grid::-webkit-scrollbar {
        display: none;
    }
    .service-grid {
        -ms-overflow-style: none;  /* IE/Edge */
        scrollbar-width: none;     /* Firefox */
    }

    .hero-tanks{
        position:relative; min-height:95vh; height:auto; display:grid; place-items:center;
        overflow:hidden;
        background:url("../images/final_back.png") center/cover no-repeat;
    }

    .hero-content{
        width: 86%;
        margin-bottom:38%;

    }

    .form-fields{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .divider h3{
        font-size: clamp(12px, 3.6vw, 10px)
    }
.quality-head h2{
    font:700 26px/1.20 Poppins,system-ui,Segoe UI,Roboto,Arial

}

.section-header{
    font:700 26px/1.20 Poppins,system-ui,Segoe UI,Roboto,Arial

}
.section-header h2{
    font-size: 1.7rem;
}


}