@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--navy:#06245a;--blue:#087cf0;--cyan:#20cfe5;--dark:#031a43;--text:#15233b;--muted:#6b7890;--bg:#f6f9fc;--line:#e6edf5;--orange:#ffb52e;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:var(--text);background:#fff;line-height:1.65}a{text-decoration:none;color:inherit}.wrap{width:min(1180px,92%);margin:auto}
.top{background:var(--dark);color:#cbd9eb;font-size:12px}.top .wrap{height:40px;display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:24px}.top span{display:inline-flex;gap:7px;align-items:center}
.header{background:#fff;height:82px;position:sticky;top:0;z-index:1000;border-bottom:1px solid #eef2f7}.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.logo img{width:185px;height:auto;display:block}.footer-logo{background:transparent!important;border-radius:0!important;padding:0!important;display:inline-flex!important}.footer-logo img{width:175px;height:auto;display:block}.menu{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:700}.menu>a,.drop>a{padding:29px 0;position:relative}.menu>a:hover,.drop>a:hover,.menu>a.active{color:var(--blue)}.drop{position:relative}.drop>a{display:flex;gap:6px;align-items:center}.drop-menu{position:absolute;top:69px;left:-15px;width:240px;background:#fff;border-radius:12px;padding:10px;box-shadow:0 20px 45px rgba(3,27,67,.15);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}.drop:hover .drop-menu{opacity:1;visibility:visible;transform:none}.drop-menu a{display:block;padding:10px 12px;border-radius:7px;font-size:13px}.drop-menu a:hover{background:#eef7ff;color:var(--blue)}.quote{background:var(--blue);color:#fff!important;padding:12px 19px!important;border-radius:5px}.hamb{display:none;background:none;border:0;font-size:26px;color:var(--navy)}
.hero{min-height:650px;position:relative;overflow:hidden;background:#061e4a;color:#fff}.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s}.slide.active{opacity:1}.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center}.slide-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,19,50,.93),rgba(3,27,65,.72) 44%,rgba(3,27,65,.18) 80%),linear-gradient(0deg,rgba(3,18,43,.4),transparent 50%)}.hero-content{position:relative;z-index:2;min-height:650px;display:flex;align-items:center}.hero-copy{max-width:650px;margin-top:-15px}.kicker{font-size:12px;text-transform:uppercase;letter-spacing:1.8px;color:#7fe9f3;font-weight:800}.hero h1{font:800 clamp(43px,5.5vw,72px)/1.05 Manrope;margin:13px 0 17px;letter-spacing:-2px}.hero h1 span{color:#55d9e9}.hero p{font-size:16px;color:#d5e1f0;max-width:600px}.buttons{display:flex;gap:12px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;background:var(--blue);color:#fff;border-radius:5px;font-weight:800;font-size:13px;border:1px solid var(--blue);transition:.25s}.btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(8,124,240,.24)}.btn.light{background:#fff;color:var(--navy);border-color:#fff}.slider{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:43px;height:43px;border:1px solid rgba(255,255,255,.4);background:rgba(3,27,67,.45);color:#fff;border-radius:50%;font-size:25px}.prev{left:24px}.next{right:24px}.dots{position:absolute;z-index:5;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.dot{width:23px;height:5px;border:0;border-radius:8px;background:rgba(255,255,255,.4)}.dot.active{width:42px;background:#fff}
.feature{margin-top:-1px;background:var(--navy);color:#fff;position:relative;z-index:20}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr)}.feat{display:flex;gap:12px;padding:24px 20px;border-right:1px solid rgba(255,255,255,.14)}.feat:last-child{border:0}.feat-icon{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;font-size:18px}.feat b{display:block;font-size:13px}.feat small{display:block;color:#b8cae2;font-size:11px}
.section{padding:88px 0}.soft{background:var(--bg)}.eyebrow{color:var(--blue);font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:1.6px}.title{font:800 clamp(31px,4vw,44px)/1.12 Manrope;margin:7px 0 12px;color:var(--navy)}.lead{color:var(--muted);max-width:650px}.heading{text-align:center;margin-bottom:42px}.heading .lead{margin:0 auto}
.about{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.about-image{height:480px;border-radius:12px;background:url('https://images.unsplash.com/photo-1494412651409-8963ce7935a7?auto=format&fit=crop&w=1200&q=90') center/cover;position:relative}.experience{position:absolute;right:-20px;bottom:25px;background:#fff;border-radius:9px;padding:18px 22px;box-shadow:0 15px 40px rgba(3,27,67,.17)}.experience strong{font:800 34px Manrope;color:var(--blue);display:block}.about-copy .title{margin-bottom:18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.stat{border-left:3px solid var(--blue);padding-left:14px}.stat strong{display:block;font:800 29px Manrope;color:var(--navy)}.stat span{font-size:11px;color:var(--muted)}
.industries{background:var(--dark);color:#fff}.industry-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:35px;width:100%}.industry{width:100%;padding:17px;border:1px solid rgba(255,255,255,.15);border-radius:7px;text-align:center;font-weight:800;cursor:pointer;min-width:0}.industry.active{background:var(--blue);border-color:var(--blue)}.industry-content{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.industry-photo{height:330px;border-radius:12px;background-size:cover;background-position:center}.industry-copy h3{font:800 31px Manrope;margin:0 0 12px}.industry-copy p{color:#c7d7ea}
.services{background:#fff}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service{border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden;transition:.3s}.service:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(3,27,67,.12)}.service-img{height:185px;background-size:cover;background-position:center}.service-body{padding:21px}.service-body h3{font:800 19px Manrope;margin:0 0 7px}.service-body p{font-size:12px;color:var(--muted);margin:0 0 12px}.learn{color:var(--blue);font-size:12px;font-weight:800}
.progress-area{background:#f4f8fc}.progress-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.progress-img{height:450px;border-radius:12px;background:url('../images/more-than-cargo-port.jpg') center/cover}.bar{margin:20px 0}.bar-head{display:flex;justify-content:space-between;font-size:13px;font-weight:800}.track{height:8px;background:#dce7f2;border-radius:10px;margin-top:8px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:10px}
.why{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.why-img{height:470px;border-radius:12px;background:url('https://images.unsplash.com/photo-1774929104617-bba212f97e8b?auto=format&fit=crop&w=1600&q=85') center/cover}.why-list{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}.why-item{padding:17px;border:1px solid var(--line);border-radius:9px}.why-item i{font-style:normal;color:var(--blue);font-size:22px}.why-item h4{margin:5px 0;font-size:14px}.why-item p{font-size:11px;color:var(--muted);margin:0}
.brands{background:#f6f9fc;text-align:center}.brand-row{display:flex;justify-content:space-between;align-items:center;gap:25px;flex-wrap:wrap;margin-top:30px}.brand-row span{font:800 16px Manrope;color:#8290a3}
.projects{background:#fff}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project{height:260px;border-radius:11px;overflow:hidden;position:relative;background-size:cover;background-position:center}.project:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(2,20,50,.88))}.project-caption{position:absolute;z-index:2;bottom:18px;left:20px;color:#fff}.project-caption small{color:#7de6ef;text-transform:uppercase;font-weight:800;font-size:10px}.project-caption h3{margin:4px 0;font:800 18px Manrope}
.cta{padding:75px 0;background:linear-gradient(110deg,#05245a,#087be1);color:#fff}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font:800 39px Manrope;margin:0}.cta p{color:#d1e2f7}
.testimonials{background:#f6f9fc}.testimonial-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.quote-card{background:#fff;border:1px solid var(--line);padding:28px;border-radius:11px}.quote-mark{font:800 42px Georgia;color:var(--blue)}.quote-card p{color:var(--muted);font-size:13px}.person{font-weight:800;font-size:13px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.news-card{border:1px solid var(--line);border-radius:10px;overflow:hidden}.news-img{height:180px;background-size:cover;background-position:center}.news-body{padding:20px}.news-date{font-size:10px;color:var(--blue);font-weight:800}.news-body h3{font:800 18px Manrope;margin:7px 0}.news-body p{font-size:12px;color:var(--muted)}
footer{background:var(--dark);color:#b7c9df;padding:60px 0 20px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}.footer-logo{background:transparent!important;border-radius:0!important;padding:0!important;display:inline-flex!important}.footer-logo img{width:175px;height:auto;display:block;object-fit:contain}.footer h4{color:#fff;margin:0 0 15px}.footer p,.footer a{font-size:12px}.footer a{display:block;margin:8px 0}.contact{display:flex!important;gap:10px}.ci{width:28px;height:28px;border-radius:7px;background:rgba(32,207,229,.1);color:var(--cyan);display:grid;place-items:center;flex:0 0 28px}.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:35px;padding-top:18px;text-align:center;font-size:10px}
.page-hero{padding:95px 0;background:linear-gradient(110deg,#031a43,#0879db);color:#fff}.page-hero h1{font:800 50px Manrope;margin:8px 0}.page-hero p{color:#d6e6f8;max-width:680px}.service-detail{display:grid;grid-template-columns:1.25fr .75fr;gap:45px;align-items:start}.detail-img{height:390px;border-radius:12px;background-size:cover;background-position:center}.detail h2{font:800 34px Manrope;color:var(--navy)}.detail p,.detail li{color:var(--muted);font-size:14px}.detail ul{padding-left:18px}.formbox{position:sticky;top:105px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px;box-shadow:0 15px 40px rgba(3,27,67,.1)}.formbox h3{font:800 25px Manrope;margin:0}.field{margin:10px 0}.field input,.field textarea,.field select{width:100%;padding:11px;border:1px solid #dce5ef;border-radius:6px;font:inherit;font-size:12px}.field textarea{min-height:110px}.formbox .btn{width:100%}.notice{font-size:11px;margin-top:10px;padding:8px;background:#eefaf2;color:#17733d;border-radius:6px;display:none}
.reveal{opacity:0;transform:translateY(20px);transition:.7s}.reveal.show{opacity:1;transform:none}
@media(max-width:950px){.menu{gap:14px}.about,.industry-content,.progress-layout,.why,.service-detail{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr 1fr}.project-grid,.news-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.why-img{order:2}.formbox{position:static}.industry-photo{height:270px}}
@media(max-width:720px){.top{display:none}.header{height:70px}.logo img{width:145px}.hamb{display:block}.menu{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;padding:12px 5%;flex-direction:column;align-items:flex-start;box-shadow:0 20px 35px rgba(0,0,0,.12);gap:0}.menu.open{display:flex}.menu>a,.drop>a{width:100%;padding:12px 0}.drop{width:100%}.drop-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;width:100%;box-shadow:none;background:#f5f9fd}.drop.open .drop-menu{display:block}.hero,.hero-content{min-height:650px}.hero h1{font-size:43px}.slider{display:none}.feature-grid{grid-template-columns:1fr 1fr}.feat{border-bottom:1px solid rgba(255,255,255,.12)}.section{padding:65px 0}.service-grid,.project-grid,.news-grid,.testimonial-grid{grid-template-columns:1fr}.stats,.why-list,.industry-tabs{grid-template-columns:1fr 1fr}.about-image,.why-img,.progress-img{height:320px}.cta-inner{display:block}.cta h2{font-size:30px;margin-bottom:14px}.footer-grid{grid-template-columns:1fr}.page-hero h1{font-size:39px}.detail-img{height:280px}}

/* Visual polish: clean transparent brand treatment */
.footer{background:var(--dark)}
.footer-logo img{max-height:58px;object-fit:contain;object-position:left center}
.logo img{max-height:54px;object-fit:contain}


/* Mobile compatibility patch - desktop layout remains unchanged */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%}

@media (max-width: 720px){
  .wrap{width:calc(100% - 30px);max-width:none}

  /* Keep the existing top contact information, but make it fit small screens */
  .top{display:block;font-size:12px;line-height:1.35}
  .top .wrap{
    height:auto;
    min-height:62px;
    padding:8px 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:4px;
  }
  .top-right{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:4px 14px;
  }
  .top span{gap:5px;white-space:normal}

  .header{height:72px;position:sticky;top:0}
  .nav{min-height:72px}
  .logo{max-width:150px;display:flex;align-items:center}
  .logo img{width:150px!important;max-width:150px;height:auto;max-height:58px;object-fit:contain}
  .hamb{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    flex:0 0 44px;
    cursor:pointer;
    font-size:30px;
    line-height:1;
  }

  .menu{
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    width:100%;
    max-height:calc(100vh - 72px);
    overflow-y:auto;
    overflow-x:hidden;
    background:#fff;
    padding:8px 15px 14px;
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 20px 35px rgba(0,0,0,.12);
    gap:0;
  }
  .menu.open{display:flex}
  .menu>a,.drop>a{
    width:100%;
    padding:12px 0;
    min-height:44px;
  }
  .drop{width:100%}
  .drop-menu{
    position:static;
    display:none;
    width:100%;
    max-width:100%;
    box-shadow:none;
    background:#f5f9fd;
    padding:5px 10px;
    border-radius:7px;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .drop.open .drop-menu{display:block}
  .drop-menu a{padding:10px 8px}
  .quote{margin-top:4px;text-align:center}

  .hero{min-height:620px}
  .hero-content{
    min-height:620px;
    padding:72px 0 82px;
    align-items:flex-start;
  }
  .hero-copy{
    width:100%;
    max-width:100%;
    margin-top:0;
  }
  .kicker{font-size:11px}
  .hero h1{
    font-size:clamp(36px,10vw,46px);
    line-height:1.08;
    letter-spacing:-1.2px;
    margin:10px 0 15px;
    overflow-wrap:break-word;
  }
  .hero p{
    font-size:15px;
    line-height:1.6;
    margin:0;
    max-width:100%;
  }
  .buttons{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:22px;
  }
  .buttons .btn{width:100%;min-height:50px}
  .slider{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    top:auto;
    bottom:20px;
    transform:none;
    font-size:22px;
  }
  .prev{left:15px}
  .next{right:15px}
  .dots{bottom:35px}

  .feature-grid{grid-template-columns:1fr 1fr}
  .feat{
    min-width:0;
    padding:18px 12px;
    gap:9px;
  }
  .feat-icon{width:36px;height:36px;flex-basis:36px;font-size:16px}
  .feat b{font-size:12px}
  .feat small{font-size:10px}

  .section{padding:58px 0}
  .about,.industry-content,.progress-layout,.why,.service-detail{grid-template-columns:1fr}
  .about{gap:35px}
  .about-image,.why-img,.progress-img{height:300px}
  .experience{right:12px;bottom:15px;padding:14px 16px}
  .experience strong{font-size:28px}
  .stats,.why-list,.industry-tabs{grid-template-columns:1fr 1fr}
  .title{font-size:clamp(28px,8vw,38px)}
  .lead{font-size:14px}

  .industry-tabs{gap:8px}
  .industry{padding:13px 7px;font-size:12px}
  .industry-photo{height:250px}
  .industry-copy h3{font-size:27px}

  .service-grid,.project-grid,.news-grid,.testimonial-grid{grid-template-columns:1fr}
  .service-img{height:200px}
  .project{height:230px}
  .cta{padding:55px 0}
  .cta-inner{display:block}
  .cta h2{font-size:30px;line-height:1.15}
  .cta .btn{margin-top:12px}

  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-logo img{width:165px!important;max-width:165px;max-height:55px}
  .page-hero{padding:65px 0}
  .page-hero h1{font-size:36px;line-height:1.1}
  .detail-img{height:270px}
  .formbox{position:static}
}

@media (max-width: 380px){
  .wrap{width:calc(100% - 24px)}
  .top{font-size:11px}
  .top .wrap{min-height:58px}
  .logo img{width:138px!important;max-width:138px}
  .hero{min-height:650px}
  .hero-content{min-height:650px;padding-top:62px}
  .hero h1{font-size:35px}
  .hero p{font-size:14px}
  .feature-grid{grid-template-columns:1fr}
  .feat{border-right:0}
  .stats,.why-list,.industry-tabs{grid-template-columns:1fr}
  .industry{padding:12px}
}

/* Floating WhatsApp Button */
a { text-decoration: none; }
.floating_btn {
  position: fixed;
  bottom: 70px;
  right: 30px;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
@keyframes pulsing {
  to { box-shadow: 0 0 0 30px rgba(66, 219, 135, 0); }
}
.floating_btn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}
.contact_icon {
  background-color: #42db87;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: 30px;
  line-height: 1;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  font-weight: normal;
  font-family: sans-serif;
  text-decoration: none !important;
  transition: all 300ms ease-in-out;
}
.contact_icon .fa {
  font-size: 30px;
  line-height: 1;
}
.text_icon {
  margin: 8px 0 0;
  color: #707070;
  font-size: 13px;
  line-height: 1.2;
}
@media (max-width: 720px) {
  .floating_btn { right: 18px; bottom: 70px; }
}