:root {
      --navy: #0b1b2b;
      --navy2: #122b43;
      --green: #176b3a;
      --green2: #25804a;
      --yellow: #f5b928;
      --paper: #f3f5f7;
      --ink: #142235;
      --muted: #64748b;
      --line: #dfe5eb;
      --white: #fff;
      --max: 1200px
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 92px
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "DM Sans", Arial, sans-serif;
      line-height: 1.6
    }

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

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

    .container {
      width: min(var(--max), 92%);
      margin-inline: auto
    }

    .topline {
      background: #06111e;
      color: #d5deea;
      font-size: 11px;
      letter-spacing: .3px
    }

    .topline-inner {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 0;
      flex-wrap: wrap
    }

    .topline strong {
      color: var(--yellow)
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: #fff;
      border-bottom: 1px solid #e8edf1
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 13px 0
    }

    .logo {
      width: 300px;
      max-width: 42vw
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 23px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .35px
    }

    .nav-links a:not(.button):hover {
      color: var(--green)
    }

    .button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 9px;
      padding: 13px 18px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .35px;
      text-transform: uppercase;
      border: 1px solid transparent;
      transition: transform .2s, background .2s
    }

    .button:hover {
      transform: translateY(-2px)
    }

    .button-yellow {
      background: var(--yellow);
      color: var(--navy)
    }

    .button-green {
      background: var(--green);
      color: #fff
    }

    .button-dark {
      border-color: #ffffff70;
      color: #fff;
      background: #ffffff0a
    }

    .button-light {
      background: #fff;
      color: var(--navy);
      border-color: var(--line)
    }

    .menu-toggle {
      display: none;
      border: 1px solid var(--line);
      background: #fff;
      padding: 9px 12px;
      border-radius: 4px;
      color: var(--navy);
      font-size: 20px
    }

    .hero {
      background: var(--navy);
      color: #fff;
      position: relative;
      isolation: isolate;
      overflow: hidden
    }

    .hero:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: url('https://images.unsplash.com/photo-1581092921461-eab62e97a780?auto=format&fit=crop&w=2200&q=88') center 45%/cover no-repeat;
      opacity: .75
    }

    .hero:after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, rgba(6, 17, 30, .98) 0%, rgba(6, 17, 30, .9) 38%, rgba(6, 17, 30, .52) 68%, rgba(6, 17, 30, .28) 100%)
    }

    .hero-inner {
      min-height: 610px;
      display: flex;
      align-items: center;
      padding: 76px 0 80px
    }

    .hero-content {
      max-width: 760px
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--yellow);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2.2px;
      text-transform: uppercase
    }

    .eyebrow:before {
      content: "";
      width: 30px;
      height: 3px;
      background: var(--yellow)
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0
    }

    .hero h1 {
      font-family: "Barlow Condensed", sans-serif;
      font-size: clamp(54px, 8vw, 100px);
      font-weight: 900;
      text-transform: uppercase;
      line-height: .91;
      letter-spacing: -.8px;
      margin: 22px 0
    }

    .hero h1 span {
      color: var(--yellow)
    }

    .hero-copy {
      max-width: 610px;
      color: #d9e2ed;
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 27px
    }

    .hero-actions {
      display: flex;
      gap: 11px;
      flex-wrap: wrap
    }

    .hero-meta {
      display: flex;
      gap: 26px;
      flex-wrap: wrap;
      margin-top: 39px;
      padding-top: 22px;
      border-top: 1px solid #ffffff2e
    }

    .hero-meta div {
      font-size: 11px;
      font-weight: 700;
      color: #e0e8f0;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .hero-meta b {
      display: block;
      color: var(--yellow);
      font-size: 10px;
      letter-spacing: 1.2px;
      margin-bottom: 4px
    }

    .trustbar {
      background: var(--yellow);
      color: var(--navy)
    }

    .trust-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr)
    }

    .trust-item {
      padding: 18px 12px;
      border-right: 1px solid #0b1b2b25;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .4px;
      text-transform: uppercase
    }

    .trust-item:last-child {
      border: 0
    }

    .trust-icon {
      font-size: 22px
    }

    .section {
      padding: 94px 0
    }

    .section-soft {
      background: var(--paper)
    }

    .section-head {
      max-width: 720px;
      margin-bottom: 42px
    }

    .section-head.center {
      text-align: center;
      margin-inline: auto
    }

    .section-head.center .eyebrow {
      justify-content: center
    }

    .section-head h2,
    .about-copy h2,
    .service-copy h2,
    .contact-copy h2 {
      font-family: "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: -.4px;
      color: var(--navy);
      margin: 14px 0
    }

    .section-head p {
      color: var(--muted);
      font-size: 14px;
      max-width: 630px;
      margin-bottom: 0
    }

    .section-head.center p {
      margin-inline: auto
    }

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

    .about-visual {
      position: relative;
      padding: 0 24px 24px 0
    }

    .about-visual img {
      width: 100%;
      /* height: 480px; */
      object-fit: cover
    }

    .about-visual:after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 55%;
      height: 48%;
      border-right: 8px solid var(--yellow);
      border-bottom: 8px solid var(--yellow);
      pointer-events: none
    }

    .visual-tag {
      position: absolute;
      left: -12px;
      bottom: 44px;
      background: var(--green);
      color: #fff;
      padding: 17px 22px;
      max-width: 240px;
      z-index: 2;
      font-size: 12px;
      font-weight: 700
    }

    .visual-tag strong {
      display: block;
      font-family: "Barlow Condensed";
      font-size: 28px;
      text-transform: uppercase
    }

    .about-copy p,
    .service-copy p {
      color: var(--muted);
      font-size: 14px
    }

    .check-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 25px 0 30px
    }

    .check-list span {
      font-size: 12px;
      font-weight: 800;
      color: var(--navy)
    }

    .check-list span:before {
      content: "✓";
      display: inline-grid;
      place-items: center;
      width: 20px;
      height: 20px;
      background: #e3f0e7;
      color: var(--green);
      border-radius: 50%;
      margin-right: 9px
    }

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

    .equipment-card {
      background: #fff;
      border: 1px solid #e1e6eb;
      transition: transform .22s, box-shadow .22s;
      min-width: 0
    }

    .equipment-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px #0b1b2b12
    }

    .equipment-photo {
      height: 174px;
      overflow: hidden;
      position: relative;
      background: #dbe2e8
    }

    .equipment-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s
    }

    .equipment-card:hover .equipment-photo img {
      transform: scale(1.04)
    }

    .equipment-photo:after {
      content: "";
      position: absolute;
      inset: 45% 0 0;
      background: linear-gradient(transparent, #0b1b2b65)
    }

    .equipment-number {
      position: absolute;
      z-index: 1;
      top: 12px;
      left: 12px;
      background: var(--yellow);
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 900
    }

    .equipment-info {
      padding: 17px 17px 19px
    }

    .equipment-info h3 {
      font-size: 14px;
      line-height: 1.3;
      color: var(--navy);
      margin: 0 0 9px
    }

    .equipment-info a {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .5px;
      color: var(--green);
      text-transform: uppercase
    }

    .equipment-info a span {
      margin-left: 5px
    }

    .more-items {
      margin-top: 27px;
      padding: 18px 20px;
      background: #fff;
      border-left: 4px solid var(--green);
      font-size: 12px;
      color: var(--muted)
    }

    .more-items strong {
      color: var(--navy)
    }

    .services-band {
      background: var(--navy);
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .services-band:after {
      content: "";
      position: absolute;
      right: -120px;
      top: -160px;
      width: 430px;
      height: 430px;
      border: 65px solid #ffffff08;
      border-radius: 50%
    }

    .services-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 64px;
      align-items: center;
      position: relative;
      z-index: 1
    }

    .service-copy h2 {
      color: #fff
    }

    .service-copy>p {
      color: #c4d0dd
    }

    .service-rows {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 25px 0 29px
    }

    .service-row {
      border: 1px solid #ffffff26;
      padding: 15px;
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 12px;
      font-weight: 800
    }

    .service-row span {
      color: var(--yellow);
      font-size: 19px
    }

    .service-image img {
      width: 100%;
      height: 440px;
      object-fit: cover
    }

    .service-image {
      position: relative
    }

    .service-image:after {
      content: "SITE DISMANTLING • LOADING • TRANSPORT";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 15px;
      background: #0b1b2be8;
      color: var(--yellow);
      font-size: 10px;
      letter-spacing: 1.2px;
      font-weight: 900
    }

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

    .process-card {
      border-top: 3px solid var(--yellow);
      background: #fff;
      padding: 26px 24px
    }

    .process-card .step {
      font-family: "Barlow Condensed";
      font-size: 48px;
      font-weight: 900;
      color: #c8d1d9;
      line-height: 1
    }

    .process-card h3 {
      font-size: 16px;
      color: var(--navy);
      margin: 13px 0 8px
    }

    .process-card p {
      font-size: 12px;
      color: var(--muted);
      margin: 0
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr 1fr;
      grid-template-rows: 210px 210px;
      gap: 12px
    }

    .gallery-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .gallery-grid .gallery-large {
      grid-row: span 2
    }

    .gallery-cell {
      position: relative;
      overflow: hidden;
      background: #dce2e8
    }

    .gallery-cell:after {
      content: "";
      position: absolute;
      inset: 50% 0 0;
      background: linear-gradient(transparent, #0b1b2b88)
    }

    .gallery-label {
      position: absolute;
      z-index: 1;
      bottom: 13px;
      left: 15px;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .4px;
      text-transform: uppercase
    }

    .cta {
      background: var(--green);
      color: #fff;
      padding: 42px 0
    }

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

    .cta h2 {
      font-family: "Barlow Condensed";
      font-size: clamp(34px, 4vw, 48px);
      line-height: 1;
      text-transform: uppercase;
      margin: 8px 0
    }

    .cta p {
      margin: 0;
      color: #e1f0e6;
      font-size: 13px
    }

    .cta-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      flex-shrink: 0
    }

    .contact-section {
      background: #eef1f4
    }

    .contact-grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 26px
    }

    .contact-panel {
      background: var(--navy);
      color: #fff;
      padding: 34px;
      position: relative;
      overflow: hidden
    }

    .contact-panel:after {
      content: "AT";
      position: absolute;
      right: -8px;
      bottom: -58px;
      font-family: "Barlow Condensed";
      font-weight: 900;
      font-size: 200px;
      color: #ffffff08;
      line-height: 1
    }

    .contact-panel h2 {
      font-family: "Barlow Condensed";
      font-size: 42px;
      line-height: 1;
      text-transform: uppercase;
      margin: 15px 0
    }

    .contact-panel p {
      font-size: 13px;
      color: #c7d3df;
      position: relative;
      z-index: 1
    }

    .contact-line {
      position: relative;
      z-index: 1;
      border-top: 1px solid #ffffff24;
      padding: 14px 0;
      font-size: 13px
    }

    .contact-line strong {
      display: block;
      color: var(--yellow);
      font-size: 10px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 4px
    }

    .contact-line a:hover {
      color: var(--yellow)
    }

    .form-panel {
      background: #fff;
      padding: 32px;
      border: 1px solid #dfe5eb
    }

    .form-panel h3 {
      font-family: "Barlow Condensed";
      font-size: 30px;
      text-transform: uppercase;
      color: var(--navy);
      margin: 0 0 5px
    }

    .form-intro {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 23px
    }

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

    .field {
      margin-bottom: 14px
    }

    .field label {
      display: block;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: #39485a;
      margin-bottom: 6px
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid #d8e0e8;
      border-radius: 2px;
      padding: 12px 13px;
      background: #fff;
      font: inherit;
      font-size: 12px;
      color: var(--ink)
    }

    .field textarea {
      min-height: 105px;
      resize: vertical
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: 2px solid #176b3a2c;
      border-color: var(--green)
    }

    .form-note {
      font-size: 13px;
      color: var(--muted);
      margin: 11px 0 0
    }

    .honeypot {
      position: absolute;
      left: -9999px;
      height: 0;
      overflow: hidden
    }

    .footer {
      background: #06111e;
      color: #bdc8d4;
      padding: 31px 0 20px
    }

    .footer-top {
      display: flex;
      justify-content: space-between;
      gap: 25px;
      align-items: center;
      padding-bottom: 22px;
      border-bottom: 1px solid #ffffff1c
    }

    .footer-logo {
      width: 300px;
      /* filter: brightness(0) invert(1) */
    }

    .footer-links {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      font-size: 13px;
      font-weight: 700
    }

    .footer-links a:hover {
      color: var(--yellow)
    }

    .footer-bottom {
      /* display: flex; */
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding-top: 16px;
      font-size: 13px;
      color: #7f8d9d
    }

    .float-wa {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 40;
      background: #1fae5a;
      color: #fff;
      border-radius: 40px;
      padding: 13px 17px;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 7px 24px #0003
    }

    .float-wa span {
      font-size: 17px;
      margin-right: 6px
    }

    @media(max-width:980px) {
      .nav-links {
        gap: 13px
      }

      .nav-links a:not(.button) {
        display: none
      }

      .equipment-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      .about-grid {
        gap: 40px
      }

      .services-grid {
        gap: 35px
      }

      .hero-inner {
        min-height: 550px
      }
    }

    @media(max-width:700px) {
      .topline-inner {
        justify-content: center;
        text-align: center
      }

      .nav {
        padding: 10px 0
      }

      .logo {
        width: 240px;
        max-width: 68vw
      }

      .menu-toggle {
        display: block
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 18px 4%;
        border-top: 1px solid var(--line);
        box-shadow: 0 12px 18px #0b1b2b12;
        align-items: stretch;
        flex-direction: column;
        gap: 0
      }

      .nav-links.open {
        display: flex
      }

      .nav-links a:not(.button) {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid #eef1f4
      }

      .nav-links .button {
        margin-top: 12px
      }

      .hero-inner {
        min-height: 590px;
        padding: 62px 0
      }

      .hero:after {
        background: linear-gradient(90deg, rgba(6, 17, 30, .96), rgba(6, 17, 30, .7))
      }

      .hero h1 {
        font-size: clamp(52px, 14vw, 76px)
      }

      .hero-copy {
        font-size: 14px
      }

      .hero-meta {
        gap: 15px
      }

      .trust-inner {
        grid-template-columns: 1fr 1fr
      }

      .trust-item {
        border-bottom: 1px solid #0b1b2b25;
        font-size: 9px;
        padding: 13px 6px
      }

      .trust-item:nth-child(2) {
        border-right: 0
      }

      .trust-item:nth-child(3),
      .trust-item:nth-child(4) {
        border-bottom: 0
      }

      .section {
        padding: 65px 0
      }

      .about-grid,
      .services-grid,
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .about-visual img {
        /* height: 330px */
      }

      .visual-tag {
        left: 0;
        bottom: 32px
      }

      .equipment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
      }

      .equipment-photo {
        height: 132px
      }

      .equipment-info {
        padding: 13px
      }

      .equipment-info h3 {
        font-size: 12px
      }

      .services-grid {
        gap: 28px
      }

      .service-image img {
        height: 300px
      }

      .service-rows {
        gap: 8px
      }

      .service-row {
        padding: 12px;
        font-size: 11px
      }

      .process-grid {
        grid-template-columns: 1fr;
        gap: 12px
      }

      .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 210px 150px 150px
      }

      .gallery-grid .gallery-large {
        grid-row: span 2
      }

      .gallery-grid .gallery-last {
        grid-column: span 2
      }

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

      .cta-actions {
        width: 100%
      }

      .contact-panel,
      .form-panel {
        padding: 24px
      }

      .form-grid {
        grid-template-columns: 1fr;
        gap: 0
      }

      .footer-top {
        align-items: flex-start;
        flex-direction: column
      }

      .footer-logo {
        width: 300px
      }

      .float-wa {
        right: 12px;
        bottom: 12px;
        padding: 11px 14px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *:before,
      *:after {
        transition: none !important
      }
    }

    /* Hero slider: replaces the single hero background; other sections remain unchanged */
    .hero {
      background: var(--navy);
      position: relative;
      isolation: isolate;
      overflow: hidden
    }

    .hero:before {
      content: none
    }

    .hero:after {
      content: none
    }

    .hero-slides {
      position: absolute;
      inset: 0;
      z-index: -2
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity .7s ease, visibility .7s ease;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat
    }

    .hero-slide.active {
      opacity: 1;
      visibility: visible
    }

    .hero-shade {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, rgba(6, 17, 30, .98) 0%, rgba(6, 17, 30, .9) 38%, rgba(6, 17, 30, .52) 68%, rgba(6, 17, 30, .28) 100%)
    }

    .hero-slide[data-bg="1"] {
      background-image: url('../../assets/banner.webp')
    }

    .hero-slide[data-bg="2"] {
      background-image: url('../../assets/banner2.webp')
    }

    .hero-slide[data-bg="3"] {
      background-image: url('../../assets/banner3.webp')
    }

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

    .hero-slider-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 26px
    }

    .hero-slider-arrow {
      width: 39px;
      height: 39px;
      border: 1px solid #ffffff70;
      background: #ffffff0a;
      color: #fff;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer
    }

    .hero-slider-arrow:hover {
      background: var(--yellow);
      color: var(--navy);
      border-color: var(--yellow)
    }

    .hero-dots {
      display: flex;
      gap: 7px;
      align-items: center;
      margin-left: 5px
    }

    .hero-dot {
      height: 4px;
      width: 22px;
      border: 0;
      background: #ffffff65;
      padding: 0;
      cursor: pointer;
      transition: width .2s, background .2s
    }

    .hero-dot.active {
      width: 42px;
      background: var(--yellow)
    }

    .hero-slide-count {
      font-size: 10px;
      letter-spacing: 1.2px;
      color: #d5deea;
      font-weight: 800;
      margin-left: 4px
    }

    @media(prefers-reduced-motion:reduce) {
      .hero-slide {
        transition: none
      }
    }



    .whatsappicon {
      /* width: 50px !important; */
      /* height: 50px !important; */
      position: fixed !important;
      left: 20px !important;
      bottom: 20px !important;
      z-index: 99999 !important;
    }

    .callicon {
      /* width: 50px !important; */
      /* height: 50px !important; */
      position: fixed !important;
      right: 20px !important;
      bottom: 20px !important;
      z-index: 99999 !important;
    }

    
