/* =========================================================
   LATEST POLYMERS — style.css (cleaned & refined)
   ========================================================= */

:root{
    --primary:#003366;
    --primary-deep:#001f3f;
    --secondary:#0d6efd;
    --cyan:#4cc9f0;
    --dark:#000000;
    --text:#000000;
    --muted:#333333;
    --line:#e2e8f0;
    --light:#f4f7fb;

    --font-body:'Barlow', 'Segoe UI', Arial, sans-serif;
    --font-head:'Barlow Condensed', 'Segoe UI', Arial, sans-serif;

    /* one spacing rhythm for every section */
    --section-y:clamp(48px, 6vw, 84px);
    --radius-lg:18px;
    --radius-md:12px;
    --shadow:0 18px 40px -18px rgba(0,31,63,.25);
}

body{
    font-family:var(--font-body);
    font-size:17px;
    line-height:1.75;
    color:var(--text);
    overflow-x:hidden;
}

h1,h2,h3,h4,h5{
    font-family:var(--font-head);
    color:var(--dark);
    letter-spacing:.2px;
}

p{ margin-bottom:1.1rem; }

img{ max-width:100%; }

a:focus-visible,
button:focus-visible{
    outline:3px solid var(--cyan);
    outline-offset:3px;
}

/* ---------- Section rhythm ---------- */
.section-padding,
.counter-section,
.products-section,
.why-choose-section,
.clients-section{
    padding:var(--section-y) 0;
}

.section-head{
    max-width:720px;
    margin:0 auto 56px;
    text-align:center;
}

.section-title{
    font-size:clamp(30px, 4vw, 46px);
    font-weight:700;
    line-height:1.15;
    color:var(--dark);
    margin-bottom:18px;
}

.section-subtitle{
    color:var(--muted);
    font-size:18px;
    max-width:680px;
    margin:0 auto;
}

