* {
  box-sizing: border-box;
}

  


html {
   scroll-behavior: smooth;
}

#services-section {
   scroll-margin-top: 90px;
}

#logistic-quote-section{
   scroll-margin-top: 90px;
}



body{
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
}



nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: "Inter",sans-serif;

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

  min-height: 85px;
  padding: 0 5%;
  background: #fff;

  transition: min-height 0.3s ease,
              box-shadow 0.3s ease;
}



.nav-menu {
  display: flex;
  gap: 25px;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
}

.menu-option {
  position: relative;
  padding: 10px 0 7px;
}

.nav-menu a{
  text-decoration-line: none;
}


.menu-option > a {
  color: #8f8f8f;
  font-size: 15px;
  font-weight: 500;

  transition: color 0.2s ease;
}

.menu-option > a:link{
  color: #8f8f8f;
}

.menu-option > a:visited{
  color: #8f8f8f;
}

.menu-option:hover > a {
  color: #0094DF;
}




.menu-details {
  display: none;
  position: absolute;

  top: 100%;
  left: 0;

  width: 200px;
  padding: 12px 0;

  background: #fff;
  border-radius: 4px;
  list-style: none;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

  z-index: 100;
}



.menu-option::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background: #0094DF;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.menu-option:hover::after {
  transform: scaleX(1);
}


.menu-option:hover .menu-details{
 display: block;

 
}


.menu-details li {
  padding: 0;
}

.menu-details a {
  display: block;

  padding: 9px 15px;

  font-size: 15px;
  color: #8f8f8f;

  transition:
    color 0.2s ease,
    transform 0.3s ease;
}

.menu-details a:link{
  color: #8f8f8f;
}

.menu-details a:visited{
  color: #8f8f8f;
}


.menu-details a:hover{
  
   color: #0094DF;
   transform:translateX(5px) ;
}





.logo-container{
   display: flex;
   
   text-decoration: none;
   
}






.logo-container a{
  margin: 0;
  padding: 0;
}


.logo-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.logo-container::after {
  content: "";
  position: absolute;

  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);

  width: 250px;
  height: 35px;

  background: #fff;

  clip-path: polygon(
    0 0,
    100% 0,
    85% 100%,
    15% 100%
  );

  z-index: -1;
}


.logo-container::after {
  transition: opacity 0.3s ease,
              transform 0.3s ease;
}



nav.scrolled {
  min-height: 70px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

nav.scrolled .logo-container::after {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
}






.logo-link {
  color: #222222c7;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-info {
  padding-left: 8px;
  line-height: 1;
}

.logo-info span {
  font-family: "Inter",sans-serif;
  color: #0c0c0cbf;

  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1px;
}

.logo-info .text-change{
  font-size: 16px;
  color: #5555559f;

}

.logo-container img {
  width: 46px;
  height: 38px;
}


.request-btn {
   position: relative;
   display: inline-block;
   overflow: hidden;

   padding: 13px 20px;

   background: #fff;
   color: #222;

   border: 1px solid #c4c4c4;

   font-family: "Inter", sans-serif;
   font-size: 13px;
   font-weight: 500;
   letter-spacing: 0.4px;

   text-decoration: none;
}

.request-btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    background: #0094DF;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
    z-index: 0;
}

.request-btn:hover::before {
    width: 250px;
    height: 250px;
}

.request-btn:hover {
    cursor: pointer;
    color: #fff;

}

.request-btn span {
    position: relative;
    z-index: 1;
}

.hero-box{ 
  position: relative;
  height: 700px;
  background-image: url("images/daf.png");
  background-size: cover;
   background-size: auto 115%;
   background-position: 53% 40%;
  background-repeat: no-repeat;

    animation: truckMove 8s ease-in-out infinite alternate;
}

.hero-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    height:100%;
    background: rgba(0, 35, 70, 0.86);

}




@keyframes truckMove {
    from {
          background-position: 53% 40%;
    }

    to {
         background-position: 53% 60%;
    }
}

.mobile-menu-btn {
   display: none;
   width: 38px;
   height: 38px;

   padding: 7px;
   border: none;
   background: transparent;

   cursor: pointer;
}

.mobile-menu-btn span {
   display: block;
   width: 100%;
   height: 2px;

   margin: 6px 0;

   background: #00113d;

   transition: transform 0.3s ease,
               opacity 0.3s ease;
}



.logistics {
   display: flex;
   align-items: center;

   position: relative;
   z-index: 2;
   top: 5px;
   padding: 10px  0;

   width: 240px;

   background: rgba(0, 148, 223, 0.18);
   border: 1px solid rgba(0, 148, 223, 0.35);
   border-radius: 25px;

   color: #fff;
}

.logistics img{
  width: 18px;
  height: 18px;
  margin-left: 15px;
  margin-right: 10px;
 
}

.logistics-heading {
    margin: 0;
   color: rgba(255, 255, 255, 0.90);
   font-family: "Inter", sans-serif;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.7px;
}



.hero-content{

  position: relative;
  z-index: 2;
  margin-left: 100px;
  top: 100px;
  
}



.hero-content h1 {
   font-family: "Montserrat", sans-serif;
   color: #fff;
   font-weight: 800;
   font-size: 48px;
   margin-top: 20px;
   
}

.hero-description {
   width: 500px;
   color: rgba(255, 255, 255, 0.78);
   font-family: "Inter", sans-serif;
   font-size: 15px;
   line-height: 1.7;
}
.hero-link{
  margin-top: 80px;
}


.hero-link a {
   display: inline-block;
   position: relative;
   overflow: hidden;

   padding: 14px 35px;

   background: #00113d;
   color: #fff;

   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 600;

   text-decoration: none;
}

.hero-link a span {
  font-size: 14px;
}

.hero-link a:link{
  color: #fff;
}

.hero-link a:visited{
  color: #fff;
}



.hero-link a::before {
   content: "";
   position: absolute;

   width: 0;
   height: 0;

   background: #0094DF;
   border-radius: 50%;

   top: 50%;
   left: 50%;

   transform: translate(-50%, -50%);

   transition: width 0.5s ease, height 0.5s ease;

   z-index: 0;
}

.hero-link a:hover::before {
   width: 250px;
   height: 250px;
}

.hero-link a span {
   position: relative;
   z-index: 1;
}

/*HOW WE WORK*/

.process-section{
  
  background: #f6f8fa;
  
  padding: 100px 8%;
  font-family: sans-serif;
}

.process-section p,.process-section h2,.process-section h3{
  font-family: "Inter", sans-serif;
  
}

.process-intro{
  text-align: center;
  margin-bottom: 65px;
}

.process-intro h3{
  color: #0094DF;
  font-size: 14px;
   font-weight: 700;
   margin: 0 0 14px;

  letter-spacing: 1px;

}

