*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#061747;background:#f7fbff}.topbar{background:#001b49;color:#fff;padding:10px 6%;display:flex;gap:35px;font-size:14px}.header{height:92px;background:white;display:flex;justify-content:space-between;align-items:center;padding:0 6%;box-shadow:0 4px 20px #001b4912;position:sticky;top:0;z-index:99}.brand{display:flex;align-items:center;gap:15px;text-decoration:none;color:#06245c}.brand img{width:78px}.brand b{font-size:24px}.brand small{display:block;letter-spacing:1px}nav{display:flex;align-items:center;gap:26px}nav a{color:#061747;text-decoration:none;font-weight:600}.btn,.hero .btn,button{background:#003fb5;color:white!important;border:0;border-radius:7px;padding:13px 24px;text-decoration:none;display:inline-block}.drop{position:relative}.drop>div{display:none;position:absolute;background:white;min-width:220px;box-shadow:0 10px 30px #001b4930;border-radius:8px;overflow:hidden}.drop:hover>div{display:block}.drop div a{display:block;padding:14px}.hero{min-height:520px;padding:80px 6%;display:grid;grid-template-columns:1fr 1.25fr;align-items:center;background:linear-gradient(90deg,#fff 0%,#ffffffee 38%,#eaf3ff66),url('../uploads/hero.jpg') center/cover}

.

.hero-buttons{
    display:flex;
    gap:15px;
    margin-bottom:30px;
}

.btn-primary{
    background:#0d6efd;
    color:#fff;
    padding:15px 28px;
    border-radius:12px;
    text-decoration:none;
}

.btn-outline{
    border:1px solid #fff;
    color:#fff;
    padding:15px 28px;
    border-radius:12px;
    text-decoration:none;
}

.hero-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    color:#fff;
    font-weight:600;
}


