/* ── root variables (used by header + footer) ── */
  :root {
    --sky: #12aee5;
    --sky-dark: #078ec8;
    --sky-soft: #eaf8ff;
    --navy: #082a48;
    --text: #193853;
    --white: #ffffff;
    --header-height: 124px;
  }

  /* ── base resets (minimal, only what header/footer need) ── */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 22px);
  }

  body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    color: var(--text);
    background: #f7fbfe;
    padding-top: var(--header-height);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    font: inherit;
  }

  /* ════════════════════════════════════════
     HEADER
     ════════════════════════════════════════ */
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    background: var(--white);
    box-shadow: 0 10px 35px rgba(9, 63, 104, 0.1);
  }

  .header-container {
    width: min(1320px, calc(100% - 48px));
    margin-inline: auto;
  }

  /* Top contact strip — intentionally no social media icons */
  .contact-strip {
    position: relative;
    overflow: hidden;
    min-height: 38px;
    color: var(--white);
    background: linear-gradient(90deg, var(--sky-dark), var(--sky));
  }

  .contact-strip::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: clamp(190px, 28vw, 470px);
    background: var(--navy);
    clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
  }

  .contact-inner {
    position: relative;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }

  .contact-tagline {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .contact-tagline .dot {
    width: 8px;
    height: 8px;
    border: 2px solid #7edcff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(126, 220, 255, 0.15);
  }

  .contact-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    font-size: 14px;
    font-weight: 650;
  }

  .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s ease;
  }

  .contact-link:hover {
    opacity: 0.78;
  }

  .contact-link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .main-nav {
    position: relative;
    min-height: 86px;
    border-bottom: 3px solid var(--sky);
  }

  .main-nav::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -3px;
    width: 21%;
    height: 3px;
    background: var(--navy);
  }

  .nav-inner {
    min-height: 83px;
    display: flex;
    align-items: center;
    gap: 42px;
  }

  .brand {
    position: relative;
    flex: 0 0 154px;
    align-self: stretch;
    display: grid;
    place-items: center;
  }

  .brand::after {
    content: "";
    position: absolute;
    right: -23px;
    top: 13px;
    width: 3px;
    height: 58px;
    border-radius: 99px;
    background: linear-gradient(var(--sky), rgba(18, 174, 229, 0.08));
    transform: skewX(-16deg);
  }

  .brand img {
    display: block;
    width: 126px;
    height: 70px;
    object-fit: contain;
    transition: transform 0.25s ease;
  }

  .brand:hover img {
    transform: translateY(-2px) scale(1.025);
  }

  .nav-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(22px, 2.5vw, 42px);
    list-style: none;
  }

  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 83px;
    font-size: 15px;
    font-weight: 750;
    color: var(--navy);
    transition: color 0.2s ease;
  }

  .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--sky);
    transform: translateX(-50%);
    transition: width 0.25s ease;
  }

  .nav-link:hover,
  .nav-link.active {
    color: var(--sky-dark);
  }

  .nav-link:hover::after,
  .nav-link.active::after {
    width: 24px;
  }

  .quote-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 21px;
    overflow: hidden;
    position: relative;
    border: 0;
    border-radius: 13px 4px 13px 4px;
    color: var(--white);
    background: linear-gradient(135deg, var(--sky), var(--sky-dark));
    box-shadow: 0 10px 22px rgba(7, 142, 200, 0.24);
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .quote-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 24%, rgba(255, 255, 255, .4) 46%, transparent 68%);
    transform: translateX(-130%);
    transition: transform 0.65s ease;
  }

  .quote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(7, 142, 200, 0.3);
  }

  .quote-btn:hover::before {
    transform: translateX(130%);
  }

  .quote-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
  }

  .menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid #c8eafa;
    border-radius: 12px;
    background: var(--sky-soft);
    color: var(--navy);
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    margin: 4px auto;
    border-radius: 99px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ════════════════════════════════════════
     LOGISTICS FOOTER
     ════════════════════════════════════════ */
  .site-footer {
    position: relative;
    overflow: hidden;
    color: var(--text);
    background: var(--white);
    border-top: 4px solid var(--sky);
  }

  .footer-panel {
    position: relative;
    isolation: isolate;
    padding: 72px 0 64px;
    background:
      radial-gradient(circle at 50% 52%, transparent 0 116px, rgba(18, 174, 229, .055) 117px 119px, transparent 120px 178px, rgba(18, 174, 229, .04) 179px 181px, transparent 182px),
      linear-gradient(135deg, #ffffff 10%, #f4fbff 58%, #ffffff 100%);
  }

  .footer-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 560px;
    height: 280px;
    left: 50%;
    top: 50%;
    border: 2px dashed rgba(18, 174, 229, .1);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-7deg);
  }

  .footer-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .32;
    background-image: radial-gradient(rgba(18, 174, 229, .22) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  }

  .footer-container {
    width: min(1320px, calc(100% - 48px));
    margin-inline: auto;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.25fr .85fr 1fr 1.1fr;
    gap: clamp(34px, 5vw, 82px);
    align-items: start;
  }

  .footer-brand-card {
    max-width: 340px;
  }

  .footer-logo-wrap {
    width: 184px;
    min-height: 108px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border: 1px solid #dceff8;
    border-radius: 22px 8px 22px 8px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 16px 36px rgba(8, 42, 72, .09);
  }

  .footer-logo-wrap img {
    width: 142px;
    height: 82px;
    object-fit: contain;
  }

  .footer-brand-card p {
    max-width: 320px;
    color: #57738a;
    font-size: 15px;
    line-height: 1.75;
  }

  .footer-mini-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 12px;
    border: 1px solid #cdeafa;
    border-radius: 999px;
    color: var(--sky-dark);
    background: var(--sky-soft);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .footer-mini-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sky);
    box-shadow: 0 0 0 4px rgba(18, 174, 229, .14);
  }

  .footer-title {
    position: relative;
    margin-bottom: 27px;
    padding-bottom: 13px;
    color: var(--navy);
    font-size: 19px;
    font-weight: 850;
  }

  .footer-title::before,
  .footer-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 3px;
    border-radius: 99px;
    background: var(--sky);
  }

  .footer-title::before {
    left: 0;
    width: 18px;
  }

  .footer-title::after {
    left: 25px;
    width: 38px;
  }

  .footer-list {
    display: grid;
    gap: 14px;
    list-style: none;
  }

  .footer-list a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #4a687f;
    font-size: 15px;
    font-weight: 650;
    transition: color .2s ease, transform .2s ease;
  }

  .footer-list a::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-top: 2px solid var(--sky);
    border-right: 2px solid var(--sky);
    transform: rotate(45deg);
  }

  .footer-list a:hover {
    color: var(--sky-dark);
    transform: translateX(4px);
  }

  .footer-contact-list {
    display: grid;
    gap: 17px;
    list-style: none;
  }

  .footer-contact-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
  }

  .footer-contact-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #cceaf9;
    border-radius: 11px 4px 11px 4px;
    color: var(--sky-dark);
    background: var(--sky-soft);
  }

  .footer-contact-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .footer-contact-copy strong {
    display: block;
    margin-bottom: 3px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .footer-contact-copy a,
  .footer-contact-copy span {
    color: #557188;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
  }

  .footer-contact-copy a:hover {
    color: var(--sky-dark);
  }

  /* Animated landscape */
  .logistics-scene {
    position: relative;
    height: 235px;
    overflow: hidden;
    background: linear-gradient(#dff5ff 0 40%, #9ed890 40% 47%, #4fba70 47% 50%, #e6edf2 50% 53%, #303d4b 53% 100%);
    border-top: 1px solid #c9edfb;
  }

  .scene-cloud {
    position: absolute;
    top: 34px;
    width: 70px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 24px -10px 0 5px rgba(255, 255, 255, .78), 48px 1px 0 -2px rgba(255, 255, 255, .78);
    animation: cloud-drift 20s linear infinite alternate;
  }

  .scene-cloud.one {
    left: 14%;
  }
  .scene-cloud.two {
    left: 64%;
    top: 22px;
    transform: scale(.72);
    animation-delay: -8s;
  }

  @keyframes cloud-drift {
    to {
      translate: 45px 0;
    }
  }

  .scene-building {
    position: absolute;
    bottom: 110px;
    width: 130px;
    height: 88px;
    border: 4px solid var(--navy);
    border-radius: 4px 4px 0 0;
    background: #ffffff;
    box-shadow: inset 0 -30px #e8f7ff;
  }

  .scene-building::before {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: -25px;
    height: 26px;
    background: var(--sky-dark);
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  }

  .scene-building::after {
    content: "DIL HUB";
    position: absolute;
    inset: 17px 0 auto;
    text-align: center;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
  }

  .scene-building.left {
    left: 6%;
  }
  .scene-building.right {
    right: 7%;
    transform: scale(.86);
    transform-origin: bottom;
  }

  .warehouse-door {
    position: absolute;
    left: 36px;
    bottom: 0;
    width: 58px;
    height: 35px;
    border: 3px solid var(--navy);
    border-bottom: 0;
    background: repeating-linear-gradient(#bde9fa 0 7px, #8ed3ee 8px 10px);
  }

  .scene-tree {
    position: absolute;
    bottom: 110px;
    width: 12px;
    height: 58px;
    border-radius: 4px 4px 0 0;
    background: #7a5838;
  }

  .scene-tree::before,
  .scene-tree::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #35a460;
  }

  .scene-tree::before {
    width: 56px;
    height: 56px;
    left: -22px;
    top: -36px;
    box-shadow: 18px 9px 0 -4px #49b66e;
  }

  .scene-tree::after {
    width: 33px;
    height: 33px;
    left: -14px;
    top: -47px;
    background: #51bd75;
  }

  .scene-tree.t1 {
    left: 25%;
    transform: scale(.85);
    transform-origin: bottom;
  }
  .scene-tree.t2 {
    left: 42%;
    transform: scale(.62);
    transform-origin: bottom;
  }
  .scene-tree.t3 {
    right: 30%;
    transform: scale(.92);
    transform-origin: bottom;
  }

  .road-lines,
  .road-lines::before {
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255, 255, 255, .9) 60px 120px, transparent 120px 180px);
  }

  .road-lines {
    bottom: 36px;
  }

  .road-lines::before {
    content: "";
    bottom: 55px;
  }

  .moving-truck {
    position: absolute;
    z-index: 5;
    width: 250px;
    height: 70px;
    pointer-events: none;
    will-change: transform;
  }

  .moving-truck.forward {
    left: -290px;
    bottom: 55px;
    animation: drive-forward 15s linear infinite;
  }

  .moving-truck.reverse {
    right: -290px;
    bottom: -3px;
    animation: drive-reverse 18s linear infinite 1.5s;
  }

  @keyframes drive-forward {
    to {
      transform: translateX(calc(100vw + 570px));
    }
  }

  @keyframes drive-reverse {
    to {
      transform: translateX(calc(-100vw - 570px));
    }
  }

  .truck-shell {
    position: relative;
    width: 250px;
    height: 70px;
    filter: drop-shadow(0 8px 5px rgba(3, 25, 43, .22));
  }

  .reverse .truck-shell {
    transform: scaleX(-1);
  }

  .truck-trailer {
    position: absolute;
    left: 0;
    bottom: 14px;
    width: 181px;
    height: 53px;
    display: grid;
    place-items: center;
    border: 3px solid var(--navy);
    border-radius: 8px 3px 3px 8px;
    background: linear-gradient(#ffffff, #eef9ff);
    overflow: hidden;
  }

  .truck-trailer::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 9px;
    background: var(--sky);
  }

  .truck-trailer img {
    width: 112px;
    height: 46px;
    object-fit: contain;
  }

  .reverse .truck-trailer img {
    transform: scaleX(-1);
  }

  .truck-cab {
    position: absolute;
    left: 178px;
    bottom: 14px;
    width: 66px;
    height: 48px;
    border: 3px solid var(--navy);
    border-radius: 5px 12px 5px 3px;
    background: linear-gradient(140deg, #2fc1f2, #078ec8);
    clip-path: polygon(0 0, 66% 0, 100% 37%, 100% 100%, 0 100%);
  }

  .truck-window {
    position: absolute;
    left: 190px;
    bottom: 40px;
    width: 31px;
    height: 15px;
    border: 2px solid var(--navy);
    border-radius: 2px 7px 2px 2px;
    background: #c8f0ff;
    clip-path: polygon(0 0, 68% 0, 100% 100%, 0 100%);
  }

  .truck-wheel {
    position: absolute;
    bottom: 2px;
    width: 25px;
    height: 25px;
    border: 6px solid var(--navy);
    border-radius: 50%;
    background: #c9edfb;
    box-shadow: inset 0 0 0 3px var(--sky-dark);
    animation: wheel-spin .65s linear infinite;
  }

  .truck-wheel.w1 {
    left: 27px;
  }
  .truck-wheel.w2 {
    left: 193px;
  }

  @keyframes wheel-spin {
    to {
      rotate: 360deg;
    }
  }

  .footer-bottom {
    color: #b8daed;
    background: var(--navy);
    border-top: 4px solid var(--sky);
  }

  .footer-bottom-inner {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    font-size: 13px;
  }

  .footer-bottom strong {
    color: #71d3f5;
    font-weight: 750;
  }

  .back-to-top {
    position: absolute;
    z-index: 8;
    right: clamp(16px, 3vw, 46px);
    bottom: 22px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 14px 5px 14px 5px;
    color: var(--white);
    background: linear-gradient(135deg, var(--sky), var(--sky-dark));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .2s ease;
  }

  .back-to-top:hover {
    transform: translateY(-4px);
  }

  .back-to-top svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ════════════════════════════════════════
     RESPONSIVE (header + footer only)
     ════════════════════════════════════════ */
  @media (max-width: 1080px) {
    .nav-inner {
      gap: 28px;
    }

    .nav-menu {
      gap: 22px;
    }

    .quote-btn {
      display: none;
    }

    .footer-grid {
      grid-template-columns: 1.2fr 1fr 1fr;
    }

    .footer-contact-column {
      grid-column: 1 / -1;
    }

    .footer-contact-list {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 820px) {
    :root {
      --header-height: 108px;
    }

    .header-container {
      width: min(100% - 30px, 720px);
    }

    .contact-strip,
    .contact-inner {
      min-height: 34px;
    }

    .contact-strip::before,
    .contact-tagline {
      display: none;
    }

    .contact-inner {
      justify-content: center;
    }

    .contact-links {
      width: 100%;
      justify-content: space-between;
      gap: 12px;
      font-size: 11px;
    }

    .main-nav,
    .nav-inner {
      min-height: 74px;
    }

    .brand {
      flex-basis: 118px;
    }

    .brand::after {
      display: none;
    }

    .brand img {
      width: 108px;
      height: 61px;
    }

    .menu-toggle {
      display: block;
      margin-left: auto;
    }

    .nav-menu {
      position: absolute;
      top: calc(100% + 3px);
      left: 15px;
      right: 15px;
      display: grid;
      gap: 0;
      padding: 10px;
      border: 1px solid #d8eef9;
      border-radius: 0 0 18px 18px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 22px 35px rgba(8, 42, 72, .14);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-12px);
      transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }

    .nav-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .nav-link {
      min-height: 48px;
      padding-inline: 14px;
      border-radius: 10px;
    }

    .nav-link:hover,
    .nav-link.active {
      background: var(--sky-soft);
    }

    .nav-link::after {
      display: none;
    }

    .footer-container {
      width: min(100% - 30px, 720px);
    }

    .footer-panel {
      padding: 54px 0 48px;
    }

    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 42px 28px;
    }

    .footer-contact-column {
      grid-column: 1 / -1;
    }

    .footer-contact-list {
      grid-template-columns: 1fr 1fr;
    }

    .logistics-scene {
      height: 205px;
    }

    .scene-building {
      transform: scale(.76);
      transform-origin: bottom left;
    }

    .scene-building.right {
      transform: scale(.7);
      transform-origin: bottom right;
    }

    .moving-truck {
      scale: .82;
    }

    .footer-bottom-inner {
      padding-right: 62px;
    }
  }

  @media (max-width: 520px) {
    .contact-link {
      gap: 5px;
    }

    .contact-link svg {
      width: 14px;
      height: 14px;
    }

    .contact-link span {
      max-width: 45vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .footer-grid {
      grid-template-columns: 1fr;
    }

    .footer-brand-card {
      max-width: none;
    }

    .footer-contact-column {
      grid-column: auto;
    }

    .footer-contact-list {
      grid-template-columns: 1fr;
    }

    .footer-logo-wrap {
      width: 164px;
      min-height: 98px;
    }

    .logistics-scene {
      height: 175px;
    }

    .scene-building.left {
      left: 3%;
    }
    .scene-building.right {
      right: 2%;
    }
    .scene-tree.t2,
    .scene-tree.t3 {
      display: none;
    }

    .moving-truck {
      scale: .67;
      transform-origin: bottom left;
    }

    .moving-truck.reverse {
      transform-origin: bottom right;
    }

    .footer-bottom-inner {
      min-height: 92px;
      padding: 18px 58px 18px 0;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 6px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation: none !important;
    }
  }


  :root{--navy:#061f46;--navy-deep:#04142d;--blue:#1188c9;--blue-bright:#18a8eb;--ice:#edf7fc;--paper:#f7f9fb;--ink:#0a1727;--muted:#687585;--line:#dbe4ea;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}.shell{width:min(1220px,calc(100% - 48px));margin:auto}.section{padding:110px 0}.eyebrow{font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:2.5px;color:var(--blue);font-weight:800}.eyebrow.light{color:#60c7f4}
.header{height:150px;position:fixed;z-index:100;top:0;left:0;right:0;color:#fff;background:var(--navy-deep);box-shadow:0 10px 32px rgba(4,20,45,.22)}.header-logo-wing{position:absolute;z-index:4;left:0;top:0;width:345px;height:150px;background:#fff;clip-path:polygon(0 0,78% 0,100% 100%,0 100%);display:flex;align-items:center;padding-left:16px}.header-logo-wing:after{content:"";position:absolute;right:47px;top:0;width:11px;height:100%;background:var(--blue-bright);transform:skewX(22deg);transform-origin:top}.logo{width:225px;height:92px;overflow:hidden;position:relative;background:#fff;display:block}.logo img{position:absolute;width:330px;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}.header-content{height:100%;margin-left:270px}.header-topbar{height:61px;background:var(--blue-bright);display:flex;align-items:center;padding-left:115px}.header-contact-links{display:flex;align-items:center;gap:26px}.header-contact-links a{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}.header-socials{display:flex;height:61px;margin-left:auto}.header-socials a{width:50px;border-left:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:13px;font-weight:800;transition:.2s}.header-socials a:hover{background:rgba(4,20,45,.18)}.header-navrow{height:89px;background:var(--navy-deep);display:flex;align-items:center;justify-content:flex-end;padding:0 42px 0 105px}.header nav{display:flex;align-items:center;gap:42px;margin-left:auto}.header nav a{font-size:13px;font-weight:800;position:relative;padding:35px 0}.header nav a:after{content:"";position:absolute;bottom:22px;left:0;width:0;height:3px;background:var(--blue-bright);transition:.25s}.header nav a:hover:after,.header nav a.active:after{width:100%}.menu-button{display:none;border:0;background:none;position:absolute;right:18px;top:23px}.menu-button i{display:block;width:26px;height:2px;background:white;margin:6px}
.hero{height:850px;position:relative;overflow:hidden;background:var(--navy-deep);color:white}.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 7s ease}.hero-photo.show{opacity:1;transform:scale(1)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,20,45,.95) 0%,rgba(4,20,45,.82) 46%,rgba(4,20,45,.25) 78%,rgba(4,20,45,.38) 100%)}.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,#000,transparent 70%)}.hero-inner{height:100%;position:relative;z-index:3;display:grid;grid-template-columns:1.45fr .55fr;gap:70px;align-items:center;padding-top:150px}.hero-kicker{font-size:11px;text-transform:uppercase;letter-spacing:2.7px;font-weight:800;color:#d7eef9;display:flex;align-items:center;gap:14px}.hero-kicker span{width:38px;height:2px;background:var(--blue-bright)}.hero h1{font-size:76px;line-height:.98;letter-spacing:-4px;margin:24px 0 24px;max-width:790px;animation:heading-in .8s ease}.hero h1 em,.about h2 em,.network h2 em,.quote h2 em,.footer h2 em{font-style:normal;color:var(--blue-bright)}.hero-main>p{max-width:620px;line-height:1.75;color:#c4d1dd;font-size:16px}.hero-buttons{display:flex;gap:12px;margin-top:34px}.button{min-height:50px;padding:0 21px;display:inline-flex;align-items:center;justify-content:center;gap:28px;text-transform:uppercase;letter-spacing:.7px;font-size:11px;font-weight:800;transition:.25s}.button span{font-size:16px}.button-blue{background:var(--blue);color:white}.button-blue:hover{background:var(--blue-bright);transform:translateY(-2px)}.button-ghost{border:1px solid rgba(255,255,255,.45);color:white}.button-ghost:hover{background:white;color:var(--navy)}.hero-panel{align-self:end;margin-bottom:100px;background:rgba(5,27,58,.78);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px)}.panel-top{padding:25px;border-bottom:1px solid rgba(255,255,255,.16)}.panel-top span{display:block;color:#58c7f6;font-size:9px;letter-spacing:2px;margin-bottom:12px}.panel-top b{font-size:22px;line-height:1.2}.panel-list div{display:flex;align-items:center;gap:15px;padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.11)}.panel-list span{color:#5fc6ef;font-size:10px}.panel-list b{font-size:12px}.panel-foot{padding:17px 24px;display:flex;align-items:center;gap:10px;color:#bcd0de;font-size:10px}.pulse{width:8px;height:8px;border-radius:50%;background:#45d9a0;box-shadow:0 0 0 0 rgba(69,217,160,.5);animation:pulse 2s infinite}.carousel-nav{position:absolute;z-index:4;bottom:54px;left:0;right:0;display:flex;align-items:center;gap:12px}.carousel-nav>span{font-size:10px;color:#bcd1dd}.carousel-nav div{display:flex;gap:5px}.carousel-nav button{width:50px;height:2px;padding:0;border:0;background:rgba(255,255,255,.34);cursor:pointer}.carousel-nav button.active{background:var(--blue-bright)}@keyframes heading-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(69,217,160,0)}100%{box-shadow:0 0 0 0 rgba(69,217,160,0)}}
.tracking-card{position:relative;z-index:8;margin-top:-22px}.tracking-inner{min-height:142px;background:white;box-shadow:0 22px 55px rgba(6,31,70,.13);display:grid;grid-template-columns:.8fr 1.4fr .55fr;gap:34px;align-items:center;padding:25px 34px;border-top:4px solid var(--blue)}.tracking-title small{font-size:9px;color:var(--blue);text-transform:uppercase;letter-spacing:1.8px;font-weight:800}.tracking-title h2{font-size:22px;margin:8px 0 0}.tracking-inner form label{font-size:9px;color:#7b8790;text-transform:uppercase;letter-spacing:1.2px;font-weight:700}.tracking-inner form>div{display:flex;margin-top:7px}.tracking-inner form input{height:47px;flex:1;border:1px solid var(--line);padding:0 16px;outline:none}.tracking-inner form input:focus{border-color:var(--blue)}.tracking-inner form button{border:0;background:var(--navy);color:white;padding:0 20px;font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.7px}.tracking-inner form button span{margin-left:18px}.tracking-inner form>p{position:absolute;font-size:10px;color:var(--blue);margin:5px 0}.support{padding-left:28px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.support span{font-size:10px;color:#88949b}.support a{font-size:12px;font-weight:800;color:var(--blue)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:105px;align-items:center}.about-visual{height:570px;position:relative}.about-photo{position:absolute;inset:0 40px 50px 0;overflow:hidden}.about-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 55%,rgba(6,31,70,.3))}.about-photo img{width:100%;height:100%;object-fit:cover}.experience-card{position:absolute;right:0;bottom:0;width:230px;background:var(--navy);color:white;padding:28px;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(6,31,70,.22)}.experience-card small{text-transform:uppercase;letter-spacing:1.6px;font-size:9px;color:#72cef4}.experience-card strong{font-size:30px;margin:14px 0 2px}.experience-card span{font-size:12px;color:#bed1df}.blue-orbit{position:absolute;left:-28px;top:50px;width:85px;height:85px;border:16px solid var(--blue);border-right-color:transparent;border-radius:50%}.about h2,.section-head h2,.process-head h2,.sector-inner h2{font-size:47px;line-height:1.12;letter-spacing:-2px;margin:15px 0 26px}.about-copy>p{color:var(--muted);line-height:1.83;font-size:14px}.about-points{margin:31px 0;border-top:1px solid var(--line)}.about-points div{display:flex;gap:17px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.about-points b{color:var(--blue);font-size:10px}.text-link{display:inline-flex;align-items:center;gap:22px;color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:800;border-bottom:2px solid var(--blue);padding-bottom:7px}
.services{background:var(--paper)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px}.section-head h2{margin-bottom:0}.section-head>p{max-width:390px;color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:7px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{background:#fff;min-height:440px;transition:.3s;border:1px solid #e4ebef}.service-card:hover{transform:translateY(-7px);box-shadow:0 20px 50px rgba(6,31,70,.12)}.service-image{height:218px;position:relative;overflow:hidden}.service-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(4,20,45,.52))}.service-image img{width:100%;height:100%;object-fit:cover;transition:.5s}.service-card:hover .service-image img{transform:scale(1.05)}.service-image>span{position:absolute;z-index:2;bottom:14px;left:16px;background:white;color:var(--navy);font-size:8px;letter-spacing:1.1px;font-weight:800;padding:7px 10px}.service-content{padding:25px;position:relative}.service-content small{font-size:9px;color:var(--blue);font-weight:800}.service-content h3{font-size:20px;margin:12px 0}.service-content p{font-size:12px;line-height:1.75;color:var(--muted);padding-right:28px}.service-content>a{position:absolute;right:23px;top:26px;width:34px;height:34px;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);transition:.2s}.service-content>a:hover{background:var(--blue);color:white}
.network{position:relative;overflow:hidden;background:var(--navy-deep);color:white}.network-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:center;position:relative;z-index:2}.network h2,.quote h2,.footer h2{font-size:52px;line-height:1.08;letter-spacing:-2.2px;margin:16px 0 24px}.network-copy>p{color:#aebfcd;line-height:1.8;font-size:14px;margin-bottom:31px}.route-board{height:510px;border:1px solid rgba(255,255,255,.16);position:relative;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;overflow:hidden}.map-label{position:absolute;top:22px;left:24px;font-size:9px;color:#6dcdf5;letter-spacing:2px}.route{position:absolute;height:2px;background:linear-gradient(90deg,transparent,#1da5e1,#4fddc1,transparent);transform-origin:left center}.route-a{width:430px;left:100px;top:225px;transform:rotate(27deg)}.route-b{width:310px;left:215px;top:315px;transform:rotate(-36deg)}.route i{position:absolute;width:7px;height:7px;border-radius:50%;background:white;top:-3px;box-shadow:0 0 0 7px rgba(24,168,235,.14)}.route i:nth-child(1){left:10%}.route i:nth-child(2){left:51%}.route i:nth-child(3){left:90%}.city{position:absolute;background:rgba(5,31,66,.9);border:1px solid rgba(86,199,246,.35);padding:11px 14px;display:flex;flex-direction:column}.city b{font-size:11px}.city span{font-size:8px;color:#7fcdf0;margin-top:4px}.city-a{left:55px;top:140px}.city-b{left:155px;bottom:116px}.city-c{right:155px;top:205px}.city-d{right:55px;bottom:100px}.board-stats{position:absolute;left:20px;right:20px;bottom:18px;background:rgba(255,255,255,.06);display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.1)}.board-stats div{padding:14px;border-right:1px solid rgba(255,255,255,.1)}.board-stats div:last-child{border:0}.board-stats b{font-size:13px;color:#5cc8f4;display:block}.board-stats span{font-size:8px;color:#a6b8c7}.network-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.22}.network-glow.one{width:420px;height:420px;background:#158dcc;right:-100px;top:-120px}.network-glow.two{width:300px;height:300px;background:#12c3a8;left:35%;bottom:-180px}
.process{background:#fff}.process-head{margin-bottom:55px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-grid article{padding:35px 28px 38px;border-right:1px solid var(--line);position:relative}.process-grid article:last-child{border:0}.process-number{font-size:10px;color:var(--blue);font-weight:800;margin-bottom:65px}.process-grid h3{font-size:18px;margin:0 0 14px}.process-grid p{font-size:12px;color:var(--muted);line-height:1.75}.process-grid article>span{position:absolute;right:22px;top:32px;color:#a6b1b8}.process-grid article:last-child>span{display:none}
.sectors{padding:90px 0;background:var(--ice)}.sector-inner{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.sector-list{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid #c9dce7;border-top:1px solid #c9dce7}.sector-list span{padding:17px 19px;border-right:1px solid #c9dce7;border-bottom:1px solid #c9dce7;font-size:12px;font-weight:700;display:flex;justify-content:space-between}.sector-list i{font-style:normal;color:var(--blue)}
.quote{background:linear-gradient(120deg,rgba(4,20,45,.97),rgba(6,31,70,.91)),url('https://images.unsplash.com/photo-1586528116493-da8b0f8d3ae5?auto=format&fit=crop&w=2200&q=88') center/cover;color:white}.quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.quote-copy>p{color:#afc0ce;font-size:14px;line-height:1.8}.quote-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.quote-tags span{border:1px solid rgba(255,255,255,.22);padding:9px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.8px}.quote-form{background:white;color:var(--ink);padding:34px}.form-title{display:flex;align-items:center;gap:14px;margin-bottom:25px}.form-title span{width:32px;height:32px;background:var(--ice);color:var(--blue);display:grid;place-items:center;font-size:9px}.form-title h3{font-size:23px;margin:0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.quote-form label{display:flex;flex-direction:column;gap:7px;font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#76828a;font-weight:700;margin-bottom:14px}.quote-form input,.quote-form textarea{border:1px solid var(--line);background:#f9fbfc;padding:13px 14px;outline:none;color:var(--ink);text-transform:none;letter-spacing:0;font-size:12px}.quote-form textarea{height:88px;resize:vertical}.quote-form input:focus,.quote-form textarea:focus{border-color:var(--blue);background:white}.submit-button{width:100%;border:0;background:var(--blue);color:white;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;text-transform:uppercase;font-size:10px;letter-spacing:.7px;font-weight:800;cursor:pointer}.submit-button:hover{background:var(--navy)}.form-success{min-height:350px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.form-success i{font-style:normal;width:54px;height:54px;border-radius:50%;background:#eaf9f3;color:#17a06e;display:grid;place-items:center;font-size:23px}.form-success h3{font-size:25px;margin:20px 0 8px}.form-success p{color:var(--muted);font-size:12px;max-width:350px;line-height:1.7}.form-success button{border:0;background:none;color:var(--blue);font-size:10px;text-transform:uppercase;font-weight:800;margin-top:12px;cursor:pointer}
.footer{background:#f8fbfd;color:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--line)}.footer-map{position:absolute;inset:0 0 auto;height:420px;opacity:.38;background:radial-gradient(circle at 18% 50%,rgba(17,136,201,.12),transparent 27%),radial-gradient(circle at 70% 20%,rgba(6,31,70,.09),transparent 25%),radial-gradient(circle,rgba(6,31,70,.12) 1px,transparent 1.5px);background-size:auto,auto,22px 22px;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}.footer-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .75fr 1fr 1.1fr;gap:68px;padding:82px 0 70px}.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start}.logo-footer{width:225px;height:82px;background:white;box-shadow:0 10px 30px rgba(6,31,70,.08);border:1px solid #e1ebf0}.footer-about>p{max-width:330px;color:var(--muted);font-size:13px;line-height:1.8;margin:25px 0 18px}.footer-grid h4{font-size:14px;color:var(--navy);margin:5px 0 24px;position:relative}.footer-grid h4:after{content:"";position:absolute;left:0;bottom:-10px;width:42px;height:3px;background:linear-gradient(90deg,var(--blue) 0 65%,#b9ddea 65%)}.footer-grid a,.footer-grid p{font-size:12px;color:#647382;line-height:1.7;margin:5px 0}.footer-grid>div:not(.footer-about) a:before{content:"›";color:var(--blue);font-weight:900;margin-right:9px}.footer-grid a:hover{color:var(--blue)}.footer-socials{display:flex;gap:8px}.footer-socials a{width:38px;height:38px;background:white;border:1px solid #dce7ed;display:grid;place-items:center;color:var(--navy);font-weight:800;font-size:11px;transition:.25s}.footer-socials a:before{display:none}.footer-socials a:hover{background:var(--blue);color:white;transform:translateY(-3px)}.footer-contact>span{font-size:9px;color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:1.2px;margin-top:7px}.footer-contact>p{margin:3px 0 12px}.footer-quote{margin-top:8px!important;background:var(--navy);color:white!important;padding:12px 14px}.footer-quote:before{display:none}.footer-quote b{margin-left:18px;color:#67cef7}
.transport-scene{height:280px;position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f8fbfd 78%,#edf3f6 100%);border-top:1px solid #dde8ed}.transport-scene:after{content:"";position:absolute;left:0;right:0;bottom:31px;height:1px;background:#cfdce3}.truck-run{position:absolute;z-index:2;width:430px;height:180px;left:-480px;animation:truck-left-to-right 17s linear infinite;filter:drop-shadow(0 13px 10px rgba(4,20,45,.17))}.truck-run img{width:100%;height:100%;object-fit:contain;animation:suspension 1.15s ease-in-out infinite}.run-one{bottom:22px;animation-delay:-3s}.run-two{width:360px;height:150px;bottom:112px;left:auto;right:-410px;animation:truck-right-to-left 20s linear infinite -10s;opacity:.94}.run-three{width:300px;height:125px;bottom:38px;animation-duration:23s;animation-delay:-16s;opacity:.9}.truck-run:after{content:"";position:absolute;left:12%;right:7%;bottom:8px;height:8px;border-radius:50%;background:rgba(4,20,45,.16);filter:blur(5px);z-index:-1}@keyframes truck-left-to-right{from{left:-480px}to{left:calc(100% + 480px)}}@keyframes truck-right-to-left{from{right:-420px}to{right:calc(100% + 420px)}}@keyframes suspension{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.footer-bottom-wrap{background:var(--navy-deep);color:white}.footer-bottom{min-height:66px;display:flex;align-items:center;justify-content:space-between;color:#91a5b5;font-size:9px;text-transform:uppercase;letter-spacing:.6px}.footer-bottom div{display:flex;gap:22px}.footer-bottom a:hover{color:#60c7f4}
@media(max-width:1100px){.header{height:82px}.header-logo-wing{width:265px;height:82px;padding-left:10px}.header-logo-wing:after{right:35px;width:8px}.header-logo-wing .logo{width:190px;height:68px}.header-logo-wing .logo img{width:280px}.header-content{margin-left:215px}.header-topbar{display:none}.header-navrow{height:82px;padding:0 68px 0 80px}.header nav{display:none}.header nav.open{display:flex;position:fixed;top:82px;left:0;right:0;background:var(--navy-deep);flex-direction:column;align-items:stretch;gap:0;padding:18px 28px;box-shadow:0 18px 34px rgba(4,20,45,.28)}.header nav.open a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}.header nav.open a:after{bottom:7px}.menu-button{display:block}.hero-inner{padding-top:82px;grid-template-columns:1fr}.hero-main{padding-top:65px}.hero-panel{display:none}.hero h1{font-size:64px}.tracking-inner{grid-template-columns:1fr 2fr}.tracking-inner .support{display:none}.about-grid,.network-grid,.quote-grid{grid-template-columns:1fr;gap:60px}.about-visual{max-width:680px}.service-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.process-grid article:nth-child(2){border-right:0}.process-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.sector-inner{grid-template-columns:1fr;gap:30px}.footer-top{grid-template-columns:.7fr 1.3fr}.footer-top>a{display:none}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}}
@media(max-width:650px){.shell{width:calc(100% - 30px)}.section{padding:78px 0}.header-logo-wing{width:225px}.header-logo-wing:after{right:29px}.header-logo-wing .logo{width:165px;height:61px}.header-logo-wing .logo img{width:245px}.header-content{margin-left:180px}.header-navrow{padding:0 58px 0 40px}.hero{height:730px}.hero-inner{padding-top:82px}.hero-kicker{font-size:9px}.hero h1{font-size:45px;letter-spacing:-2.4px}.hero-main>p{font-size:13px}.hero-buttons{flex-direction:column;align-items:flex-start}.carousel-nav{bottom:35px}.tracking-card{margin-top:0}.tracking-inner{grid-template-columns:1fr;padding:25px 20px}.tracking-inner form>div{flex-direction:column}.tracking-inner form button{height:46px}.about-visual{height:410px}.about-photo{right:20px}.experience-card{width:190px;padding:20px}.blue-orbit{width:58px;height:58px;border-width:11px;left:-8px}.about h2,.section-head h2,.process-head h2,.sector-inner h2{font-size:34px}.section-head{align-items:flex-start;flex-direction:column;gap:14px}.service-grid{grid-template-columns:1fr}.service-card{min-height:auto}.network h2,.quote h2{font-size:38px}.route-board{height:420px}.route-a{width:280px;left:70px}.route-b{width:230px;left:100px}.city-c{right:30px}.city-d{right:25px}.board-stats{grid-template-columns:1fr}.board-stats div{padding:7px 12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.process-grid{grid-template-columns:1fr}.process-grid article{border-right:0;border-bottom:1px solid var(--line)!important}.process-grid article:last-child{border-bottom:0!important}.process-number{margin-bottom:30px}.sector-list{grid-template-columns:1fr}.quote-grid{gap:40px}.quote-form{padding:25px 18px}.form-row{grid-template-columns:1fr}.footer-photo{height:190px}.footer-top{grid-template-columns:1fr;padding:42px 0;gap:25px}.footer h2{font-size:30px}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column;padding:20px 0;gap:12px}}
@media(max-width:980px){.footer-grid{grid-template-columns:1.35fr 1fr 1fr;gap:45px}.footer-contact{grid-column:1/-1}.transport-scene{height:250px}.truck-run{width:350px;height:145px}.run-two{width:300px;height:125px;bottom:105px}.run-three{width:250px;height:105px}}
@media(max-width:650px){.footer-grid{grid-template-columns:1fr 1fr;padding:62px 0 50px;gap:38px 28px}.footer-about,.footer-contact{grid-column:1/-1}.logo-footer{width:195px;height:72px}.transport-scene{height:210px}.truck-run{width:260px;height:110px;bottom:18px}.run-two{width:225px;height:95px;bottom:92px}.run-three{width:190px;height:80px;bottom:28px}.footer-bottom{align-items:flex-start;flex-direction:column;padding:20px 0;gap:12px}}
@media(prefers-reduced-motion:reduce){.truck-run,.truck-run img,.pulse{animation:none}.truck-run{display:none}}



/* carasoul slide with truck move */



:root {
    --dil-navy: #062554;
    --dil-dark: #031a3b;
    --dil-sky: #14ace2;
    --dil-cyan: #58d7ff;
    --dil-ink: #071629;
    --dil-muted: #5f6f82;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f7fbfe;
    color: var(--dil-ink);
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   MAIN SECTION
========================================= */

.dil-solutions {
    position: relative;
    overflow: hidden;
    padding: clamp(60px, 7vw, 100px)
             clamp(18px, 6vw, 96px)
             56px;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(20, 172, 226, .12),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fff,
            #f4faff
        );
}

.dil-solutions::before {
    content: "";
    position: absolute;
    inset: 0;

    opacity: .36;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(6, 37, 84, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6, 37, 84, .045) 1px,
            transparent 1px
        );

    background-size: 44px 44px;

    mask-image: linear-gradient(
        #000,
        transparent 70%
    );
}

.dil-container {
    position: relative;
    z-index: 2;

    max-width: 1440px;

    padding: 0;
}


/* =========================================
   HEADING
========================================= */

.dil-heading {
    margin-bottom: 34px;
}

.dil-eyebrow {
    margin: 0 0 10px;

    color: var(--dil-sky);

    font-size: .78rem;
    font-weight: 900;

    letter-spacing: .24em;

    text-transform: uppercase;
}

.dil-heading h2 {
    max-width: 800px;

    margin: 0;

    color: var(--dil-dark);

    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 800;

    line-height: .98;

    letter-spacing: -.055em;
}

.dil-heading h2 span {
    display: block;

    color: var(--dil-sky);
}

.dil-intro {
    margin: 0 0 6px;

    color: var(--dil-muted);

    line-height: 1.8;
}


/* =========================================
   ACCORDION
========================================= */

.dil-accordion {
    display: flex;

    height: 510px;

    overflow: hidden;

    border-radius: 12px;

    background: var(--dil-navy);

    box-shadow:
        0 28px 70px rgba(3, 26, 59, .24);
}


/* =========================================
   CARD
========================================= */

.dil-card {
    --accent: var(--dil-sky);

    position: relative;

    isolation: isolate;

    flex: 1 1 0;

    min-width: 0;

    overflow: hidden;

    cursor: pointer;

    outline: none;

    border-right:
        1px solid rgba(255, 255, 255, .18);

    color: #fff;

    transition:
        flex-grow .7s cubic-bezier(.22, 1, .36, 1);

    /*
       Fallback background
       agar image load na ho to card
       blank nahi dikhega.
    */
    background:
        linear-gradient(
            150deg,
            rgba(2, 18, 48, .16),
            rgba(2, 18, 48, .93)
        ),
        linear-gradient(
            120deg,
            #194f80,
            #061f48 64%
        );
}


/* =========================================
   CARD IMAGE
========================================= */

.dil-card-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    z-index: -3;

    opacity: 1;

    transform: scale(1);

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1),
        filter .8s ease;
}


/* =========================================
   IMAGE DARK OVERLAY
========================================= */

.dil-image-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            150deg,
            rgba(2, 18, 48, .28),
            rgba(2, 18, 48, .92)
        ),
        linear-gradient(
            0deg,
            rgba(2, 17, 44, .88),
            rgba(2, 17, 44, .05) 70%
        );
}


/* =========================================
   DIFFERENT CARD TONES
========================================= */

.dil-card.part {
    --accent: #47d2ff;
}

.dil-card.air {
    --accent: #209fe8;
}

.dil-card.warehouse {
    --accent: #54d7d1;
}

.dil-card.lastmile {
    --accent: #0da4dc;
}


/* =========================================
   CARD HOVER / ACTIVE IMAGE
========================================= */

.dil-card:hover .dil-card-image {
    transform: scale(1.05);
}

.dil-card.active .dil-card-image {
    transform: scale(1.07);
}


/* =========================================
   CARD LIGHT OVERLAY
========================================= */

.dil-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(2, 17, 44, .32),
            transparent 45%
        ),
        linear-gradient(
            0deg,
            rgba(2, 17, 44, .95),
            transparent 68%
        );
}