.process-intro-heading{

   color: #0d1b33;
   font-size: 42px;
   font-weight: 700;
   line-height: 1.1;
   max-width: 800px;
   margin: 0 auto 20px;


}
   


.process-container h3 {
   font-size: 18px;
   color: #0d1b33;
   font-weight: 700;
   margin: 0 0 14px;
}

.process-container > p:last-child {
   max-width: 200px;
   margin: 0 auto;

   font-size: 14px;
   line-height: 1.7;
   color: #666;
}


.process-info {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 45px;
}


.process-container {
   width: 100%;
   text-align: center;
}



.process-icon {
   width: 88px;
   height: 88px;

   margin: 0 auto 18px;

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

   border: 1px solid #0094DF;
   border-radius: 50%;

   background: #fff;
}

.process-icon img {
   /*width: 52px;
   height: 52px;*/

   object-fit: contain;
}

.process-container:nth-child(1) .process-icon img {
   width: 52px;
   height: 52px;
}
.process-container:nth-child(2) .process-icon img {
   width: 45px;
}

.process-container:nth-child(3) .process-icon img {
   width: 60px;
}

.process-container:nth-child(4) .process-icon img {
   width: 42px;
   height: 42px;
}


.process-icon:hover{
  background-color:  #0094DF;
  border: 1px solid #0094DF;

}


.process-num {
   color: #0094DF;
   font-size: 13px;
   font-weight: 500;
}

/*ABOUT US CSS*/
.company-info-container {
   display: flex;
   gap: 80px;

   max-width: 1250px;
   margin: 0 auto;

   padding-top: 110px;
}

.truck-container{
  width: 500px;
  flex-shrink: 0;
  position: relative;
}


.truck-image {
  position: relative;
  width: 500px;
}


.truck-image img {
  display: block;
  width: 500px;
  height: 440px;
  margin-top: 20px;
}

.experience-box strong {
  font-family: "Inter", sans-serif;
  color: #ffffff;
  font-size: 60px;
  font-weight: 800;

}

.experience-box span {
  font-size: 15px;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 1px;
  padding-left: 15px;
  
}


.experience-box {
  position: absolute;
  left: -45px;
  bottom: -28px;

  width: 150px;
  padding: 27px 20px;

  background: #0094DF;
  color: #0c0c0c;;

  display: flex;
  flex-direction: column;
  align-items: center;

  border: none;

  animation: experienceFloat 3s ease-in-out infinite alternate;
}

@keyframes experienceFloat {
  from {
    transform: translateY(-27px);
  }

  to {
    transform: translateY(15px);
  }
}


.company-info {
   width: 520px;
}



.company-info h1{
    font-family: "Inter", sans-serif;
   margin-top: 0;
   color: #0d1b33;
   font-size: 44px;
   font-weight: 700;
   line-height: 1.2;
  
  
}

.company-info h3 {
   color: #0094DF;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1px;
}


.write-up p:first-child {
   color: #0d1b33;
   font-size: 15px;
   font-weight: 500;
}

.write-up p:last-child {
   color: #666;
   font-size: 14px;
   font-weight: 400;
    line-height: 1.7;
}

.company-info .quote-btn {
  display: inline-block;
   position: relative;
   overflow: hidden;

   margin-top: 20px;
   padding: 15px 22px;

   background: #00113d;
   color: #fff;

   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 600;

   text-decoration: none;
  
}


.quote-btn::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0094DF;
    
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: 0;
}

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

.quote-btn:hover {
    cursor: pointer;
    color: #fff;

}

.quote-btn span {
    position: relative;
    z-index: 1;
}


/*SERVICES-SECTION*/
.services-section {
  padding: 80px 8% 100px;
  /*
  background: #212121f5;*/
  background: #00113d;
}


.service-catalog,
.service-image,
.service-info {
   box-sizing: border-box;
}

.service-heading h3 {
   color: #0094DF;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1px;
}

.service-heading h1 {
   color: #fff;
   font-family: "Inter", sans-serif;
   max-width: 700px;
   font-size: 42px;
   font-weight: 700;
   line-height: 1.2;
}
.service-heading{
  margin-bottom: 80px;
}


.services-container {
  width: 100%;
  overflow: hidden;
}

.service-track {
  display: flex;
  gap: 40px;
  transform: translateX(0);
  transition: transform 0.8s ease;
}



.service-name h3{
   margin: 0;
   color: #0094DF;
   font-family: "Inter", sans-serif;
   font-size: 18px;
   font-weight: 700;
}

.service-summary {
   margin: 10px 0 15px;
   color: #666;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   line-height: 1.6;
}

.service-features {
   display: flex;
   flex-direction: column;
   gap: 13px;
}

.service-feature {
   display: flex;
   align-items: center;
   gap: 10px;
}

.service-feature img {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
}

.service-feature span {
  font-family: "Inter",sans-serif;
   color: #666;
   font-size: 13px;
}

.service-card {
   flex: 0 0 calc(50% - 20px);
   min-width: calc(50% - 20px);
   max-width: calc(50% - 20px);

   height: 300px;
   overflow: hidden;
}


.service-catalog {
   display: flex;
   width: 100%;
   height: 100%;
   
   box-sizing: border-box;
}

.service-image {
   flex: 0 0 45%;
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
}

.service-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.service-info {
   flex: 0 0 55%;
   min-width: 0;
   padding: 20px;
   box-sizing: border-box;
   background: #fff;
}



.service-info h2{
  color: #0094DF;
}

.service-catalog,
.service-info {
   min-width: 0;
}


/*WHY-CHOOSE-SECTION*/
.why-choose-container {
   display: flex;
   width: 100%;
   height: 830px;
   

   
}
.why-choose-content{
  margin-top: 30px;
}


.why-choose-headings h3 {
    color: #0094DF;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1px;
}



.why-choose-headings h2 {
   color: #0d1b33;
   font-family: "Inter", sans-serif;
   font-size: 44px;
   font-weight: 700;
   line-height: 1.2;
   
}

.why-choose-content {
   width: 50%;
   padding: 50px 5% 50px 8%;

}

.why-choose-details p {
   color: #666;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   line-height: 1.8;
}

.yard-image-container {
   width: 50%;
   height: 100%;
   overflow: hidden;
}
.yard-image-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
}

.why-choose-details p {
   font-family: "Inter", sans-serif;
   font-size: 14px;
   line-height: 1.7;
   color: #666;
   margin-top: 25px;
}


.progress-section{
  margin-top: 100px;
  
}





.circle-stats {
  display: flex;
  font-family: "Inter",sans-serif;
  gap: 60px;
  margin-top: 40px;
}


