*{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;
    }

    .slider-btn {
        display: none;
    }

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

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

/* =========================================================
   HOME PRODUCT SLIDER - CLEAN, CONSTANT, NO EMPTY BLUE
========================================================= */

.home-products-section {
    padding: 70px 0 80px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}

.home-section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 32px;
    padding: 0 18px;
}

.home-section-head h2 {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 1px;
    color: #08224d;
    font-weight: 900;
}

.home-section-head p {
    margin: 0;
    font-size: 15px;
    color: #69778c;
}

.home-product-slider {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(135deg, #001d55 0%, #003fae 48%, #0064e6 100%);
    box-shadow: 0 24px 55px rgba(0, 45, 110, .18);
}

.home-product-track {
    display: flex;
    width: 100%;
    transition: transform .55s ease;
    will-change: transform;
}

.home-product-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 34px;
}

.home-product-card {
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 34px;
    align-items: stretch;
    min-height: 370px;
}

.home-product-img-wrap {
    background: #ffffff;
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.home-product-img-wrap img {
    width: 100%;
    height: 100%;
    min-height: 335px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.home-product-content {
    background: rgba(255,255,255,.96);
    border-radius: 20px;
    padding: 34px 34px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}

.home-product-badge {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #e9f2ff;
    color: #0046a8;
    font-size: 12px;
    font-weight: 800;
}

.home-product-content h3 {
    margin: 0 0 14px;
    color: #08224d;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 900;
}

.home-product-content p {
    margin: 0;
    color: #5f6f84;
    font-size: 15px;
    line-height: 1.8;
}

.home-product-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: #003f9e !important;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    transition: .25s ease;
}

.home-product-nav:hover {
    transform: translateY(-50%) scale(1.08);
    background: #eaf3ff;
}

.home-product-nav.prev {
    left: 16px;
}

.home-product-nav.next {
    right: 16px;
}

.home-product-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 6;
}

.home-product-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.45);
    cursor: pointer;
}

.home-product-dots button.active {
    width: 28px;
    border-radius: 999px;
    background: #ffffff;
}

.home-product-empty {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    color: #6b7788;
}

/* Tablet */
@media (max-width: 900px) {
    .home-product-slide {
        padding: 24px;
    }

    .home-product-card {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: auto;
    }

    .home-product-img-wrap img {
        height: 300px;
        min-height: 300px;
    }

    .home-product-content {
        padding: 26px;
    }

    .home-product-content h3 {
        font-size: 24px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .home-products-section {
        padding: 54px 0 64px;
    }

    .home-section-head h2 {
        font-size: 24px;
    }

    .home-product-slider {
        width: calc(100% - 24px);
        border-radius: 18px;
    }

    .home-product-slide {
        padding: 14px;
    }

    .home-product-card {
        gap: 14px;
    }

    .home-product-img-wrap {
        border-radius: 16px;
        padding: 10px;
    }

    .home-product-img-wrap img {
        height: 210px;
        min-height: 210px;
        border-radius: 12px;
    }

    .home-product-content {
        border-radius: 16px;
        padding: 22px 20px 46px;
        min-height: 230px;
    }

    .home-product-content h3 {
        font-size: 21px;
    }

    .home-product-content p {
        font-size: 14px;
        line-height: 1.65;
    }

    .home-product-nav {
        width: 38px;
        height: 38px;
    }

    .home-product-nav.prev {
        left: 8px;
    }

    .home-product-nav.next {
        right: 8px;
    }

    .home-product-dots {
        bottom: 14px;
    }
}

.home-products{
    padding:70px 6%;
    background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%);
}

.section-title{
    text-align:center;
    margin-bottom:35px;
}

.section-title h2{
    font-size:34px;
    color:#08204a;
    margin:0 0 10px;
    font-weight:800;
}

.section-title p{
    color:#6b7280;
    font-size:15px;
}