/* =========================================
   ACTIVE ACCENT LINE
========================================= */

.dil-card::after {
    content: "";

    position: absolute;

    inset:
        0 auto 0 0;

    width: 4px;

    height: 0;

    background: var(--accent);

    transition:
        height .5s ease .15s;
}

.dil-card.active {
    flex-grow: 3.45;
}

.dil-card.active::after {
    height: 100%;
}

.dil-card:focus-visible {
    box-shadow:
        inset 0 0 0 3px #fff;
}


/* =========================================
   NUMBER
========================================= */

.dil-number {
    position: absolute;

    top: 22px;
    right: 22px;

    color: rgba(255, 255, 255, .64);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .18em;
}


/* =========================================
   WATERMARK
========================================= */

.dil-watermark {
    position: absolute;

    top: 22%;
    left: 50%;

    z-index: -1;

    color: rgba(255, 255, 255, .11);

    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 900;

    letter-spacing: -.08em;

    transform:
        translateX(-50%);

    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1);
}

.dil-card.active .dil-watermark {
    transform:
        translateX(-48%)
        scale(1.08);
}


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

.dil-vertical-title {
    position: absolute;

    bottom: 92px;
    left: 50%;

    width: 330px;

    font-size: .96rem;
    font-weight: 800;

    letter-spacing: .12em;

    text-align: center;

    text-transform: uppercase;

    transform:
        translateX(-50%)
        rotate(-90deg);

    transition:
        opacity .25s;
}