.footer {
  background: #071a16;
  color: #d5e0dc;
  padding: 65px 0 0;
  font-family: inherit;
  border-top: 4px solid #f5b928;
}

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

.footer-main {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 1.3fr 1.25fr;
  gap: 38px;
  padding-bottom: 45px;
}

.footer-col h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 22px;
  padding-bottom: 12px;
  position: relative;
}

.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: #f5b928;
}

.footer-logo {
  width: 300px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 18px;
}

.footer-about p {
  color: #b7c7c0;
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 22px;
}

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

.footer-list li {
  margin-bottom: 12px;
}

.footer-list a,
.footer-contact a {
  color: #cbd8d2;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.25s ease;
  overflow-wrap: anywhere;
}

.footer-list a::before {
  content: "›";
  color: #f5b928;
  font-size: 18px;
  margin-right: 9px;
}

.footer-list a:hover,
.footer-contact a:hover,
.footer-credit a:hover {
  color: #f5b928;
}

.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #176b3a;
  color: #ffffff;
  border: 1px solid #25804a;
  padding: 12px 17px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.25s ease;
}

.footer-whatsapp:hover {
  background: #25804a;
  color: #ffffff;
}

.footer-arrow {
  color: #f5b928;
  font-size: 19px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.footer-icon {
  color: #f5b928;
  font-size: 21px;
  min-width: 23px;
  line-height: 1.3;
}

.footer-contact-item strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  margin-bottom: 6px;
}

