p,
h1,
h2,
h3,
h4,
h5,
a,
span,
div,
section,
header,
nav,
menu,
button,
footer,
ul,
ol,
li {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: var(--font-roboto-condensed);
  letter-spacing: normal;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #fff;
  /* Dark backdrop—swap with your brand color */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.page_spinner {
  width: 70px;
  height: auto;
  aspect-ratio: 1/1;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-bottom-color: #c9c9c9;
  border-top-color: var(--primary-color-one);
  border-left-color: var(--primary-color-three);
  border-right-color: var(--primary-color-two);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.container-xxl {
  max-width: 1325px !important;
}

img {
  max-width: 100%;
  transform: translateZ(0);
}

@font-face {
  font-family: Roboto-Condensed;
  src: url(../fonts/RobotoCondensed-VariableFont_wght.ttf);
}

@font-face {
  font-family: Roboto-Regular;
  src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family: Sarabun-Regular;
  src: url(../fonts/Sarabun-Bold.ttf);
}

@font-face {
  font-family: Sarabun-bolder;
  src: url(../fonts/Sarabun-ExtraBold.ttf);
}

/*----font awesome -------*/
@import url("../fonts/font-awesome/css/font-awesome.min.css");
/*** 
====================================================================
====================================================================
***/
body,
#main_web{
  overflow-x: hidden !important;
  position: relative;
}

/* Scroll Animations */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}
.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.reveal-fade.active {
  opacity: 1 !important;
}

:root {
  --accent: #57bcdb;
  --accent-light: #aee9f7;
  --primary-color-one: #f26722;
  --primary-color-two: #2d2c7d;
  --primary-color-three: #ffb22c;
  --dark-orange: #e55a2b;
  --white: #ffffff;
  --gray: #f5f5f5;
  --dark: #0b0e14;
  --glass: #ffffff14;
  --font-sarabun: Sarabun-Regular;
  --font-sarabun-bold: Sarabun-bolder;
  --font-roboto-reg: Roboto-Regular;
  --font-roboto-condensed: Roboto-Condensed;
}

/* =========================HEADER========================== */