.dil-card.active .dil-vertical-title {
    opacity: 0;
}


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

.dil-content {
    position: absolute;

    left: clamp(28px, 4vw, 64px);
    bottom: 46px;

    width: min(
        470px,
        calc(100% - 58px)
    );

    opacity: 0;

    transform:
        translateY(34px);

    transition:
        opacity .33s ease .18s,
        transform .5s cubic-bezier(.22, 1, .36, 1) .17s;
}

.dil-card.active .dil-content {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   ICON
========================================= */

.dil-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 58px;
    height: 58px;

    padding: 0 12px;

    border:
        1px solid rgba(255, 255, 255, .56);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .12);

    font-size: .78rem;
    font-weight: 900;

    letter-spacing: .08em;

    backdrop-filter: blur(8px);
}


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

.dil-content h3 {
    margin: 20px 0 12px;

    font-size:
        clamp(2rem, 3.4vw, 3.6rem);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -.045em;
}


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

.dil-content p {
    max-width: 460px;

    margin: 0;

    color:
        rgba(255, 255, 255, .8);

    line-height: 1.7;
}


/* =========================================
   LINK
========================================= */

.dil-content a {
    display: inline-flex;

    gap: 10px;

    margin-top: 22px;

    padding-bottom: 6px;

    border-bottom:
        2px solid var(--accent);

    color: #fff;

    font-size: .78rem;
    font-weight: 900;

    letter-spacing: .13em;

    text-decoration: none;

    text-transform: uppercase;
}