.hero h1{font-size:58px;letter-spacing:7px;margin:0;color:#061747}.hero h1 span,.blue{color:#0055d8}.hero p{font-size:18px;line-height:1.8;max-width:560px}.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}.icons div,.card,.panel{background:white;border-radius:14px;box-shadow:0 8px 26px #001b4912;padding:24px}.icons i,.card i{font-size:34px;color:#0048c8}.section{padding:50px 6%}.title{text-align:center;font-size:28px;color:#003080;letter-spacing:1px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card img{width:100%;height:170px;object-fit:cover;border-radius:12px}.card h3{color:#003080}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.contact-strip{margin:40px 5%;background:linear-gradient(120deg,#003cbd,#001f67);color:white;border-radius:14px;padding:28px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:20px}.contact-strip i{margin-right:8px}footer{background:#001b49;color:white;padding:35px 6%;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.copy{background:#001336;color:white;text-align:center;padding:14px}.form input,.form textarea,select{width:100%;padding:14px;margin:8px 0 16px;border:1px solid #d9e2f2;border-radius:8px}.form textarea{min-height:140px}.wa{position:fixed;right:22px;bottom:22px;background:#08b35b;color:#fff;padding:14px 18px;border-radius:40px;text-decoration:none;font-weight:bold}@media(max-width:900px){.header,nav,.topbar{flex-direction:column;height:auto}.hero{grid-template-columns:1fr}.hero h1{font-size:38px}.grid4,.grid3,.process,.contact-strip,footer,.icons{grid-template-columns:1fr}}.reveal{opacity:0;transform:translateY(24px);transition:.8s ease}.reveal.show{opacity:1;transform:none}.product-slider{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(135deg,#001b49,#0055d8);padding:24px;box-shadow:0 20px 45px #001b4926}.slider-track{display:flex;gap:22px;transition:transform .5s ease}.slide-card{min-width:300px;background:#fff;border-radius:18px;padding:16px;box-shadow:0 14px 35px #001b4930}.slide-card img{width:100%;height:190px;object-fit:cover;border-radius:14px}.slide-card h3{color:#003080;margin-bottom:6px}.slider-btn{position:absolute;top:45%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;padding:0;background:#fff;color:#003080!important;box-shadow:0 8px 20px #001b4940}.slider-btn.prev{left:14px}.slider-btn.next{right:14px}.management{background:linear-gradient(180deg,#f8fbff,#eaf3ff)}.management .card{border:1px solid #e0ecff;transition:.3s}.management .card:hover{transform:translateY(-8px);box-shadow:0 18px 38px #00308022}.badge{display:inline-block;background:#eaf3ff;color:#0048c8;border-radius:30px;padding:7px 13px;font-weight:700;font-size:13px}@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero .icons div{animation:floaty 4s ease-in-out infinite}.hero .icons div:nth-child(2){animation-delay:.4s}.hero .icons div:nth-child(3){animation-delay:.8s}.hero .icons div:nth-child(4){animation-delay:1.2s}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}.gallery-card{background:#fff;border-radius:18px;box-shadow:0 16px 35px #0b3d9120;padding:14px;overflow:hidden}.gallery-card img{width:100%;height:190px;object-fit:cover;border-radius:14px}.pagination{text-align:center;margin:30px}.pagination a{display:inline-block;padding:10px 14px;margin:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0001}.pagination a.active{background:#0b4db3;color:#fff}



/* v5 dynamic elegant improvements */
.subtitle{text-align:center;max-width:820px;margin:0 auto 28px;color:#607089;line-height:1.8}.hero-home{position:relative;overflow:hidden}.hero-home:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 32%,rgba(0,92,255,.18),transparent 32%),linear-gradient(120deg,transparent 55%,rgba(255,255,255,.55));pointer-events:none}.hero>div{position:relative;z-index:2}.hero h1{max-width:760px}.feature-section{background:linear-gradient(180deg,#fff,#f1f7ff)}.feature-card{position:relative;overflow:hidden;border:1px solid #e4efff;transition:.35s ease}.feature-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,85,216,.10),transparent 45%);opacity:0;transition:.35s}.feature-card:hover:before{opacity:1}.feature-card:hover{transform:translateY(-10px);box-shadow:0 24px 55px #00308025}.ims-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.ims-card{background:rgba(255,255,255,.92);border:1px solid #dfeaff;border-radius:22px;padding:26px;box-shadow:0 18px 45px #00308018;position:relative;overflow:hidden;transition:.35s}.ims-card span{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#003b91,#0d6efd);color:#fff;font-weight:800;margin-bottom:18px}.ims-card h3{color:#003080}.ims-card:hover{transform:translateY(-9px)}.process-modern .panel{border-top:4px solid #0d6efd;transition:.35s}.process-modern .panel:hover{transform:translateY(-10px);box-shadow:0 22px 45px #00308024}.about-gallery-slider{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.about-slide{height:310px;border-radius:24px;overflow:hidden;position:relative;box-shadow:0 22px 50px #00308025;background:#001b49}.about-slide img{width:100%;height:100%;object-fit:cover;transition:1s ease}.about-slide:hover img{transform:scale(1.09)}.about-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,27,73,.88))}.about-slide div{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;color:#fff}.about-slide h3{margin:0 0 6px}.gallery-4x5{grid-template-columns:repeat(4,1fr)}.gallery-card{transition:.35s ease;border:1px solid #e2edff}.gallery-card:hover{transform:translateY(-8px);box-shadow:0 24px 55px #00308028}.gallery-card img{height:210px}.card,.panel,.gallery-card,.slide-card{animation:softRise .8s ease both}@keyframes softRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@media(max-width:1100px){.ims-grid,.gallery-4x5,.about-gallery-slider{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.ims-grid,.gallery-4x5,.about-gallery-slider{grid-template-columns:1fr}.about-slide{height:260px}.hero h1{font-size:34px;letter-spacing:2px}}

/* =========================
   HERO HOME
========================= */

.hero-home{
    min-height:700px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(4,20,55,.82) 0%,
        rgba(4,20,55,.55) 35%,
        rgba(4,20,55,.15) 100%
    ),
    url('../uploads/home-hero.png') center center/cover no-repeat;
}

/* =========================
   CONTENT
========================= */

.hero-content{
    position:relative;
    z-index:10;

    max-width:720px;

    padding:0;

    background:none;

    box-shadow:none;

    color:#ffffff;
}

/* =========================
   LABEL
========================= */

.hero-content span{
    display:inline-block;

    color:#8bc4ff;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

    text-shadow:
    0 2px 8px rgba(0,0,0,.40);
}

/* =========================
   TITLE
========================= */

.hero-content h1{
    font-size:68px;

    line-height:1.08;

    font-weight:800;

    margin:15px 0 25px;

    color:#ffffff;

    text-shadow:
    0 4px 20px rgba(0,0,0,.55);
}

/* =========================
   PARAGRAPH
========================= */

.hero-content p{
    font-size:19px;

    line-height:1.9;

    color:#eef5ff;

    max-width:650px;

    text-shadow:
    0 3px 15px rgba(0,0,0,.45);
}

/* =========================
   BUTTONS
========================= */

.hero-buttons{
    display:flex;
    gap:16px;
    margin-top:35px;
    flex-wrap:wrap;
}

.btn-primary{
    background:#0d6efd;
    color:#fff;
    padding:14px 30px;
    border-radius:14px;
    text-decoration:none;
    font-weight:700;

    transition:.3s;
}

.btn-primary:hover{
    transform:translateY(-3px);

    background:#0b5ed7;
}

.btn-secondary{
    border:2px solid rgba(255,255,255,.75);

    color:#fff;

    padding:14px 30px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.btn-secondary:hover{
    background:#fff;

    color:#082b5f;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px){

    .hero-home{
        min-height:600px;
    }

    .hero-content h1{
        font-size:48px;
    }
}

@media(max-width:575px){

    .hero-home{
        min-height:520px;
    }

    .hero-content h1{
        font-size:38px;
        line-height:1.15;
    }

    .hero-content p{
        font-size:16px;
    }
}

.hero-about{
    min-height:650px;
    display:flex;
    align-items:center;
    position:relative;
    background:
        linear-gradient(
            90deg,
            rgba(3,20,58,.95) 0%,
            rgba(3,20,58,.78) 42%,
            rgba(3,20,58,.10) 100%
        ),
        url('../uploads/hero-about.png') center/cover no-repeat;
}

.hero-about .container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.hero-about .hero-content{
    max-width:680px;
    color:#fff;
}

.hero-about .hero-content span{
    color:#4da3ff;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.hero-about .hero-content h1{
    font-size:58px;
    line-height:1.12;
    margin:20px 0 12px;
    font-weight:800;
}

.hero-about .hero-content h3{
    color:#f5c451;
    font-size:24px;
    margin-bottom:18px;
}

.hero-about .hero-content p{
    font-size:18px;
    line-height:1.8;
    color:#eef5ff;
    margin-bottom:30px;
}

@media(max-width:768px){
    .hero-about{
        min-height:520px;
        background-position:center right;
    }

    .hero-about .hero-content h1{
        font-size:36px;
    }

    .hero-about .hero-content h3{
        font-size:20px;
    }

    .hero-about .hero-content p{
        font-size:15px;
    }
}

.hero-divisi{
    min-height:650px;
    display:flex;
    align-items:center;
    position:relative;
    background:
        linear-gradient(
            90deg,
            rgba(3,20,58,.94) 0%,
            rgba(3,20,58,.78) 42%,
            rgba(3,20,58,.08) 100%
        ),
        url('../uploads/hero-divisi.png') center/cover no-repeat;
}

.hero-divisi .container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.hero-divisi .hero-content{
    max-width:680px;
    color:#fff;
}

.hero-divisi .hero-content span{
    color:#4da3ff;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.hero-divisi .hero-content h1{
    font-size:72px;
    line-height:1.05;
    margin:18px 0;
    font-weight:800;
}

.hero-divisi .hero-content p{
    font-size:18px;
    line-height:1.8;
    color:#eef5ff;
    margin-bottom:18px;
}

@media(max-width:768px){
    .hero-divisi{
        min-height:520px;
        background-position:center right;
    }

    .hero-divisi .hero-content h1{
        font-size:42px;
    }

    .hero-divisi .hero-content p{
        font-size:15px;
    }
}

.hero-metal{
    min-height:700px;
    display:flex;
    align-items:center;
    position:relative;

    background:
    linear-gradient(
        90deg,
        rgba(2,18,55,.95) 0%,
        rgba(2,18,55,.82) 45%,
        rgba(2,18,55,.10) 100%
    ),
    url('../uploads/hero-metal.png');

    background-size:cover;
    background-position:center;
}

.hero-metal .container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.hero-metal .hero-content{
    max-width:700px;
    color:#fff;
}

.hero-metal span{
    color:#59a8ff;
    font-weight:700;
    letter-spacing:2px;
}

.hero-metal h1{
    font-size:72px;
    font-weight:800;
    line-height:1.05;
    margin:15px 0;
}

.hero-metal h3{
    color:#f3c75b;
    margin-bottom:20px;
    font-size:24px;
}

.hero-metal p{
    font-size:18px;
    line-height:1.8;
    color:#eef5ff;
}

.hero-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:30px;
}

.hero-points div{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    padding:14px 18px;
    border-radius:14px;
    backdrop-filter:blur(6px);
    font-weight:600;
}

@media(max-width:768px){

.hero-metal{
    min-height:560px;
    background-position:center right;
}

.hero-metal h1{
    font-size:42px;
}

.hero-metal h3{
    font-size:18px;
}

.hero-metal p{
    font-size:15px;
}

.hero-points{
    grid-template-columns:1fr;
}

}

.hero-catalyst{
    min-height:700px;
    display:flex;
    align-items:center;
    position:relative;
    background:
    linear-gradient(
        90deg,
        rgba(2,18,55,.95) 0%,
        rgba(2,18,55,.82) 45%,
        rgba(2,18,55,.10) 100%
    ),
    url('../uploads/hero-catalyst.png');
    background-size:cover;
    background-position:center;
}

.hero-catalyst .container,
.hero-metal .container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.hero-catalyst .hero-content,
.hero-metal .hero-content{
    max-width:700px;
    color:#fff;
}

.hero-catalyst span,
.hero-metal span{
    color:#59a8ff;
    font-weight:700;
    letter-spacing:2px;
}

.hero-catalyst h1,
.hero-metal h1{
    font-size:72px;
    font-weight:800;
    line-height:1.05;
    margin:15px 0;
}

.hero-catalyst h3,
.hero-metal h3{
    color:#f3c75b;
    margin-bottom:20px;
    font-size:24px;
}

.hero-catalyst p,
.hero-metal p{
    font-size:18px;
    line-height:1.8;
    color:#eef5ff;
}

@media(max-width:768px){
    .hero-catalyst,
    .hero-metal{
        min-height:560px;
        background-position:center right;
    }

    .hero-catalyst h1,
    .hero-metal h1{
        font-size:42px;
    }
}


.hero-services{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(0,20,60,.92) 0%,
        rgba(0,40,120,.75) 45%,
        rgba(0,40,120,.15) 100%
    ),
    url('../uploads/hero-services.png');

    background-size:cover;
    background-position:center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
    radial-gradient(
        circle at top right,
        rgba(255,255,255,.18),
        transparent 40%
    );
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
    color:#fff;
}