.footer-contact-item a {
  display: block;
  line-height: 1.8;
  margin-bottom: 2px;
}

.footer-contact-item p {
  color: #cbd8d2;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding: 22px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.footer-bottom p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #aebeb7;
}

.footer-credit a {
  color: #f5b928;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.25s ease;
}

/* Tablet */
@media (max-width: 992px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px 28px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .footer {
    padding-top: 42px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 30px;
  }

  .footer-logo {
    width: 190px;
  }

  .footer-col h3 {
    font-size: 17px;
    margin-bottom: 18px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 0;
  }

  .footer-bottom p {
    font-size: 12px;
  }
}



 .banner-section {
        padding: 35px 0;
        background: #f3f5f7;
      }

      .banner-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        border: 1px solid rgba(11, 27, 43, 0.12);
        box-shadow: 0 12px 35px rgba(11, 27, 43, 0.12);
        background: #fff;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .promo-banner {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
      }

      /* Default: Laptop & Tablet */
      .desktop-banner {
        display: block;
      }

      .mobile-banner {
        display: none;
      }

      .banner-wrapper:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 42px rgba(11, 27, 43, 0.17);
      }

      /* Mobile: 768px and below */
      @media (max-width: 768px) {
        .banner-section {
          padding: 22px 0;
        }

        .banner-wrapper {
          border-radius: 10px;
        }

        .desktop-banner {
          display: none;
        }

        .mobile-banner {
          display: block;
        }

        .banner-wrapper:hover {
          transform: none;
        }
      }