/* =========================================
   CONTROLS
========================================= */

.dil-controls {
    display: none;

    align-items: center;
    justify-content: center;

    gap: 22px;

    margin-top: 22px;
}

.dil-controls > button {
    width: 42px;
    height: 42px;

    border:
        1px solid #dbe7ef;

    border-radius: 50%;

    background: #fff;

    color: var(--dil-navy);

    font-size: 1.2rem;
}

.dil-dots {
    display: flex;

    gap: 8px;
}

.dil-dots button {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 99px;

    background: #b9d2df;

    transition:
        width .3s,
        background .3s;
}

.dil-dots button.selected {
    width: 30px;

    background: var(--dil-sky);
}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 768px) {

    .dil-card {
        position: relative !important;

        inset: auto !important;

        visibility: visible !important;

        opacity: 1 !important;

        transform: none !important;
    }

    .dil-card:not(.active) .dil-content {
        opacity: 0 !important;

        transform:
            translateY(34px) !important;
    }

    .dil-card.active .dil-content {
        opacity: 1 !important;

        transform:
            translateY(0) !important;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 980px) {

    .dil-accordion {
        height: 460px;
    }

    .dil-card.active {
        flex-grow: 4.6;
    }

    .dil-content {
        left: 28px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .dil-solutions {
        padding:
            54px
            16px
            44px;
    }

    .dil-heading h2 {
        font-size:
            clamp(
                2.3rem,
                12vw,
                3.8rem
            );
    }

    .dil-accordion {
        display: grid;

        height: 480px;
    }

    .dil-card {
        position: absolute;

        inset: 0;

        visibility: hidden;

        opacity: 0;

        transform:
            translateX(24px);

        border: 0;

        transition:
            opacity .38s,
            transform .5s cubic-bezier(.22, 1, .36, 1),
            visibility 0s .5s;
    }

    .dil-card.active {
        visibility: visible;

        opacity: 1;

        transform: none;

        transition-delay: 0s;
    }

    .dil-vertical-title {
        display: none;
    }

    .dil-content {
        left: 24px;
        bottom: 34px;

        width:
            calc(100% - 48px);
    }

    .dil-content h3 {
        font-size:
            clamp(
                2.25rem,
                11vw,
                3.35rem
            );
    }

    .dil-watermark {
        top: 14%;

        font-size: 8rem;
    }

    .dil-controls {
        display: flex;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}

/* =========================================
   REAL PNG TRUCK ANIMATION
   ========================================= */

.logistics-scene {
  position: relative;
  overflow: hidden;
}

/* Common truck */
.moving-truck {
  position: absolute;
  z-index: 20;
  display: block;
  width: 150px;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Left -> Right */
.truck-right {
  left: -180px;
  bottom: 18px;
  animation: truckMoveRight 14s linear infinite;
}

/* Right -> Left */
.truck-left {
  right: -180px;
  bottom: 18px;
  animation: truckMoveLeft 14s linear infinite;
}


/* =========================================
   LEFT TO RIGHT
   ========================================= */

@keyframes truckMoveRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(100vw + 360px));
  }
}


/* =========================================
   RIGHT TO LEFT
   ========================================= */

@keyframes truckMoveLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100vw - 360px));
  }
}


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