.section-badge,
.client-badge,
.cta-badge{
    display:inline-block;
    padding:6px 16px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:16px;
}
.section-badge{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); }
.client-badge,
.cta-badge{ background:#e8f1ff; color:#0056b3; }

/* =========================================================
   TOP BAR
   ========================================================= */
.top-bar{
    background:var(--primary-deep);
    color:#dbeafe;
    font-size:14px;
    padding:9px 0;
}
.top-contact span,
.top-right span{ margin-right:24px; }
.top-contact i,
.top-right i{ color:var(--cyan); margin-right:8px; }
.top-right a{ color:#fff; margin-left:12px; transition:.3s; }
.top-right a:hover{ color:var(--cyan); }
.top-contact a{ color:#dbeafe; text-decoration:none; margin-right:24px; transition:color .3s; }
.top-contact a:hover{ color:#fff; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.main-header{
    position:sticky;
    top:0;
    z-index:999;
    background:#fff;
    box-shadow:0 1px 0 var(--line);
    transition:box-shadow .3s;
}
.main-header.scrolled{ box-shadow:0 10px 30px -12px rgba(0,31,63,.25); }

.navbar{ padding:14px 0; transition:padding .3s; }
.main-header.scrolled .navbar{ padding:6px 0; }

.navbar-brand img{ max-height:68px; transition:max-height .3s; }
.main-header.scrolled .navbar-brand img{ max-height:54px; }

.navbar-nav .nav-link{
    color:#000000;
    font-weight:600;
    font-size:16px;
    padding:10px 15px !important;
    border-radius:8px;
    position:relative;
    transition:color .25s, background .25s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-item.show > .nav-link{ color:var(--secondary); }

.navbar-nav .nav-link.active{
    color:var(--secondary);
    background:#e8f1ff;
}

/* caret: Font Awesome chevron that rotates */
.navbar-nav .dropdown-toggle::after{
    border:0;
    content:"\f107";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:12px;
    vertical-align:1px;
    margin-left:6px;
    transition:transform .3s;
}

/* dropdown panel look */
.navbar .dropdown-menu{
    border:0;
    border-radius:var(--radius-md);
    box-shadow:0 22px 50px -12px rgba(0,31,63,.3);
    padding:10px;
    min-width:250px;
    margin-top:0;
}
.navbar .dropdown-item{
    position:relative;
    padding:10px 14px 10px 30px;
    border-radius:8px;
    font-weight:500;
    color:#000000;
    transition:background .25s, color .25s, padding .25s;
}
.navbar .dropdown-item::before{
    content:'';
    position:absolute;
    left:14px;
    top:50%;
    width:6px;
    height:6px;
    margin-top:-3px;
    border-radius:50%;
    background:#cbd5e1;
    transition:background .25s;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
    background:#f1f6ff;
    color:var(--secondary);
    padding-left:36px;
}
.navbar .dropdown-item:hover::before,
.navbar .dropdown-item:focus::before{ background:var(--secondary); }

.quote-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--secondary);
    color:#fff;
    text-decoration:none;
    padding:11px 26px;
    border-radius:50px;
    font-weight:600;
    transition:background .3s;
    white-space:nowrap;
}
.quote-btn:hover{ background:var(--primary); color:#fff; }

/* ---------- DESKTOP: open on hover ---------- */
@media(min-width:992px){
    .navbar-nav{ gap:2px; }

    .navbar-nav .dropdown{ position:relative; }

    /* invisible bridge so the menu doesn't close in the gap */
    .navbar-nav .dropdown::after{
        content:'';
        position:absolute;
        left:0;
        right:0;
        top:100%;
        height:18px;
    }

    .navbar .navbar-nav .dropdown-menu{
        display:block;
        position:absolute;
        top:calc(100% + 14px);
        left:0;
        opacity:0;
        visibility:hidden;
        transform:translateY(10px);
        transition:opacity .25s ease, transform .25s ease, visibility .25s;
        pointer-events:none;
    }
    /* small arrow on top of the panel */
    .navbar .navbar-nav .dropdown-menu::before{
        content:'';
        position:absolute;
        top:-6px;
        left:28px;
        width:12px;
        height:12px;
        background:#fff;
        transform:rotate(45deg);
        border-radius:2px;
    }

    .navbar-nav .dropdown:hover > .dropdown-menu,
    .navbar-nav .dropdown:focus-within > .dropdown-menu{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }
    .navbar-nav .dropdown:hover > .dropdown-toggle,
    .navbar-nav .dropdown:focus-within > .dropdown-toggle{ color:var(--secondary); }
    .navbar-nav .dropdown:hover > .dropdown-toggle::after,
    .navbar-nav .dropdown:focus-within > .dropdown-toggle::after{ transform:rotate(180deg); }

    .quote-btn{ margin-left:12px; }
}

/* ---------- MOBILE: tap to open ---------- */
@media(max-width:991px){
    .navbar-brand img,
    .main-header.scrolled .navbar-brand img{ max-height:50px; }

    .navbar-toggler{ border:0; padding:8px; }
    .navbar-toggler:focus{ box-shadow:0 0 0 3px #e8f1ff; }

    .navbar-collapse{
        margin-top:12px;
        padding:8px 0 18px;
        border-top:1px solid var(--line);
        max-height:calc(100vh - 110px);
        overflow-y:auto;
    }
    .navbar-nav .nav-link{
        padding:13px 6px !important;
        border-radius:0;
        border-bottom:1px solid #f1f5f9;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .navbar-nav .nav-link.active{ background:none; }
    .navbar-nav .nav-item.show > .dropdown-toggle::after{ transform:rotate(180deg); }

    .navbar .dropdown-menu{
        box-shadow:none;
        background:#f8fafc;
        border-radius:10px;
        margin:6px 0 10px;
        padding:6px;
    }
    .quote-btn{ margin-top:18px; width:100%; justify-content:center; }
}

/* Mega menu (kept for other pages) */
.mega-dropdown{ position:static; }
.mega-menu{ width:850px; padding:30px; }
.mega-title{
    font-size:16px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:15px;
    padding-bottom:10px;
    border-bottom:2px solid var(--secondary);
}
@media(max-width:991px){ .mega-menu{ width:100%; padding:15px; } }

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero-slider{ position:relative; }

.hero-slider .carousel-item{
    height:82vh;
    min-height:560px;
    max-height:860px;
    overflow:hidden;
    background:var(--primary-deep);
}
.hero-slider .carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.12);
    transition:transform 7s ease-out;
}
.hero-slider .carousel-item.active img{ transform:scale(1); }

.slider-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(0,18,40,.92) 0%, rgba(0,22,48,.7) 42%, rgba(0,22,48,.15) 78%),
        linear-gradient(to top, rgba(0,18,40,.85) 0%, transparent 35%);
}
/* thin cyan accent line on the left edge */
.slider-overlay::before{
    content:'';
    position:absolute;
    left:0;
    top:18%;
    bottom:30%;
    width:5px;
    background:linear-gradient(var(--cyan), var(--secondary));
}

.hero-slider .carousel-caption{
    left:max(5%, calc((100% - 1296px) / 2 + 12px));
    right:auto;
    top:44%;
    bottom:auto;
    transform:translateY(-50%);
    max-width:700px;
    padding:0;
    text-align:left;
    z-index:2;
}

/* staggered entrance of caption items on each slide */
.hero-slider .carousel-caption > *{ opacity:0; }
.hero-slider .carousel-item.active .carousel-caption > *{
    animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero-slider .carousel-item.active .carousel-caption > *:nth-child(1){ animation-delay:.25s; }
.hero-slider .carousel-item.active .carousel-caption > *:nth-child(2){ animation-delay:.4s; }
.hero-slider .carousel-item.active .carousel-caption > *:nth-child(3){ animation-delay:.55s; }
.hero-slider .carousel-item.active .carousel-caption > *:nth-child(4){ animation-delay:.7s; }
@keyframes heroIn{
    from{ opacity:0; transform:translateY(28px); }
    to{ opacity:1; transform:translateY(0); }
}

.slider-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-weight:600;
    font-size:14px;
    padding:7px 16px 7px 12px;
    border-radius:50px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(6px);
    margin-bottom:20px;
}
.slider-tag::before{
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 0 4px rgba(76,201,240,.25);
}

.hero-slider .carousel-caption h1,
.hero-slider .carousel-caption h2{
    font-weight:700;
    line-height:1.04;
    color:#fff;
    margin-bottom:18px;
    text-wrap:balance;
}
.hero-slider .carousel-caption h1{ font-size:clamp(34px, 4.6vw, 60px); }
.hero-slider .carousel-caption h2{ font-size:clamp(38px, 5.4vw, 70px); }

.hero-slider .carousel-caption p{
    font-size:clamp(16px, 1.5vw, 20px);
    color:#cfe0f5;
    margin-bottom:30px;
    max-width:520px;
}

.slider-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.slider-btn,
.slider-btn-outline{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 30px;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}
.slider-btn{
    background:var(--secondary);
    color:#fff;
    box-shadow:0 14px 30px -10px rgba(13,110,253,.7);
}
.slider-btn i{ transition:transform .3s; }
.slider-btn:hover{ background:#fff; color:var(--primary); }
.slider-btn:hover i{ transform:translateX(4px); }
.slider-btn-outline{
    color:#fff;
    border:1.5px solid rgba(255,255,255,.55);
}
.slider-btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }

/* ---- bottom bar ---- */
.hero-bar{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    border-top:1px solid rgba(255,255,255,.14);
}
.hero-bar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.hero-slider .hero-indicators{
    position:static;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 170px));
    gap:0 28px;
    flex:1;
    justify-content:start;
}
.hero-slider .hero-indicators [data-bs-target]{
    position:relative;
    width:auto;
    height:auto;
    margin:0;
    padding:20px 0 22px;
    text-indent:0;
    text-align:left;
    background:none;
    border:0;
    opacity:1;
    color:rgba(255,255,255,.55);
    display:flex;
    align-items:baseline;
    gap:10px;
    transition:color .3s;
}
.hero-slider .hero-indicators [data-bs-target]:hover,
.hero-slider .hero-indicators .active{ color:#fff; }
.hi-num{ font-family:var(--font-head); font-size:15px; font-weight:700; }
.hero-indicators .active .hi-num{ color:var(--cyan); }
.hi-title{ font-size:14px; font-weight:500; white-space:nowrap; }

/* progress line sits on the bar's top border */
.hi-bar{
    position:absolute;
    left:0;
    right:0;
    top:-1px;
    height:2px;
    background:transparent;
    overflow:hidden;
}
.hi-bar::after{
    content:'';
    position:absolute;
    inset:0;
    background:var(--cyan);
    transform:scaleX(0);
    transform-origin:left;
}
.hero-indicators .active .hi-bar::after{ animation:heroProgress 6s linear forwards; }
@keyframes heroProgress{
    from{ transform:scaleX(0); }
    to{ transform:scaleX(1); }
}

.hero-arrows{ display:flex; gap:10px; }
.hero-arrows button{
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.06);
    color:#fff;
    backdrop-filter:blur(6px);
    transition:.3s;
}
.hero-arrows button:hover{ background:#fff; color:var(--primary); border-color:#fff; }

@media(max-width:991px){
    .hi-title{ display:none; }
    .hero-slider .hero-indicators{ grid-template-columns:repeat(4, 56px); gap:0 14px; }
}
@media(max-width:768px){
    .hero-slider .carousel-item{ height:600px; min-height:0; }
    .hero-slider .carousel-caption{ left:6%; right:6%; top:42%; }
    .slider-overlay{ background:linear-gradient(to top, rgba(0,18,40,.92) 0%, rgba(0,22,48,.65) 100%); }
    .slider-overlay::before{ display:none; }
    .slider-btn, .slider-btn-outline{ padding:12px 22px; }
    .hero-arrows button{ width:42px; height:42px; }
}

/* =========================================================
   ABOUT  (compact)
   ========================================================= */
.about-section{
    padding:clamp(44px, 5vw, 72px) 0;
    background:
        radial-gradient(circle at 0% 0%, #eef4ff 0, transparent 40%),
        radial-gradient(circle at 100% 100%, #f1f6ff 0, transparent 35%),
        #fff;
}

/* ---- image collage ---- */
.about-media{
    position:relative;
    isolation:isolate;
    padding:0 16% 11% 0;
}
.about-main{
    display:block;
    width:100%;
    aspect-ratio:4 / 3.2;
    object-fit:cover;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}
.about-sub{
    position:absolute;
    right:0;
    bottom:0;
    width:44%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:var(--radius-lg);
    border:6px solid #fff;
    box-shadow:0 25px 50px -15px rgba(0,31,63,.45);
    transition:transform .5s ease;
}
.about-media:hover .about-sub{ transform:translate(-6px, -6px); }

/* accent corner + dot pattern */
.about-media::before{
    content:'';
    position:absolute;
    left:-18px;
    top:-18px;
    width:120px;
    height:120px;
    background-image:radial-gradient(var(--secondary) 2px, transparent 2px);
    background-size:14px 14px;
    opacity:.35;
    z-index:-1;
}
.about-media::after{
    content:'';
    position:absolute;
    left:-10px;
    bottom:calc(11% - 10px);
    width:90px;
    height:90px;
    border-left:4px solid var(--secondary);
    border-bottom:4px solid var(--secondary);
    border-radius:0 0 0 var(--radius-lg);
    z-index:-1;
}

.about-years{
    position:absolute;
    left:18px;
    bottom:calc(11% + 18px);
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--primary);
    color:#fff;
    padding:12px 18px;
    border-radius:var(--radius-md);
    box-shadow:0 18px 35px -10px rgba(0,31,63,.55);
}
.about-years strong{
    font-family:var(--font-head);
    font-size:42px;
    line-height:1;
}
.about-years sup{ color:var(--cyan); font-size:24px; top:-.6em; }
.about-years span{ font-size:13px; line-height:1.3; color:#dbeafe; }

.about-iso{
    position:absolute;
    top:16px;
    right:calc(16% + 16px);
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(6px);
    padding:9px 16px;
    border-radius:50px;
    box-shadow:0 14px 30px -10px rgba(0,31,63,.35);
}
.about-iso i{ font-size:22px; color:var(--secondary); }
.about-iso strong{ display:block; font-size:14px; color:var(--dark); line-height:1.2; }
.about-iso span{ font-size:12px; color:var(--muted); }

/* ---- text ---- */
.about-eyebrow{
    display:inline-block;
    position:relative;
    padding-left:40px;
    margin-bottom:8px;
    color:var(--secondary);
    font-weight:600;
    font-size:15px;
}
.about-eyebrow::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:30px;
    height:2px;
    background:var(--secondary);
}

.about-title{
    font-size:clamp(28px, 3.2vw, 40px);
    font-weight:700;
    line-height:1.12;
    margin-bottom:14px;
}

.about-text p{
    color:var(--text);
    margin-bottom:10px;
    line-height:1.65;
}
.about-text .about-lead{
    font-size:18px;
    color:var(--dark);
    font-weight:500;
}

/* dark facts strip */
.about-facts{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    margin:20px 0 18px;
    border-radius:var(--radius-md);
    background:linear-gradient(135deg, var(--primary-deep), var(--primary) 60%, #0056b3);
    box-shadow:0 18px 35px -18px rgba(0,31,63,.6);
    overflow:hidden;
}
.about-facts div{
    position:relative;
    padding:14px 14px 14px 16px;
    border-left:1px solid rgba(255,255,255,.12);
}
.about-facts div:first-child{ border-left:0; }
.about-facts i{
    color:var(--cyan);
    font-size:16px;
    margin-bottom:6px;
    display:block;
}
.about-facts strong{
    display:block;
    font-family:var(--font-head);
    font-size:24px;
    line-height:1.1;
    color:#fff;
}
.about-facts span{ display:block; font-size:13px; line-height:1.35; color:#cbd5e1; }

/* industries chips */
.about-industries{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
    margin-bottom:22px;
}
.about-label{ font-weight:600; color:var(--dark); font-size:15px; }
.about-industries ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.about-industries li{
    padding:4px 12px;
    border-radius:50px;
    border:1px solid #cfe0ff;
    background:#f5f9ff;
    color:#0b4aa8;
    font-size:13px;
    font-weight:500;
    transition:.25s;
}
.about-industries li:hover{ background:var(--secondary); border-color:var(--secondary); color:#fff; }

.about-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 22px;
}
.about-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--secondary);
    color:#fff;
    text-decoration:none;
    padding:12px 26px;
    border-radius:50px;
    font-weight:600;
    box-shadow:0 12px 24px -10px rgba(13,110,253,.6);
    transition:background .3s;
}
.about-btn i{ transition:transform .3s; }
.about-btn:hover{ background:var(--primary); color:#fff; }
.about-btn:hover i{ transform:translateX(4px); }

.about-call{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--dark);
    font-weight:700;
    font-size:16px;
    line-height:1.2;
}
.about-call i{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#e8f1ff;
    color:var(--secondary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}
.about-call small{ display:block; font-weight:500; font-size:12px; color:var(--muted); }
.about-call:hover i{ background:var(--secondary); color:#fff; }

@media(max-width:991px){
    .about-media{ max-width:560px; margin:0 auto 8px; }
}
@media(max-width:576px){
    .about-media{ padding:0 12% 16% 0; }
    .about-media::after{ display:none; }
    .about-years{ left:10px; bottom:calc(16% + 10px); padding:10px 14px; }
    .about-years strong{ font-size:34px; }
    .about-iso{ top:10px; right:calc(12% + 10px); padding:7px 12px; }
    .about-iso i{ font-size:18px; }
    .about-facts{ grid-template-columns:1fr; }
    .about-facts div{
        border-left:0;
        border-top:1px solid rgba(255,255,255,.12);
        display:grid;
        grid-template-columns:24px auto 1fr;
        align-items:center;
        gap:10px;
        padding:11px 14px;
    }
    .about-facts div:first-child{ border-top:0; }
    .about-facts i{ margin:0; }
    .about-facts strong{ font-size:20px; }
}

/* =========================================================
   COUNTERS (navy strip bridging About → Solutions)
   ========================================================= */
.counter-section{
    padding:0;
    background:linear-gradient(#fff 50%, var(--light) 50%);
}
.counter-strip{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    background:linear-gradient(120deg, var(--primary-deep), var(--primary) 55%, #0056b3);
    border-radius:var(--radius-lg);
    box-shadow:0 25px 50px -20px rgba(0,31,63,.55);
    overflow:hidden;
}
.counter-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:28px 26px;
    border-left:1px solid rgba(255,255,255,.12);
    color:#fff;
}
.counter-item:first-child{ border-left:0; }
.counter-item > i{
    width:54px;
    height:54px;
    flex-shrink:0;
    border-radius:14px;
    background:rgba(255,255,255,.1);
    color:var(--cyan);
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.counter-item h3{
    font-size:clamp(32px, 3.2vw, 44px);
    font-weight:700;
    color:#fff;
    line-height:1;
    margin:0 0 4px;
}
.counter-item h3 em{ font-style:normal; color:var(--cyan); margin-left:2px; }
.counter-item p{ margin:0; font-size:15px; color:#cbd5e1; line-height:1.3; }

@media(max-width:991px){
    .counter-strip{ grid-template-columns:repeat(2, 1fr); }
    .counter-item:nth-child(3){ border-left:0; }
    .counter-item:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.12); }
}
@media(max-width:480px){
    .counter-item{ padding:20px 16px; gap:12px; }
    .counter-item > i{ width:42px; height:42px; font-size:18px; }
}

/* =========================================================
   CORE SOLUTIONS
   ========================================================= */
.solutions-section{
    padding:var(--section-y) 0;
    background:var(--light);
}
.solutions-intro{ position:sticky; top:120px; }
.solutions-intro p{ color:var(--muted); margin-bottom:24px; }

.solutions-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
}
.solution-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:22px 56px 22px 20px;
    text-decoration:none;
    overflow:hidden;
    transition:border-color .3s, box-shadow .3s;
}
.solution-card::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--secondary);
    transform:scaleY(0);
    transition:transform .3s;
}
.solution-card > i{
    width:50px;
    height:50px;
    flex-shrink:0;
    border-radius:12px;
    background:#e8f1ff;
    color:var(--secondary);
    font-size:21px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}
.solution-card h4{ font-size:21px; font-weight:700; margin:2px 0 4px; color:var(--dark); }
.solution-card p{ margin:0; font-size:15px; line-height:1.5; color:var(--muted); }
.solution-arrow{
    position:absolute;
    right:16px;
    top:50%;
    margin-top:-16px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid var(--line);
    color:var(--primary);
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}
.solution-card:hover{ border-color:#bcd3ff; box-shadow:var(--shadow); }
.solution-card:hover::before{ transform:scaleY(1); }
.solution-card:hover > i{ background:var(--secondary); color:#fff; }
.solution-card:hover .solution-arrow{ background:var(--secondary); border-color:var(--secondary); color:#fff; }

@media(max-width:991px){
    .solutions-intro{ position:static; text-align:center; }
}
@media(max-width:576px){
    .solutions-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   SERVICES GALLERY (Swiper)
   ========================================================= */
.products-section{
    padding:var(--section-y) 0 calc(var(--section-y) * .7);
    background:#fff;
}
.gallery-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}
.gallery-head .section-title{ margin:0; }
.gallery-nav{ display:flex; gap:10px; }
.gallery-nav button{
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--primary);
    transition:.3s;
}
.gallery-nav button:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }

.productsSwiper{
    padding:4px 2px 44px;
    --swiper-theme-color:var(--secondary);
    --swiper-pagination-bullet-inactive-color:#94a3b8;
}
.productsSwiper .swiper-pagination-bullet-active{ width:24px; border-radius:6px; }

.gallery-card{
    position:relative;
    margin:0;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--primary);
    aspect-ratio:4 / 5;
}
.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}
.gallery-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,20,45,.9) 0%, rgba(0,20,45,.1) 45%, transparent 70%);
}
.gallery-card figcaption{
    position:absolute;
    left:20px;
    right:20px;
    bottom:18px;
    z-index:2;
    color:#fff;
    font-family:var(--font-head);
    font-size:23px;
    font-weight:700;
    line-height:1.15;
    padding-top:10px;
    border-top:2px solid var(--cyan);
}
.gallery-card:hover img{ transform:scale(1.07); }