/* ===== ARIF TRADERS REVIEWS SLIDER ===== */

.ar-reviews,
.ar-reviews * {
  box-sizing: border-box;
}

.ar-reviews {
  padding: 85px 0;
  background: #f3f5f7;
  overflow: hidden;
  font-family: "DM Sans", Arial, sans-serif;
}

.ar-reviews-container {
  width: 92%;
  max-width: 1200px;
  margin: auto;
}

.ar-reviews-heading {
  text-align: center;
  max-width: 690px;
  margin: 0 auto 42px;
}

.ar-reviews-heading > span {
  color: #176b3a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.ar-reviews-heading h2 {
    font-family: "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: -.4px;
      color: var(--navy);
      margin: 14px 0
}

.ar-heading-line {
  width: 42px;
  height: 3px;
  background: #f5b928;
  margin: 18px auto;
}

.ar-reviews-heading p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

.ar-slider {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.ar-track {
  display: flex;
  align-items: stretch;
  gap: 22px;
  transition: transform 0.55s ease;
  will-change: transform;
}

.ar-card {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 27px 25px 24px;
  background: #fff;
  border: 1px solid #e1e6eb;
  border-bottom: 4px solid #176b3a;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(11, 27, 43, 0.045);
}

.ar-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.ar-quote {
  color: #176b3a;
  font-family: Georgia, serif;
  font-size: 57px;
  font-weight: bold;
  line-height: .8;
}

.ar-stars {
  color: #f5b928;
  font-size: 18px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.ar-card > p {
  color: #536174;
  font-size: 13px;
  line-height: 1.9;
  margin: 0 0 25px;
  flex: 1;
}

.ar-client {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 19px;
  border-top: 1px solid #e8edf1;
}

.ar-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e3f0e7;
  color: #176b3a;
  font-size: 12px;
  font-weight: 900;
}

.ar-client h3 {
  color: #0b1b2b;
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 5px;
}

.ar-client span {
  color: #64748b;
  font-size: 11px;
}

.ar-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 19px;
  margin-top: 30px;
}