header {
  width: 100%;
  position: absolute;
  z-index: 1000;
  padding: 20px 10px;
  top: 10px;
  left: 0;

  &.scrolled {
    padding: 15px !important;
    background-color: #ffff;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0px 0px 5px #ccc;
    position: fixed;
    top: 0;
    left: 0;
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;

    .logo_brand {
      img {
        /* max-width:180px !important; */
        filter: none !important;
      }

      h1 {
        color: var(--primary-color-one) !important;
      }
    }

    
    @media (min-width:1000px) {
      nav {
        ul{
          outline: 1px solid var(--primary-color-one);
          /* background: #f5f3f3ee !important; */
        }
        li{
          a{
            color: #000 !important;
          }
          &.active,
          &:hover{
            a{
              color: var(--primary-color-one) !important;
            }
          }
        }
        
      }
    }
    .menu_btn {
      --line-color: var(--primary-color-two) !important;
    }
  }

  .container-xxl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* column-gap: 20px; */

    .logo_brand {
      width: fit-content;

      img {
        width: 200px;
        max-width: 100%;
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
          hue-rotate(132deg) brightness(104%) contrast(105%);
      }

      a {
        color: #ffff;
        text-decoration: none;
      }
    }

    nav {
      display: flex;
      justify-content: space-between;
      column-gap: 20px;
      align-items: center;
      width: fit-content;

      ul {
        margin: 0px;
        background-color: var(--glass);
        backdrop-filter: 10px;
        border-radius: 99px;
        display: flex;
        column-gap: 32px;
        padding: 12px 40px;
        list-style: none;

        .nav_links {
          position: relative;
          text-transform: uppercase;
          font-weight: 500;
          white-space: nowrap;

          a {
            text-decoration: none;
            color: #ffff;
            transition: all ease 0.3s;
          }

          &::before,
          &::after {
            transition: all ease 0.3s;
            display: block;
            position: absolute;
          }

          &::before {
            content: "";
            width: 5px;
            background-color: var(--primary-color-one);
            aspect-ratio: 1/1;
            border-radius: 50%;
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
          }

          &::after {
            content: "";
            width: 0%;
            height: 3px;
            background-color: var(--primary-color-one);
            border-radius: 4px;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
          }

          &.active {
            &::before {
              opacity: 1;
            }

            &::after {
              width: 100%;
            }
          }

          &:hover {
            &::after {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  50% {
    transform: translateY(0%);
  }

  65% {
    transform: translateY(-4%);
  }

  80% {
    transform: translateY(0%);
  }

  95% {
    transform: translateY(-2%);
  }

  100% {
    transform: translateY(0%);
  }
}

/* =========================HEADER END========================== */
@media (max-width: 1120px) and (min-width: 1001px) {
  header {
    nav ul {
      column-gap: 20px !important;
    }
  }

  a {
    font-size: 14px !important;
  }
}

@media (max-width: 1000px) {
  .menu_btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  header {
    padding: 10px 10px !important;

    .container-xxl {
      justify-content: center !important;

      .get_quote {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        font-size: clamp(13px, 3vw, 14px) !important;
        padding: 7px 45px 7px 17px !important;
      }
    }

    .logo_brand img {
      width: 140px !important;
    }
  }

  body:has(.opennavbar) {
    overflow: hidden;
  }

  #nav_bar {
    box-shadow: 0px 0px 0px 100vw transparent;
    flex-direction: column !important;
    position: fixed;
    z-index: 50;
    left: -300px;
    top: 0;
    width: 300px !important;
    /* min-width: 300px !important; */
    max-width: 90% !important;
    height: 100vh;
    background-color: #fff !important;
    color: #000000 !important;
    transition: all ease 0.3s;

    &.opennavbar {
      left: 0px !important;
      box-shadow: 0px 0px 0px 100vw #00000072 !important;
    }

    &::before {
      content: "";
      display: block;
      width: 60%;
      /* background-color: red; */
      height: 55px !important;
      position: absolute;
      top: 12px;
      left: 80px;
      background-image: url(../img/logo-branding.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    ul {
      flex-direction: column !important;
      align-self: self-start !important;
      margin: 100px 0 40px 0 !important;
      padding: 10px !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 100% !important;

      &::before,
      &::after {
        content: "";
        display: block;
        /* width: 1; */
        position: absolute;
        background-color: #ececec;
      }

      &::before {
        width: 1px;
        height: 75px;
        left: 75px;
        top: 0;
      }

      &::after {
        width: 100%;
        height: 1px;
        top: 75px;
        left: 0;
      }

      .nav_links {
        width: 100%;
        padding: 10px 25px;
        /* border-bottom: 1px solid #ccc; */
        border-radius: 7px;

        /* font-size: ; */
        /* background-color: red; */
        &::before,
        &::after {
          display: none !important;
        }

        &.active {
          background-color: #e6e6e6cc;

          a {
            color: var(--primary-color-one) !important;
          }
        }

        a {
          color: #000000 !important;
          width: 100%;
          display: block !important;
          /* background-color: #2d2c7d !important; */
        }
      }
    }

    .get_quote {
      display: block !important;
      width: 90% !important;
      /* min-width: 40% !important; */
      /* width: 100% !important; */
      background-color: var(--primary-color-one) !important;
      color: #ffff !important;
      align-self: self-start !important;
      margin: 10px auto !important;
      transition: all ease 0.3s !important;

      * {
        transition: all ease 0.3s !important;
      }

      span {
        background-color: #ffff !important;

        i {
          color: var(--primary-color-one) !important;
        }
      }

      &:hover {
        background: #fff !important;
        color: var(--primary-color-one) !important;
        outline: 2px solid rgba(255, 136, 0, 0.533);

        span {
          background: var(--primary-color-one) !important;

          i {
            rotate: 0deg !important;
            color: #ffff !important;
          }
        }
      }
    }
  }
}

@media (max-width: 630px) {
  .get_quote {
    display: none !important;
  }
}
/* ============================================================== */
/* ============================================================== */
.menu_btn {
  display: none;
  visibility: hidden;
  opacity: 0;
  width: 35px;
  z-index: 100;
  aspect-ratio: 1/1;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  border: 0px;
  padding: 0px !important;
  overflow: hidden;
  transition: all ease 0.4s;
  background-color: transparent;
  text-align: left;

  --line-color: #ffff;
  --line-thickness: 2px;

  span {
    display: block;
    width: 100%;
    height: var(--line-thickness);
    background-color: var(--line-color);
    position: relative;
    transition: all ease 0.3s;

    &::before {
      transition: all ease 0.3s;
      content: "";
      width: 100%;
      display: block;
      height: var(--line-thickness);
      background-color: var(--line-color);
    }
  }

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 80%;
    height: var(--line-thickness);
    background-color: var(--line-color);
    transition: all ease 0.4s;
  }

  &::before {
    left: -10%;
    top: 10px;
  }

  &::after {
    left: 30%;
    bottom: 10px;
    transition-delay: 0.2s;
  }

  /* **************HOVER*************** */
  &:hover {
    &::before,
    &::after {
      transform: translateX(-50%);
      left: 50%;
    }
  }
}

/* ---------------------------------------- */
/* TRANSITION TO CROSS ICON */
.menu_btn.opened {
  --line-color: #515151 !important;

  &::before,
  &::after {
    scale: 0.3;
    opacity: 0;
  }

  span {
    /* background-color: #515151; */
    rotate: 45deg;
    transition-delay: 0.4s;

    &::before {
      transition-delay: 0.4s;
      rotate: -90deg;
    }
  }
}

/* ============================================================== */
/* ============================================================== */

.hero-container {
  width: 100%;
  height: 100vh;
  min-height: 500px !important;
  position: relative;
  overflow: hidden;

  .swiper-wrapper {
    height: 100%;
    /* border-radius: 22px; */
    overflow: hidden;
  }

  .hero-slide {
    width: 100%;
    height: 100vh;
    background: var(--dark);
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 6vw;
    color: white;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.363) 70%
      );
    }

    .content {
      position: relative;
      max-width: 650px;
      z-index: 10;
      animation: fadeUp 1s ease forwards;

      h1 {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        line-height: 1.1;
        font-weight: 700;
        margin-bottom: 1rem;
        text-shadow: 0 3px 20px rgba(0, 0, 0, 0.4);
      }

      p {
        font-size: 1.2rem;
        opacity: 0.9;
        max-width: 500px;
      }
    }
  }

  /* Number Pagination */
  .swiper-pagination {
    left: 20px !important;
    /* left: 100%; */
    bottom: 40px !important;
    opacity: 0.8;

    .swiper-pagination-bullet {
      width: 38px;
      height: 38px;
      border-left: 2px solid #fff;
      border-radius: 0px;
      font-size: 15px;
      background: transparent;
      color: #ffff;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1 !important;
      transition: 0.3s;
      padding-left: 20px;

      &:focus,
      &:active,
      &:target {
        outline: 0 !important;
        box-shadow: 0px !important;
      }

      &.swiper-pagination-bullet-active {
        transform: scale(1.2);
        margin-left: 8px;
        border-width: 3px;
        font-size: 30px;
      }
    }
  }
}

@media (max-width: 650px) {
  .hero-container {
    height: 90vh !important;
    min-height: 450px !important;

    .content {
      text-align: center;
      width: 100% !important;
      max-width: 100% !important;

      h1 {
        font-size: clamp(23px, 2vw, 30px) !important;
      }

      p {
        font-size: clamp(17px, 2vw, 20px) !important;
      }
    }

    .btn-group {
      justify-content: center !important;

      a {
        font-size: 15px !important;
      }
    }

    .swiper-pagination {
      left: 0px !important;
      bottom: 15px !important;
      display: flex !important;
      justify-content: center !important;
      column-gap: 10px !important;

      .swiper-pagination-bullet {
        border-left: 0px !important;
        /* padding: 20px !important; */
        font-size: 0px !important;
        border-bottom: 5px solid #ccc !important;
        margin: 0px !important;
      }

      .swiper-pagination-bullet-active {
        transform: scale(1) !important;
        border-bottom: 5px solid var(--primary-color-one) !important;
      }
    }
  }
}

/* Anim ---------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================ */
/* ============================================ */
.theme-btn {
  height: fit-content;
  background-color: #fff;
  padding: 10px 17px;
  padding-right: 55px;
  border-radius: 99px;
  position: relative;
  color: var(--primary-color-one);
  outline: 1px solid var(--primary-color-one);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  transition: all ease 0.3s;

  span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2px;
    height: 90%;
    aspect-ratio: 1/1;
    background-color: var(--primary-color-one);
    display: flex;
    border-radius: 50%;
    transition: all ease 0.3s;

    i {
      transition: all ease 0.3s;
      align-self: center;
      display: block;
      margin: auto;
      color: #fff;
    }
  }

  &:hover {
    background-color: var(--primary-color-one) !important;
    color: #ffff !important;

    span {
      background-color: #fff !important;

      i {
        rotate: -20deg;
        color: var(--primary-color-one) !important;
      }
    }
  }
}

.btn_theme {
  display: block;
  color: #fff;
  border: 0px;
  padding: 10px 24px;
  border-radius: 5px;
  text-decoration: none;
  transition: all ease 0.3s;
  width: fit-content;

  &.one {
    border: 1px solid #fff;

    &:hover {
      color: var(--primary-color-one);
      background-color: #fff;
      text-shadow: 0px 0px 2px var(--primary-color-one);
    }
  }

  &.two {
    background-color: var(--primary-color-one);
    outline: 1px solid var(--primary-color-one);

    i {
      font-weight: 500;
      margin-left: 5px;
    }

    &:not(:disabled):hover {
      color: #f26722;
      background-color: #fff;
      text-shadow: 0px 0px 2px var(--primary-color-one);
    }
    &:disabled{
      opacity: 0.8;
      cursor:not-allowed ;
    }

  }

  &.three {
    background-color: var(--primary-color-two);

    i {
      margin-left: 5px;
    }

    &:hover {
      color: var(--primary-color-two);
      background-color: #fff;
      text-shadow: 0px 0px 2px var(--primary-color-three);
    }
  }
}

footer {
  /* mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
    50%/12px 100.2%; */
  /* background: linear-gradient(#000000, #0f131d); */
  background: #000;
  /* box-shadow: 0px -20px 0px 10px var(--dark-orange); */
  color: #eee;
  padding: 50px 0 0 0;
  font-family: sans-serif;
  .container-xxl {
    /* padding: 0 20px; */
  }
}

.footer-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin: auto;
}