@media (max-width: 768px) {

  .moving-truck {
    width: 115px;
  }

  .truck-right {
    left: -140px;
    bottom: 15px;
  }

  .truck-left {
    right: -140px;
    bottom: 15px;
  }

  @keyframes truckMoveRight {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(100vw + 280px));
    }
  }

  @keyframes truckMoveLeft {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-100vw - 280px));
    }
  }
}



/* ==============================
   ABOUT US DROPDOWN
================================ */

.nav-dropdown {
    position: relative;
    list-style: none;
}

.dropdown-details {
    position: relative;
}

.dropdown-trigger {
    min-height: 83px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}

.dropdown-trigger::-webkit-details-marker {
    display: none;
}

.dropdown-trigger:hover,
.dropdown-trigger.active {
    color: var(--sky-dark);
}

.dropdown-trigger svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    transition: transform 0.25s ease;
}

.dropdown-details[open] .dropdown-trigger svg {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 2px);
    left: 50%;
    width: 240px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #ffffff;
    border-top: 3px solid var(--sky);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 45px rgba(8, 42, 72, 0.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: all 0.25s ease;
}

.nav-dropdown:hover .dropdown-menu,
.dropdown-details[open] .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 15px 20px;
    color: var(--navy);
    background: #ffffff;
    border-bottom: 1px solid #e4edf3;
    font-size: 14px;
    font-weight: 650;
    transition: all 0.2s ease;
}

.dropdown-menu li:last-child a {
    border-bottom: 0;
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    padding-left: 26px;
    color: var(--sky-dark);
    background: var(--sky-soft);
}

/* Mobile dropdown */
@media (max-width: 820px) {
    .nav-dropdown,
    .dropdown-details {
        width: 100%;
    }

    .dropdown-trigger {
        width: 100%;
        min-height: auto;
        justify-content: space-between;
        padding: 15px 16px;
    }

    .dropdown-menu {
        position: static;
        display: none;
        width: 100%;
        padding: 0;
        border-top: 0;
        border-left: 3px solid var(--sky);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .dropdown-details[open] .dropdown-menu {
        display: block;
        transform: none;
    }

    .dropdown-menu a {
        padding: 13px 25px;
        background: #f5fbff;
    }
}



/* FINAL ABOUT DROPDOWN FIX */

.nav-menu > li.about-dropdown {
    position: relative !important;
    height: 83px;
    display: flex;
    align-items: center;
}

.nav-menu > li.about-dropdown > .about-submenu {
    position: absolute !important;
    z-index: 9999 !important;
    top: 83px !important;
    left: 50% !important;

    display: block !important;
    width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    background: #ffffff !important;
    border-top: 3px solid var(--sky) !important;
    box-shadow: 0 18px 40px rgba(8, 42, 72, 0.18) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, 10px) !important;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease !important;
}

.nav-menu > li.about-dropdown:hover > .about-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
}

.about-submenu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid #e2ebf1 !important;
}

.about-submenu > li:last-child {
    border-bottom: 0 !important;
}

.about-submenu > li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 0 22px !important;

    color: var(--navy) !important;
    background: #ffffff !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    text-decoration: none !important;

    transition: all 0.2s ease !important;
}

.about-submenu > li > a:hover,
.about-submenu > li > a.active {
    padding-left: 28px !important;
    color: var(--sky-dark) !important;
    background: var(--sky-soft) !important;
}

@media (max-width: 820px) {
    .nav-menu > li.about-dropdown {
        display: block;
        width: 100%;
        height: auto;
    }

    .nav-menu > li.about-dropdown > .about-submenu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        border-top: 0 !important;
        border-left: 3px solid var(--sky) !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .nav-menu > li.about-dropdown:hover > .about-submenu {
        display: block !important;
    }
}



/* infrastructure css aboue */