.hero-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    font-weight:600;
    letter-spacing:1px;
}

.hero-services h1{
    margin-top:20px;
    font-size:72px;
    font-weight:800;
    line-height:1;
}

.hero-services h1 span{
    color:#4da3ff;
}

.hero-services p{
    margin-top:25px;
    font-size:20px;
    line-height:1.8;
    color:#dce8ff;
}

.hero-feature{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:35px;
}

.feature-item{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    border-radius:16px;
    padding:14px 20px;
}

.feature-item i{
    color:#4da3ff;
    margin-right:8px;
}

.hero-buttons{
    margin-top:35px;
    display:flex;
    gap:16px;
}

.btn-primary{
    background:#0d6efd;
    color:#fff;
    padding:14px 30px;
    border-radius:12px;
    text-decoration:none;
}

.btn-secondary{
    border:1px solid #fff;
    color:#fff;
    padding:14px 30px;
    border-radius:12px;
    text-decoration:none;
}

.hero-gallery{
    position:relative;
    min-height:560px;
    display:flex;
    align-items:center;
    background:
      linear-gradient(90deg,
        rgba(2,18,55,.94) 0%,
        rgba(2,35,90,.82) 42%,
        rgba(2,35,90,.25) 100%
      ),
      url('/v4.7/assets/uploads/hero-gallery.png') center/cover no-repeat;
    overflow:hidden;
}