.ar-arrow {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid #dfe5eb;
  border-radius: 50%;
  background: #fff;
  color: #0b1b2b;
  font-size: 20px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.ar-arrow:hover {
  background: #176b3a;
  color: #fff;
  border-color: #176b3a;
}

.ar-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.ar-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #c8d1d9;
  cursor: pointer;
}

.ar-dots button.active {
  width: 27px;
  background: #176b3a;
}

/* Tablet */
@media (max-width: 991px) {
  .ar-reviews {
    padding: 65px 0;
  }

  .ar-card {
    flex-basis: calc((100% - 22px) / 2);
    padding: 24px 21px;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .ar-reviews {
    padding: 52px 0;
  }

  .ar-reviews-container {
    width: 90%;
  }

  .ar-reviews-heading {
    margin-bottom: 30px;
  }

  .ar-reviews-heading p {
    font-size: 13px;
  }

  .ar-card {
    flex-basis: 100%;
    padding: 24px 21px;
  }

  .ar-controls {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-track {
    transition: none;
  }
}




/* ===== FAQ SECTION ===== */

.at-faq-section,
.at-faq-section * {
  box-sizing: border-box;
}

.at-faq-section {
  padding: 90px 0;
  background: #ffffff;
}

.at-faq-heading {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.at-faq-label {
  color: #176b3a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.at-faq-heading h2 {
   font-family: "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: -.4px;
      color: var(--navy);
      margin: 14px 0
}

.at-faq-line {
  width: 42px;
  height: 3px;
  background: #f5b928;
  margin: 18px auto;
}

.at-faq-heading p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

/* FAQ list */

.at-faq-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.at-faq-item {
  background: #fff;
  border: 1px solid #dfe5eb;
  border-radius: 5px;
  overflow: hidden;
  transition: border-color .25s ease,
              box-shadow .25s ease;
}

.at-faq-item.active {
  border-color: #176b3a;
  box-shadow: 0 7px 22px rgba(11, 27, 43, .055);
}

.at-faq-question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 23px;
  border: 0;
  background: #fff;
  color: #0b1b2b;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  cursor: pointer;
}

.at-faq-item.active .at-faq-question {
  color: #176b3a;
}

.at-faq-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #f0f4f1;
  color: #176b3a;
  font-size: 21px;
  font-weight: 500;
  transition: .25s ease;
}

.at-faq-item.active .at-faq-icon {
  background: #176b3a;
  color: #fff;
}

/* Animated answer */

.at-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}