.footer-col p:has(i) {
  display: flex;
  align-items: center;
  column-gap: 10px;
  &:has(~ p) {
    margin-bottom: 10px;
  }
  &:hover {
    i {
      background-color: var(--primary-color-one);
    }
  }
  i {
    transition: all ease 0.3s;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background-color: #151b29;
    aspect-ratio: 1/1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.footer-col a {
  display: block;
  color: #8f8f8f;
  text-decoration: none;
  margin: 6px 0;
}

.footer-col a:hover {
  color: white;
}
.footer-col:first-child{
  a:not(:hover){
    color: #ffff !important;
  }
}
.footer-logo {
  margin-bottom: 10px;
}

.footer-head {
  width: 100%;
  background: none;
  border: none;
  color: #eee;
  text-align: left;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;

  @media (min-width:990px) {
    margin-bottom: 10px;
  }

  i {
    display: none;
    font-size: 13px;
  }
}

.footer-icon {
  transition: all ease 0.2s;
  margin: auto 0;
}

.footer-content {
  padding-bottom: 10px;
}

.copyright_row {
  border-top: 1px solid #cccccc2b;
  /* box-shadow: 0px 0px 1px #ccc inset; */
  background: #000;
  /* border-top: 1px solid #ffffff58; */
  .container-xxl {
    display: flex;
    justify-content: center;
    padding: 20px 20px !important;
  }

  /* background-color: #000000; */
  p {
    font-family: var(--font-roboto-reg);
    margin-bottom: 0px;
    opacity: 0.7;
    font-size: clamp(12px, 2vw, 15px);
    font-weight:300!important;
  }
}

/* MOBILE ACCORDION */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 0px !important;

    .footer-content {
      padding-bottom: 0px !important;
    }

    .footer-col:not(:last-child) {
      border-bottom: 1px solid #ffffff58;
    }
  }

  .footer-head{ padding: 15px 0; display: flex !important; justify-content: space-between;}
  .footer-head i {
    display: block;
  }

  .footer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .footer-col.active .footer-content {
    max-height: 400px;
  }

  .footer-col.active .footer-icon {
    transform: rotate(180deg);
  }
}

/* ============================================================= */
/* STICKY WHATSAPP ICON  */
/* ============================================================= */

/* .wsapp_btn {
  position: fixed;
  z-index: 9999;
  right: 20px !important;
  bottom: 50px !important;
  animation: pulse-animation 2s infinite;
  width: 60px;
  height: auto !important;
  aspect-ratio: 1/1;
  border-radius: 50%;

  img {
    width: 100%;
  }
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 217, 105, 0.281);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(30, 255, 0, 0.051);
  }
} */

/* Back to Top */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--primary-color-one) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
  border: none;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

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

/* Live Chat */

.chat-btn {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 100;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #42eb6a, #08b62b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
  transition: all 0.3s ease;
  animation: chatPulse 2s infinite;
  border: none;
  color: #ffff !important;
  font-size: 28px;
}

@keyframes chatPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(22, 249, 82, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(249, 116, 22, 0);
  }
}