.circle-stat {
  display: flex;
  align-items: center;
  gap: 17px;
  animation: statFloat 3s ease-in-out infinite alternate;
}

@keyframes statFloat {
   from {
      transform: translateY(0);
   }

   to {
      transform: translateY(-6px);
   }
}
.circle-stat h3 {
   color: #0d1b33;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.4;
}

.circle-progress {
  flex: 0 0 80px;
   width: 80px;
   height: 80px;
  flex-shrink: 0;

  border-radius: 50%;

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

.circle-97 {
  background:
    conic-gradient(
      #0094DF 0% 97%,
      #d8dde2 97% 100%
    );
}


.circle-96 {
  background:
    conic-gradient(
      #0094DF 0% 96%,
      #d8dde2 96% 100%
    );
}

.circle-stat:nth-child(2) {
   animation-delay: 0.4s;
}

.circle-inner {
 width: 60px;
  height: 60px;

  background: #eef1f3;
  border-radius: 50%;

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

  font-size: 12px;
  font-weight: 700;
  color: #0d1b33;
   font-family: "Inter", sans-serif;
   font-weight: 700;
}




.why-choose-cta img{
  width: 14px;
  height: 14px;
}


.why-choose-cta p {
  margin-top: 30px;
   margin-bottom: 14px;
   color: #666;
   font-family: "Inter", sans-serif;
   font-size: 14px;
}

.why-choose-cta a {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   position: relative;
   overflow: hidden;

   text-decoration: none;
   background: #fefefe;

   padding: 12px 22px;

   border-radius: 30px;
   border: 2px solid #0094DF;
   transition: transform 0.3s ease, color 0.3s ease;
}

.why-choose-cta a::before {
   content: "";
   position: absolute;

   top: 0;
   left: 0;

   width: 100%;
   height: 100%;

   background: #0094DF;

   transform: translateX(-100%);
   transition: transform 0.4s ease;

   z-index: 0;
}

.why-choose-cta a:hover::before {
   transform: translateX(0);
}

.why-choose-cta a:hover img {
   content: url("images/chat-conversation-white.svg");
}

.why-choose-cta span{
  font-size: 14px;
    font-weight: 600;
}

.why-choose-cta a span,
.why-choose-cta a img {
   position: relative;
   z-index: 1;
}

.why-choose-cta a,
.why-choose-cta a:visited {
   color: #0094DF;
}

.why-choose-cta a:hover {
   color: #fff;
   transform: translateY(-3px);
}


.why-choose-stats{
  width: 100%;
 background: rgb(1, 13, 52);
  
  padding: 80px 8%;
  background-image: url("images/trucks-range.png");
}

/*STATS-SECTION*/


.stats-container{
  
  display: flex;
  justify-content: space-between;
  color: #eceaea;
}
.stats-top {
   display: flex;
   align-items: center;
   gap: 15px;
}

.stats-top img {
   width: 35px;
   height: 35px;
   flex-shrink: 0;
}

.stats-text {
   display: flex;
   flex-direction: column;
}

.stats-text strong {
   color: #fff;
   font-family: "Inter", sans-serif;
   font-size: 36px;
   font-weight: 700;
}

.stats-text p {
   color: #666;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   line-height: 1.5;
}
.quote-section{
  width: 100%;
  padding: 30px 10%;
  background: #ffffff;

}


.transport-stats{
  display: inline-block;

  opacity: 0;
  transform: translateY(40px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.transport-stats p{
  color: #cecccc;
}

.transport-stats.slide-in {
  opacity: 1;
  transform: translateY(0);
}


.transport-stats {
  flex: 1;
  position: relative;
  padding: 0 35px;
}

.transport-stats:not(:last-child)::after {
  content: "";
  position: absolute;

  right: 0;
  top: 15%;

  width: 1px;
  height: 70%;

  background: rgba(255, 255, 255, 0.25);
}


/*TRACKING SECTION*/
.tracking-section {
  position: relative;

  min-height: 500px;

  background-image: url("images/pexels-roy-s-12656046-9477542.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
}


.tracking-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0, 15, 50, 0.95) 0%,
    rgba(0, 15, 50, 0.80) 40%,
    rgba(0, 15, 50, 0.30) 100%
  );
}


.tracking-intro{
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracking-intro img{
  width: 42px;
  margin-right: 10px;
  z-index: 3;
}




.tracking-intro h3 {
   margin: 0;

   color: #0094DF;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1px;
}

.tracking-headings h2,.tracking-headings p{
  color: #eceaea;
}

.tracking-content h2 {
   max-width: 900px;

   color: #fff;
   font-family: "Inter", sans-serif;
   font-size: 48px;
   font-weight: 700;
   line-height: 1.1;

   margin: 20px auto 30px;
}


.tracking-container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 80px 8%;
}

.tracking-content {
   position: relative;
   z-index: 5;

   max-width: 950px;
   margin: 0 auto;

   display: flex;
   flex-direction: column;
   align-items: center;

   text-align: center;
}


.tracking-content p {
   max-width: 650px;

   color: rgba(255, 255, 255, 0.78);
   font-family: "Inter", sans-serif;
   font-size: 14px;
   line-height: 1.8;

   text-align: center;
   margin: 0 auto 30px;
}



.update-btn {
   display: inline-block;
   position: relative;

   padding: 16px 30px;

   background: #0094DF;
   color: #fff;

   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 600;

   text-decoration: none;
   border-radius: 30px;

   transition: background 0.3s ease,
               transform 0.3s ease;
}

.update-btn:hover {
   background: #00113d;
   transform: translateY(-2px);
}

.update-btn:link{
  color: #fff;
}

.update-btn:visited{
  color: #fff;
}

/*TESTIMONIALS-SECTION*/
.testimonials-section {
   padding: 90px 8%;
   background: #f6f8fa;
   font-family: "Inter", sans-serif;
}

.testimonial-intro {
   text-align: center;
   max-width: 650px;
   margin: 0 auto 55px;
}

.testimonial-label {
   color: #0094DF;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 1px;
   margin-bottom: 15px;
}

.testimonial-intro h2 {
   font-size: 40px;
   color:  #00113d;

   margin: 0 0 15px;
}

.testimonial-intro p {
   font-size: 15px;
   line-height: 1.7;
   color: #666;
   margin: 0;
}


.testimonials-quotes {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;

   max-width: 950px;
   margin: 0 auto;
}

.testimonial-card {
   background: #fff;
   padding: 35px;
   border-radius: 12px;
   border: 1px solid #e5e8eb;

   min-height: 260px;

   display: flex;
   flex-direction: column;
   justify-content: space-between;

   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);

    transition: transform 0.35s ease,
               box-shadow 0.35s ease,
               border-color 0.35s ease;
}
/* Faster hover movement */
.testimonial-card.reveal.reveal-active:hover {
   transform: translateY(-7px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
   border-color: rgba(0, 148, 223, 0.25);

   transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
}

/* Smooth return after hovering */
.testimonial-card.reveal.reveal-active:not(:hover) {
   transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
}


.quote-mark {
   font-size: 58px;
   line-height: 1;
   color: #0094DF;
   font-family: Georgia, serif;
}

.testimonial-text {
   margin: 10px 0 30px;

   font-size: 15px;
   line-height: 1.8;

   color: #555;
}

.client-info {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.client-info strong {
   font-size: 15px;
   color: #0d1b33;
}

.client-info span {
   font-size: 13px;
   color: #888;
}
/*QUOTE FORM*/
.logistic-quote-section {
  padding: 80px 0;
}

.quote-label{
  display: flex;
  justify-content: center;
}

.quote-label span {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 200px;
  border: 1px solid rgba(0, 148, 223, 0.35);
  background: rgba(0, 148, 223, 0.06);

  padding: 9px 14px;
  border-radius: 30px;

  color: #0094DF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
}

.quote-label img{
  width: 15px;
  margin-right: 6px;
  color: #0094DF;
}



.logistic-form-container {
  display: flex;
  width: 90%;
  max-width: 1050px;
  margin: 0 auto;
  
}


.logistic-headings {
  text-align: center;
  margin-bottom: 40px;
}

.logistic-headings h2 {
   color: #0d1b33;
   font-family: "Inter", sans-serif;
   font-size: 32px;
   font-weight: 700;
   line-height: 1.2;
}


.logistic-headings h2 span {
   color: #0094DF;
}



.logistic-services {
  font-family: "Inter", sans-serif;
  width: 36%;
  padding: 40px 30px;
  background: #0094DF;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.logistic-services h2{
  color: #ffffff;
}

.logistic-services p{
  font-size: 14px;
  color: #fefefedd;
  font-weight: 500;
}


.logistic-service-list {
   list-style: none;
   padding: 0;
   margin: 30px 0;
}

.logistic-service-list li {
   position: relative;
   padding-left: 28px;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   font-size: 14px;
   color: #faf9f9;
    font-weight: 500;

}

.logistic-service-list li::before {
   content: "✓";

   position: absolute;
   left: 0;

   width: 16px;
   height: 16px;

   border-radius: 50%;
   background: #fff;

   color: #0094DF;
   font-size: 9px;
   font-weight: 750;

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


.logistic-services .track-btn-two {
   display: inline-block;

   margin-top: 45px;
   padding: 10px 17px;

   background: #0d1b33;
   border: none;
   color: #fff;

   position: relative;
   overflow: hidden;

   text-decoration: none;
}


.track-btn-two::before {
   content: "";

   position: absolute;
   width: 100%;
   height: 100%;

   top: 0;
   left: 0;

   background:#f2b84b;

   transform: translateX(-100%);
   transition: transform 0.5s ease;

   z-index: 0;
}


.track-btn-two:hover::before {
   transform: translateX(0);
}


.track-btn-two span {
   font-size: 14px;
   font-weight: 700;
   position: relative;
   z-index: 1;
}


.track-btn-two:hover {
   cursor: pointer;
   color: #fff;
}


.contant-container {
   margin-top: 30px;
   padding: 22px 20px;

   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.20);
   border-radius: 12px;
}

.container-info {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.container-info strong {
   color: #ffffff;
   font-size: 14px;
   font-weight: 600;
}

.container-info a {
   color: #f2b84b;
   font-size: 20px;
   font-weight: 700;
   text-decoration: none;

   display: flex;
   align-items: center;
   gap: 8px;
}

.container-info img {
   width: 20px;
   height: 20px;
   display: block;
   flex-shrink: 0;
}
.container-info p {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.78);
}


.logistic-form {
  width: 64%;
  padding: 40px;
  background: #ffffff;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 30, 60, 0.12);
  
}

.logistic-form-header {
   margin-bottom: 45px;
}

.logistic-form-header h2 {
  color: #0d1b33;
   font-family: "Inter", sans-serif;
   font-weight: 700;
}


.logistic-form-header p{
   color: #666;
   font-family: "Inter", sans-serif;
   font-size: 13px;
   line-height: 1.6;
 
}


.logistic-input-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.logistic-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.logistic-input input{
 
  outline: none;
  font-size: 14px;
  padding: 14px 16px;
  background-color: #f0efef7d;
  border: 2px solid #f0efefb0;
  border-radius: 5px;
}

.logistic-input select {
  width: 100%;
  padding: 14px 16px;

  background: #f7f7f7;
  border: 1px solid #e1e4e8;
  border-radius: 5px;

  font-family: inherit;
  font-size: 14px;
  color: #444;

  outline: none;
  cursor: pointer;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.logistic-input label{
  font-size: 15px;
  
  font-weight: 600;
}


.logistic-input label span{
  color: rgba(230, 12, 12, 0.799);
  padding: 0;
  margin:-3px;
}




.logistic-input input[type="date"]::-webkit-calendar-picker-indicator {
   opacity: 0.3;
   transform: scale(0.9);
   cursor: pointer;
   transition: opacity 0.2s ease, transform 0.5s ease;
}


.logistic-input input[type="date"] {
   width: 100%;  
   min-width: 0;
    max-width: 100%;
   height: 50px;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   color: #555;

   cursor: pointer;
   -webkit-appearance: none;
}

.logistic-input input[type="date"]::-webkit-calendar-picker-indicator:hover {
   opacity: 1;
   transform: scale(1.1);
}


.extra-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.extra-info label{
   font-size: 15px; 
  font-weight: 600;
}

.logistic-input label,
.extra-info label {
   color: #0d1b33;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 600;
}


.logistic-input input,
.logistic-input select,
.extra-info textarea {
     width: 100%;
   box-sizing: border-box;
   background: #f7f7f7;
   border: 1px solid #e1e4e8;
   color: #444;
   font-family: "Inter", sans-serif;
}


.logistic-input input:focus,
.logistic-input select:focus,
.extra-info textarea:focus {
   border: 1px solid #0094DF;
   outline: none;
   box-shadow: none;
}

.extra-info textarea {
  width: 100%;
  padding: 12px;
  resize: vertical;

  border: 1px solid #d7dce2;
  border-radius: 4px;
  outline: none;

  font-family: inherit;
}

.submit-btn-container {
  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 25px;

}
.submit-btn-container button {
   padding: 12px 40px;
   font-weight: 600;
   color: #eff2f5;

   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;

   background: #ea8c21;
   border: none;
   border-radius: 15px;

   transition:
   transform 0.3s ease,
   background 0.3s ease;
}

.submit-btn-container button:hover {
   background: #f2a94a;
   transform: translateY(-3px);
   cursor: pointer;
}

.submit-btn-container img {
   width: 20px;
   height: 20px;
   display: block;
  

}

.form-message {
   margin: 20px 0 0;
   padding: 14px 18px;
   border-radius: 5px;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 500;
}

.form-message.success {
   background: #edf8f1;
   color: #267a43;
   border: 1px solid #b9e2c7;
}

.form-message.error {
   background: #fff1f1;
   color: #b42318;
   border: 1px solid #f1c0bd;
}


.job-info-container h2{
   color: #0094DF;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.job-info-container h1{
   color: #0d1b33;
   font-family: "Inter", sans-serif;
   font-size: 45px;
   font-weight: 700;
   line-height: 1.15;
}

.job-order-name h3 {
   color: #0d1b33;
   font-family: "Inter", sans-serif;
   font-size: 20px;
   font-weight: 700;
}

.job-order-name .name-white{
  color: #fff;
   font-family: "Inter", sans-serif;
   font-size: 20px;
   font-weight: 700;

}

.job-order-name span {
   color: #0094DF;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.job-request-section {
  padding: 80px 8%;
  background: #f1f4f5;
}

.job-request-container {
  display: flex;
  gap: 80px;
}

.job-info-container {
  width: 45%;
}

.job-request-section{
  font-family: "Inter", sans-serif;
}
.job-request-process {
  width: 55%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}


.job-order-container {
   display: flex;
   align-items: center;
   min-height: 250px;
   padding: 35px 40px;

   background: #fff;
   border-radius: 20px;

   transition: background 0.4s ease,
               color 0.4s ease;
}


/* Step 2 stays dark */
.job-order-container:nth-child(2) {
   background: #00113d;
   color: #fff;
}


/* Steps 1 and 3 become dark on hover */
.job-order-container:nth-child(1):hover,
.job-order-container:nth-child(3):hover {
   background: #00113d;
   color: #fff;
   cursor: pointer;
}


/* Heading also becomes white */
.job-order-container:nth-child(1):hover h3,
.job-order-container:nth-child(3):hover h3 {
   color: #fff;
}


/* Divider */
.job-order-name {
   width: 40%;
   padding-right: 25px;

   border-right: 1px solid #0671dd;
   transition: border-color 0.4s ease;
}




/* Divider on permanent dark card */
.job-order-container:nth-child(2) .job-order-name {
   border-right-color: rgba(255, 255, 255, 0.35);
}


/* Divider when 1 and 3 become dark */
.job-order-container:nth-child(1):hover .job-order-name,
.job-order-container:nth-child(3):hover .job-order-name {
   border-right-color: rgba(255, 255, 255, 0.35);
}

.job-order-step {
  width: 60%;
  padding-left: 30px;
}




.job-order-step {
  list-style: none;
  margin: 0;
}

.job-order-step li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 20px;
}

.job-order-step li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;

  width: 6px;
  height: 6px;

  border: 1px solid #0094DF;
}

.job-process-description {
   color: #666;
   font-size: 14px;
   line-height: 1.8;
}

.job-benefits {
  margin-top: 30px;
  list-style: none;
  padding: 0;

}

.job-benefits li {
   position: relative;
   padding-left: 22px;
   margin-bottom: 14px;

   color: #0d1b33;
   font-size: 14px;
   font-weight: 500;
}

.job-benefits li::before {
  content: "»";
  position: absolute;
  left: 0;
  color: #0094DF;
  font-weight: 800;
}

.job-call-info-container {
  
   margin-top: 30px;
}

.job-call-info-container > p {
   color: #666;
   font-size: 14px;
}

.job-call-info{
  display: flex;
  gap: 15px;
  align-items: center;
}

.job-call-info img{
  width: 18px;
  height: 18px;
  
}

.job-call-info a {
   color: #0094DF;
   text-decoration: none;
   font-weight: 600;
}

.job-call-info a:link,
.job-call-info a:visited {
   color: #0094DF;
}


/*footer section*/
.footer-hero {
  font-family: "Inter", sans-serif;
   background:
      linear-gradient(
         90deg,
         rgba(0, 17, 61, 0.95) 0%,
         rgba(0, 17, 61, 0.82) 40%,
         rgba(0, 17, 61, 0.30) 75%,
         rgba(0, 17, 61, 0.08) 100%
      ),
      url("images/cta_truck.png");

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

   padding: 50px 0 40px;
}

.cta-info-container {
   padding: 50px 7%;
   margin-bottom: 30px;
}

.cta-info-container h2 {
   margin: 0 0 18px;

   color: #fff;
   font-size: 40px;
   line-height: 1.15;
}

.cta-info-container p {
   margin: 0 0 30px;

   color: rgba(255, 255, 255, 0.80);
   font-size: 16px;
   font-weight: 500;
   line-height: 1.6;

}


.cta-contact {
   display: flex;
   align-items: center;
   gap: 25px;
}

.cta-request-btn {
  display: inline block;
   padding: 13px 24px;
   background: #0094DF;
   
   border-radius: 5px;
   font-family: inherit;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;

   text-decoration: none;
   position: relative;
   overflow: hidden;

   transition: transform 0.3s ease;
}
.cta-request-btn span{
  color: #fff;
}

.cta-request-btn::before {
   content: "";
   position: absolute;
   inset: 0;

   background: #00113d;

   transform: translateX(-100%);
   transition: transform 0.4s ease;
}

.cta-request-btn span {
   position: relative;
   z-index: 1;
}

.cta-request-btn:hover::before {
   transform: translateX(0);
}

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

.cta-call {
   display: flex;
   align-items: center;
   gap: 10px;

   color: #fff;
   text-decoration: none;
   font-size: 20px;
   font-weight: 600;

   transition: color 0.3s ease,
               transform 0.3s ease;
}

.cta-call img {
   width: 24px;
   height: 24px;

   transition: transform 0.3s ease;
}

.cta-call:hover {
   color: #f2b84b;
   transform: translateY(-2px);
}

.cta-call:hover img {
   transform: rotate(-8deg);
}

.site-footer {
   width: 95%;
   max-width: 1400px;
    min-height: 500px;
   margin: 0 auto;

   background: rgba(10, 12, 18, 0.92);

   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 30px;

  padding: 50px 5% 25px;

   box-sizing: border-box;

   color: #fff;
}

.footer-about img{
  width: 70px;
  height: 60px;
}

.footer-about a:link{
  color: #fff;
}

.footer-about a:visited{
  color: #fff;
}

.footer-about-link{
  display: flex;

  align-items: center;
  gap: 12px;
  text-decoration: none;


}

.footer-about-link p{
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}


.footer-description{
  color: #828181;
  font-size: 16px;
  line-height: 1.6;
}


.footer-container {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1.25fr 1.4fr 1.1fr;
   gap: 38px;

   border-bottom: 1px solid rgba(255, 255, 255, 0.457);
   padding-bottom: 30px;
}
.footer-container h3 {
   color: #fff;
   font-size: 17px;
   margin-bottom: 25px;
}
.footer-container ul {
   list-style: none;
   padding: 0;
   margin: 0;
   
}

.footer-container li {
  list-style: none;
   margin-bottom: 18px;
   
}


.footer-container a{
  text-decoration: none;
}

.footer-container li a {
   color: #828181;
   font-size: 15px;
   transition: color 0.3s ease;
}

.footer-container li a:hover {
   color: #0094DF;
}

.footer-office-hours p{
  color: #828181;
  font-size: 15px;
}

.footer-bottom {
   margin-top: 20px;
   text-align: center;
}

.footer-address p {
   text-align: left;
   color: #a5a5a5;
   font-size: 15px;
   line-height: 1.6;
}


/* Tablet */
@media (max-width: 1024px) {

   nav {
      position: relative;
      padding: 18px 30px;
   }

   /* Hide desktop navigation */
   .nav-info {
      display: none;

      position: absolute;
      top: 100%;
      left: 0;

      width: 100%;

      padding: 25px 30px;

      background: #fff;

      z-index: 1000;
   }

   .nav-menu {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;

      width: 100%;
   }

   .menu-option {
      width: 100%;
      padding: 0;
   }

   .menu-option > a {
      display: block;
      width: 100%;

      padding: 15px 0;
   }



   .nav-info.mobile-open {
      display: block;
   }

   .nav-action {
      display: none;
   }

   /* Move logo out of its desktop absolute centering */
   .nav-logo {
      position: static;
      transform: none;
   }

   .nav-logo img {
      width: 58px;
      height: 58px;
   }

   /* Show hamburger */
   .mobile-menu-btn {
      display: block;
      margin-left: auto;
   }


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

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

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

.hero {
   height: 600px;
}

.hero-content {
   margin-left: 50px;
   max-width: 650px;
}

.hero-content h1 {
   font-size: 42px;
}

.hero-content p {
   width: 100%;
   max-width: 500px;
}

}


/* =========================
   JOB REQUEST - TABLET
========================= */

@media (max-width: 900px) {

   .job-request-section {
      padding: 70px 8%;
   }

   .job-request-container {
      flex-direction: column;
      gap: 50px;
   }

   .job-info-container,
   .job-request-process {
      width: 100%;
   }

   .job-info-container h1 {
      font-size: 38px;
   }

   .job-info-container {
      max-width: 650px;
   }

   .footer-hero {
      padding-top: 40px;
   }

   .cta-info-container {
      padding: 45px 7%;
      margin-bottom: 20px;
   }

   .cta-info-container h2 {
      font-size: 34px;
      max-width: 550px;
   }


   /* FOOTER */

   .site-footer {
      width: 94%;
      min-height: auto;
      padding: 45px 6% 25px;
      border-radius: 25px;
   }

   .footer-container {
      grid-template-columns: 1.4fr 1fr;
      gap: 40px 60px;
   }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
     nav,
   .hero-box,
   .hero-content {
      max-width: 100%;
   }

   .hero-box {
      height: 540px;
      background-position: center center;
   }

   .hero-content {
      margin-left: 0;
      padding: 0 25px;
      max-width: 100%;
   }

   .hero-content h1 {
      font-size: 34px;
      line-height: 1.15;
   }

   .hero-content p {
      width: 100%;
      max-width: 100%;
      font-size: 15px;
      line-height: 1.7;
   }


   .logistics {
   width: fit-content;
   max-width: 100%;

   padding: 9px 18px;
   top: 0;

   gap: 9px;
   border-radius: 30px;
}

.logistics img {
   width: 17px;
   height: 17px;

   margin: 0;
   flex-shrink: 0;
}

.logistics-heading {
   font-size: 11px;
   line-height: 1.3;
   letter-spacing: 0.6px;

   white-space: nowrap;
}


 /* HOW WE WORK */

.process-section {
   padding: 80px 6%;
}

.process-intro {
   margin-bottom: 50px;
}

.process-intro-heading {
   font-size: 34px;
   max-width: 600px;
}

.process-intro > p {
   font-size: 15px;
   line-height: 1.6;
   max-width: 520px;
   margin-left: auto;
   margin-right: auto;
}

.process-info {
   grid-template-columns: repeat(2, 1fr);
   gap: 50px 35px;
}

.process-container > p:last-child {
   max-width: 230px;
}



/* ABOUT US */
.company-info-container {
      flex-direction: column;
      gap: 65px;

      width: 100%;
      max-width: 100%;
      padding-top: 80px;
   }

   .truck-container {
      width: 100%;
      flex-shrink: 1;
   }

   .truck-image {
      width: 90%;
      margin: 0 auto;
   }

   .truck-image img {
      width: 100%;
      height: auto;
      margin-top: 0;
   }

   .company-info {
      width: 100%;
   }

   .company-info h1 {
      font-size: 36px;
}
   .experience-box {
   left: -20px;
   bottom: -25px;
}


/* SERVICES SECTION */

.services-section {
   padding: 70px 8% 85px;
}

.service-heading {
   margin-bottom: 60px;
}

.service-heading h1 {
   font-size: 36px;
   max-width: 600px;
}

.service-card {
   height: 290px;
}

.service-info {
   padding: 18px;
}

.service-name h3 {
   font-size: 17px;
}

.service-summary {
   font-size: 13px;
}

.service-feature span {
   font-size: 12px;
}

.service-card {
      flex: 0 0 100%;
      min-width: 100%;
      max-width: 100%;
      height: 300px;
   }



   .why-choose-container {
      height: auto;
   }

   .why-choose-content {
      width: 50%;
      margin-top: 0;
      padding: 50px 5%;
   }

   .yard-image-container {
      width: 50%;
      height: auto;
   }

   .why-choose-headings h2 {
      font-size: 34px;
   }

   .circle-stats {
      gap: 25px;
      flex-direction: column;
   }


   /* STATS SECTION */

.why-choose-stats {
   padding: 60px 6%;
}

.stats-container {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: 20px;
   row-gap: 40px;
   width: 100%;
}

.transport-stats {
   width: auto;
   min-width: 0;
   padding: 0;
}

.transport-stats::after {
   display: none;
}

.stats-top {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
}

.stats-top img {
   width: 30px;
   height: 30px;
   flex-shrink: 0;
}

.stats-text {
   min-width: 0;
}

.stats-text strong {
   font-size: 30px;
}

.stats-text p {
   font-size: 13px;
   line-height: 1.4;
}



/* QUOTE SECTION */

.logistic-quote-section {
   padding: 70px 0;
}

.logistic-form-container {
   width: 88%;
   max-width: 650px;

   flex-direction: column;
}


/* BLUE INFORMATION PANEL */

.logistic-services {
   width: 100%;
   padding: 35px 30px;

   border-radius: 12px 12px 0 0;
}


/* WHITE FORM */

.logistic-form {
   width: 100%;
   padding: 35px 30px;

   border-radius: 0 0 12px 12px;
}


/* KEEP TWO FORM COLUMNS ON TABLET */

.logistic-input-row {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* VERY IMPORTANT */

.logistic-input {
   min-width: 0;
}

.logistic-input input,
.logistic-input select,
.extra-info textarea {
   width: 100%;
   max-width: 100%;
}


/* LEFT PANEL */

.logistic-services .track-btn-two {
   margin-top: 20px;
}

.contant-container {
   max-width: 350px;
}
}


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

@media (max-width: 768px) {

   .testimonials-section {
      padding: 70px 6%;
   }

   .testimonial-intro {
      margin-bottom: 40px;
   }

   .testimonial-intro h2 {
      font-size: 32px;
   }

   .testimonials-quotes {
      grid-template-columns: 1fr;
      max-width: 520px;
      gap: 20px;
   }

   .testimonial-card {
      min-height: auto;
      padding: 30px;
   }

   .testimonial-text {
      margin: 10px 0 25px;
      font-size: 14px;
      line-height: 1.7;
   }
}

/* =========================
   JOB REQUEST - MOBILE
========================= */

@media (max-width: 600px) {

     .why-choose-headings h2 {
      margin-bottom: 25px;
   }

   .why-choose-details p {
      margin-top: 0;
   }

   .circle-stats {
      margin-top: 30px;
   }

   .why-choose-cta p {
      margin-top: 30px;
   }

   .why-choose-container {
      flex-direction: column;
      height: auto;
   }

   .why-choose-content {
      width: 100%;
   }

   .yard-image-container {
   width: 100%;
   height: 490px;
   }

   .yard-image-container img {
   object-position: center 35%;
}


   .circle-stats {
      flex-direction: row;
      gap: 35px;
      align-items: center;
   }

   .circle-stat {
      gap: 12px;
   }



    .job-request-section {
      padding: 60px 7%;
   }

   .job-request-container {
      gap: 40px;
   }

   .job-info-container h1 {
      font-size: 32px;
      line-height: 1.15;
   }

   /* Stack the contents inside each process card */
   .job-order-container {
      flex-direction: column;
      align-items: flex-start;

      min-height: auto;
      padding: 30px 25px;
   }

   .job-order-name {
      width: 100%;
      padding-right: 0;
      padding-bottom: 20px;

      /* change vertical divider to horizontal divider */
      border-right: none;
      border-bottom: 1px solid #0671dd;
   }

   .job-order-step {
      width: 100%;

      padding-left: 0;
      padding-top: 22px;
   }

   /* Divider for permanent dark card */
   .job-order-container:nth-child(2) .job-order-name {
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.35);
   }

   /* Divider when cards 1 and 3 are hovered */
   .job-order-container:nth-child(1):hover .job-order-name,
   .job-order-container:nth-child(3):hover .job-order-name {
      border-right: none;
      border-bottom-color: rgba(255, 255, 255, 0.35);
   }
}


@media (max-width: 550px) {

   .footer-hero {
      padding: 35px 0 25px;
      background-position: 60% center;
   }


   /* CTA */

   .cta-info-container {
      padding: 35px 7%;
      margin-bottom: 15px;
   }

   .cta-info-container h2 {
      font-size: 30px;
      line-height: 1.15;
   }

   .cta-info-container p {
      font-size: 14px;
      line-height: 1.6;
   }

   .cta-contact {
      flex-wrap: wrap;
      gap: 20px;
   }

   .cta-request-btn {
      font-size: 14px;
      padding: 12px 20px;
   }

   .cta-call {
      font-size: 17px;
   }

   .cta-call img {
      width: 20px;
      height: 20px;
   }


   /* FOOTER */

   .site-footer {
      width: 92%;
      padding: 40px 7% 22px;
      border-radius: 22px;
   }

   .footer-container {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .footer-container h3 {
      margin-bottom: 15px;
   }

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

   .footer-description {
      max-width: 300px;
      font-size: 14px;
   }

   .footer-office-hours p,
   .footer-address p {
      font-size: 14px;
   }

   .footer-bottom {
      margin-top: 20px;
   }

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




@media (max-width: 750px) {

   .service-card {
      flex: 0 0 100%;
      min-width: 100%;
      max-width: 100%;
      height: 300px;
   }

}

@media (max-width: 600px) {

   .service-card {
      flex: 0 0 100%;
      min-width: 100%;
      max-width: 100%;
      height: 300px;
   }


     .footer-hero {
    padding-top: 40px;
  }

  .cta-info-container {
    padding: 40px 7%;
    margin-bottom: 20px;
  }

  .cta-info-container h2 {
    font-size: 32px;
    line-height: 1.15;
  }

  .cta-info-container p {
    font-size: 15px;
    line-height: 1.6;
  }

  .cta-contact {
    gap: 18px;
  }

  .cta-request-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .cta-call {
    font-size: 17px;
  }

  .cta-call img {
    width: 20px;
    height: 20px;
  }

}





@media (max-width: 500px) {

   .logistic-quote-section {
      padding: 60px 0;
   }

   .logistic-form-container {
      width: 94%;
   }


   /* HEADING */

   .logistic-headings {
      margin-bottom: 30px;
      padding: 0 20px;
   }

   .logistic-headings h2 {
      font-size: 26px;
   }


   /* BLUE PANEL */

   .logistic-services {
      padding: 30px 25px;
   }

   .logistic-services h2 {
      font-size: 24px;
   }


   /* FORM */

   .logistic-form {
      padding: 30px 25px;
   }

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

   .logistic-form-header h2 {
      font-size: 24px;
   }


   /* TWO COLUMNS → ONE COLUMN */

   .logistic-input-row {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
   }


   .logistic-input input,
   .logistic-input select {
      width: 100%;
   }


   /* SUBMIT BUTTON */

   .submit-btn-container button {
      width: 100%;
      max-width: 280px;
   }
}

/* Mobile */
@media (max-width: 480px) {

   .hero {
      height: 520px;
   }
   
   .hero-box {
   background-size: auto 100%;
   background-position: center center;
   animation: none;
}

   .hero-content {
      padding: 0 20px;
   }

    .hero-content h1 {
      font-size: 30px;
      line-height: 1.08;
   }

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

   /* HOW WE WORK - MOBILE */

.process-section {
   padding: 70px 20px;
}

.process-intro {
   margin-bottom: 45px;
}

.process-intro-heading {
   font-size: 30px;
   line-height: 1.15;
}

.process-intro > p {
   font-size: 14px;
   line-height: 1.6;
}

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

.process-container h3 {
   font-size: 18px;
}

.process-container > p:last-child {
   max-width: 280px;
}

.process-icon {
   width: 82px;
   height: 82px;
   margin-bottom: 15px;
}


.company-info-container {
      padding-top: 70px;
      gap: 40px;
   }

   .truck-image {
      width: 100%;
   }

   .truck-image img {
      width: 100%;
      height: auto;
   }

   .experience-box {
      left: 0;
      bottom: -25px;

      width: 120px;
      padding: 20px 15px;
   }

   .experience-box strong {
      font-size: 46px;
   }

   .experience-box span {
      font-size: 12px;
      padding-left: 0;
      text-align: center;
   }

   .company-info h1 {
      font-size: 31px;
      line-height: 1.15;
   }

   .company-info {
      width: 100%;
   }

   .services-section {
      padding: 70px 8% 70px;
   }

   .services-container {
      overflow-x: hidden;
      overflow-y: visible;

   }

   .service-heading {
      margin-bottom: 50px;
   }

   .service-heading h3 {
      font-size: 12px;
   }

   .service-heading h1 {
      font-size: 30px;
      line-height: 1.25;
   }
.service-card {
      flex: 0 0 100%;
      min-width: 100%;
      max-width: 100%;

      height: auto;
      overflow: visible;
   }

   .service-catalog {
      flex-direction: column;
      height: auto;
   }

   .service-image {
      flex: none;
      width: 100%;
      height: 100px;
   }

   .service-info {
      flex: none;
      width: 100%;
      height: auto;
      padding: 18px 22px 22px;
   }


   .testimonials-section {
      padding: 60px 20px;
   }

   .testimonial-intro {
      margin-bottom: 35px;
   }

   .testimonial-label {
      font-size: 12px;
   }

   .testimonial-intro h2 {
      font-size: 28px;
   }

   .testimonial-intro p {
      font-size: 14px;
   }

   .testimonial-card {
      padding: 25px 22px;
   }

   .quote-mark {
      font-size: 48px;
   }

   .testimonial-text {
      font-size: 14px;
   }

}

@media (max-width: 400px) {

   nav {
      padding-left: 18px;
      padding-right: 18px;
   }

   .hero-content {
      width: 100%;
      max-width: none;
      padding-left: 26px;
      padding-right: 26px;
   }
    .hero-box {
      height: 580px;
   }

   .hero-content h1 {
      font-size: 30px;
      line-height: 1.08;
   }

   .hero-content p {
      font-size: 14px;
      line-height: 1.6;
   }

   .logistics {
   width: fit-content;
   max-width: 100%;

   padding: 8px 16px;

   top: 0;

   border-radius: 30px;

   gap: 8px;
}

.logistics img {
   width: 16px;
   height: 16px;

   margin: 0;

   flex-shrink: 0;
}

.logistics-heading {
   font-size: 10px;
   line-height: 1.3;
   letter-spacing: 0.5px;

   white-space: nowrap;
}

 .job-request-section {
      padding-left: 7%;
      padding-right: 7%;
   }

   .job-info-container h1 {
      font-size: 28px;
      line-height: 1.12;
   }

   .job-order-container {
      padding: 28px 22px;
   }


     .container-info a {
      font-size: 16px;
      gap: 8px;
   }

   .container-info a img {
      width: 18px;
      height: 18px;
   }


    .submit-btn-container button {
      width: 100%;
      padding: 15px 10px;
      font-size: 14px;
      gap: 8px;
      white-space: nowrap;
   }

   .submit-btn-container img {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
   }




}





html,
body {
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
}

@media (max-width: 400px) {

   .company-info h1 {
      font-size: 28px;
      line-height: 1.15;
   }



   .circle-stats {
      gap: 15px;
      justify-content: space-between;
   }

   .circle-stat {
      gap: 8px;
      flex: 1;
      min-width: 0;
   }

   .circle-progress {
      flex: 0 0 60px;
      width: 60px;
      height: 60px;
   }

   .circle-inner {
      width: 46px;
      height: 46px;
      font-size: 10px;
   }

   .circle-stat h3 {
      font-size: 11px;
      line-height: 1.3;
   }



   .stats-container {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: 12px;
   row-gap: 45px;
}

.why-choose-stats {
   padding-left: 5%;
   padding-right: 5%;
}

.stats-top {
   gap: 9px;
}

.stats-top img {
   width: 28px;
   height: 28px;
}

.stats-text strong {
   font-size: 30px;
}

.stats-text p {
   font-size: 12px;
   line-height: 1.4;
   margin-top: 5px;
}

    .tracking-section {
      min-height: 560px;
   }

   .tracking-container {
      padding: 65px 20px;
   }

   .tracking-content {
      width: 100%;
      max-width: 100%;
   }

   .tracking-content h2 {
      max-width: 290px;
      font-size: 34px;
      line-height: 1.12;
      margin: 18px auto 25px;
   }

   .tracking-content p {
      max-width: 290px;
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 28px;
   }

   .tracking-intro h3 {
      font-size: 12px;
   }

   .tracking-intro img {
      width: 36px;
   }

   .update-btn {
      padding: 14px 25px;
      font-size: 13px;
   }

    .footer-container {
      gap: 24px;
   }


    .cta-info-container h2 {
    font-size: 28px;
  }

  .cta-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }


}



/* =========================
   SCROLL REVEAL ANIMATIONS
========================= */





.reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 2s ease, transform 2s ease;
}

.reveal.reveal-active {
   opacity: 1;
   transform: translateY(0);
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

   .reveal {
      opacity: 1;
      transform: none;
      transition: none;
   }

}


/* Staggered reveal */

.reveal-delay-1 {
   transition-delay: 0.1s;
}

.reveal-delay-2 {
   transition-delay: 0.2s;
}

.reveal-delay-3 {
   transition-delay: 0.3s;
}

@media (max-width: 768px) {

   .process-container.reveal-delay-1 {
      transition-delay: 0.1s;
   }

   .process-container.reveal-delay-2 {
      transition-delay: 0s;
   }

   .process-container.reveal-delay-3 {
      transition-delay: 0.1s;
   }

   .testimonial-card.reveal-delay-2 {
      transition-delay: 0s;
   }

}

@media (max-width: 500px) {

   .process-container.reveal {
      transition-delay: 0s;
   }


   .testimonial-card.reveal {
      transition-delay: 0s;
   }

}


.yard-image-container.reveal {
   transform: none;
}

.yard-image-container.reveal.reveal-active {
   transform: none;
}