.product-slider-wrap{
    position:relative;
    background:linear-gradient(135deg,#003c9e,#0066e6);
    border-radius:22px;
    padding:45px 55px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,55,140,.22);
}

.product-slider{
    display:flex;
    gap:25px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

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

.product-card{
    min-width:360px;
    max-width:360px;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.product-img{
    height:170px;
    background:#0b3d91;
    overflow:hidden;
}

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

.product-info{
    padding:22px;
}

.product-info span{
    display:inline-block;
    background:#eaf2ff;
    color:#0042a8;
    font-size:12px;
    font-weight:700;
    padding:6px 12px;
    border-radius:20px;
    margin-bottom:12px;
}

.product-info h3{
    margin:0 0 10px;
    color:#061747;
    font-size:21px;
    font-weight:800;
}

.product-info p{
    color:#667085;
    font-size:14px;
    line-height:1.6;
    margin-bottom:16px;
}

.product-info a{
    color:#0047b8;
    font-weight:800;
    text-decoration:none;
    font-size:14px;
}

.product-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    border:0;
    background:#fff;
    color:#0047b8;
    font-size:24px;
    font-weight:900;
    cursor:pointer;
    z-index:5;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.product-prev{
    left:18px;
}

.product-next{
    right:18px;
}

@media(max-width:768px){
    .home-products{
        padding:50px 14px;
    }

    .section-title h2{
        font-size:25px;
    }

    .product-slider-wrap{
        padding:28px 18px;
        border-radius:18px;
    }

    .product-card{
        min-width:82%;
        max-width:82%;
    }

    .product-img{
        height:145px;
    }

    .product-arrow{
        width:38px;
        height:38px;
        font-size:19px;
    }

    .product-prev{
        left:8px;
    }

    .product-next{
        right:8px;
    }
}

.contact-info-box {
    background: linear-gradient(135deg, #0647d9 0%, #001f65 100%);
    color: #fff;
    border-radius: 22px;
    padding: 42px 36px;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    box-shadow: 0 18px 40px rgba(0, 31, 101, 0.18);
}

.contact-info-box h2 {
    margin: 0 0 22px;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .5px;
}

.contact-desc {
    margin: 0 0 34px;
    font-size: 22px;
    line-height: 1.45;
    color: rgba(255,255,255,.95);
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    font-size: 22px;
    line-height: 1.35;
    color: #fff;
}

.contact-item i {
    width: 28px;
    min-width: 28px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-top: 2px;
}

.contact-item span {
    display: block;
    flex: 1;
    word-break: break-word;
}

/* Mobile */
@media (max-width: 768px) {
    .contact-info-box {
        border-radius: 20px;
        padding: 36px 26px;
        max-width: calc(100% - 28px);
    }

    .contact-info-box h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .contact-desc {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .contact-list {
        gap: 18px;
    }

    .contact-item {
        gap: 15px;
        font-size: 20px;
    }

    .contact-item i {
        width: 26px;
        min-width: 26px;
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .contact-info-box {
        padding: 34px 24px;
    }

    .contact-info-box h2 {
        font-size: 28px;
    }

    .contact-desc {
        font-size: 19px;
    }

    .contact-item {
        font-size: 19px;
    }
}

/* ===============================
   CLEAN CONTACT CARD
================================ */

.contact-info-box.contact-card-clean {
    width: 100%;
    max-width: 640px;
    margin: 35px auto 55px;
    padding: 0;
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(0, 95, 255, .32), transparent 38%),
        linear-gradient(135deg, #061f55 0%, #001b49 58%, #00102f 100%);
    color: #fff;
    box-shadow: 0 22px 55px rgba(0, 27, 73, .18);
}

.contact-card-inner {
    padding: 42px 38px;
}

.contact-label {
    display: inline-block;
    margin-bottom: 16px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.contact-info-box.contact-card-clean h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .3px;
}

.contact-info-box.contact-card-clean .contact-desc {
    max-width: 500px;
    margin: 0 0 34px;
    color: rgba(255,255,255,.88);
    font-size: 20px;
    line-height: 1.48;
}

.contact-info-box.contact-card-clean .contact-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-info-box.contact-card-clean .contact-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    column-gap: 14px;
    color: #fff;
    font-size: 20px;
    line-height: 1.35;
}

.contact-info-box.contact-card-clean .contact-item i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.13);
    color: #7dd3fc;
    font-size: 19px;
}

.contact-info-box.contact-card-clean .contact-item span {
    color: rgba(255,255,255,.95);
    word-break: break-word;
}

/* Hindari icon contact lama nempel ke kiri */
.contact-info-box:not(.contact-card-clean) {
    display: none;
}

/* Mobile */
@media (max-width: 768px) {
    .contact-info-box.contact-card-clean {
        max-width: calc(100% - 34px);
        margin: 28px auto 45px;
        border-radius: 24px;
    }

    .contact-card-inner {
        padding: 36px 28px;
    }

    .contact-info-box.contact-card-clean h2 {
        font-size: 30px;
    }

    .contact-info-box.contact-card-clean .contact-desc {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .contact-info-box.contact-card-clean .contact-item {
        grid-template-columns: 40px 1fr;
        column-gap: 13px;
        font-size: 18px;
    }

    .contact-info-box.contact-card-clean .contact-item i {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

@media (max-width: 420px) {
    .contact-info-box.contact-card-clean {
        max-width: calc(100% - 26px);
    }

    .contact-card-inner {
        padding: 32px 24px;
    }

    .contact-info-box.contact-card-clean h2 {
        font-size: 28px;
    }

    .contact-info-box.contact-card-clean .contact-desc {
        font-size: 17px;
    }

    .contact-info-box.contact-card-clean .contact-item {
        font-size: 17px;
    }
}



/* ===============================
   FOOTER MOBILE RAPI & ELEGAN
================================ */

.footer,
.site-footer {
    background: #001f55;
    color: #fff;
    padding: 70px 6% 34px;
    position: relative;
    overflow: hidden;
}

.footer h2,
.footer h3,
.site-footer h2,
.site-footer h3 {
    color: #fff;
    margin: 0 0 22px;
    font-weight: 800;
    line-height: 1.2;
}

.footer p,
.site-footer p {
    color: rgba(255,255,255,.9);
    line-height: 1.45;
    margin: 0 0 22px;
}

.footer ul,
.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer li,
.site-footer li {
    color: rgba(255,255,255,.92);
    line-height: 1.45;
    margin-bottom: 8px;
}

/* Jarak antar blok footer */
.footer-col,
.footer-box,
.footer-section {
    margin-bottom: 46px;
}

/* Tombol WhatsApp floating */
.whatsapp-float,
.wa-float,
.float-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 34px;
    z-index: 999;
    background: linear-gradient(135deg, #17c964, #0bb850);
    color: #fff !important;
    padding: 16px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 14px 35px rgba(0,0,0,.22);
}

/* Mobile */
@media (max-width: 768px) {
    .footer,
    .site-footer {
        padding: 62px 6% 105px;
    }

    .footer h2,
    .site-footer h2 {
        font-size: 30px;
        margin-bottom: 22px;
    }

    .footer h3,
    .site-footer h3 {
        font-size: 27px;
        margin-bottom: 20px;
    }

    .footer p,
    .site-footer p {
        font-size: 21px;
        line-height: 1.35;
        margin-bottom: 58px;
    }

    .footer li,
    .site-footer li {
        font-size: 21px;
        line-height: 1.25;
        margin-bottom: 5px;
    }

    .footer-col,
    .footer-box,
    .footer-section {
        margin-bottom: 58px;
    }

    .whatsapp-float,
    .wa-float,
    .float-whatsapp {
        right: 22px;
        bottom: 34px;
        padding: 16px 28px;
        font-size: 20px;
    }
}

@media (max-width: 420px) {
    .footer,
    .site-footer {
        padding: 58px 6% 115px;
    }

    .footer h2,
    .site-footer h2 {
        font-size: 29px;
    }

    .footer h3,
    .site-footer h3 {
        font-size: 26px;
    }

    .footer p,
    .site-footer p,
    .footer li,
    .site-footer li {
        font-size: 20px;
    }

    .whatsapp-float,
    .wa-float,
    .float-whatsapp {
        right: 20px;
        bottom: 36px;
        font-size: 19px;
        padding: 15px 26px;
    }
}
.product-card img,
.product-slide img,
.home-product-card img,
.product-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    background: #eef5ff;
}
.site-footer {
    width: min(1180px, calc(100% - 24px));
    margin: 40px auto 24px;
    background: linear-gradient(135deg, #061b3f 0%, #082d68 55%, #061b3f 100%);
    color: #fff;
    border-radius: 0 0 26px 26px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(5, 25, 58, .20);
}

.footer-wrap {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 34px;
    padding: 46px 42px 34px;
}

.footer-col h3 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.footer-col p {
    margin: 0;
    max-width: 280px;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255,255,255,.78);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,.78);
}

.footer-col a {
    color: rgba(255,255,255,.82);
    text-decoration: none;
}

.footer-col a:hover {
    color: #fff;
}

.footer-info {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-info a {
    font-size: 13px;
    color: #cfe8ff;
    text-decoration: none;
    word-break: break-word;
}

.footer-copy {
    padding: 18px 28px 20px;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.13);
    text-align: center;
}

.footer-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.75);
}

.wa-floating {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    background: linear-gradient(135deg, #21c063, #0c9f48);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    padding: 13px 18px;
    border-radius: 999px;
    box-shadow: 0 16px 35px rgba(16, 185, 90, .35);
}

/* Tablet */
@media (max-width: 991px) {
    .footer-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        padding: 38px 30px 30px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .site-footer {
        width: calc(100% - 18px);
        margin: 34px auto 20px;
        border-radius: 0 0 22px 22px;
    }

    .footer-wrap {
        display: block;
        padding: 34px 24px 26px;
    }

    .footer-col {
        margin-bottom: 28px;
    }

    .footer-col:last-child {
        margin-bottom: 0;
    }

    .footer-col h3 {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .footer-col p,
    .footer-col li {
        font-size: 14px;
    }

    .footer-copy {
        padding: 16px 22px 18px;
    }

    .footer-copy p {
        font-size: 12.5px;
    }

    .wa-floating {
        right: 14px;
        bottom: 14px;
        padding: 12px 16px;
        font-size: 12px;
    }
}



/* =========================================================
   PRODUCTION POLISH 2026 - MOBILE, DESKTOP, PREMIUM UI
========================================================= */
:root{--mme-navy:#061747;--mme-deep:#001b49;--mme-blue:#0055d8;--mme-line:rgba(6,23,71,.10);--mme-soft:#f6faff;--mme-shadow:0 20px 55px rgba(0,31,103,.14)}
body{background:radial-gradient(circle at 8% 0%,rgba(0,85,216,.10),transparent 30%),linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);-webkit-font-smoothing:antialiased;overflow-x:hidden}.topbar{width:min(1180px,calc(100% - 24px));margin:12px auto 0;border-radius:20px 20px 0 0;padding:10px 22px;justify-content:center;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,#001b49,#073b8e);box-shadow:0 12px 28px rgba(0,27,73,.13)}.topbar a,.topbar span{color:#fff;text-decoration:none;white-space:nowrap}.header{width:min(1180px,calc(100% - 24px));margin:0 auto;height:86px;border:1px solid rgba(255,255,255,.88);border-top:0;border-radius:0 0 24px 24px;padding:0 24px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);box-shadow:var(--mme-shadow)}.brand img{width:68px;height:auto;object-fit:contain}.brand-text b{display:block;font-size:18px;letter-spacing:.3px;color:var(--mme-navy)}.brand-text small{display:block;font-size:11px;color:#607089}.menu-toggle{display:none;background:linear-gradient(135deg,#003b91,#0d6efd)!important;border-radius:12px;padding:11px 13px!important}#mainMenu{gap:18px}#mainMenu a{font-size:14px;color:#061747}#mainMenu .btn{border-radius:999px;padding:12px 18px}.drop>div{z-index:999;border:1px solid #e4efff}.section{width:min(1180px,calc(100% - 24px));margin:0 auto;padding:56px 0}.card,.panel,.gallery-card,.slide-card{border:1px solid #e4efff;box-shadow:0 18px 46px rgba(0,48,128,.12)}.card:hover,.panel:hover,.gallery-card:hover,.slide-card:hover{transform:translateY(-6px);transition:.28s ease}.title{font-size:clamp(26px,3vw,38px);letter-spacing:.2px}.subtitle{font-size:16px}.hero,.hero-home,.hero-about,.hero-services,.hero-products,.hero-gallery,.contact-shell{width:min(1180px,calc(100% - 24px));margin:0 auto}.hero-home,.hero-about{border-radius:0 0 30px 30px;box-shadow:var(--mme-shadow)}.hero-content h1{font-size:clamp(36px,6vw,68px);letter-spacing:.4px}.hero-content p{font-size:clamp(15px,2vw,19px)}.btn,.btn-primary,.btn-secondary,.contact-submit-btn{box-shadow:0 14px 28px rgba(0,63,181,.22)}img{max-width:100%;height:auto}.wa{display:none}.wa-floating{display:inline-flex;align-items:center;gap:8px}.site-footer{border-radius:26px;margin-top:48px}.footer-wrap{grid-template-columns:1.4fr 1fr 1fr 1fr}.footer-col i{margin-right:7px}.footer-copy p br{display:none}
@media(max-width:991px){.topbar{width:calc(100% - 16px);font-size:12px;gap:12px;padding:9px 12px}.header{width:calc(100% - 16px);height:auto;min-height:76px;padding:12px 14px;position:sticky;top:0}.brand img{width:56px}.brand-text b{font-size:14px}.brand-text small{font-size:10px}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}.header{flex-direction:row!important}.header nav,#mainMenu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-radius:0 0 20px 20px;padding:14px;box-shadow:0 20px 40px rgba(0,27,73,.16);border:1px solid #e4efff}.header nav.active,#mainMenu.active{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px}#mainMenu a{display:block;padding:13px 12px;border-radius:12px}.drop>div{position:static;display:block;box-shadow:none;background:#f6faff;margin:0 0 8px 12px;border-radius:14px}.drop>div a{padding:10px 12px}.hero,.hero-home,.hero-about,.hero-services,.hero-products,.hero-gallery,.contact-shell{width:calc(100% - 16px)}.hero-home,.hero-about{min-height:560px;padding:70px 22px!important;background-position:center!important}.hero-content{max-width:100%}.hero-buttons{gap:10px}.btn-primary,.btn-secondary{width:100%;text-align:center}.grid4,.grid3,.process,.icons,.ims-grid,.gallery-4x5,.about-gallery-slider,.footer-wrap{grid-template-columns:1fr!important}.section{width:calc(100% - 20px);padding:42px 0}.product-slider{padding:18px}.slide-card{min-width:82vw}.contact-strip{width:calc(100% - 20px);margin:28px auto;grid-template-columns:1fr!important}.site-footer{width:calc(100% - 16px);border-radius:22px}.footer-wrap{padding:34px 24px}.admin-sidebar{position:static!important;width:auto!important}.admin-main{margin-left:0!important;padding:18px!important}.form2,.admin-grid{grid-template-columns:1fr!important}.admin-item{align-items:flex-start;flex-direction:column}}
@media(max-width:575px){.topbar span:nth-child(2),.topbar a:not(:first-of-type){display:none}.hero-home,.hero-about{min-height:520px}.hero-content h1,.hero h1{font-size:34px!important;line-height:1.14!important}.hero-content p,.hero p{font-size:15px!important;line-height:1.7}.card,.panel{padding:20px}.card img,.gallery-card img{height:210px}.footer-copy p{font-size:12px}.wa-floating{right:12px;bottom:12px;padding:12px 14px}.brand-text{max-width:190px}}

/* =========================================================
   FINAL FOOTER FIX 2026-06-10
   Menjaga footer tetap indah di desktop, tablet, dan mobile.
   Override ini sengaja diletakkan paling bawah agar menang dari CSS lama.
========================================================= */
.site-footer{
    width:min(1180px,calc(100% - 24px))!important;
    margin:48px auto 24px!important;
    padding:0!important;
    display:block!important;
    clear:both!important;
    border-radius:28px!important;
    overflow:hidden!important;
    background:linear-gradient(135deg,#061b3f 0%,#082d68 58%,#061b3f 100%)!important;
    box-shadow:0 22px 55px rgba(5,25,58,.20)!important;
}
.site-footer .footer-wrap{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1.35fr 1fr 1fr 1fr!important;
    gap:34px!important;
    padding:46px 42px 34px!important;
    align-items:start!important;
}
.site-footer .footer-col{margin:0!important;min-width:0!important;display:block!important}.site-footer .footer-col h3{font-size:15px!important;line-height:1.25!important;margin:0 0 16px!important;color:#fff!important;letter-spacing:.4px!important;text-transform:uppercase!important;word-break:normal!important}.site-footer .footer-col p,.site-footer .footer-col li,.site-footer .footer-col a{font-size:14px!important;line-height:1.65!important;color:rgba(255,255,255,.80)!important;word-break:normal!important;overflow-wrap:break-word!important}.site-footer .footer-col p{max-width:310px!important;margin:0!important}.site-footer .footer-info{margin-top:16px!important;display:flex!important;flex-direction:column!important;gap:8px!important}.site-footer .footer-info a{font-size:13px!important;color:#cfe8ff!important;word-break:break-word!important}.site-footer .footer-copy{display:block!important;width:100%!important;clear:both!important;padding:18px 28px 20px!important;border-top:1px solid rgba(255,255,255,.12)!important;background:rgba(0,0,0,.13)!important;text-align:center!important}.site-footer .footer-copy p{margin:0!important;max-width:none!important;font-size:13px!important;line-height:1.7!important;color:rgba(255,255,255,.76)!important;word-break:normal!important}.wa-floating{display:inline-flex!important;align-items:center!important;gap:8px!important;position:fixed!important;right:18px!important;bottom:18px!important;z-index:9999!important;background:linear-gradient(135deg,#21c063,#0c9f48)!important;color:#fff!important;text-decoration:none!important;font-size:13px!important;font-weight:800!important;padding:13px 18px!important;border-radius:999px!important;box-shadow:0 16px 35px rgba(16,185,90,.35)!important}
@media(max-width:991px){.site-footer .footer-wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px!important;padding:38px 30px 30px!important}.site-footer .footer-col p{max-width:none!important}}
@media(max-width:600px){.site-footer{width:calc(100% - 18px)!important;margin:34px auto 20px!important;border-radius:22px!important}.site-footer .footer-wrap{grid-template-columns:1fr!important;gap:0!important;padding:34px 24px 24px!important}.site-footer .footer-col{margin:0 0 28px!important}.site-footer .footer-col:last-child{margin-bottom:0!important}.site-footer .footer-col h3{font-size:14px!important;margin-bottom:12px!important}.site-footer .footer-col p,.site-footer .footer-col li,.site-footer .footer-col a{font-size:14px!important;line-height:1.65!important}.site-footer .footer-copy{padding:16px 18px 18px!important}.site-footer .footer-copy p{font-size:12.5px!important}.wa-floating{right:14px!important;bottom:14px!important;padding:12px 16px!important;font-size:12px!important}}