/* ---------------------------------------------------- */
/* CONTENT OF BODY  */
/* ---------------------------------------------------- */
.fa-title {
  display: flex;
  column-gap: 10px;
  font-size: clamp(13px, 2vw, 16px) !important;
  margin-bottom: 10px !important;
  color: #636363 !important;
  &::before {
    content: "";
    display: block;
    width: 15px !important;
    height: 10px;
    /* background-color: #000; */
    border: 2px solid var(--primary-color-three);
    border-left: 0px;
    border-right: 0px;
    margin: auto 0;
    transform: skew(-40deg);
    transition: all ease 0.3s;
  }

  &.style_2 {
    justify-content: center;
    width: 100% !important;
    &::after {
      content: "";
      display: block;
      width: 15px !important;
      height: 10px;
      /* background-color: #000; */
      border: 2px solid var(--primary-color-three);
      border-left: 0px;
      border-right: 0px;
      margin: auto 0;
      transform: skew(40deg);
      transition: all ease 0.3s;
    }
  }
  &:hover {
    /* color: var(--primary-color-three) !important; */
    &::before {
      border-color: var(--primary-color-one) !important;
      transform: skew(40deg);
    }
    &.style_2::after {
      border-color: var(--primary-color-one) !important;
      transform: skew(-40deg);
    }
  }
}
.box-heading {
  font-family: var(--font-sarabun-bold);
  font-weight: bold;
  font-size: clamp(22px, 3vw, 38px) !important;
  line-height: clamp(25px, 3vw, 40px) !important;
  letter-spacing: -1px;
  margin-top: 10px;

  b {
    background: linear-gradient(
      to right,
      var(--primary-color-one),
      var(--primary-color-three)
    );
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.normal-para{
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.7;
  color: #555555 !important;

  a{
    color: var(--primary-color-one);
  }
}
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/* ========= GLOBAL WRAPS ========= */
.content-body-text.section-gaps .about-content {
  margin: 80px 0;
}

/* ---------- Small Text Version ---------- */
.content-body-text.only-text-sm .text-box {
  height: auto !important;
  min-height: auto !important;
}

/* ========= MAIN CONTENT ========= */
.content-body-text {
  .container-xxl {
    padding: 0;
  }

  .about-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px;
    /* overflow-x: hidden !important;
    overflow-y: unset; */

    &.ltr {
      flex-direction: row-reverse;
    }

    /* ===== Text Box ===== */
    .text-box {
      flex: 1;
      max-width: 52%;
      /* min-height: 500px; */
      /* margin: auto 0; */
      padding-right: 30px;

      p {
        margin: 25px 0;
        font-size: 18px;
        line-height: 1.75;
        color: var(--d-gray);
        font-family: var(--font-roboto-reg);

        a {
          color: var(--primary-color-one);
        }
      }
    }

    /* ===== List Box ===== */
    .list-box {
      h4 {
        color: var(--primary-color-one);
      }

      ul {
        list-style: none;
        margin-top: 20px;

        li {
          padding: 7px 0;

          i {
            color: var(--primary-color-one);
            margin-right: 10px;
          }
        }
      }
    }

    /* ===== Image Stack ===== */
    .image-stack {
      width: 90%;
      max-width: 540px;
      height: fit-content !important;
      display: block;
      margin: 40px 0;
      position: relative;
      aspect-ratio: 1/1;

      .img-box {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        border: 10px solid #fff;
        transition: transform 0.4s ease;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        &:hover img {
          transform: scale(1.1);
        }
      }

      /* Big */
      .img-box.big {
        width: 100%;
        aspect-ratio: 1/1;
      }

      /* Small (overlap) */
      .img-box.small {
        width: 42%;
        aspect-ratio: 1.2/1;
        position: absolute;
        bottom: -20px;
      }

      &.rtl {
        padding-left: 80px;

        .img-box.small {
          left: 0;
        }
      }

      &.ltr {
        padding-right: 80px;

        .img-box.small {
          right: 0;
        }
      }
    }
  }
}

/* ========= RESPONSIVE ========= */
@media (max-width: 1000px) {
  .content-body-text .about-content .text-box {
    max-width: 100% !important;
    min-width: 100% !important;
    padding-right: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 600px) {
  .image-stack {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: none !important;
    height: fit-content !important;
    max-height: fit-content !important;
    /* background-color: red !important; */
    /* padding-bottom: 20px !important; */

    .img-box {
      border: 5px solid #ffff !important;
    }

    .img-box.big {
      display: block;
      min-width: 75% !important;
      max-width: 75% !important;
      width: 83% !important;
    }

    .img-box.small {
      width: 50% !important;
      min-width: 50% !important;
      max-width: 50% !important;
      bottom: 20px !important;
    }

    &.rtl {
      padding-left: 0px !important;

      .img-box.big {
        text-align: end;
        margin-left: auto !important;
        margin-right: 0 !important;
      }
    }

    &.ltr {
      padding-right: 0px !important;

      .img-box.big {
        text-align: start;
      }

      .img-box.small {
        right: 0 !important;
      }
    }
  }
}

@media (max-width: 500px) {
  .content-body-text {
    .about-content {
      padding: 15px !important;
    }

    .text-box {
      .box-heading {
        font-size: clamp(28px, 2vw, 30px) !important;
        font-weight: 300 !important;
        /* font-family: var(--font-sarabun) !important; */
        line-height: clamp(28px, 2vw, 30px) !important;
      }

      p.fa-title {
        font-size: 13px !important;
        margin: 10px 0 !important;
      }

      p:not(.fa-title) {
        font-size: 15px !important;
      }
    }
  }
}

.intro-image-container {
  max-width: 550px;
  position: relative;
  /* padding: 10px 40px; */
      padding: 10px clamp(10px, 6vw, 40px);
      @media (max-width:550px) {
        padding-right: 0 !important;
      }

  .intro-main-image {
    width: 100%;
    /* height: 480px; */
    height: auto;
    aspect-ratio: 48/47;

    object-fit: cover;
    border-radius: 0.5rem;
  }

  .intro-secondary-image {
    position: absolute;
    bottom: -40px;
    right: -10px;
    width: 280px;
    height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 6px solid white;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  }

  .intro-stats-box {
    position: absolute;
    bottom: 30px;
    left: -10px;
    background: var(--primary-color-one);
    color: white;
    padding: clamp(15px, 3vw, 1.5rem) clamp(20px, 3.9vw, 2rem);
    border-radius: 0.5rem;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.3);
    text-align: center;
    .stat-num {
      font-weight: 800;
      /* color: var(--primary-color-one); */
      line-height: 1;
      font-size: clamp(23px, 5vw, 2.5rem);
    }

    .stat-label {
      font-size: 0.9rem;
      opacity: 0.85;
      margin-top: 0.25rem;
    }
  }
}
/* ****************************************************************
ACCORDION WIDGET 
/**************************************************************** */

.our-qna-accordion-widget {
  margin: 40px 0px 0 0;

  .accordion {
    border: 0px;
  }

  .accordion-button {
    border: 0px !important;
    outline: 0px !important;
    box-shadow: 0px !important;
    padding: 10px 0 !important;
    color: #000;
    /* font-weight: 600; */
    font-family: var(--font-sarabun-bold);
    background-color: transparent !important;
    display: flex;

    &::before {
      transition: all ease 0.3s;
      content: "";
      display: block;
      height: 2px;
      width: 12px;
      background-color: var(--primary-color-one);
      margin: auto 0;
      margin-right: 10px;
    }

    &::after {
      filter: brightness(0) saturate(100%);
    }
  }

  .accordion-header {
    background-color: #fff !important;
  }

  .accordion-item {
    border: 0px !important;
    outline: 0px !important;
    background-color: transparent !important;
  }

  .accordion-button.collapsed {
    color: #000 !important;

    &::before {
      width: 0px;
    }
  }

  .accordion-header,
  .accordion-button,
  .accordion-item {
    border: 0px !important;
    outline: 0px !important;
    box-shadow: 0px 0px 0px 0px transparent !important;

    &:focus,
    &:hover,
    &:active {
      border: 0px !important;
      outline: 0px !important;
      box-shadow: 0px 0px 0px 0px transparent !important;
    }
  }

  .accordion-body {
    padding: 0px 10px !important;

    p {
      color: #000 !important;
      font-size: 16px !important;
      font-family: var(--font-roboto-reg) !important;
    }
  }
}

/* ****************************************************************
COUNTER PART WIDGET 
/**************************************************************** */

.counter-part-widget {
  width: 100%;
  border-top: 2px solid #ededed;
  margin-top: 65px;
  padding-top: 40px;
  display: flex;
  justify-content: space-evenly;

  .icon-counter-card {
    width: 165px;
    text-align: center;

    p {
      font-size: 14px !important;
      font-family: var(--font-roboto-reg);
      margin: 0px !important;
    }

    img {
      width: 80px;
      aspect-ratio: 1/1;
      object-fit: contain;
      filter: brightness(0) saturate(100%) invert(90%) sepia(28%)
        saturate(6008%) hue-rotate(351deg) brightness(105%) contrast(103%);
      margin-bottom: 20px;
    }
  }
}

.counter-container {
  display: flex;
  font-size: 2em;
  font-weight: bold;
  overflow: hidden;
  width: 100%;
  height: 50px;
  line-height: 50px;
  justify-content: center;

  &::after {
    content: "+";
    font-size: 40px;
    font-family: var(--font-sarabun-bold);
    color: var(--primary-color-two);
    padding-left: 0px;
  }
}

.digit {
  display: inline-block;
  position: relative;
  width: fit-content;
  overflow: hidden;
  font-size: 40px;
  color: var(--primary-color-two);
  font-weight: 800;
}

.digit span {
  display: block;
  text-align: center;
  transition: transform 1.5s ease-in-out;
  font-family: var(--font-sarabun-bold);
}

/* ****************************************************************
PIE CARD (BORDER FILLED ROUND) ICON ANIMATION 
/**************************************************************** */
@property --percent-filled {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.bar-graph-icon-cards {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.pie-card {
  text-align: center;
  h5 {
    font-weight: 600;
    font-size: 25px;
    font-family: var(--font-sarabun-bold);
  }

  p {
    font-size: 14px !important;
    margin: 15px 0 0 0 !important;
  }

  img {
    width: 45px;
    aspect-ratio: 1/1;
    /* backdrop-filter: drop-shadow(0px 0px 2px #fff); */
    filter: brightness(0) saturate(100%) invert(12%) sepia(32%) saturate(5037%)
      hue-rotate(232deg) brightness(109%) contrast(93%);
  }
}

.pie {
  --percent-filled: 0;
  --pie-width: 165px;
  width: var(--pie-width);
  /* scale: .95; */
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.pie:before {
  inset: 0;
  background: radial-gradient(
        farthest-side,
        var(--primary-color-one) 98%,
        #0000
      )
      top/7px 7px no-repeat,
    conic-gradient(
      var(--primary-color-one) calc(var(--percent-filled) * 1%),
      #0000 0
    );
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - 7px),
    #000 calc(100% - 7px)
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - 7px),
    #000 calc(100% - 7px)
  );
}

.pie:after {
  inset: calc(50% - 7px / 2);
  background: var(--primary-color-one);
  transform: rotate(calc(var(--percent-filled) * 3.6deg - 90deg))
    translate(calc(var(--pie-width) / 2 - 50%));
}

.animate {
  animation: fill-up-anim 0.5s forwards;
}

.no-round:before {
  background-size: 0 0, auto;
}

.no-round:after {
  content: none;
}

@keyframes fill-up-anim {
  from {
    --percent-filled: 0;
  }
  to {
    --percent-filled: 95;
  }
}

/* ====================================================== */
/* ====================================================== */
.parallax {
  height: clamp(350px, 50vh, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  /* background-attachment: fixed; */
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  padding-top: 100px !important;
}

/* Dark overlay for depth */
.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #00000070, #00000036);
  /* backdrop-filter: blur(1px); */
  z-index: 1;
}

/* Text styling */
.banner-title {
  text-shadow: 2px 2px 12px #000 !important;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 2;
  display: inline-block;
}

/* ===================================================== */
/* ===================================================== */
.feature-cards__wrapper {
  position: relative;
  z-index: 55;
  padding: clamp(80px, 5vw, 80px) 0 clamp(10px, 5vw, 80px) 0;

  .bar-graph-icon-cards {
    /* justify-content: center; */
    /* column-gap: 30px; */
    max-width: 1100px;
    margin: 0 auto !important;
    flex-wrap: wrap !important;
    column-gap: 40px !important;
    row-gap: 40px !important;
    justify-content: center;
  }

  .pie-card {
    background-color: #fff;
    border: 1px solid var(--primary-color-one);
    border-radius: 12px;
    width: 220px !important;
    padding: 20px !important;

    .pie {
      --pie-width: 120px !important;
    }

    &:not(:last-child) {
      /* border-right: 1px solid #ccc !important; */
    }
  }

  @media (min-width: 700px) {
    transform: translateY(-55px) !important;
    padding-top: 0px !important;
  }
  @media (max-width: 700px) {
    margin-bottom: clamp(20px, 7vw, 30px) !important;
  }
}

/* ======================================= */
.fancyText {
  display: inline-block;
  overflow: hidden;
  opacity: 0.15;
  filter: blur(3px);
  transform: scale(0.98);
  transition: opacity 0.8s ease, filter 0.8s ease,
    transform 1s cubic-bezier(0.23, 1, 0.32, 1);

  &.show {
    opacity: 1 !important;
    filter: blur(0);
    transform: scale(1);
  }

  .word {
    display: inline-block;
    margin-right: 0.3rem;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }

  .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) translateZ(0) rotateX(25deg) scale(0.85);
    filter: blur(6px);
    animation: fancyLetter 0.8s forwards;
    animation-delay: calc(var(--i) * 70ms);
    animation-play-state: paused;
  }
}