.at-faq-item.active .at-faq-answer {
  grid-template-rows: 1fr;
}

.at-faq-answer-inner {
  overflow: hidden;
  padding: 0 23px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.9;
  min-height: 0;
}

.at-faq-item.active .at-faq-answer-inner {
  padding-bottom: 22px;
}

/* Bottom CTA */

.at-faq-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 28px;
  padding: 25px 27px;
  background: #0b1b2b;
  border-left: 4px solid #f5b928;
}

.at-faq-cta h3 {
  color: #fff;
  font-family: "Barlow Condensed", Georgia, serif;
  font-size: 25px;
  text-transform: uppercase;
  margin: 0 0 5px;
}

.at-faq-cta p {
  color: #c4d0dd;
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

.at-faq-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 13px 18px;
  border-radius: 3px;
  background: #f5b928;
  color: #0b1b2b;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease;
}

.at-faq-button:hover {
  background: #fff;
  color: #0b1b2b;
}

/* Tablet */

@media (max-width: 991px) {
  .at-faq-section {
    padding: 70px 0;
  }
}

/* Mobile */

@media (max-width: 575px) {
  .at-faq-section {
    padding: 55px 0;
  }

  .at-faq-heading {
    margin-bottom: 30px;
  }

  .at-faq-heading p {
    font-size: 13px;
  }

  .at-faq-question {
    padding: 17px 14px;
    gap: 12px;
    font-size: 12px;
  }

  .at-faq-icon {
    width: 27px;
    height: 27px;
    font-size: 19px;
  }

  .at-faq-answer-inner {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 12px;
  }

  .at-faq-item.active .at-faq-answer-inner {
    padding-bottom: 17px;
  }

  .at-faq-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px 18px;
    gap: 17px;
  }

  .at-faq-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .at-faq-item,
  .at-faq-icon,
  .at-faq-answer {
    transition: none;
  }
}