*{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:'Inter', sans-serif;
            color:#10233f;
            background:#fff;
            line-height:1.6;
        }

        img{
            width:100%;
            display:block;
        }

        a{
            text-decoration:none;
        }

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

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

            background:
                linear-gradient(
                    90deg,
                    rgba(4,28,58,.97) 0%,
                    rgba(5,39,75,.88) 42%,
                    rgba(5,39,75,.35) 75%,
                    rgba(5,39,75,.12) 100%
                ),
                url("images/infrastructure-hero.jpg");

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

        .hero-grid{
            position:absolute;
            inset:0;
            opacity:.08;

            background-image:
                linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);

            background-size:55px 55px;
        }

        .hero-content{
            width:min(1180px,92%);
            margin:auto;
            position:relative;
            z-index:2;
        }

        .hero-small{
            display:inline-flex;
            align-items:center;
            gap:10px;

            color:#18b8ed;
            font-size:13px;
            font-weight:700;
            letter-spacing:2px;
            text-transform:uppercase;

            margin-bottom:18px;
        }

        .hero-small::before{
            content:"";
            width:38px;
            height:3px;
            background:#18b8ed;
        }

        .hero-content h1{
            color:#fff;
            font-size:clamp(44px,6vw,76px);
            line-height:1.04;
            max-width:760px;
            letter-spacing:-3px;
            margin-bottom:24px;
        }

        .hero-content h1 span{
            color:#16b9ee;
        }

        .hero-content p{
            color:#dce8f3;
            font-size:17px;
            max-width:650px;
            line-height:1.8;
        }

        .hero-tag{
            position:absolute;
            right:6%;
            bottom:45px;

            width:245px;
            padding:24px;

            background:rgba(7,30,58,.86);
            border-left:3px solid #18b8ed;
            backdrop-filter:blur(8px);
        }

        .hero-tag small{
            color:#18b8ed;
            font-size:11px;
            font-weight:700;
            letter-spacing:2px;
        }

        .hero-tag strong{
            display:block;
            color:white;
            font-size:20px;
            line-height:1.25;
            margin-top:8px;
        }


        /* =========================
           INTRO
        ========================= */

        .section{
            padding:90px 0;
        }

        .container{
            width:min(1180px,92%);
            margin:auto;
        }

        .intro{
            display:grid;
            grid-template-columns:1fr 1.2fr;
            gap:70px;
            align-items:center;
        }

        .eyebrow{
            color:#12aee6;
            font-size:13px;
            font-weight:800;
            letter-spacing:2px;
            text-transform:uppercase;
            margin-bottom:12px;
        }

        .intro h2{
            font-size:42px;
            line-height:1.15;
            letter-spacing:-1.5px;
            color:#10233f;
        }

        .intro h2 span{
            color:#12afe7;
        }

        .intro-text p{
            color:#66758a;
            font-size:16px;
            margin-bottom:17px;
        }

        .intro-text p strong{
            color:#102d50;
        }


        /* =========================
           STATS
        ========================= */

        .stats{
            background:#061f3e;
            position:relative;
            overflow:hidden;
        }

        .stats::after{
            content:"DIL";
            position:absolute;
            right:4%;
            top:-55px;

            color:rgba(255,255,255,.025);
            font-size:210px;
            font-weight:800;
            line-height:1;
        }

        .stats-grid{
            position:relative;
            z-index:2;

            display:grid;
            grid-template-columns:repeat(4,1fr);
        }

        .stat{
            padding:32px 25px;
            border-right:1px solid rgba(255,255,255,.12);
        }

        .stat:last-child{
            border-right:none;
        }

        .stat strong{
            display:block;
            color:#18b8ed;
            font-size:38px;
            line-height:1;
            margin-bottom:8px;
        }

        .stat span{
            color:#d9e5f1;
            font-size:14px;
        }


        /* =========================
           CAPABILITIES
        ========================= */

        .capabilities{
            background:#f5f8fb;
        }

        .section-heading{
            max-width:700px;
            margin-bottom:45px;
        }

        .section-heading h2{
            font-size:42px;
            line-height:1.15;
            color:#10233f;
            letter-spacing:-1.5px;
        }

        .section-heading p{
            margin-top:15px;
            color:#718096;
            font-size:16px;
        }

        .capability-grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:24px;
        }

        .cap-card{
            position:relative;
            min-height:390px;
            overflow:hidden;
            border-radius:4px;
            background:#092747;
        }

        .cap-card img{
            height:100%;
            min-height:390px;
            object-fit:cover;

            transition:transform .6s ease;
        }

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

        .cap-card::after{
            content:"";
            position:absolute;
            inset:0;

            background:
                linear-gradient(
                    0deg,
                    rgba(4,25,50,.98) 0%,
                    rgba(4,25,50,.72) 42%,
                    rgba(4,25,50,.08) 100%
                );
        }

        .cap-content{
            position:absolute;
            z-index:2;
            left:32px;
            right:32px;
            bottom:30px;
        }

        .cap-number{
            color:#18b8ed;
            font-size:12px;
            font-weight:800;
            letter-spacing:2px;
        }

        .cap-content h3{
            color:white;
            font-size:28px;
            margin:7px 0 8px;
        }

        .cap-content p{
            color:#d8e4ee;
            font-size:14px;
            line-height:1.7;
            max-width:480px;
        }


        /* =========================
           FEATURE SECTION
        ========================= */

        .feature{
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:75px;
            align-items:center;
        }

        .feature.reverse{
            grid-template-columns:.95fr 1.05fr;
        }

        .feature-image{
            position:relative;
        }

        .feature-image img{
            height:440px;
            object-fit:cover;
        }

        .image-label{
            position:absolute;
            left:25px;
            bottom:25px;

            padding:13px 18px;
            background:#092747;
            color:white;
            font-size:12px;
            font-weight:700;
            letter-spacing:1px;
        }

        .feature-content h2{
            font-size:40px;
            line-height:1.15;
            color:#10233f;
            margin-bottom:20px;
            letter-spacing:-1px;
        }

        .feature-content h2 span{
            color:#10afe8;
        }

        .feature-content p{
            color:#6c7a8d;
            font-size:15px;
            margin-bottom:17px;
        }

        .feature-list{
            margin-top:25px;
            display:grid;
            gap:13px;
        }

        .feature-list li{
            list-style:none;
            display:flex;
            gap:12px;
            color:#34465d;
            font-size:14px;
            font-weight:600;
        }

        .feature-list li::before{
            content:"✓";
            flex-shrink:0;

            width:22px;
            height:22px;

            display:flex;
            align-items:center;
            justify-content:center;

            color:white;
            background:#12afe7;
            border-radius:50%;
            font-size:12px;
            font-weight:800;
        }


        /* =========================
           DARK TECHNOLOGY SECTION
        ========================= */

        .technology{
            background:#061e3a;
            color:white;
            overflow:hidden;
        }

        .technology-inner{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:70px;
            align-items:center;
        }

        .technology-content h2{
            font-size:42px;
            line-height:1.15;
            letter-spacing:-1.5px;
            margin-bottom:20px;
        }

        .technology-content h2 span{
            color:#16b9ed;
        }

        .technology-content p{
            color:#b9cadb;
            font-size:15px;
            margin-bottom:20px;
        }

        .tech-boxes{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
            margin-top:28px;
        }

        .tech-box{
            padding:22px;
            background:rgba(255,255,255,.055);
            border:1px solid rgba(255,255,255,.08);
        }

        .tech-box strong{
            display:block;
            color:#18b8ed;
            font-size:22px;
            margin-bottom:4px;
        }

        .tech-box span{
            color:#d5e0eb;
            font-size:13px;
        }

        .technology-image{
            position:relative;
        }

        .technology-image img{
            height:460px;
            object-fit:cover;
        }

        .technology-image::before{
            content:"";
            position:absolute;
            top:-18px;
            right:-18px;

            width:120px;
            height:120px;

            border-top:3px solid #17b8ed;
            border-right:3px solid #17b8ed;

            z-index:2;
        }


        /* =========================
           CTA
        ========================= */

        .cta{
            padding:80px 0;
            background:
                linear-gradient(
                    100deg,
                    #0a2b4f,
                    #087fae
                );
        }

        .cta-inner{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:30px;
        }

        .cta h2{
            color:white;
            font-size:38px;
            line-height:1.2;
            max-width:650px;
        }

        .cta p{
            color:#dcecf5;
            margin-top:10px;
            max-width:650px;
        }

        .cta-btn{
            flex-shrink:0;

            padding:16px 26px;

            background:white;
            color:#082849;

            font-size:14px;
            font-weight:800;

            border-radius:4px;

            transition:.3s;
        }

        .cta-btn:hover{
            transform:translateY(-3px);
            box-shadow:0 10px 25px rgba(0,0,0,.18);
        }


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

        @media(max-width:900px){

            .hero-tag{
                display:none;
            }

            .intro,
            .feature,
            .feature.reverse,
            .technology-inner{
                grid-template-columns:1fr;
                gap:40px;
            }

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

            .stat:nth-child(2){
                border-right:none;
            }

            .stat:nth-child(-n+2){
                border-bottom:1px solid rgba(255,255,255,.12);
            }

            .capability-grid{
                grid-template-columns:1fr;
            }

            .cta-inner{
                flex-direction:column;
                align-items:flex-start;
            }

        }

        @media(max-width:600px){

            .section{
                padding:65px 0;
            }

            .hero-content h1{
                font-size:46px;
                letter-spacing:-2px;
            }

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

            .intro h2,
            .section-heading h2,
            .feature-content h2,
            .technology-content h2{
                font-size:32px;
            }

            .stats-grid{
                grid-template-columns:1fr 1fr;
            }

            .stat{
                padding:25px 15px;
            }

            .stat strong{
                font-size:30px;
            }

            .feature-image img,
            .technology-image img{
                height:330px;
            }

            .tech-boxes{
                grid-template-columns:1fr;
            }

            .cta h2{
                font-size:30px;
            }

        }


        /* Why Us Css Aboue */


        
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    color:#10243f;
    background:#fff;
    line-height:1.6;
}

img{
    width:100%;
    display:block;
}

.container{
    width:min(1150px,92%);
    margin:auto;
}


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

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

    background:
    linear-gradient(
        90deg,
        rgba(4,29,59,.96),
        rgba(5,45,78,.82),
        rgba(5,45,78,.25)
    ),
    url("images/why-dil.jpg");

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

.why-hero-content{
    position:relative;
    z-index:2;
}

.hero-label{
    display:inline-block;
    padding:6px 13px;

    background:#12afe8;
    color:#fff;

    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;

    margin-bottom:15px;
}

.why-hero h1{
    color:#fff;
    font-size:clamp(45px,6vw,70px);
    line-height:1;
    letter-spacing:-2px;
}

.why-hero h1 span{
    color:#16b9ed;
}

.why-hero p{
    color:#dce8f2;
    max-width:620px;
    margin-top:20px;
    font-size:16px;
}


/* =========================
   INTRO
========================= */

.why-intro{
    padding:85px 0 65px;
}

.intro-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:65px;
    align-items:start;
}

.small-title{
    color:#10afe8;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.intro-grid h2{
    font-size:40px;
    line-height:1.15;
    letter-spacing:-1.5px;
}

.intro-grid h2 span{
    color:#10afe8;
}

.intro-text p{
    color:#6d7b8d;
    font-size:15px;
    margin-bottom:16px;
}

.intro-text strong{
    color:#102d50;
}


/* =========================
   WHY CARDS
========================= */

.reasons{
    background:#f4f8fb;
    padding:75px 0;
}

.section-head{
    max-width:680px;
    margin-bottom:38px;
}

.section-head h2{
    font-size:38px;
    line-height:1.15;
    letter-spacing:-1px;
}

.section-head p{
    color:#728095;
    font-size:15px;
    margin-top:12px;
}

.reason-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.reason{
    background:#fff;
    padding:30px 24px;
    min-height:235px;
    border-top:3px solid #12afe8;

    transition:.3s;
}

.reason:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(10,42,75,.09);
}

.reason-number{
    color:#10afe8;
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
}

.reason h3{
    margin:16px 0 10px;
    font-size:20px;
    line-height:1.25;
}

.reason p{
    color:#718094;
    font-size:13px;
    line-height:1.7;
}


/* =========================
   DARK ADVANTAGE
========================= */

.advantage{
    padding:75px 0;
    background:#06203d;
}

.advantage-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center;
}

.advantage h2{
    color:#fff;
    font-size:39px;
    line-height:1.15;
    letter-spacing:-1px;
}

.advantage h2 span{
    color:#17b9ed;
}

.advantage p{
    color:#b9cadb;
    font-size:15px;
    margin-top:16px;
}

.advantage-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.adv-item{
    padding:20px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
}

.adv-item strong{
    display:block;
    color:#17b9ed;
    font-size:14px;
    margin-bottom:5px;
}

.adv-item span{
    color:#d8e3ed;
    font-size:13px;
}


/* =========================
   CTA
========================= */