.fancyText.show .letter {
  animation-play-state: running;
}

@keyframes fancyLetter {
  0% {
    opacity: 0;
    transform: translateY(30px) rotateX(25deg) scale(0.85);
    filter: blur(6px) brightness(0.7);
  }

  40% {
    opacity: 1;
    transform: translateY(-10px) rotateX(0deg) scale(1.05);
    filter: blur(2px) brightness(1.3);
  }

  70% {
    transform: translateY(4px) rotateX(0deg) scale(0.98);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

/* =================================================== */
/* CONTACT US PAGE  */
/* =================================================== */
.inquiry-quote-section {
    margin: clamp(3.4rem, 7vw, 60px) auto;
  padding: clamp(0px, 3vw, 30px);


   .form-group {
      margin-bottom: 13px;
      position: relative;

      label {
        display: block;
        margin-bottom: 8px;
        /* color: var(--primary-color-two); */
        color: #494949;
        font-weight: 500;
        font-size: 0.95rem;

        i {
          color: var(--primary-color-one);
          margin-right: 8px;
        }
      }

      input,
      textarea,
      select {
        width: 100%;
        padding: 10px 20px;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        /* font-size: 1rem; */
        font-family: inherit;
        transition: all 0.3s ease;
        background: var(--gray);

        &:focus {
          outline: none;
          border-color: var(--primary-color-one);
          background: var(--white);
          box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
        }

        &::placeholder {
          color: #999;
        }
      }

      textarea {
        min-height: 150px;
        resize: vertical;
      }

      select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF6B35' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 24px;
      }
    }

  .header {
    text-align: center;
    margin-bottom: 50px;

    h1 {
      font-size: clamp(35px, 4vw, 3rem);
      font-weight: 700;
      margin-bottom: 15px;
      color: var(--dark-orange);

      i {
        color: var(--primary-color-three);
        margin-right: 15px;
        animation: bounce 2s infinite;
      }
    }

    p {
      font-size: clamp(15px, 3vw, 19px);
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto;
    }
  }

.form-toggle{
  display: flex;
  justify-content: center;
  margin: clamp(30px, 5vw, 50px) ;

  .btn-group{
    border-radius: 99px !important;
    .btn{
      flex: 1;
      white-space: nowrap;
    }
  }
  .btn{
    outline-color: var(--dark-orange) !important;
    border-color: var(--dark-orange) !important;
    &:hover{
      background: var(--primary-color-one) !important;
      color: #fff !important;
    }
  }
  .btn-outline-primary{
    color: var(--dark-orange);
  }
  .btn-primary{
background:var(--primary-color-one) !important;
  }
}

.checkbox-selection-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;

  .checkbox-selection {
    
    input[type="radio"] {
      display: none;
    }

    label {
      display: block;
      padding: 20px;
      border: 2px solid #e5e5e5;
      border-radius: 10px;
      cursor: pointer;
      background: #fff;
      height: 100%;
      transition: all 0.25s ease;
&:has(i.fa){
  text-align: center;
  .label-big{
    color: var(--dark-orange);
  }
  i{
    font-size: 20px;
    background-color: var(--dark-orange);
    color: #ffff;
    width: 45px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 7px !important;
  }
}
      .label-big {
        font-weight: 600;
        margin-bottom: 6px;
      }

      small {
        display: block;
        color: #666;
      }

      &:hover {
        border-color: var(--primary-color-one);
      }
    }

    input[type="radio"]:checked + label {
      background-color: var(--primary-color-one);
      border-color: var(--primary-color-one);
      color: #fff !important;
&:has(i.fa){
  .label-big{
    color: #ffff !important;
  }
  .fa{
    background-color: #ffff;
    color: var(--primary-color-one) !important;
  }
}
      small {
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }

  @media (max-width: 576px) {
    .checkbox-selection {
      label {
        padding: 16px;
      }
    }
  }
}


.contact-info {
  /* max-width: 400px; */
  display: flex;
  flex-direction: column;
  gap: 20px;

  .info-card {
    background: var(--white);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    outline: var(--primary-color-one) 1px solid;
    &:hover {
      transform: translateY(-5px);
      /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); */

      .icon-box {
        background: #0b0e14 !important;
        /* transform: rotateY(360deg); */
      }
    }

    .icon-box {
      width: 50px;
      height: auto !important;
      aspect-ratio: 1/1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.6s ease;

      i {
        font-size: 1.2rem;
        color: var(--white);
      }

      &.orange {
        background: linear-gradient(
          135deg,
          var(--primary-color-one),
          var(--dark-orange)
        );
      }

      &.blue {
        background: linear-gradient(
          135deg,
          var(--primary-color-two),
          var(--primary-color-two)
        );
      }

      &.yellow {
        background: linear-gradient(
          135deg,
          var(--primary-color-three),
          #ffc233
        );
        i {
          color: var(--primary-color-two);
        }
      }
    }

    .info-content {
      h3 {
        font-size: 1.1rem;
        color: var(--primary-color-two);
        margin-bottom: 5px;
      }

      p {
        color: #666;
        font-size: 0.95rem;

        a {
          /* color: var(--primary-color-one); */
          color: inherit;
          text-decoration: none;
          transition: color 0.3s;

          &:hover {
            color: var(--dark-orange);
          }
        }
      }
    }
  }

  .social-links {
    background: var(--white);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    h3 {
      color: var(--primary-color-two);
      margin-bottom: 20px;
      font-size: 1.2rem;

      i {
        color: var(--primary-color-one);
        margin-right: 10px;
      }
    }

    .social-icons {
      display: flex;
      gap: 15px;

      a {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-size: 1.3rem;
        transition: all 0.3s ease;

        &.facebook {
          background: var(--primary-color-two);

          &:hover {
            background: var(--primary-color-two);
            transform: translateY(-5px) rotate(360deg);
          }
        }

        &.twitter {
          background: var(--primary-color-two);

          &:hover {
            background: var(--primary-color-two);
            transform: translateY(-5px) rotate(360deg);
          }
        }

        &.instagram {
          background: linear-gradient(
            135deg,
            var(--primary-color-one),
            var(--primary-color-three)
          );

          &:hover {
            transform: translateY(-5px) rotate(360deg);
          }
        }

        &.linkedin {
          background: var(--primary-color-two);

          &:hover {
            background: var(--primary-color-two);
            transform: translateY(-5px) rotate(360deg);
          }
        }

        &.youtube {
          background: var(--primary-color-one);

          &:hover {
            background: var(--dark-orange);
            transform: translateY(-5px) rotate(360deg);
          }
        }
      }
    }
  }
}

/* Contact Form with Nested CSS */
.contact-form {
  margin-left: auto;
  max-width: 800px;
  background: var(--white);
  border-radius: 25px;
  padding: clamp(20px, 5vw, 50px) clamp(1px, 3vw, 35px);
  /* box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); */
  border: 1px solid #ccc;

  .form-header {
    margin-bottom: 30px;

    h2 {
      font-size: 1.8rem;
      color: var(--primary-color-two);
      margin-bottom: 10px;

      i {
        color: var(--primary-color-one);
        margin-right: 10px;
      }
    }

    p {
      color: #666;
    }
  }

  form {
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(10px, 2vw, 20px);
      row-gap: clamp(5px, 1vw, 20px);
      margin-bottom: 12px;

      @media (max-width: 600px) {
        grid-template-columns: 1fr;
      }
    }

 

    .checkbox-group {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;

      input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0 0 auto 0;
        accent-color: var(--primary-color-one);
        cursor: pointer;
      }

      label {
        margin: 0;
        cursor: pointer;
        font-size: 0.9rem;

        a {
          color: var(--primary-color-one);
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .submit-btn {
      width: 100%;
      padding: 18px 40px;
      background: linear-gradient(
        135deg,
        var(--primary-color-one),
        var(--dark-orange)
      );
      color: var(--white);
      border: none;
      border-radius: 12px;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      i {
        font-size: 1.2rem;
      }

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);

        i {
          animation: fly 0.5s ease;
        }
      }

      &:active {
        transform: translateY(-1px);
      }
    }
  }
}


  .step-panel {
    display: none;

    &.active {
      display: block;
      animation: slideIn 0.25s ease-out;
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .step-indicator {
    .step-circle {
      width: 42px;
      height: 42px;
      border: 2px solid #dee2e6;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: #6c757d;
      background: #fff;
    }

    .step-label {
      font-size: 0.8rem;
      color: #6c757d;
      margin-top: 0.35rem;
      text-align: center;
    }

    &.active {
      .step-circle {
        background: var(--primary-color-one);
        color: #fff;
        border-color: var(--primary-color-one);
      }

      .step-label {
        color: var(--dark-orange);
        font-weight: 600;
      }
    }

    &.completed {
      .step-circle {
        background: #22c55e;
        color: #fff;
        border-color: #22c55e;
      }

      .step-label {
        color: #22c55e;
      }
    }
  }

  .progress-rail {
    position: absolute;
    left: 0;
    right: 0;
    top: 21px;
    height: 2px;
    background: #e9ecef;
    z-index: 0;
  }

  .search-results {
    position: absolute;
    z-index: 1050;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }
  }

  .loading-spinner {
    border: 2px solid #e5e7eb;
    border-top: 2px solid var(--dark-orange);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .dashed-btn {
    border: 2px dashed #ced4da;
    color: #6c757d;
    background: #fff;

    &:hover {
      border-color: var(--primary-color-one);
      color: var(--primary-color-one);
    }
  }

  .badge-soft-primary {
    background: rgba(13, 110, 253, 0.08);
    color: var(--primary-color-one);
    border: 1px solid rgba(13, 110, 253, 0.25);
  }

  .inline-feedback {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;

    &.success {
      background: #ecfdf5;
      color: #065f46;
      border-color: #a7f3d0;
    }

    &.error {
      background: #fef2f2;
      color: #991b1b;
      border-color: #fecaca;
    }
  }
}

/* =================================================== */
/* Map Section with Nested CSS */
.map-section {
  margin: 50px 0;
  background: var(--white);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

  .map-header {
    padding: 25px 30px;
    background: var(--primary-color-two);
    display: flex;
    align-items: center;
    gap: 15px;

    i {
      font-size: 2rem;
      color: var(--primary-color-two);
    }

    h3 {
      color: #ffff;
      font-size: 1.3rem;
    }
  }

  .map-container {
    height: 300px;
    background: #e0e0e0;
    position: relative;

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    .map-overlay {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: var(--white);
      padding: 15px 25px;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      gap: 15px;

      i {
        color: var(--primary-color-one);
        font-size: 1.5rem;
      }

      span {
        color: var(--primary-color-two);
        font-weight: 500;
      }
    }
  }
}

@media (max-width: 550px) {
  .contact-form {
    border: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* Animations */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

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

  50% {
    transform: translateX(5px) translateY(-3px);
  }

  100% {
    transform: translateX(0);
  }
}

/* ====================================================== */
/* FAQ PAGE STYLING  */
/* ====================================================== */
.faq-wrapper {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px 20px;

  header {
    text-align: center;
    margin-bottom: 50px;
  }

  header h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
  }

  header p {
    color: #7f8c8d;
    font-size: 1.1rem;
  }

  .faq-section {
    margin-bottom: 40px;
  }

  .faq-section h2 {
    font-size: 1.4rem;
    color: var(--primary-color-one);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--dark-orange);
  }

  .accordion {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .accordion-header {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
  }

  .accordion-header:hover {
    background-color: #f8f9fa;
  }

  .accordion-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    flex: 1;
    padding-right: 15px;
  }

  .accordion-icon {
    /* font-size: 1.5rem; */
    color: var(--primary-color-two);
    transition: transform 0.3s ease;
    font-weight: 300;
  }

  .accordion.active .accordion-icon {
    transform: rotate(45deg);
  }

  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .accordion.active .accordion-content {
    max-height: 500px;
  }

  .accordion-content p {
    padding: 25px 20px 25px;
    color: #666;
    font-size: 0.95rem;
  }

  .accordion.active .accordion-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
  }

  .contact-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
  }

  .contact-section h2 {
    color: #2c3e50;
    margin-bottom: 15px;
  }

  .contact-section p {
    color: #7f8c8d;
    margin-bottom: 20px;
  }

  @media (max-width: 600px) {
    header h1 {
      font-size: 1.8rem;
    }

    .accordion-header {
      padding: 15px 20px;
    }

    .accordion-header h3 {
      font-size: 0.95rem;
    }

    .accordion-content p {
      padding: 0 20px 15px 20px;
      font-size: 0.9rem;
    }
  }
}


