:root{
    --navy:#232106;
    --navy-2:#282308;
    --blue:#849364;
    --blue-dark:#6b784e;
    --blue-soft:#EAF6FF;
    --bg-soft:#F4F9FC;
    --text-muted:#6B7785;
    --border-c:#E4EAF1;
  }
  body{
    font-family: "Inter", sans-serif;
    color:#1B2430;
    background:#fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  section[id]{
    scroll-margin-top:80px; /* offset for sticky navbar */
  }
  h1,h2,h3,h4,h5{
    font-weight:700;
  }
  .text-blue{color:var(--blue);}
  .bg-navy{background-color:var(--navy);}
  .bg-blue-soft{background-color:var(--blue-soft);}
  .bg-soft{background-color:var(--bg-soft);}
  .btn-blue{
    background-color:var(--blue);
    color:#fff;
    border:none;
  }
  .btn-blue:hover{background-color:var(--blue-dark);color:#fff;}
  .btn-navy{
    background-color:var(--navy);
    color:#fff;
    border-radius:50px;
    padding:.5rem 1.6rem;
  }
  .btn-navy:hover{background-color:var(--navy-2);color:#fff;}

  /* NAVBAR */
  .navbar{
    box-shadow:0 2px 12px rgba(0,0,0,.06);
  }
  .navbar .nav-link{
    color:#1B2430;
    font-weight:500;
    margin:0 .7rem;
  }
  .navbar .nav-link:hover{color:var(--blue);}
  .brand-logo{
    font-weight:800;
    font-size:1.5rem;
    color:var(--navy);
  }
  .brand-logo .plane-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;height:26px;
    background:var(--blue);
    color:#fff;
    border-radius:50%;
    font-size:.8rem;
    margin:0 2px;
  }

  /* HERO */
  .hero{
    position:relative;
    background:linear-gradient(120deg,rgba(11,30,53,.92),rgba(14,42,71,.78)),
      url('https://images.unsplash.com/photo-1494412651409-8963ce7935a7?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
    color:#fff;
    padding:70px 0 90px;
  }
  .hero-badge{
    display:inline-block;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    padding:.35rem 1rem;
    border-radius:50px;
    font-size:.8rem;
    margin-bottom:1.2rem;
  }
  .hero h1{
    font-size:2.6rem;
    line-height:1.2;
  }
  .hero p{
    color:#CBD8E6;
    max-width:520px;
  }
  .pill-btn{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    border-radius:50px;
    padding:.45rem 1.1rem;
    font-size:.85rem;
    margin-right:.5rem;
    margin-bottom:.5rem;
    display:inline-block;
  }

  .hero-visual{
    position:relative;
  }
  .browser-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  .browser-topbar{
    background:#F1F3F5;
    padding:.5rem .8rem;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.7rem;
    color:#8a94a3;
  }
  .browser-topbar .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
  .map-area{
    position:relative;
    height:230px;
    background:linear-gradient(135deg,#fdeef0,#eaf6ee);
  }
  .floating-card{
    position:absolute;
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    padding:.6rem .9rem;
    font-size:.75rem;
    min-width:150px;
  }
  .floating-card .bar{
    height:4px;border-radius:4px;background:#E4EAF1;margin-top:.4rem;overflow:hidden;
  }
  .floating-card .bar span{
    display:block;height:100%;background:var(--blue);
  }

  /* Booking cards */
  .booking-card{
    border:1px solid var(--border-c);
    border-radius:16px;
    background:#fff;
  }
  .toggle-tab {
    position: relative;
    display: block;
    text-align: center;
    cursor: pointer;
    padding: 12px 8px;
    border: 1px solid #e5edf3;
    border-radius: 8px;
    background: #f3f8fb;
    color: #536579;
    transition: all .2s ease;
}

.toggle-tab input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-tab i {
    color: var(--blue);
    font-size: 15px;
}

.toggle-tab .fw-semibold {
    font-size: 15px;
}

.toggle-tab .small {
    font-size: 10px;
    color: #8492a2;
}

/* Selected */
.toggle-tab:has(input[type="radio"]:checked) {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(21, 150, 209, .18);
}

.toggle-tab:has(input[type="radio"]:checked) i,
.toggle-tab:has(input[type="radio"]:checked) .small {
    color: #fff;
}
  .info-mini-card{
    border:1px solid var(--border-c);
    border-radius:14px;
    padding:1.4rem 1rem;
    text-align:center;
    height:100%;
  }
  .icon-circle{
    width:52px;height:52px;
    border-radius:50%;
    background:var(--blue-soft);
    color:var(--blue);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto .8rem;
    font-size:1.3rem;
  }

  /* Shipping methods */
  .method-card{
    background:#fff;
    border-radius:16px;
    padding:1.8rem;
    color:#1B2430;
  }
  .method-card .row-line{
    display:flex;justify-content:space-between;
    padding:.5rem 0;
    border-bottom:1px solid var(--border-c);
    font-size:.9rem;
  }
  .method-card .row-line:last-child{border-bottom:none;}

  /* CBM calculator */
  .cbm-card{
    background:#fff;
    border-radius:16px;
    border:1px solid var(--border-c);
    padding:2rem;
  }
  .cbm-total-card{
    background:var(--blue);
    color:#fff;
    border-radius:16px;
    padding:2rem;
    height:100%;
  }
  .unit-toggle{
    background:var(--blue-soft);
    border-radius:50px;
    padding:.2rem;
    display:inline-flex;
  }
  .unit-toggle span{
    padding:.3rem 1rem;
    border-radius:50px;
    font-size:.8rem;
    cursor:pointer;
  }
  .unit-toggle span.active{background:var(--blue);color:#fff;}

  /* Warehouse */
  .warehouse-check li{
    margin-bottom:.9rem;
    display:flex;gap:.6rem;
  }
  .warehouse-check i{color:var(--blue);}
  .address-card{
    background:#fff;
    color:#1B2430;
    border-radius:16px;
    padding:1.6rem;
  }
  .address-card .field{
    background:var(--bg-soft);
    border-radius:10px;
    padding:.7rem 1rem;
    margin-bottom:.9rem;
  }
  .warn-box{
    background:#FDEBEC;
    color:#C1272D;
    border-radius:10px;
    padding:.7rem 1rem;
    font-size:.82rem;
  }

  /* Process timeline */
  .timeline{
    position:relative;
  }
  .timeline::before{
    content:'';
    position:absolute;
    left:50%;
    top:0;bottom:0;
    width:2px;
    background:repeating-linear-gradient(to bottom, var(--blue) 0 6px, transparent 6px 12px);
    transform:translateX(-50%);
  }
  .timeline-item{
    position:relative;
    width:46%;
    margin-bottom:2.5rem;
  }
  .timeline-item.left{margin-right:auto;text-align:right;}
  .timeline-item.right{margin-left:auto;text-align:left;}
  .timeline-dot{
    position:absolute;
    top:6px;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--blue);
    border:3px solid #fff;
    box-shadow:0 0 0 2px var(--blue);
  }
  .timeline-item.left .timeline-dot{right:-8.2%;}
  .timeline-item.right .timeline-dot{left:-8.2%;}
  .timeline-box h5{margin-bottom:.4rem;}
  .timeline-box p{color:var(--text-muted);font-size:.9rem;margin-bottom:0;}

  @media(max-width:767px){
    .timeline::before{left:14px;}
    .timeline-item{width:100%;padding-left:2.5rem;text-align:left!important;}
    .timeline-item.left,.timeline-item.right{margin:0 0 2rem 0;}
    .timeline-item.left .timeline-dot,.timeline-item.right .timeline-dot{left:6px;right:auto;}
  }

  /* FAQ */
  .accordion-button:not(.collapsed){
    background:#fff;color:var(--navy);box-shadow:none;
  }
  .accordion-button:focus{box-shadow:none;}

  /* Footer */
  footer{
    background:var(--navy);
    color:#B9C6D6;
  }
  footer h6{color:#fff;font-weight:600;margin-bottom:1.1rem;}
  footer a{
    color:#B9C6D6;
    text-decoration:none;
    display:block;
    margin-bottom:.6rem;
    font-size:.9rem;
  }
  footer a:hover{color:#fff;}
  .social-icon{
    width:34px;height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;margin-right:.5rem;
  }
  .customer-info small {
    font-size: 12px;
    display: block;
    line-height: 1.4;
    margin-left: 5px;
}
.customer-avatar {
    background: #91a37d;
    padding: 5px;
    border-radius: 50%;
    width: 33px;
    height: 33px;
    vertical-align: middle;
}

.customer-avatar i {
    font-size: 17px;
}
.customer-info small:last-child {
 color: #c7dfad;
}
.select2-container .select2-selection--single {
    height: 35px!important;
}