/* ===================================
   ALL AC BRANDS WE PURCHASE
=================================== */

.at-brands-section {
    padding: 75px 0;
    background: #f3f5f7;
    font-family: "DM Sans", sans-serif;
}

/* Heading */
.at-brands-heading {
    max-width: 750px;
    margin: 0 auto 40px;
    text-align: center;
}

.at-brands-subtitle {
    display: inline-block;
    color: #176b3a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.at-brands-heading h2 {
  font-family: "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: -.4px;
      color: var(--navy);
      margin: 14px 0
}

.at-brands-heading p {
    font-family: "DM Sans", sans-serif;
    color: #65717c;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

/* Brands Grid */
.at-brands-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}

/* Brand Card */
.at-brand-card {
    background: #ffffff;
    border: 1px solid #e2e7eb;
    border-radius: 8px;
    min-height: 115px;
    padding: 20px 15px;

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

    transition: all 0.3s ease;
}

.at-brand-card:hover {
    transform: translateY(-5px);
    border-color: #25804a;
    box-shadow: 0 12px 30px rgba(11, 27, 43, 0.09);
}

/* Brand Logo */
.at-brand-card img {
    width: 100%;
    max-width: 135px;
    height: 65px;
    object-fit: contain;
    display: block;
}

/* Tablet */
@media (max-width: 991px) {
    .at-brands-section {
        padding: 60px 0;
    }

    .at-brands-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }

    .at-brands-heading h2 {
        font-size: 38px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .at-brands-section {
        padding: 45px 0;
    }

    .at-brands-heading {
        margin-bottom: 30px;
    }

    .at-brands-heading h2 {
        font-size: 32px;
    }

    .at-brands-heading p {
        font-size: 14px;
    }

    .at-brands-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .at-brand-card {
        min-height: 90px;
        padding: 12px;
    }

    .at-brand-card img {
        max-width: 110px;
        height: 55px;
    }
}








/* PREMIUM COUNTER SECTION */

.at-stats-section {
    background: #28694f;
    padding: 72px 0;
    font-family: "DM Sans", sans-serif;
}

.at-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    text-align: center;
}

.at-stat-item {
    padding: 10px 15px;
}

.at-stat-item h2 {
    font-family: "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: -.4px;
      color: white;
      margin: 14px 0
}

.at-stat-item p {
    margin: 0;
    color: #dce9e2;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

/* Tablet */
@media (max-width: 768px) {
    .at-stats-section {
        padding: 48px 0;
    }

    .at-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }

    .at-stat-item h2 {
        font-size: 42px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .at-stats-section {
        padding: 38px 0;
    }

    .at-stats-grid {
        row-gap: 26px;
    }

    .at-stat-item {
        padding: 5px;
    }

    .at-stat-item h2 {
        font-size: 32px;
        letter-spacing: -0.3px;
    }

    .at-stat-item p {
        font-size: 11px;
    }
}