@media(max-width:576px){
    .gallery-nav{ display:none; }
}

/* =========================================================
   WHY CHOOSE US (photo background)
   ========================================================= */
.why-choose-section{
    position:relative;
    padding:var(--section-y) 0;
    background:
        linear-gradient(110deg, rgba(0,22,48,.96) 0%, rgba(0,40,85,.9) 55%, rgba(0,51,102,.82) 100%),
        url('../images/msrl-vessels.jpg') center / cover no-repeat;
    color:#fff;
    overflow:hidden;
}
.why-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px 48px;
    margin-bottom:40px;
}
.why-head .section-title{ color:#fff; margin:0; }
.why-head p{ max-width:440px; color:#cbd5e1; margin:0; }

.about-eyebrow.light{ color:var(--cyan); }
.about-eyebrow.light::before{ background:var(--cyan); }

.why-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:34px 40px;
}
.why-card{
    position:relative;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.18);
}
.why-card::before{
    content:'';
    position:absolute;
    left:0;
    top:-1px;
    width:48px;
    height:3px;
    background:var(--cyan);
    transition:width .4s;
}
.why-card:hover::before{ width:100%; }
.why-card i{ font-size:28px; color:var(--cyan); margin-bottom:14px; }
.why-card h4{ font-size:23px; font-weight:700; margin-bottom:8px; color:#fff; }
.why-card p{ color:#cbd5e1; margin:0; line-height:1.6; font-size:16px; }

@media(max-width:991px){
    .why-head{ flex-direction:column; align-items:flex-start; }
    .why-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:576px){
    .why-grid{ grid-template-columns:1fr; gap:26px; }
}

/* =========================================================
   MISSION & VISION
   ========================================================= */
.mv-section{
    padding:var(--section-y) 0;
    background:var(--light);
}
.mv-image img{
    width:100%;
    aspect-ratio:4 / 4.2;
    object-fit:cover;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}
.mv-card{
    display:flex;
    gap:20px;
    align-items:flex-start;
    border-radius:var(--radius-lg);
    padding:28px 30px;
}
.mv-card > i{
    width:56px;
    height:56px;
    flex-shrink:0;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}
.mv-card h3{ font-size:28px; font-weight:700; margin-bottom:8px; }
.mv-card p{ margin:0; line-height:1.65; }

.mv-mission{
    background:linear-gradient(120deg, var(--primary-deep), var(--primary) 60%, #0056b3);
    color:#dbeafe;
    margin-bottom:16px;
    box-shadow:0 22px 45px -22px rgba(0,31,63,.6);
}
.mv-mission > i{ background:rgba(255,255,255,.1); color:var(--cyan); }
.mv-mission h3{ color:#fff; }

.mv-vision{
    background:#fff;
    border:1px solid var(--line);
}
.mv-vision > i{ background:#e8f1ff; color:var(--secondary); }
.mv-vision ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px 22px;
}
.mv-vision li{
    position:relative;
    padding-left:24px;
    line-height:1.45;
    font-size:15.5px;
}
.mv-vision li::before{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:0;
    top:1px;
    font-size:13px;
    color:var(--secondary);
}
@media(max-width:991px){
    .mv-image{ max-width:520px; margin:0 auto; }
    .mv-image img{ aspect-ratio:16 / 10; }
}
@media(max-width:576px){
    .mv-card{ flex-direction:column; padding:22px; gap:14px; }
    .mv-vision ul{ grid-template-columns:1fr; }
}

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
    padding:var(--section-y) 0 calc(var(--section-y) * .5);
    background:#fff;
}
.cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px 40px;
    padding:clamp(30px, 4vw, 48px) clamp(24px, 4vw, 52px);
    border-radius:var(--radius-lg);
    background:
        linear-gradient(100deg, rgba(13,110,253,.96) 0%, rgba(0,51,102,.92) 70%),
        url('../images/rubber-lining.jpg') center / cover no-repeat;
    box-shadow:0 25px 50px -22px rgba(13,110,253,.6);
    color:#fff;
}
.cta-text h2{
    font-size:clamp(26px, 3vw, 38px);
    font-weight:700;
    color:#fff;
    line-height:1.15;
    margin-bottom:8px;
}
.cta-text p{ margin:0; color:#dbeafe; max-width:600px; }

.cta-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    flex-shrink:0;
}
.cta-btn-primary{
    display:inline-block;
    background:#fff;
    color:var(--primary);
    text-decoration:none;
    padding:15px 32px;
    border-radius:50px;
    font-weight:700;
    transition:.3s;
}
.cta-btn-primary:hover{ background:var(--cyan); color:var(--primary-deep); }
.cta-phone{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:10px;
}
.cta-phone i{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.4);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
}
.cta-phone:hover{ color:var(--cyan); }

@media(max-width:991px){
    .cta-inner{ flex-direction:column; text-align:center; }
    .cta-text p{ margin:0 auto; }
    .cta-actions{ align-items:center; }
}

/* =========================================================
   CLIENTS
   ========================================================= */
.clients-section{
    padding:calc(var(--section-y) * .5) 0 var(--section-y);
    background:#fff;
    overflow:hidden;
}
.clients-head{
    text-align:center;
    max-width:640px;
    margin:0 auto 28px;
}
.clients-head .section-title{ margin-bottom:8px; }
.clients-head p{ color:var(--muted); margin:0; }

.client-slider{
    position:relative;
    overflow:hidden;
}
.client-slider::before,
.client-slider::after{
    content:'';
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
    pointer-events:none;
}
.client-slider::before{ left:0; background:linear-gradient(to right, #fff, transparent); }
.client-slider::after{ right:0; background:linear-gradient(to left, #fff, transparent); }

.client-track{
    display:flex;
    width:max-content;
    padding:10px 0;
    animation:scrollClients 35s linear infinite;
}
.client-track:hover{ animation-play-state:paused; }

.client-logo{
    width:200px;
    height:100px;
    margin:0 10px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px 20px;
    transition:border-color .3s, box-shadow .3s;
}
.client-logo:hover{ border-color:#bfd4ff; box-shadow:0 12px 28px rgba(0,0,0,.07); }
.client-logo img{ width:100%; height:100%; object-fit:contain; }

@keyframes scrollClients{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}
@media(max-width:768px){
    .client-logo{ width:150px; height:84px; padding:12px; }
    .client-slider::before,
    .client-slider::after{ width:40px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer-modern{
    background:#061423;
    color:#fff;
    padding:clamp(64px, 7vw, 90px) 0 28px;
}
.footer-logo{
    max-height:64px;
    background:#fff;
    padding:8px 14px;
    border-radius:10px;
    margin-bottom:22px;
}
.footer-contact a{ color:#cbd5e1; text-decoration:none; word-break:normal; overflow-wrap:normal; }
.footer-contact div:last-child span{ font-size:15px; }
.footer-contact a:hover{ color:var(--cyan); }
.footer-map{
    margin-top:44px;
    border-radius:var(--radius-md);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    height:220px;
}
.footer-map iframe{
    width:100%;
    height:100%;
    border:0;
    filter:grayscale(.3) contrast(1.05);
}
.footer-about{ color:#cbd5e1; line-height:1.8; margin-bottom:25px; }
.footer-modern h5{
    color:#fff;
    font-size:22px;
    font-weight:700;
    margin-bottom:30px;
    position:relative;
}
.footer-modern h5::after{
    content:'';
    width:36px;
    height:3px;
    background:var(--secondary);
    position:absolute;
    left:0;
    bottom:-12px;
}
.footer-modern ul{ list-style:none; padding:0; margin:0; }
.footer-modern ul li{ margin-bottom:12px; }
.footer-modern ul li a{ color:#cbd5e1; text-decoration:none; transition:.3s; }
.footer-modern ul li a:hover{ color:var(--cyan); padding-left:6px; }

.footer-contact div{ display:flex; gap:14px; margin-bottom:18px; color:#cbd5e1; }
.footer-contact i{ color:var(--cyan); font-size:17px; margin-top:6px; }

.footer-social a{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    margin-right:10px;
    transition:.3s;
}
.footer-social a:hover{ background:var(--secondary); }

.footer-modern hr{ border-color:rgba(255,255,255,.1); opacity:1; margin:50px 0 22px; }
.footer-bottom{ color:#94a3b8; font-size:14px; }
.footer-bottom p{ margin:0; }
.footer-bottom a{ color:#fff; text-decoration:none; }
.footer-bottom a:hover{ color:var(--cyan); }

@media(max-width:991px){
    .footer-modern{ text-align:center; }
    .footer-contact div{ justify-content:center; }
    .footer-modern h5::after{ left:50%; transform:translateX(-50%); }
    .footer-bottom .col-lg-6 + .col-lg-6{ margin-top:8px; }
}

/* =========================================================
   LEGACY BLOCKS (used on other pages — kept)
   ========================================================= */
.hero-section{
    position:relative;
    min-height:100vh;
    background:url('../images/hero-banner.jpg') center center/cover;
    display:flex;
    align-items:center;
}
.hero-section::before{ content:''; position:absolute; inset:0; background:rgba(0,20,45,.75); }
.hero-content{ position:relative; z-index:2; color:#fff; }
.hero-content h1{ font-size:clamp(40px, 6vw, 65px); font-weight:800; line-height:1.1; color:#fff; }
.hero-content p{ font-size:20px; margin:25px 0; }
.hero-btn{ padding:14px 35px; border-radius:50px; font-weight:600; }

.industry-card{
    background:#fff;
    padding:30px;
    border-radius:15px;
    text-align:center;
    transition:.4s;
    border:1px solid #eee;
}
.industry-card:hover{ background:var(--primary); color:#fff; }
.industry-card i{ font-size:40px; margin-bottom:15px; }

.product-card{
    background:#fff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    margin:10px;
}
.product-img{ overflow:hidden; height:250px; }
.product-img img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.product-card:hover img{ transform:scale(1.08); }
.product-content{ padding:25px; }
.product-content h4{ font-size:22px; font-weight:700; margin-bottom:15px; }
.product-content a{ color:var(--secondary); text-decoration:none; font-weight:600; }

/* =========================================================
   INNER PAGES — banner, service layout, sidebar, lightbox
   ========================================================= */
.page-banner{
    position:relative;
    padding:clamp(70px, 9vw, 120px) 0 clamp(50px, 6vw, 80px);
    background-color:var(--primary-deep);
    background-size:cover;
    background-position:center;
    color:#fff;
    overflow:hidden;
}
.page-banner::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,18,40,.93) 0%, rgba(0,30,64,.78) 55%, rgba(0,51,102,.55) 100%);
}
.page-banner::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, var(--cyan), var(--secondary) 40%, transparent 80%);
}
.page-banner .container{ position:relative; z-index:1; }
.page-banner h1{
    font-size:clamp(36px, 5vw, 58px);
    font-weight:700;
    color:#fff;
    line-height:1.05;
    margin:0 0 12px;
}
.page-banner p{ color:#cfe0f5; max-width:560px; margin:0; font-size:18px; }

.pb-crumbs{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:0;
    margin:0 0 16px;
    font-size:14px;
}
.pb-crumbs li{ color:var(--cyan); font-weight:600; }
.pb-crumbs li + li::before{ content:'/'; color:rgba(255,255,255,.4); margin-right:6px; }
.pb-crumbs a{ color:#cbd5e1; text-decoration:none; font-weight:500; }
.pb-crumbs a:hover{ color:#fff; }

/* ---- service page body ---- */
.svc-section{ padding:var(--section-y) 0; }

.svc-intro-media{
    position:relative;
    padding:0 0 60px;
    margin-bottom:34px;
}
.svc-img-main{
    display:block;
    background:#dbe4ef;
    width:100%;
    aspect-ratio:16 / 8.5;
    object-fit:cover;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}
.svc-img-sub{
    position:absolute;
    right:24px;
    bottom:0;
    width:34%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:var(--radius-md);
    border:6px solid #fff;
    box-shadow:0 20px 40px -15px rgba(0,31,63,.45);
}
.svc-badge{
    position:absolute;
    left:20px;
    top:20px;
    background:rgba(255,255,255,.95);
    color:var(--primary);
    font-weight:700;
    font-size:14px;
    padding:8px 16px;
    border-radius:50px;
    box-shadow:0 10px 24px -10px rgba(0,31,63,.4);
}
.svc-badge i{ color:var(--secondary); margin-right:6px; }

.svc-title{
    font-size:clamp(28px, 3.2vw, 40px);
    font-weight:700;
    line-height:1.12;
    margin-bottom:14px;
}
.svc-intro p{ line-height:1.7; margin-bottom:12px; }
.svc-intro .about-lead{ font-size:18px; color:var(--dark); font-weight:500; }

.svc-points{
    list-style:none;
    padding:0;
    margin:22px 0 0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px 24px;
}
.svc-points li{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--dark); }
.svc-points i{
    width:26px;
    height:26px;
    flex-shrink:0;
    border-radius:50%;
    background:#e8f1ff;
    color:var(--secondary);
    font-size:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.svc-block{ margin-top:clamp(44px, 5vw, 64px); }
.svc-subtitle{
    font-size:clamp(24px, 2.6vw, 32px);
    font-weight:700;
    margin-bottom:20px;
    padding-left:16px;
    border-left:4px solid var(--secondary);
    line-height:1.15;
}

.svc-products{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
}
.svc-product{
    background:var(--light);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:22px 20px;
    transition:background .3s, border-color .3s, box-shadow .3s;
}
.svc-product i{
    width:46px;
    height:46px;
    border-radius:12px;
    background:#fff;
    color:var(--secondary);
    font-size:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    box-shadow:0 6px 14px -8px rgba(0,31,63,.35);
}
.svc-product h4{ font-size:20px; font-weight:700; margin-bottom:6px; }
.svc-product p{ margin:0; font-size:15px; line-height:1.5; color:var(--muted); }
.svc-product:hover{ background:#fff; border-color:#bcd3ff; box-shadow:var(--shadow); }

.svc-tech{
    display:grid;
    grid-template-columns:5fr 7fr;
    background:linear-gradient(120deg, var(--primary-deep), var(--primary) 60%, #0056b3);
    border-radius:var(--radius-lg);
    overflow:hidden;
    color:#cbd5e1;
}
.svc-tech-img img{ width:100%; height:100%; min-height:280px; object-fit:cover; display:block; }
.svc-tech-text{ padding:clamp(24px, 3vw, 36px); }
.svc-tech .svc-subtitle{ color:#fff; border-left-color:var(--cyan); }
.svc-tech-text > p{ margin-bottom:18px; line-height:1.65; }
.svc-tech-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:12px 0;
    border-top:1px solid rgba(255,255,255,.12);
}
.svc-tech-item i{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:10px;
    background:rgba(255,255,255,.1);
    color:var(--cyan);
    display:flex;
    align-items:center;
    justify-content:center;
}
.svc-tech-item strong{ display:block; color:#fff; font-size:16px; }
.svc-tech-item span{ font-size:14.5px; line-height:1.45; }

.svc-gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
}
.svc-gal-item{
    position:relative;
    display:block;
    border-radius:var(--radius-md);
    overflow:hidden;
    aspect-ratio:4 / 3;
    background:var(--primary);
}
.svc-gal-item:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.svc-gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s, opacity .3s; }
.svc-gal-item::after{
    content:"\f00e";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    background:rgba(0,31,63,.45);
    opacity:0;
    transition:opacity .3s;
}
.svc-gal-item:hover img{ transform:scale(1.06); }
.svc-gal-item:hover::after{ opacity:1; }

/* ---- inner page: banner extras ---- */
.page-banner{ padding:clamp(60px, 7vw, 96px) 0; }
.pb-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.pb-facts{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--radius-lg);
    overflow:hidden;
    backdrop-filter:blur(8px);
}
.pb-facts div{
    background:rgba(0,22,48,.55);
    padding:20px 18px;
}
.pb-facts i{ color:var(--cyan); font-size:18px; margin-bottom:8px; display:block; }
.pb-facts strong{ display:block; font-family:var(--font-head); font-size:26px; color:#fff; line-height:1.1; }
.pb-facts span{ font-size:13.5px; color:#cbd5e1; }

/* sidebar chips */
.side-chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.side-chips li{
    padding:5px 12px;
    border-radius:50px;
    background:#fff;
    border:1px solid #cfe0ff;
    color:#0b4aa8;
    font-size:13.5px;
    font-weight:500;
}

/* ---- process steps ---- */
.process-section{
    padding:var(--section-y) 0;
    background:var(--light);
}
.process-head{ text-align:center; max-width:620px; margin:0 auto 40px; }
.process-head .section-title{ margin-bottom:10px; }
.process-head p{ color:var(--muted); margin:0; }

.process-steps{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:14px;
    position:relative;
    counter-reset:none;
}
/* connecting line behind the icons */
.process-steps::before{
    content:'';
    position:absolute;
    top:46px;
    left:8%;
    right:8%;
    height:2px;
    background:repeating-linear-gradient(90deg, #bcd3ff 0 8px, transparent 8px 16px);
}
.process-steps li{
    position:relative;
    text-align:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:22px 14px 20px;
    transition:border-color .3s, box-shadow .3s, transform .3s;
}
.process-steps li:hover{ border-color:var(--secondary); box-shadow:var(--shadow); }
.ps-num{
    position:absolute;
    top:10px;
    right:12px;
    font-family:var(--font-head);
    font-weight:700;
    font-size:15px;
    color:#bcd3ff;
}
.process-steps i{
    position:relative;
    width:52px;
    height:52px;
    margin:0 auto 14px;
    border-radius:50%;
    background:var(--secondary);
    color:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 6px #e8f1ff;
}
.process-steps li:nth-child(even) i{ background:var(--primary); }
.process-steps h4{ font-size:19px; font-weight:700; margin-bottom:6px; line-height:1.2; }
.process-steps p{ margin:0; font-size:14px; line-height:1.5; color:var(--muted); }

/* ---- related services ---- */
.related-section{ padding:var(--section-y) 0 calc(var(--section-y) * .4); }
.related-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.related-card{
    position:relative;
    display:block;
    border-radius:var(--radius-lg);
    overflow:hidden;
    aspect-ratio:4 / 3;
    background:var(--primary);
    text-decoration:none;
}
.related-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.related-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,20,45,.92) 0%, rgba(0,20,45,.2) 55%, transparent 80%);
}
.related-card > div{ position:absolute; left:22px; right:22px; bottom:20px; z-index:1; }
.related-card h4{ color:#fff; font-size:24px; font-weight:700; margin:0 0 6px; }
.related-card span{ color:var(--cyan); font-weight:600; font-size:15px; }
.related-card span i{ margin-left:6px; transition:transform .3s; }
.related-card:hover img{ transform:scale(1.07); }
.related-card:hover span i{ transform:translateX(4px); }

@media(max-width:1199px){
    .process-steps{ grid-template-columns:repeat(3, 1fr); }
    .process-steps::before{ display:none; }
}
@media(max-width:991px){
    .pb-facts{ max-width:520px; }
    .related-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:576px){
    .process-steps{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .process-steps li{ padding:18px 10px 16px; }
    .process-steps h4{ font-size:17px; }
    .related-grid{ grid-template-columns:1fr; }
    .pb-facts strong{ font-size:22px; }
    .pb-facts div{ padding:16px 14px; }
}

/* ---- simple breadcrumb banner ---- */
.page-banner.page-banner-simple{
    padding:clamp(24px, 3vw, 34px) 0;
    text-align:left;
}
.page-banner-simple::before{ background:linear-gradient(90deg, rgba(0,20,45,.92) 0%, rgba(0,30,64,.78) 100%); }
.page-banner-simple::after{ display:none; }
.page-banner-simple .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 24px;
}
.page-banner-simple h1{ font-size:clamp(26px, 3vw, 36px); margin:0; }
.page-banner-simple .pb-crumbs{ margin:0; font-size:14px; }
.page-banner-simple .pb-crumbs li{ color:var(--cyan); font-weight:600; }
.page-banner-simple .pb-crumbs a i{ font-size:12px; margin-right:4px; }
@media(max-width:576px){
    .page-banner-simple .container{ flex-direction:column; align-items:flex-start; }
}

/* ---- sidebar ---- */
.svc-sidebar{ position:sticky; top:110px; display:grid; gap:20px; }
.side-box{
    background:var(--light);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:24px;
}
.side-box h4{ font-size:22px; font-weight:700; margin-bottom:14px; }
.side-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.side-links a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--dark);
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}
.side-links a i{ font-size:12px; color:var(--muted); transition:.25s; }
.side-links a:hover{ border-color:var(--secondary); color:var(--secondary); }
.side-links a:hover i{ color:var(--secondary); transform:translateX(3px); }
.side-links a.active{ background:var(--secondary); border-color:var(--secondary); color:#fff; }
.side-links a.active i{ color:#fff; }

.side-quote{
    position:relative;
    border-radius:var(--radius-lg);
    padding:28px 24px;
    color:#dbeafe;
    background:
        linear-gradient(150deg, rgba(0,31,63,.95), rgba(0,51,102,.92) 60%, rgba(13,110,253,.9)),
        url('../images/rubber-lining.jpg') center / cover;
    overflow:hidden;
}
.side-quote > i{ font-size:30px; color:var(--cyan); margin-bottom:12px; }
.side-quote h4{ color:#fff; font-size:24px; font-weight:700; margin-bottom:8px; }
.side-quote p{ font-size:15px; line-height:1.55; margin-bottom:18px; }
.side-quote-btn{
    display:block;
    text-align:center;
    background:#fff;
    color:var(--primary);
    font-weight:700;
    padding:13px 20px;
    border-radius:50px;
    text-decoration:none;
    margin-bottom:16px;
    transition:.3s;
}
.side-quote-btn:hover{ background:var(--cyan); color:var(--primary-deep); }
.side-phone{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    padding:6px 0;
    word-break:break-word;
}
.side-phone i{ color:var(--cyan); width:16px; }
.side-phone:hover{ color:var(--cyan); }

/* ---- lightbox ---- */
.lightbox{
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(0,12,28,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 70px;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s, visibility .3s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:var(--radius-md); box-shadow:0 30px 60px rgba(0,0,0,.5); }
.lightbox button{
    position:absolute;
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.08);
    color:#fff;
    transition:.3s;
}
.lightbox button:hover{ background:#fff; color:var(--primary); }
.lb-close{ top:18px; right:18px; }
.lb-prev{ left:14px; top:50%; margin-top:-24px; }
.lb-next{ right:14px; top:50%; margin-top:-24px; }

@media(max-width:991px){
    .svc-sidebar{ position:static; grid-template-columns:1fr 1fr; align-items:start; }
    .svc-tech{ grid-template-columns:1fr; }
    .svc-tech-img img{ min-height:0; aspect-ratio:16 / 8; }
}
@media(max-width:767px){
    .svc-products{ grid-template-columns:repeat(2, 1fr); }
    .svc-sidebar{ grid-template-columns:1fr; }
}
@media(max-width:576px){
    .svc-intro-media{ padding-bottom:40px; }
    .svc-img-sub{ width:42%; right:12px; border-width:4px; }
    .svc-points{ grid-template-columns:1fr; }
    .svc-products{ grid-template-columns:1fr; }
    .svc-gallery{ grid-template-columns:repeat(2, 1fr); }
    .svc-gal-item:first-child{ grid-column:span 2; grid-row:auto; aspect-ratio:16 / 10; }
    .lightbox{ padding:70px 12px; }
    .lb-prev, .lb-next{ top:auto; bottom:14px; margin-top:0; }
    .lb-prev{ left:calc(50% - 58px); }
    .lb-next{ right:calc(50% - 58px); }
}

/* ---- service page: compact spacing & clean alignment ---- */
.svc-section{ padding:clamp(28px, 3.5vw, 44px) 0 clamp(20px, 3vw, 32px); }

.svc-intro-media{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:12px;
    padding:0;
    margin-bottom:22px;
}
.svc-intro-media .svc-img-main,
.svc-intro-media .svc-img-sub{
    position:static;
    width:100%;
    height:300px;
    aspect-ratio:auto;
    object-fit:cover;
    border:0;
    border-radius:var(--radius-md);
    box-shadow:none;
    background:#dbe4ef;
}
.svc-badge{ left:14px; top:14px; }

.svc-title{ margin:0 0 12px; }
.svc-intro p{ margin-bottom:10px; }
.svc-intro p:last-child{ margin-bottom:0; }

.svc-block{ margin-top:28px; }
.svc-subtitle{ margin-bottom:12px; }
.svc-tech-text{ padding:24px 26px; }
.svc-tech-text > p{ margin-bottom:12px; }
.svc-tech-item{ padding:10px 0 0; }
.svc-tech-img img{ min-height:240px; }
.svc-gallery{ gap:10px; }

.svc-sidebar{ top:96px; gap:16px; }
.side-box{ padding:20px; }
.side-box h4{ margin-bottom:12px; }
.side-links{ gap:6px; }
.side-links a{ padding:10px 14px; }
.side-quote{ padding:22px 20px; }

.related-section{ padding:clamp(24px, 3vw, 36px) 0 0; }
.related-section .gallery-head{ margin-bottom:16px; }
.related-grid{ gap:14px; }
.related-card{ aspect-ratio:16 / 10; }

.cta-banner.cta-tight{ padding:clamp(28px, 3.5vw, 44px) 0 clamp(28px, 3.5vw, 44px); }

@media(max-width:767px){
    .svc-intro-media .svc-img-main,
    .svc-intro-media .svc-img-sub{ height:220px; }
}
@media(max-width:576px){
    .svc-intro-media{ grid-template-columns:1fr; }
    .svc-intro-media .svc-img-sub{ display:none; }
    .svc-intro-media .svc-img-main{ height:210px; }
    .svc-tech-text{ padding:20px; }
}

/* text-only navy block (no heading) */
.svc-tech-plain{ display:flex; flex-direction:column; justify-content:center; }
.svc-tech-plain > p{ color:#e2ecf8; font-size:17px; }
.svc-tech-plain > p:first-child{ color:#fff; font-size:19px; font-weight:500; padding-left:16px; border-left:3px solid var(--cyan); }
.svc-tech-plain > p:last-child{ margin-bottom:0; }

/* MSRL page: 2-col cards, applications, closing note */
.svc-products.svc-two{ grid-template-columns:repeat(2, 1fr); }

.svc-apps-intro{ margin-bottom:12px; }
.svc-apps{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}
.svc-apps li{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:12px 14px;
    font-weight:600;
    color:var(--dark);
    line-height:1.3;
    font-size:15.5px;
}
.svc-apps i{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:10px;
    background:#e8f1ff;
    color:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
}

.svc-note{
    margin-top:28px;
    display:flex;
    align-items:center;
    gap:20px 28px;
    background:var(--light);
    border:1px solid var(--line);
    border-left:5px solid var(--secondary);
    border-radius:var(--radius-md);
    padding:22px 24px;
}
.svc-note p{ margin:0; line-height:1.65; }
.svc-note .about-btn{ flex-shrink:0; }

@media(max-width:991px){
    .svc-apps{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:767px){
    .svc-note{ flex-direction:column; align-items:flex-start; }
}
@media(max-width:576px){
    .svc-products.svc-two{ grid-template-columns:1fr; }
    .svc-apps{ grid-template-columns:1fr; }
}

/* Tankers page: two large images */
.tanker-showcase{ display:grid; gap:14px; }
.tanker-showcase .tanker-item,
.tanker-showcase .tanker-item:first-child{
    grid-column:auto;
    grid-row:auto;
    aspect-ratio:16 / 9;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}

/* Facilities pages: spec grid, white list, note with icon */
.spec-grid{
    list-style:none;
    padding:0;
    margin:18px 0 0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}
.spec-grid li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:var(--radius-md);
    background:linear-gradient(120deg, var(--primary-deep), var(--primary) 70%);
    color:#fff;
    font-weight:600;
    line-height:1.35;
}
.spec-grid i{
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:10px;
    background:rgba(255,255,255,.1);
    color:var(--cyan);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
}

.tech-list{ list-style:none; padding:0; margin:0; }
.tech-list li{
    position:relative;
    padding:10px 0 10px 28px;
    border-top:1px solid rgba(255,255,255,.12);
    color:#e2ecf8;
    line-height:1.45;
}
.tech-list li:first-child{ border-top:0; padding-top:4px; }
.tech-list li::before{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:0;
    top:11px;
    font-size:13px;
    color:var(--cyan);
}
.tech-list li:first-child::before{ top:5px; }

.svc-apps.svc-apps-2{ grid-template-columns:repeat(2, 1fr); }

.svc-note .note-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:12px;
    background:var(--secondary);
    color:#fff;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.note-title{ font-size:22px; font-weight:700; margin:0 0 4px; }

@media(max-width:576px){
    .spec-grid,
    .svc-apps.svc-apps-2{ grid-template-columns:1fr; }
}

/* light checklist + 3-col spec cards */
.svc-checklist{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.svc-checklist li{
    position:relative;
    padding:12px 16px 12px 46px;
    background:var(--light);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    font-weight:500;
    line-height:1.45;
}
.svc-checklist li::before{
    content:"\f00c";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--secondary);
    color:#fff;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.spec-grid.spec-three{ grid-template-columns:repeat(3, 1fr); margin-top:12px; }
.spec-grid.spec-three li{ flex-direction:column; align-items:flex-start; gap:10px; }
@media(max-width:767px){
    .spec-grid.spec-three{ grid-template-columns:1fr; }
    .spec-grid.spec-three li{ flex-direction:row; align-items:center; }
}

/* Infrastructure page: intro + unit cards */
.infra-lead{
    margin:0 !important;
    padding:22px 24px;
    background:var(--light);
    border:1px solid var(--line);
    border-left:5px solid var(--secondary);
    border-radius:var(--radius-md);
    font-size:19px !important;
    line-height:1.6;
}

.unit-list{ display:grid; gap:16px; }
.unit-card{
    display:grid;
    grid-template-columns:260px 1fr;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:border-color .3s, box-shadow .3s;
}
.unit-card:hover{ border-color:#bcd3ff; box-shadow:var(--shadow); }
.unit-img{ position:relative; min-height:180px; background:#dbe4ef; }
.unit-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.unit-tag{
    position:absolute;
    left:14px;
    top:14px;
    background:var(--secondary);
    color:#fff;
    font-family:var(--font-head);
    font-weight:700;
    font-size:16px;
    padding:4px 14px;
    border-radius:50px;
}
.unit-body{
    padding:22px 24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-left:4px solid var(--secondary);
}
.unit-body h3{ font-size:24px; font-weight:700; margin:0 0 10px; }
.unit-body p{ display:flex; gap:12px; margin:0; line-height:1.6; }
.unit-body p i{ color:var(--secondary); margin-top:5px; }

@media(max-width:767px){
    .unit-card{ grid-template-columns:1fr; }
    .unit-img{ min-height:200px; }
    .unit-body{ border-left:0; border-top:4px solid var(--secondary); }
}

/* Quality page */
.q-hero{ position:relative; }
.q-hero img{
    display:block;
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:var(--radius-lg);
    background:#dbe4ef;
}
.q-statement{
    position:relative;
    margin:-46px 24px 0;
    padding:24px 26px 24px 72px;
    border-radius:var(--radius-md);
    background:linear-gradient(120deg, var(--primary-deep), var(--primary) 60%, #0056b3);
    box-shadow:0 22px 45px -22px rgba(0,31,63,.6);
}
.q-statement i{
    position:absolute;
    left:24px;
    top:24px;
    font-size:28px;
    color:var(--cyan);
}
.q-statement p{ margin:0; color:#fff; font-size:20px; line-height:1.45; }
.q-statement strong{ font-weight:600; }

.q-grid{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}
.q-grid li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px;
    background:var(--light);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    line-height:1.55;
    transition:background .3s, border-color .3s, box-shadow .3s;
}
.q-grid li:hover{ background:#fff; border-color:#bcd3ff; box-shadow:var(--shadow); }
.q-grid i{
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:10px;
    background:#fff;
    color:var(--secondary);
    font-size:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 14px -8px rgba(0,31,63,.35);
}

@media(max-width:767px){
    .q-hero img{ height:230px; }
    .q-statement{ margin:-30px 12px 0; padding:20px 18px 20px 58px; }
    .q-statement i{ left:18px; top:20px; font-size:22px; }
    .q-statement p{ font-size:17px; }
    .q-grid{ grid-template-columns:1fr; }
}

/* Clients page */
.clients-page{ padding:clamp(28px, 3.5vw, 48px) 0 clamp(20px, 3vw, 32px); }
.client-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:14px;
}
.client-tile{
    aspect-ratio:3 / 2;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 18px;
    transition:border-color .3s, box-shadow .3s, transform .3s;
}
.client-tile:hover{ border-color:#bcd3ff; box-shadow:var(--shadow); transform:translateY(-3px); }
.client-tile img{ width:100%; height:100%; object-fit:contain; }

.tpi-head{
    display:flex;
    align-items:center;
    gap:18px;
    margin:clamp(32px, 4vw, 48px) 0 18px;
}
.tpi-head .section-title{ margin:0; white-space:nowrap; font-size:clamp(26px, 3vw, 34px); }
.tpi-head::after{ content:''; flex:1; height:1px; background:var(--line); }

@media(max-width:1199px){ .client-grid{ grid-template-columns:repeat(5, 1fr); } }
@media(max-width:991px){ .client-grid{ grid-template-columns:repeat(4, 1fr); } }
@media(max-width:767px){ .client-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; } }
@media(max-width:480px){
    .client-grid{ grid-template-columns:repeat(2, 1fr); }
    .client-tile{ padding:10px 12px; }
}

/* Testimonials page */
.testi-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}
.testi-card{
    position:relative;
    display:block;
    aspect-ratio:3 / 4;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:10px;
    overflow:hidden;
    box-shadow:0 14px 30px -20px rgba(0,31,63,.45);
    transition:border-color .3s, box-shadow .3s, transform .3s;
}
.testi-card img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:6px;
    background:#f4f7fb;
}
.testi-view{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px;
    border-radius:0 0 6px 6px;
    background:rgba(0,31,63,.9);
    color:#fff;
    font-weight:600;
    font-size:15px;
    transform:translateY(100%);
    opacity:0;
    transition:transform .3s, opacity .3s;
}
.testi-view i{ color:var(--cyan); }
.testi-card:hover{ border-color:#bcd3ff; box-shadow:var(--shadow); transform:translateY(-4px); }
.testi-card:hover .testi-view,
.testi-card:focus-visible .testi-view{ transform:translateY(0); opacity:1; }

@media(hover:none){
    .testi-view{ transform:none; opacity:1; }
}
@media(max-width:991px){ .testi-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:480px){ .testi-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }

/* Contact page */
.contact-page{ padding:clamp(28px, 3.5vw, 48px) 0 clamp(40px, 5vw, 64px); }

.contact-info{ display:grid; gap:10px; }
.ci-person{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    border-radius:var(--radius-md);
    background:linear-gradient(120deg, var(--primary-deep), var(--primary) 60%, #0056b3);
    color:#fff;
}
.ci-person i{
    width:48px;
    height:48px;
    flex-shrink:0;
    border-radius:12px;
    background:rgba(255,255,255,.1);
    color:var(--cyan);
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.ci-person small{ display:block; color:#cbd5e1; font-size:14px; }
.ci-person strong{ font-family:var(--font-head); font-size:22px; font-weight:700; line-height:1.2; }

.ci-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:14px 16px;
    background:var(--light);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    line-height:1.55;
    font-size:15.5px;
}
.ci-item i{
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:50%;
    background:#e8f1ff;
    color:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}
.ci-item strong{ color:var(--dark); }
.ci-item a{ color:var(--dark); text-decoration:none; font-weight:600; word-break:break-word; }
.ci-item a:hover{ color:var(--secondary); }

.ci-map{ height:240px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); }
.ci-map iframe{ width:100%; height:100%; border:0; }

.enquiry-card{
    background:#fff;
    border:1px solid var(--line);
    border-top:5px solid var(--secondary);
    border-radius:var(--radius-lg);
    padding:clamp(22px, 3vw, 34px);
    box-shadow:var(--shadow);
}
.enquiry-card h2{ font-size:clamp(28px, 3vw, 36px); font-weight:700; margin:0 0 4px; }
.ef-note{ font-size:14px; color:var(--muted); margin-bottom:20px; }
.ef-note span, .ef-form label span{ color:#dc2626; }
.ef-form label{ display:block; font-weight:600; font-size:15px; margin-bottom:6px; color:var(--dark); }
.ef-form input,
.ef-form select,
.ef-form textarea{
    width:100%;
    padding:11px 14px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    background:#fff;
    font:inherit;
    font-size:16px;
    color:var(--dark);
    transition:border-color .25s, box-shadow .25s;
}
.ef-form textarea{ resize:vertical; min-height:120px; }
.ef-form input:focus,
.ef-form select:focus,
.ef-form textarea:focus{
    outline:none;
    border-color:var(--secondary);
    box-shadow:0 0 0 4px rgba(13,110,253,.15);
}
.ef-form .ef-file{ padding:9px; background:var(--light); border-style:dashed; }
.ef-submit{ border:0; font-size:16px; padding:14px 34px; cursor:pointer; }

@media(max-width:576px){
    .ci-map{ height:200px; }
    .ef-submit{ width:100%; justify-content:center; }
}

/* Contact page: big map beside the details */
.contact-map-lg{
    height:100%;
    min-height:460px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.contact-map-lg iframe{ width:100%; height:100%; min-height:460px; border:0; display:block; }

/* button under the contact details */
.ci-enquiry-btn{ justify-self:start; margin-top:8px; }

/* Enquiry page: sticky quick-contact sidebar */
.enquiry-side{ position:sticky; top:96px; }

@media(max-width:991px){
    .enquiry-side{ position:static; }
    .contact-map-lg,
    .contact-map-lg iframe{ min-height:340px; }
}
@media(max-width:576px){
    .contact-map-lg,
    .contact-map-lg iframe{ min-height:280px; }
    .ci-enquiry-btn{ justify-self:stretch; justify-content:center; }
}

/* About page */
.about-page{ padding:clamp(28px, 3.5vw, 48px) 0 clamp(28px, 3.5vw, 44px); }
.ab-text p{ line-height:1.7; }
.ab-text p:last-child{ margin-bottom:0; }
.ab-img{ position:relative; }
.ab-img img{
    display:block;
    width:100%;
    aspect-ratio:4 / 3.4;
    object-fit:cover;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    background:#dbe4ef;
}
.ab-note{ align-items:flex-start; }

.excellence-section{
    padding:clamp(36px, 4.5vw, 60px) 0;
    background:var(--light);
}
.ex-title{ margin-bottom:22px; }
.ex-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.ex-card{
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:22px;
    line-height:1.65;
}
.ex-card p{ margin:0; }
.ex-card i{
    width:46px;
    height:46px;
    flex-shrink:0;
    border-radius:12px;
    background:#e8f1ff;
    color:var(--secondary);
    font-size:19px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.ex-card.ex-feature{
    background:linear-gradient(120deg, var(--primary-deep), var(--primary) 60%, #0056b3);
    border-color:transparent;
    color:#dbeafe;
}
.ex-card.ex-feature i{ background:rgba(255,255,255,.1); color:var(--cyan); }
.ex-card.ex-feature strong{ color:#fff; }

.about-page ~ .clients-section{ padding:clamp(28px, 3.5vw, 44px) 0; }

@media(max-width:767px){
    .ex-grid{ grid-template-columns:1fr; }
    .ex-card{ padding:18px; }
}

/* Certification page: one centred certificate */
.testi-grid.cert-single{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }

/* =========================================================
   RESPONSIVE FIXES (all devices)
   ========================================================= */

/* small laptops 992–1199px: keep the menu on one line */
@media (min-width:992px) and (max-width:1199px){
    .navbar-brand img{ max-height:54px; }
    .navbar-nav .nav-link{ font-size:15px; padding:10px 9px !important; }
    .quote-btn{ padding:10px 18px; margin-left:6px; }
    .quote-btn i{ display:none; }
    .top-contact a, .top-right span{ margin-right:16px; }
}

/* touch screens ≥992px (iPad landscape etc.): tap opens the menu */
@media (min-width:992px){
    .navbar .navbar-nav .dropdown-menu.show{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }
}

/* top bar on phones */
@media (max-width:576px){
    .top-bar{ font-size:13px; padding:7px 0; }
    .top-contact{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; }
    .top-contact a{ margin-right:0; }
}

/* hero on tablets & phones: caption anchored above the bottom bar */
@media (max-width:768px){
    .hero-slider .carousel-item{ height:640px; }
    .hero-slider .carousel-caption{
        top:auto;
        bottom:96px;
        transform:none;
    }
    .hero-slider .carousel-caption h1{ font-size:clamp(28px, 7.4vw, 40px); }
    .hero-slider .carousel-caption h2{ font-size:clamp(32px, 8.5vw, 46px); }
    .hero-slider .carousel-caption p{ margin-bottom:22px; }
    .slider-tag{ font-size:13px; margin-bottom:14px; }
}
@media (max-width:380px){
    .hero-slider .carousel-item{ height:600px; }
    .slider-actions a{ flex:1 1 auto; justify-content:center; }
}
/* short landscape phones */
@media (max-height:500px) and (orientation:landscape){
    .hero-slider .carousel-item{ height:auto; min-height:460px; max-height:none; }
    .hero-slider .carousel-caption{ top:auto; bottom:84px; transform:none; }
    .hero-slider .carousel-caption p{ display:none; }
}

/* counters on small phones: icon above number for more width */
@media (max-width:480px){
    .counter-item{ flex-direction:column; align-items:flex-start; gap:10px; }
    .counter-item h3{ font-size:30px; }
    .counter-item p{ font-size:14px; }
}

/* about collage badges never overflow on narrow screens */
@media (max-width:400px){
    .about-years span{ display:none; }
    .about-iso span{ display:none; }
}

/* footer link columns on phones */
@media (max-width:767px){
    .footer-modern .col-6 ul li{ margin-bottom:9px; font-size:15px; }
    .footer-map{ height:180px; margin-top:32px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation:none !important; transition:none !important; }
    .hero-slider .carousel-item.active img{ transform:none; }
    .hero-slider .carousel-caption > *{ opacity:1; }
}