/* ===================================================== */

.services-section {
  padding: clamp(40px, 8vw, 90px) clamp(0px, 2vw, 20px);
  background: #f7f8fa;
  overflow:hidden;
}

.services-inner {
  max-width: 1300px;
  margin: auto;
}

/* Header */
.services-header {
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  .txt-wrap{
    flex: 1;
    max-width: 500px;
  }
  .view-all-wrap{
    height: fit-content;
    display: block;
    /* background: red; */
    margin-top: auto;
    a{
color: #252525;
font-weight: 800;
font-family: var(--font-sarabun-bold);
display: flex;
color: var(--dark-orange);
align-items: center;
i{
  color: var(--dark-orange);
  display: flex;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 2px;
  animation: driftFade 2s ease-in-out infinite;
}
    }
  }


  @media (max-width:700px) {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    row-gap: 30px !important;
    justify-content: center !important;
    text-align: center !important;
    align-items: center !important;
    .fa-title{    
    justify-content: center;
    width: 100% !important;
    &::after {
      content: "";
      display: block;
      width: 15px !important;
      height: 10px;
      /* background-color: #000; */
      border: 2px solid var(--primary-color-three);
      border-left: 0px;
      border-right: 0px;
      margin: auto 0;
      transform: skew(40deg);
      transition: all ease 0.3s;
    }
  
    }
    .divider {
      justify-content: center !important;
    }
    .txt-wrap,
    .view-all-wrap{
      text-align: center !important;
      flex: 1 !important;
      width: fit-content;
    }
  }
}