/* === FIX v4.7: precise hero, image cards, and smooth mobile navigation === */
.container{width:min(1180px,90%);margin-left:auto;margin-right:auto}.header{height:auto;min-height:88px;gap:22px}.brand img{width:72px;height:72px;object-fit:contain}.brand b{font-size:clamp(18px,2vw,24px);white-space:nowrap}.brand small{font-size:11px}.menu-toggle{display:none;background:#003fb5;color:#fff!important;border:0;border-radius:12px;padding:12px 14px;font-size:20px}#mainMenu{display:flex;align-items:center;gap:22px}.drop>div{z-index:999;top:100%;left:0}.drop>a{cursor:pointer}.hero-home,.hero-about,.hero-divisi,.hero-metal,.hero-catalyst,.hero-services,.hero-gallery{background-position:center center!important;background-size:cover!important}.hero-content,.hero-gallery-content{background:rgba(2,18,55,.10);border-radius:24px;padding:24px 0}.hero-home .hero-content,.hero-about .hero-content,.hero-divisi .hero-content,.hero-metal .hero-content,.hero-catalyst .hero-content,.hero-services .hero-content,.hero-gallery-content{max-width:720px}.gallery-card img,.card img,.slide-card img,.about-slide img{background:#eaf1fb;object-fit:cover}.gallery-card-body h3{min-height:48px}.section-title{text-align:center;margin-bottom:30px}.section-title span{color:#0d6efd;font-weight:800;letter-spacing:2px}.section-title h2{font-size:34px;color:#082b5f;margin:8px 0}.section-title p{color:#607089}.hero-gallery{background:linear-gradient(90deg,rgba(2,18,55,.94) 0%,rgba(2,35,90,.82) 42%,rgba(2,35,90,.18) 100%),url('../uploads/hero-gallery.png') center/cover no-repeat!important}.hero-gallery:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(0,145,255,.35),transparent 35%),linear-gradient(135deg,transparent 55%,rgba(255,255,255,.12) 56%,transparent 70%);pointer-events:none}.hero-gallery-content{position:relative;z-index:2;color:#fff}.breadcrumb{color:#dcecff}.hero-gallery h1{font-size:clamp(42px,7vw,72px);font-weight:900;letter-spacing:8px;color:#fff}.hero-gallery p{font-size:20px;line-height:1.8;color:#eaf4ff}.pagination{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.pagination a{text-decoration:none}
@media(max-width:1100px){#mainMenu{gap:14px}.header{padding:12px 4%}.topbar{padding:9px 4%;gap:18px;flex-wrap:wrap}.brand img{width:62px;height:62px}.brand small{display:none}}
@media(max-width:900px){.topbar{display:flex;flex-direction:row;justify-content:center;text-align:center}.header{position:sticky;top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.menu-toggle{display:inline-flex;align-items:center;justify-content:center}.brand{max-width:calc(100% - 64px)}#mainMenu{display:none;position:absolute;left:4%;right:4%;top:100%;background:#fff;border-radius:18px;box-shadow:0 20px 45px rgba(0,27,73,.22);padding:14px;flex-direction:column;align-items:stretch;gap:0}#mainMenu.open{display:flex}#mainMenu>a,#mainMenu .drop>a{display:block;padding:14px 16px;border-radius:12px}#mainMenu>a:hover,#mainMenu .drop>a:hover{background:#eef5ff}.drop>div{position:static;display:block;box-shadow:none;border-radius:12px;background:#f4f8ff;margin:0 0 8px 0;overflow:hidden}.drop div a{padding:12px 28px}.header nav .btn{text-align:center;margin-top:6px}.hero-home{min-height:560px;background-position:center right!important}.hero-about,.hero-divisi,.hero-metal,.hero-catalyst,.hero-services,.hero-gallery{min-height:520px;background-position:center right!important}.hero-content,.hero-gallery-content{max-width:100%;padding:18px 0}.hero-content h1,.hero-services h1{font-size:clamp(36px,9vw,48px)!important}.hero-content p,.hero-services p,.hero-gallery p{font-size:16px!important}.hero-points{grid-template-columns:1fr}.hero-buttons{gap:10px}.contact-strip,footer{grid-template-columns:1fr;text-align:left}.product-slider{padding:18px}.slide-card{min-width:260px}.gallery-grid,.gallery-4x5{grid-template-columns:repeat(2,1fr)!important;gap:18px}.grid3,.grid4,.process,.ims-grid,.about-gallery-slider{grid-template-columns:1fr!important}}
@media(max-width:575px){.topbar span{font-size:12px}.brand b{font-size:16px}.brand img{width:54px;height:54px}.hero-home,.hero-about,.hero-divisi,.hero-metal,.hero-catalyst,.hero-services,.hero-gallery{min-height:500px}.hero-gallery h1{letter-spacing:3px}.gallery-grid,.gallery-4x5{grid-template-columns:1fr!important}.gallery-card img{height:220px}.section{padding:42px 5%}.btn-primary,.btn-secondary,.btn{padding:12px 18px}.wa{right:14px;bottom:14px;padding:12px 14px}}


.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 28px;
}

.contact-info-card {
    background: #ffffff;
    padding: 34px 28px;
    border-radius: 16px;
    box-shadow: 0 16px 35px rgba(10, 40, 90, 0.08);
}

.contact-info-card h3 {
    margin-bottom: 16px;
    color: #0a2a55;
    font-size: 20px;
    font-weight: 800;
}

.contact-info-card p {
    color: #4c5d70;
    line-height: 1.8;
}

.contact-form-box {
    background: #ffffff;
    padding: 34px;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(10, 40, 90, 0.08);
}

.contact-form-box form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form-box input,
.contact-form-box textarea {
    width: 100%;
    padding: 15px 17px;
    border: 1px solid #dfe7f0;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
}

.contact-form-box textarea {
    min-height: 170px;
    resize: vertical;
}

.contact-form-box input:focus,
.contact-form-box textarea:focus {
    border-color: #005bea;
    box-shadow: 0 0 0 3px rgba(0, 91, 234, 0.08);
}

@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-box {
        padding: 22px;
    }
}

.gallery-img-wrap {
    width: 100%;
    height: 230px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: #eef4fb;
}

.gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-card {
    overflow: hidden;
}
/* TOPBAR SOCIAL FIX */
.topbar {
  background: #062b5f;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.topbar span,
.topbar a {
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.topbar a:visited,
.topbar a:hover,
.topbar a:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

.topbar i {
  color: #ffffff !important;
  font-size: 12px;
}

/* Mobile biar tidak kepanjangan */
@media (max-width: 768px) {
  .topbar {
    padding: 5px 10px;
    font-size: 10px;
    gap: 7px;
    white-space: nowrap;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .topbar span,
  .topbar a {
    flex: 0 0 auto;
  }
}

/* TOPBAR FIX */
.topbar {
  background: #062b5f;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.topbar span,
.topbar a {
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.topbar a:visited,
.topbar a:hover,
.topbar a:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

.topbar i {
  color: #ffffff !important;
  font-size: 12px;
}

/* LOGO HORIZONTAL HEADER */
.header .brand img {
  width: 185px;
  height: auto;
  object-fit: contain;
  display: block;
}

.header .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* MOBILE */
@media (max-width: 768px) {
  .topbar {
    padding: 5px 10px;
    font-size: 10px;
    gap: 7px;
    white-space: nowrap;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .topbar span,
  .topbar a {
    flex: 0 0 auto;
  }

  .header .brand img {
    width: 155px;
  }
}
<style>
.our-division-db {
    padding: 60px 0;
    background: #f4f8ff;
}

.our-division-db .section-title {
    text-align: center;
    color: #003b88;
    font-size: 32px;
    margin-bottom: 30px;
}

.division-slider-wrap {
    max-width: 1000px;
    margin: 0 auto;
    background: #0046b8;
    padding: 24px;
    border-radius: 22px;
    box-shadow: 0 20px 45px rgba(0, 55, 150, .22);
}

.division-slider {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.division-card-db {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.division-card-img {
    height: 210px;
    background: #eaf2ff;
}

.division-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.division-card-body {
    padding: 20px;
}

.division-card-body h3 {
    margin: 0 0 10px;
    color: #003b88;
    font-size: 22px;
}

.division-card-body p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

@media(max-width: 700px) {
    .division-slider {
        grid-template-columns: 1fr;
    }

    .division-slider-wrap {
        padding: 16px;
        border-radius: 18px;
    }

    .division-card-img {
        height: 180px;
    }
}
</style>
.service-slide-img,
.service-card-img {
    width: 100%;
    height: 220px;
    background: #dfe9f7;
    overflow: hidden;
}

.service-slide-img img,
.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.product-zoom-btn {
    border: none;
    cursor: pointer;
}

.product-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 12, 32, .82);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.product-modal.show {
    display: flex;
}

.product-modal-box {
    width: min(920px, 96vw);
    background: #ffffff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0,0,0,.38);
    position: relative;
    animation: productZoomIn .22s ease;
}

@keyframes productZoomIn {
    from {
        opacity: 0;
        transform: scale(.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.product-modal-img {
    width: 100%;
    max-height: 78vh;
    background: #061b45;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-modal-img img {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    display: block;
}

.product-modal-info {
    padding: 18px 24px 22px;
}

.product-modal-info span {
    display: inline-flex;
    background: #eaf2ff;
    color: #0754aa;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

.product-modal-info h3 {
    margin: 0;
    color: #061b45;
    font-size: 24px;
    font-weight: 900;
}

.product-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #061b45;
    font-size: 28px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    z-index: 2;
}

@media (max-width: 640px) {
    .product-modal {
        padding: 12px;
    }

    .product-modal-box {
        border-radius: 22px;
    }

    .product-modal-info {
        padding: 16px 18px 20px;
    }

    .product-modal-info h3 {
        font-size: 21px;
    }

    .product-modal-close {
        width: 38px;
        height: 38px;
        font-size: 25px;
    }
}
/* =========================================================
   HOME DESKTOP PROPORTIONAL FIX
   PT METAL MULTI ENERGI
   ========================================================= */

.container {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

/* HERO */
.hero-home {
    width: min(1180px, calc(100% - 40px));
    margin: 24px auto 0;
    min-height: 520px;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(3, 20, 58, .96) 0%, rgba(3, 20, 58, .78) 48%, rgba(3, 20, 58, .18) 100%),
        url("../uploads/home-hero.jpg") center/cover no-repeat;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .18);
}

.hero-container {
    width: 100%;
}

.hero-content {
    max-width: 610px;
    padding: 70px 0;
    color: #fff;
}

.hero-content span {
    display: inline-block;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.hero-content h1 {
    margin: 0 0 22px;
    font-size: clamp(38px, 4.4vw, 62px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.hero-content p {
    max-width: 570px;
    margin: 0 0 32px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.btn-primary {
    background: #ffffff;
    color: #08245c;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 255, 255, .25);
}

.btn-secondary {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .08);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

/* SECTION */
.section {
    padding: 70px 0;
}

.title {
    text-align: center;
    margin: 0 0 10px;
    font-size: clamp(28px, 3vw, 42px);
    color: #071f4f;
    font-weight: 800;
}

.subtitle {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
    color: #667085;
    font-size: 16px;
    line-height: 1.7;
}

/* PRODUCT SLIDER */
.product-slider {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
}

.slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 72px) / 4);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 4px 18px;
    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slide-card {
    scroll-snap-align: start;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(7, 31, 79, .08);
    box-shadow: 0 18px 45px rgba(7, 31, 79, .10);
    padding-bottom: 20px;
    transition: .25s ease;
}

.slide-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 65px rgba(7, 31, 79, .16);
}

.slide-img-wrap {
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: #eef3fb;
}

.slide-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: .35s ease;
}

.slide-card:hover img {
    transform: scale(1.06);
}

.slide-card .badge {
    display: inline-block;
    margin: 18px 18px 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eaf1ff;
    color: #0b3b88;
    font-size: 12px;
    font-weight: 700;
}

.slide-card h3 {
    margin: 0 18px 10px;
    color: #071f4f;
    font-size: 20px;
    line-height: 1.3;
}

.slide-card p {
    margin: 0 18px 16px;
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
}

.slide-card b {
    display: block;
    margin: 0 18px;
    color: #0b3b88;
    font-size: 15px;
}

.slider-btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #ffffff;
    color: #071f4f;
    font-size: 32px;
    line-height: 1;
    box-shadow: 0 14px 35px rgba(7, 31, 79, .18);
}

.slider-btn.prev {
    left: -22px;
}

.slider-btn.next {
    right: -22px;
}

/* PROCESS */
.process-modern {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.process-modern .panel {
    background: #ffffff;
    border-radius: 22px;
    padding: 26px 22px;
    border: 1px solid rgba(7, 31, 79, .08);
    box-shadow: 0 16px 40px rgba(7, 31, 79, .09);
}

.process-modern .panel h3 {
    margin: 0 0 18px;
    font-size: 34px;
    color: #d8e4f7;
    font-weight: 800;
}

.process-modern .panel b {
    display: block;
    margin-bottom: 10px;
    color: #071f4f;
    font-size: 17px;
}

.process-modern .panel p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
}

/* TABLET */
@media (max-width: 1024px) {
    .hero-home {
        min-height: 480px;
    }

    .slider-track {
        grid-auto-columns: calc((100% - 24px) / 2);
    }

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

/* MOBILE */
@media (max-width: 640px) {
    .container {
        width: min(100% - 24px, 1180px);
    }

    .hero-home {
        width: min(100% - 24px, 1180px);
        margin-top: 14px;
        min-height: auto;
        border-radius: 22px;
        background:
            linear-gradient(180deg, rgba(3, 20, 58, .96) 0%, rgba(3, 20, 58, .82) 100%),
            url("../uploads/home-hero.jpg") center/cover no-repeat;
    }

    .hero-content {
        padding: 48px 0;
    }

    .hero-content h1 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .hero-content p {
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

    .section {
        padding: 52px 0;
    }

    .slider-track {
        grid-auto-columns: 86%;
        gap: 18px;
    }
.division-container {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.hero-divisi-prop {
    width: min(1180px, calc(100% - 40px));
    margin: 24px auto 0;
    border-radius: 28px;
}

.services-container {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.hero-services {
    width: min(1180px, calc(100% - 40px));
    margin: 24px auto 0;
    border-radius: 28px;
}

    .slider-btn {
        display: none;
    }

    .slide-img-wrap {
        height: 210px;
    }

    .process-modern {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   HOME HERO - TEXT PRESISI
================================ */

.home-hero,
.hero-home,
.hero {
    max-width: 1180px;
    margin: 28px auto 0;
    border-radius: 34px;
    overflow: hidden;
    min-height: 520px;
    position: relative;
}

/* area teks hero */
.hero-content,
.home-hero-content,
.hero .container {
    max-width: 720px;
    padding: 80px 55px 70px;
}

/* label kecil */
.hero-badge,
.home-hero .badge {
    display: inline-block;
    margin-bottom: 24px;
    padding: 9px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* judul utama */
.hero h3,
.home-hero h3 ,
.hero-title {
    max-width: 760px;
    margin: 0 0 24px;
    font-size: clamp(42px, 5.2vw, 76px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.5px;
}

/* paragraf */
.hero p,
.home-hero p,
.hero-subtitle {
    max-width: 650px;
    margin: 0 0 34px;
    font-size: 18px;
    line-height: 1.75;
    font-weight: 500;
}

/* tombol */
.hero-buttons,
.home-hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Desktop besar */
@media (min-width: 1200px) {
    .hero-content,
    .home-hero-content,
    .hero .container {
        padding-left: 72px;
        padding-right: 72px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .home-hero,
    .hero-home,
    .hero {
        margin: 20px 16px 0;
        border-radius: 26px;
        min-height: 500px;
    }

    .hero-content,
    .home-hero-content,
    .hero .container {
        padding: 70px 38px 60px;
    }

    .hero h1,
    .home-hero h1,
    .hero-title {
        font-size: clamp(36px, 7vw, 58px);
        line-height: 1.08;
    }
}

/* HP */
@media (max-width: 576px) {
    .home-hero,
    .hero-home,
    .hero {
        margin: 16px 12px 0;
        border-radius: 22px;
        min-height: 520px;
    }

    .hero-content,
    .home-hero-content,
    .hero .container {
        padding: 55px 24px 45px;
    }

    .hero-badge,
    .home-hero .badge {
        font-size: 12px;
        letter-spacing: 1.5px;
        margin-bottom: 18px;
    }

    .hero h1,
    .home-hero h1,
    .hero-title {
        font-size: 38px;
        line-height: 1.12;
        letter-spacing: -0.8px;
        margin-bottom: 20px;
    }

    .hero p,
    .home-hero p,
    .hero-subtitle {
        font-size: 15.5px;
        line-height: 1.65;
        margin-bottom: 28px;
    }

    .hero-buttons,
    .home-hero-buttons {
        gap: 12px;
    }
}

/* ===============================
   FIX HOME HERO HEIGHT
   Lebih pendek dan presisi
================================ */

.home-hero,
.hero-home,
.hero {
    min-height: 430px !important;
    margin-top: 18px !important;
}

.hero-content,
.home-hero-content,
.hero .container {
    padding-top: 58px !important;
    padding-bottom: 48px !important;
}

/* Judul jangan terlalu tinggi */
.hero h1,
.home-hero h1,
.hero-title {
    font-size: clamp(30px, 4.2vw, 58px) !important;
    line-height: 1.08 !important;
    margin-bottom: 18px !important;
}

/* Paragraf lebih rapat */
.hero p,
.home-hero p,
.hero-subtitle {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 26px !important;
}

/* Badge lebih rapat */
.hero-badge,
.home-hero .badge {
    margin-bottom: 18px !important;
}

/* MOBILE */
@media (max-width: 576px) {
    .home-hero,
    .hero-home,
    .hero {
        min-height: 350px !important;
        margin: 14px 12px 0 !important;
        border-radius: 20px !important;
    }

    .hero-content,
    .home-hero-content,
    .hero .container {
        padding: 38px 26px 34px !important;
        max-width: 82% !important;
    }

    .hero h1,
    .home-hero h1,
    .hero-title {
        font-size: 18px !important;
        line-height: 1.15 !important;
        margin-bottom: 14px !important;
        letter-spacing: -0.2px !important;
    }

    .hero p,
    .home-hero p,
    .hero-subtitle {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-bottom: 20px !important;
    }

    .hero-buttons,
    .home-hero-buttons {
        gap: 10px !important;
    }

    .hero-buttons a,
    .home-hero-buttons a,
    .hero .btn,
    .home-hero .btn {
        padding: 11px 18px !important;
        font-size: 12px !important;
    }
}

/* ===============================
   FIX SERVICES HERO HEIGHT
   Supaya hero services lebih pendek & presisi
================================ */

.services-hero,
.hero-services {
    max-width: 1180px !important;
    margin: 18px auto 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    min-height: 430px !important;
    position: relative !important;
}

/* Area tulisan services */
.services-hero .hero-content,
.hero-services .hero-content,
.services-hero-content {
    padding: 56px 46px 46px !important;
    max-width: 760px !important;
}

/* Judul OUR SERVICES */
.services-hero h1,
.hero-services h1,
.services-title {
    font-size: clamp(34px, 4.5vw, 64px) !important;
    line-height: 1.05 !important;
    margin: 0 0 14px !important;
    letter-spacing: -1px !important;
}

/* Deskripsi bawah judul */
.services-hero p,
.hero-services p,
.services-subtitle {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
    max-width: 720px !important;
}

/* Tombol kategori services */
.services-hero .service-tags,
.hero-services .service-tags,
.services-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 22px 0 28px !important;
}

.services-hero .service-tags a,
.hero-services .service-tags a,
.services-tags a,
.services-hero .tag,
.hero-services .tag {
    padding: 14px 28px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Tombol bawah */
.services-hero .hero-buttons,
.hero-services .hero-buttons {
    gap: 14px !important;
    margin-top: 12px !important;
}

.services-hero .hero-buttons a,
.hero-services .hero-buttons a,
.services-hero .btn,
.hero-services .btn {
    padding: 13px 24px !important;
    font-size: 14px !important;
}

/* TABLET */
@media (max-width: 991px) {
    .services-hero,
    .hero-services {
        margin: 16px 14px 0 !important;
        min-height: 400px !important;
        border-radius: 24px !important;
    }

    .services-hero .hero-content,
    .hero-services .hero-content,
    .services-hero-content {
        padding: 48px 34px 40px !important;
        max-width: 82% !important;
    }

    .services-hero h1,
    .hero-services h1,
    .services-title {
        font-size: 38px !important;
    }
}

/* HP */
@media (max-width: 576px) {
    .services-hero,
    .hero-services {
        margin: 14px 12px 0 !important;
        min-height: 350px !important;
        border-radius: 20px !important;
    }

    .services-hero .hero-content,
    .hero-services .hero-content,
    .services-hero-content {
        padding: 34px 20px 30px !important;
        max-width: 94% !important;
    }

    .services-hero h1,
    .hero-services h1,
    .services-title {
        font-size: 30px !important;
        line-height: 1.08 !important;
        margin-bottom: 10px !important;
    }

    .services-hero p,
    .hero-services p,
    .services-subtitle {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 14px !important;
        max-width: 92% !important;
    }

    .services-hero .service-tags,
    .hero-services .service-tags,
    .services-tags {
        gap: 9px !important;
        margin: 14px 0 18px !important;
    }

    .services-hero .service-tags a,
    .hero-services .service-tags a,
    .services-tags a,
    .services-hero .tag,
    .hero-services .tag {
        padding: 9px 15px !important;
        font-size: 10px !important;
        letter-spacing: 0.8px !important;
    }

    .services-hero .hero-buttons,
    .hero-services .hero-buttons {
        gap: 10px !important;
        margin-top: 8px !important;
    }

    .services-hero .hero-buttons a,
    .hero-services .hero-buttons a,
    .services-hero .btn,
    .hero-services .btn {
        padding: 10px 16px !important;
        font-size: 11px !important;
    }
}


/* ===============================
   TOP BAR HEADER - PRESISI CENTER
================================ */
.topbar,
.top-bar,
.header-top {
    background: #07152f;
    color: #ffffff;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0 16px;
}

.topbar .container,
.top-bar .container,
.header-top .container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
}

.topbar a,
.top-bar a,
.header-top a {
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
}

.topbar i,
.top-bar i,
.header-top i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    position: relative;
    top: 0;
}

/* Supaya icon dan tulisan tidak terlalu mepet */
.topbar span,
.top-bar span,
.header-top span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

/* ===============================
   MAIN HEADER - LOGO & MENU CENTER
================================ */
.main-header,
.site-header,
.navbar-wrap {
    background: #ffffff;
    min-height: 92px;
    display: flex;
    align-items: center;
}

.main-header .container,
.site-header .container,
.navbar-wrap .container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo,
.site-logo {
    display: flex;
    align-items: center;
}

.logo img,
.site-logo img {
    max-height: 58px;
    width: auto;
    display: block;
}

.nav-menu,
.main-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-menu a,
.main-menu a {
    display: inline-flex;
    align-items: center;
    height: 92px;
    color: #07152f;
    text-decoration: none;
    font-weight: 700;
}

/* ===============================
   ABOUT HERO - BACKGROUND PUTIH
================================ */
.hero-about,
.about-hero {
    background-color: #ffffff !important;
    background-blend-mode: screen;
    position: relative;
}

/* Layer putih di atas gambar */
.hero-about::before,
.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.82);
    z-index: 1;
}

/* Supaya isi hero tetap di atas layer putih */
.hero-about .container,
.about-hero .container,
.hero-about-content,
.about-hero-content {
    position: relative;
    z-index: 2;
}

/* Teks dibuat gelap agar terbaca di background putih */
.hero-about h1,
.hero-about h2,
.hero-about h3,
.hero-about p,
.about-hero h1,
.about-hero h2,
.about-hero h3,
.about-hero p {
    color: #102044 !important;
}

.product-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}

.product-img {
    width: 100%;
    height: 190px;
    background: #eef3f9;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}