.why-cta{
    padding:65px 0;
    background:linear-gradient(100deg,#087eae,#0b2e53);
}

.cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.cta-inner h2{
    color:#fff;
    font-size:34px;
    line-height:1.2;
}

.cta-inner p{
    color:#d9edf5;
    font-size:14px;
    margin-top:8px;
}

.cta-btn{
    flex-shrink:0;
    padding:15px 25px;

    background:#fff;
    color:#092b4c;

    font-size:13px;
    font-weight:800;

    border-radius:4px;
    transition:.3s;
}

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


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

@media(max-width:900px){

    .intro-grid,
    .advantage-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .reason-grid{
        grid-template-columns:1fr 1fr;
    }

    .cta-inner{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media(max-width:600px){

    .why-hero{
        min-height:390px;
    }

    .why-hero h1{
        font-size:45px;
    }

    .why-intro,
    .reasons,
    .advantage{
        padding:60px 0;
    }

    .intro-grid h2,
    .section-head h2,
    .advantage h2{
        font-size:31px;
    }

    .reason-grid{
        grid-template-columns:1fr;
    }

    .advantage-list{
        grid-template-columns:1fr;
    }

    .cta-inner h2{
        font-size:29px;
    }

}



/* ==================================================
   DESIRE INDIA CONTACT PAGE
================================================== */

.dil-contact-page {
    position: relative;
    min-height: 720px;
    padding: clamp(75px, 8vw, 115px) 0;
    overflow: hidden;
    color: var(--navy);
    background:
        radial-gradient(circle at 12% 20%, rgba(18, 174, 229, 0.08), transparent 25%),
        radial-gradient(circle at 80% 70%, rgba(8, 42, 72, 0.05), transparent 28%),
        #ffffff;
}

.dil-contact-background {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
}

.dil-contact-background i {
    color: var(--navy);
    font-size: clamp(390px, 46vw, 700px);
    opacity: 0.025;
    transform: rotate(-7deg);
}

.dil-contact-container {
    position: relative;
    z-index: 2;
    width: min(1320px, calc(100% - 48px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: start;
}

.dil-contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--sky-dark);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.dil-contact-eyebrow > span {
    width: 30px;
    height: 2px;
    background: var(--sky);
}

.dil-contact-eyebrow i {
    font-size: 15px;
}

.dil-contact-form-area h1,
.dil-contact-info h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.dil-contact-form-area h1 em,
.dil-contact-info h2 em {
    color: var(--sky-dark);
    font-style: normal;
}

.dil-contact-intro,
.dil-contact-info-intro {
    max-width: 610px;
    margin: 22px 0 34px;
    color: #60788b;
    font-size: 15px;
    line-height: 1.75;
}

.dil-contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.dil-contact-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dil-contact-field label {
    color: #63798b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dil-contact-field input,
.dil-contact-field textarea {
    width: 100%;
    border: 1px solid #e1ebf1;
    border-radius: 12px 4px 12px 4px;
    outline: 0;
    color: var(--navy);
    background: #f6f9fb;
    font-family: inherit;
    font-size: 14px;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.dil-contact-field input {
    height: 64px;
    padding: 0 19px;
}

.dil-contact-field textarea {
    min-height: 175px;
    padding: 18px 19px;
    resize: vertical;
}

.dil-contact-field input::placeholder,
.dil-contact-field textarea::placeholder {
    color: #93a3af;
}

.dil-contact-field input:focus,
.dil-contact-field textarea:focus {
    border-color: var(--sky);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(18, 174, 229, 0.1);
}

.dil-contact-message-field {
    grid-column: 1 / -1;
}

.dil-contact-submit {
    min-width: 205px;
    min-height: 56px;
    margin-top: 22px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border: 0;
    border-radius: 13px 4px 13px 4px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sky), var(--sky-dark));
    box-shadow: 0 12px 28px rgba(7, 142, 200, 0.25);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.dil-contact-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 34px rgba(7, 142, 200, 0.32);
}

.dil-contact-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
}

.dil-contact-form-status {
    display: none;
    margin-top: 14px;
    color: #159766;
    font-size: 13px;
    font-weight: 700;
}

/* Contact information */

.dil-contact-info {
    padding-top: 2px;
}

.dil-contact-info h2 {
    font-size: clamp(41px, 3.6vw, 57px);
}

.dil-contact-info-list {
    display: grid;
    gap: 22px;
    margin-top: 38px;
}

.dil-contact-info-item {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    color: inherit;
}

.dil-contact-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 18px 6px 18px 6px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sky), var(--sky-dark));
    box-shadow: 0 12px 25px rgba(7, 142, 200, 0.2);
    font-size: 25px;
    transition: transform 0.2s ease;
}

.dil-contact-info-item:hover .dil-contact-icon {
    transform: translateY(-3px) rotate(-2deg);
}

.dil-contact-info-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dil-contact-info-content small {
    color: var(--sky-dark);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dil-contact-info-content strong {
    color: var(--navy);
    font-size: 17px;
}

.dil-contact-info-content > span {
    color: #607587;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.dil-contact-availability {
    margin-top: 34px;
    padding: 17px 19px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #dcecf4;
    border-radius: 14px 5px 14px 5px;
    background: rgba(239, 249, 253, 0.75);
}

.dil-contact-availability > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dil-contact-availability strong {
    color: var(--navy);
    font-size: 13px;
}

.dil-contact-availability small {
    color: #6a7f8f;
    font-size: 11px;
}

.dil-contact-pulse {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #20c98b;
    box-shadow: 0 0 0 6px rgba(32, 201, 139, 0.13);
}

/* Floating phone and WhatsApp */

.dil-contact-floating-actions {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 25px;
    display: grid;
    gap: 12px;
    transform: translateY(-50%);
}

.dil-contact-floating-actions a {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--sky-dark);
    box-shadow: 0 12px 28px rgba(8, 42, 72, 0.2);
    font-size: 19px;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.dil-contact-floating-actions a:hover {
    background: var(--navy);
    transform: translateX(-4px);
}

/* Responsive */

@media (max-width: 1050px) {
    .dil-contact-container {
        grid-template-columns: 1fr;
    }

    .dil-contact-info {
        max-width: 720px;
    }

    .dil-contact-info-list {
        grid-template-columns: 1fr 1fr;
    }

    .dil-contact-info-item:last-child {
        grid-column: 1 / -1;
    }

    .dil-contact-floating-actions {
        display: none;
    }
}

@media (max-width: 650px) {
    .dil-contact-page {
        padding: 65px 0;
    }

    .dil-contact-container {
        width: calc(100% - 30px);
        gap: 65px;
    }

    .dil-contact-form-grid,
    .dil-contact-info-list {
        grid-template-columns: 1fr;
    }

    .dil-contact-info-item:last-child {
        grid-column: auto;
    }

    .dil-contact-field input {
        height: 58px;
    }

    .dil-contact-field textarea {
        min-height: 155px;
    }

    .dil-contact-submit {
        width: 100%;
    }

    .dil-contact-info-item {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 15px;
    }

    .dil-contact-icon {
        width: 58px;
        height: 58px;
        border-radius: 14px 5px 14px 5px;
        font-size: 21px;
    }

    .dil-contact-availability {
        align-items: flex-start;
    }
}



/* =========================================================
   E-COMMERCE PAGE
   All classes are uniquely prefixed to prevent CSS conflicts
========================================================= */

.dil-ecom-page {
  background: #ffffff;
  color: var(--text, #193853);
  overflow: hidden;
}

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


/* Hero */

.dil-ecom-hero {
  min-height: 430px;
  position: relative;
  display: flex;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.dil-ecom-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 34, 61, 0.98) 0%,
      rgba(5, 42, 72, 0.9) 43%,
      rgba(5, 42, 72, 0.5) 72%,
      rgba(5, 42, 72, 0.3) 100%
    );
}

.dil-ecom-hero-content {
  position: relative;
  z-index: 2;
  padding-block: 80px;
  color: #ffffff;
}