@keyframes driftFade {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(10px);
  }
 

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.services-header p {
  color: #555;
  font-size:clamp(16px, 4vw, 18px);
}

/* Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Card */
.service-card {
  background: #fff;
  border-radius: 22px 22px 5px 5px !important;
  overflow: hidden;
  text-decoration: none;
  color: #111;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
   transition: all 0.3s ease;
   outline: 1px solid #ffff;
}

.service-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.service-content {
  padding: 26px 24px 28px;
}

.service-content h4 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  font-weight: 600;
  color: #000;
    transition: all 0.3s ease;
}

.service-content p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 18px;
}

.service-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: #999;
  transition: all 0.3s ease;
  i{
    margin-left: 5px;
    transition: all ease 0.3s;
  }
}

/* Hover */
.service-card:hover {
  outline: 1px solid var(--primary-color-one);
  transform: translateY(-14px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.18);
  img {
  transform: scale(1.05);
}
h4{
  color: var(--primary-color-one);
}
.service-link {
  color: var(--primary-color-one);
  transform: translateX(6px);
  i{
    rotate: -18deg;
  }
}
}

/* Responsive */
@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-header h2 {
    font-size: 2.1rem;
  }
}

/* ======================================================= */
/* TRUSTED BY  */
/* ======================================================= */
/* Client Logos */
.client-logo {
  filter: grayscale(100%) opacity(55%);
  transition: all 0.25s ease;
  height: 32px;
  @media (max-width:700px) {
    height: auto !important;
    min-height: 39px !important;
    max-height: 39px !important;
    width: 100px !important;
    object-fit: contain;
  }
}
.client-logo:hover {
  filter: grayscale(0%) opacity(100%);
  transform: translateY(-2px);
}

/* ======================================================= */
/* TRUSTED BY  */
/* ======================================================= */
/* Mission Vision */
.mission-vision-wrapper {
  overflow: hidden;
  .mission-card {
    background: var(--primary-color-two);
    border-radius: 1rem;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    &::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -30%;
      width: 220px;
      height: 220px;
      background: var(--primary-color-one);
      border-radius: 50%;
      opacity: 0.1;
    }
  }

  .vision-card {
    background: var(--primary-color-one);
    border-radius: 1rem;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    height: 100%;
  }

  .vision-card::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -30%;
    width: 220px;
    height: 220px;
    background: var(--primary-color-three);
    border-radius: 50%;
    opacity: 0.2;
  }

  .mv-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .mission-card .mv-icon {
    background: rgba(255, 255, 255, 0.2);
  }
  .vision-card .mv-icon {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* =========================================== */
/* CORE VALUES  */
/* =========================================== */
.value-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid #f1f5f9;
  transition: all 0.25s ease;
  height: 100%;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  }
  .value-icon {
    width: 56px;
    height: 56px;
    background: rgba(249, 115, 22, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    i {
      color: var(--primary-color-one);
      font-size: 1.25rem;
    }
  }
}

.divider {
  display: flex;
  justify-content: left;
  column-gap: 5px;
  margin: 20px 0;
  &::after {
    width: 60px;
  }
  &::before {
    width: 20px;
  }
  &::before,
  &::after {
    content: "";
    display: block;
    background: var(--primary-color-three);
    height: 5px;
    border-radius: 5px;
  }
}

/* =============================================== */
/* =============================================== */
.services-sticky-col {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.core-service-intro-card {
  background: #fff;
  border-radius: 1.25rem;
  padding: 3rem 2rem;
  padding: clamp(20px, 4vw, 3rem) clamp(17px, 3.6vw, 2rem);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);

  &::before {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: var(--primary-color-one);
    border-radius: 50%;
    opacity: 0.1;
  }
}

.core-service-intro-card {
  ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;

    li {
      position: relative;
      /* margin-bottom: 0.5rem; */

      a {
        position: relative;
        color: #4e4e4ecc;
        display: inline-block;
        width: 100%;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
        font-size: clamp(14px, 3vw, 16px);
        padding: 5px;
        padding-left: 20px;

        &::before {
          content: "";
          position: absolute;
          left: -0px;
          top: 50%;
          transform: translateY(-50%);
          width: 5px;
          height: auto;
          aspect-ratio: 1/1;
          /* rotate: -6deg; */
          background: var(--primary-color-one);
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2px;
          background: var(--primary-color-one);
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.35s ease;
        }

        &:hover {
          color: var(--primary-color-one);

          &::after {
            transform: scaleX(1);
            transform-origin: left;
          }
        }
      }
    }
  }
}

/* ===== Horizontal Cards ===== */
.horizontal-service-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #eef2f7;
  overflow: hidden;
  margin-bottom: 1.5rem;
  display: flex;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  h4{
    transition: all ease 0.3s !important;
  }
p{
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.7;
}
  &:hover {
    transform: translateX(8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    h4{
      color: var(--primary-color-one) !important;
    }
  }

.badge{
  color: var(--primary-color-one);
  padding: 10px;
}

  /* Image wrapper keeps all cards equal */
  .h-service-img {
    width: 280px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    flex-shrink: 0;
  }

  .h-service-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .h-service-icon {
    width: 44px;
    height: 44px;
    background: rgba(249, 115, 22, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;

    i {
      color: var(--primary-color-one);
      font-size: 1.1rem;
    }
  }

  .freight-types-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;

    .freight-badge {
      background: #f1f5f9;
      color: #424242;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.35rem 0.75rem;
      border-radius: 6px;
    }
  }
}

/* ===== Mobile ===== */
@media (max-width: 991px) {
  .services-sticky-col {
    position: relative;
    top: 0;
    margin-bottom: 3rem;
  }

  .horizontal-service-card {
    flex-direction: column;

    .h-service-img {
      width: 100%;
      aspect-ratio: 16 / 9;
    }
  }
}




/* ==================================================== */
/* Process Steps */
/* ==================================================== */
        .process-step { text-align: center; position: relative; }
        .process-step::after {
            content: '';
            position: absolute;
            top: 40px;
            left: calc(50% + 60px);
            width: calc(100% - 120px);
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color-one), var(--dark-orange));
            opacity: 0.25;
        }
        .process-step:last-child::after { display: none; }

        .process-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-color-one), var(--dark-orange));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            position: relative;
            box-shadow: 0 14px 35px rgba(249,115,22,0.25);
        }

        .process-icon i { font-size: 1.75rem; color: white; }

        .process-number {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 32px;
            height: 32px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            color: var(--orange);
            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        }






        .privacy-policy-section {

  .privacy-card {
    background: #fff;
    border-radius: 16px;
    padding: 44px 36px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.05);
  }

  .policy-brand {
    font-weight: 500;
    opacity: 0.85;
    margin-bottom: 22px;
  }

  .policy-block {
    margin-top: 36px;
    padding: 22px 18px;
    border-top: 1px solid var(--primary-color-one);

    &:first-of-type {
      border-top: none;
      padding-top: 0;
      margin-top: 10px;
    }
  }

  .policy-heading {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.4px;
    position: relative;

    &::after {
      content: "";
      display: block;
      width: 28px;
      height: 2px;
      background: var(--primary-color-one);
      margin-top: 8px;
      border-radius: 2px;
      opacity: 0.6;
    }
  }

  .policy-list {
    margin: 18px 0 20px;

    p {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.95rem;
      margin-bottom: 10px;
      line-height: 1.6;

      i {
        color: var(--primary-color-one);
        margin-top: 4px;
        font-size: 0.9rem;
      }
    }
  }

  .muted {
    font-size: 0.9rem;
    opacity: 0.75;
  }

  .policy-contact {
    border: 1px solid var(--primary-color-one);
    border-radius: 14px;
    padding: 26px 24px;
    margin-top: 42px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: var(--primary-color-one);
      opacity: 0.03;
      pointer-events: none;
    }
  }

  .policy-link {
    color: var(--primary-color-one);
    font-weight: 500;
    text-decoration: none;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 1px;
      background: var(--primary-color-one);
      opacity: 0.4;
      transition: opacity 0.25s ease, transform 0.25s ease;
      transform: scaleX(0.6);
      transform-origin: left;
    }

    &:hover::after {
      opacity: 1;
      transform: scaleX(1);
    }
  }
}