.dil-ecom-eyebrow {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 8px 14px;
  background: var(--sky, #12aee5);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.dil-ecom-hero h1 {
  max-width: 700px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -2.5px;
}

.dil-ecom-hero h1 span {
  display: block;
  color: var(--sky, #12aee5);
}

.dil-ecom-hero p {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 17px;
  line-height: 1.75;
}

.dil-ecom-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.dil-ecom-primary-btn,
.dil-ecom-secondary-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.dil-ecom-primary-btn {
  background: var(--sky, #12aee5);
  color: #ffffff;
}

.dil-ecom-primary-btn:hover {
  background: var(--sky-dark, #078ec8);
  color: #ffffff;
  transform: translateY(-3px);
}

.dil-ecom-secondary-btn {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}

.dil-ecom-secondary-btn:hover {
  color: var(--navy, #082a48);
  background: #ffffff;
  transform: translateY(-3px);
}


/* Main area */

.dil-ecom-main {
  padding: 90px 0 100px;
}

.dil-ecom-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 54px;
  align-items: start;
}

.dil-ecom-content {
  min-width: 0;
}

.dil-ecom-feature-image {
  height: 470px;
  position: relative;
  margin-bottom: 48px;
  overflow: hidden;
  border-radius: 5px;
  background: #eaf3f8;
}

.dil-ecom-feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(4, 35, 62, 0.32) 100%
  );
  pointer-events: none;
}

.dil-ecom-feature-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.dil-ecom-feature-image:hover img {
  transform: scale(1.045);
}

.dil-ecom-image-badge {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  max-width: 290px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  color: #ffffff;
  background: var(--navy, #082a48);
  border-left: 4px solid var(--sky, #12aee5);
  box-shadow: 0 14px 35px rgba(4, 35, 62, 0.25);
}

.dil-ecom-image-badge > i {
  color: var(--sky, #12aee5);
  font-size: 28px;
}

.dil-ecom-image-badge strong,
.dil-ecom-image-badge span {
  display: block;
}

.dil-ecom-image-badge strong {
  margin-bottom: 3px;
  font-size: 15px;
}

.dil-ecom-image-badge span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}


/* Introduction */

.dil-ecom-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  color: var(--sky-dark, #078ec8);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dil-ecom-section-label::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--sky, #12aee5);
}

.dil-ecom-introduction h2,
.dil-ecom-why-section > h2 {
  margin: 0 0 20px;
  color: var(--navy, #082a48);
  font-size: clamp(31px, 4vw, 47px);
  line-height: 1.14;
  letter-spacing: -1.5px;
}

.dil-ecom-introduction h2 span,
.dil-ecom-why-section > h2 span {
  color: var(--sky-dark, #078ec8);
}

.dil-ecom-introduction h3 {
  margin: 0 0 13px;
  color: var(--navy, #082a48);
  font-size: 21px;
}

.dil-ecom-introduction p,
.dil-ecom-service-section > p {
  margin: 0 0 15px;
  color: #5e7182;
  font-size: 15px;
  line-height: 1.8;
}


/* Service sections */

.dil-ecom-service-section {
  position: relative;
  margin-top: 34px;
  padding: 34px 32px;
  border: 1px solid #dce8ef;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(6, 42, 72, 0.06);
  scroll-margin-top: 155px;
}

.dil-ecom-service-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--sky, #12aee5);
  border-radius: 5px 0 0 5px;
}

.dil-ecom-heading-icon {
  width: 55px;
  height: 55px;
  float: left;
  display: grid;
  place-items: center;
  margin-right: 17px;
  color: #ffffff;
  background: var(--navy, #082a48);
  border-radius: 4px;
  font-size: 21px;
}

.dil-ecom-heading-text {
  min-height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 19px;
}

.dil-ecom-heading-text span {
  color: var(--sky-dark, #078ec8);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.dil-ecom-heading-text h2 {
  margin: 3px 0 0;
  color: var(--navy, #082a48);
  font-size: 23px;
  line-height: 1.3;
}

.dil-ecom-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 23px;
}

.dil-ecom-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #334f66;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.dil-ecom-check-item i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: #ffffff;
  background: var(--sky, #12aee5);
  border-radius: 50%;
  font-size: 10px;
}


/* Why choose us */

.dil-ecom-why-section {
  margin-top: 65px;
  scroll-margin-top: 155px;
}

.dil-ecom-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.dil-ecom-benefit-card {
  position: relative;
  min-height: 230px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #dce8ef;
  border-radius: 5px;
  background: #f7fbfd;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.dil-ecom-benefit-card:hover {
  transform: translateY(-6px);
  border-color: var(--sky, #12aee5);
  box-shadow: 0 18px 45px rgba(6, 42, 72, 0.1);
}

.dil-ecom-benefit-card > strong {
  position: absolute;
  top: -18px;
  right: 12px;
  color: rgba(18, 174, 229, 0.1);
  font-size: 88px;
  line-height: 1;
}

.dil-ecom-benefit-card > i {
  position: relative;
  z-index: 2;
  margin-bottom: 21px;
  color: var(--sky-dark, #078ec8);
  font-size: 31px;
}

.dil-ecom-benefit-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 11px;
  color: var(--navy, #082a48);
  font-size: 19px;
}

.dil-ecom-benefit-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #647789;
  font-size: 13px;
  line-height: 1.7;
}


/* CTA */

.dil-ecom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  margin-top: 55px;
  padding: 45px;
  overflow: hidden;
  position: relative;
  color: #ffffff;
  border-radius: 5px;
  background:
    linear-gradient(120deg, #082a48 0%, #074a70 70%, #078ec8 100%);
}

.dil-ecom-cta::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -100px;
  bottom: -130px;
  border: 35px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.dil-ecom-cta-content {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

.dil-ecom-cta-content > span {
  display: block;
  margin-bottom: 9px;
  color: var(--sky, #12aee5);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.dil-ecom-cta h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.18;
}

.dil-ecom-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.7;
}

.dil-ecom-cta-button {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-height: 53px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 23px;
  color: var(--navy, #082a48);
  background: #ffffff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.dil-ecom-cta-button:hover {
  color: var(--navy, #082a48);
  transform: translateY(-3px);
}


/* Sidebar */

.dil-ecom-sidebar {
  position: sticky;
  top: calc(var(--header-height, 124px) + 25px);
}

.dil-ecom-sidebar-card {
  overflow: hidden;
  border: 1px solid #dce8ef;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 15px 45px rgba(6, 42, 72, 0.08);
}

.dil-ecom-sidebar-title {
  padding: 26px 24px;
  background: var(--navy, #082a48);
}

.dil-ecom-sidebar-title span {
  display: block;
  margin-bottom: 5px;
  color: var(--sky, #12aee5);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.dil-ecom-sidebar-title h3 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
}

.dil-ecom-sidebar-card nav {
  padding: 10px 18px 18px;
}

.dil-ecom-sidebar-card nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 8px;
  color: #29465e;
  border-bottom: 1px solid #e4edf2;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition:
    color 0.22s ease,
    padding-left 0.22s ease;
}

.dil-ecom-sidebar-card nav a:last-child {
  border-bottom: 0;
}

.dil-ecom-sidebar-card nav a i {
  color: var(--sky, #12aee5);
  font-size: 10px;
}

.dil-ecom-sidebar-card nav a:hover {
  padding-left: 14px;
  color: var(--sky-dark, #078ec8);
}

.dil-ecom-help-card {
  margin-top: 25px;
  padding: 32px 26px;
  color: #ffffff;
  border-radius: 5px;
  background:
    linear-gradient(rgba(8, 42, 72, 0.93), rgba(8, 42, 72, 0.93)),
    url("../images/service03.jpg") center / cover;
}

.dil-ecom-help-icon {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: #ffffff;
  background: var(--sky, #12aee5);
  border-radius: 4px;
  font-size: 23px;
}

.dil-ecom-help-card > span {
  color: var(--sky, #12aee5);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.dil-ecom-help-card h3 {
  margin: 8px 0 12px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.25;
}

.dil-ecom-help-card p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.7;
}

.dil-ecom-help-card > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.dil-ecom-help-card > a i {
  color: var(--sky, #12aee5);
}


/* Floating actions */

.dil-ecom-floating-actions {
  position: fixed;
  z-index: 70;
  right: 18px;
  bottom: 85px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dil-ecom-floating-actions a {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--sky, #12aee5);
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(6, 42, 72, 0.2);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.dil-ecom-floating-actions a:hover {
  color: #ffffff;
  background: var(--navy, #082a48);
  transform: translateX(-4px);
}


/* Responsive */

@media (max-width: 1024px) {
  .dil-ecom-layout {
    grid-template-columns: minmax(0, 1fr) 275px;
    gap: 32px;
  }

  .dil-ecom-feature-image {
    height: 400px;
  }

  .dil-ecom-check-grid,
  .dil-ecom-benefits {
    grid-template-columns: 1fr;
  }

  .dil-ecom-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {
  .dil-ecom-hero {
    min-height: 390px;
  }

  .dil-ecom-main {
    padding: 65px 0 80px;
  }

  .dil-ecom-layout {
    grid-template-columns: 1fr;
  }

  .dil-ecom-sidebar {
    position: static;
  }

  .dil-ecom-sidebar-card,
  .dil-ecom-help-card {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .dil-ecom-container {
    width: min(100% - 28px, 1180px);
  }

  .dil-ecom-hero-content {
    padding-block: 60px;
  }

  .dil-ecom-hero h1 {
    font-size: 43px;
    letter-spacing: -1.5px;
  }

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

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

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

  .dil-ecom-feature-image {
    height: 310px;
    margin-bottom: 38px;
  }

  .dil-ecom-image-badge {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
  }

  .dil-ecom-service-section {
    padding: 27px 21px;
  }

  .dil-ecom-heading-icon {
    float: none;
    margin: 0 0 15px;
  }

  .dil-ecom-check-grid {
    grid-template-columns: 1fr;
  }

  .dil-ecom-benefits {
    grid-template-columns: 1fr;
  }

  .dil-ecom-cta {
    padding: 34px 25px;
  }

  .dil-ecom-cta-button {
    width: 100%;
    justify-content: center;
  }

  .dil-ecom-floating-actions {
    right: 12px;
    bottom: 20px;
  }

  .dil-ecom-floating-actions a {
    width: 45px;
    height: 45px;
  }
}


/* ==================================================
   HOME PAGE FLOATING WHATSAPP + BACK TO TOP
================================================== */

.dil-home-floating-buttons {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}


/* Back to top button */

.dil-home-backtop {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #ffffff;
  background: var(--navy, #082a48);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(8, 42, 72, 0.25);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(15px) scale(0.85);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background-color 0.3s ease;
}

.dil-home-backtop.dil-home-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.dil-home-backtop:hover {
  background: var(--sky, #12aee5);
  transform: translateY(-4px);
}

.dil-home-backtop svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* WhatsApp button */

.dil-home-whatsapp {
  position: relative;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #25d366;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow:
    0 8px 25px rgba(37, 211, 102, 0.4),
    0 0 0 0 rgba(37, 211, 102, 0.6);
  text-decoration: none;

  animation: dil-home-whatsapp-glow 2s infinite;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}

.dil-home-whatsapp:hover {
  color: #ffffff;
  background: #1ebd5a;
  transform: translateY(-4px) scale(1.05);
  animation-play-state: paused;
}

.dil-home-whatsapp svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
}


/* WhatsApp shine effect */

.dil-home-whatsapp::before {
  content: "";
  position: absolute;
  inset: -3px;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.dil-home-whatsapp::after {
  content: "";
  position: absolute;
  top: -15%;
  left: -70%;
  width: 30%;
  height: 130%;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(25deg);
  filter: blur(2px);
  animation: dil-home-whatsapp-shine 3s infinite;
  pointer-events: none;
}


/* WhatsApp tooltip */

.dil-home-whatsapp-tooltip {
  position: absolute;
  top: 50%;
  right: calc(100% + 13px);
  min-width: 112px;
  padding: 9px 12px;
  color: #ffffff;
  background: var(--navy, #082a48);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  transform: translate(8px, -50%);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

.dil-home-whatsapp-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--navy, #082a48);
}

.dil-home-whatsapp:hover .dil-home-whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}


/* Animations */

@keyframes dil-home-whatsapp-glow {
  0% {
    box-shadow:
      0 8px 25px rgba(37, 211, 102, 0.4),
      0 0 0 0 rgba(37, 211, 102, 0.55);
  }

  70% {
    box-shadow:
      0 8px 25px rgba(37, 211, 102, 0.4),
      0 0 0 14px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow:
      0 8px 25px rgba(37, 211, 102, 0.4),
      0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes dil-home-whatsapp-shine {
  0%,
  55% {
    left: -70%;
  }

  80%,
  100% {
    left: 130%;
  }
}


/* Mobile */

@media (max-width: 600px) {
  .dil-home-floating-buttons {
    right: 14px;
    bottom: 17px;
    gap: 10px;
  }

  .dil-home-whatsapp {
    width: 55px;
    height: 55px;
  }

  .dil-home-whatsapp svg {
    width: 28px;
    height: 28px;
  }

  .dil-home-backtop {
    width: 43px;
    height: 43px;
  }

  .dil-home-backtop svg {
    width: 20px;
    height: 20px;
  }

  .dil-home-whatsapp-tooltip {
    display: none;
  }
}


/* Stop animation for users who disable motion */

@media (prefers-reduced-motion: reduce) {
  .dil-home-whatsapp,
  .dil-home-whatsapp::after {
    animation: none;
  }

  .dil-home-backtop {
    transition: none;
  }
}

/* ===============================================
   COMMON CONTACT FORM VALIDATION AND ALERTS
=============================================== */

.dil-contact-full-field {
  grid-column: 1 / -1;
}

.dil-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 20px;
  padding: 14px 17px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.dil-form-alert-success {
  color: #116237;
  background: #e9fff3;
  border: 1px solid #9de1bb;
}

.dil-form-alert-success i {
  margin-top: 3px;
  color: #16a05d;
  font-size: 16px;
}

.dil-field-error {
  display: block;
  margin-top: 7px;
  color: #e53935;
  font-size: 11px;
  font-weight: 700;
}

.quote-form input.is-invalid,
.quote-form textarea.is-invalid,
.dil-contact-form input.is-invalid,
.dil-contact-form textarea.is-invalid {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

.quote-form input:focus,
.quote-form textarea:focus,
.dil-contact-form input:focus,
.dil-contact-form textarea:focus {
  border-color: var(--sky, #12aee5);
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 174, 229, 0.12);
}

@media (max-width: 700px) {
  .dil-contact-full-field {
    grid-column: auto;
  }
}