html, body {
      margin: 0;
      padding: 0;
      scroll-behavior: smooth;
      overflow-x: hidden;
    }
	
	
    @keyframes flyLoop {
        0%   { transform: translateX(0); }
        49.999% { transform: translateX(120vw); }
        50%  { transform: translateX(120vw) scaleX(-1); }
        100% { transform: translateX(0) scaleX(-1); }
    }

    .plane-loop {
        position: absolute;
        top: 30%;
        left: -200px;
        width: 120px;
        animation: flyLoop 20s ease-in-out infinite;
    }
	
	@media (max-width: 768px) {
    @keyframes flyLoop {
      0%   { transform: translateX(0); }
      49.999% { transform: translateX(155vw); }
      50%  { transform: translateX(155vw) scaleX(-1); }
      100% { transform: translateX(0) scaleX(-1); }
    }

    .plane-loop {
      width: 120px;
    }
  }
  
  /* General truck positioning */
	.test-section{
        width:100%;
        height:auto;
        background:#d1e8ff;
        position:relative;
        overflow:hidden;
        /* border:5px solid #004b8d; */
    }

    .road{
        position:absolute;
        bottom:0;
        width:100%;
        height:80px;
        background:#333;
    }

    /* Left → Right */
    .truck-ltr{
        position:absolute;
        bottom:2px;
        left:-300px;
        width:400px;
        animation: moveRight 7s linear infinite;
        z-index:10;
    }

    @keyframes moveRight{
        0%{ left:-300px; }
        100%{ left:110%; }
    }

    /* Right → Left */
    .truck-rtl{
        position:absolute;
        bottom:2px;
        right:-300px;
        width:250px;
        transform: scaleX(1);   /* flip */
        animation: moveLeft 8s linear infinite;
    }

    @keyframes moveLeft{
        0%{ right:-300px; }
        100%{ right:110%; }
    }


    /* Home Carousel */
.carousel-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    background: url("../img/bg1.png") center/cover no-repeat;
}

/* Total duration = 25s (5 slides × 5s each) */
.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: crossfade 25s infinite ease-in-out;
}

/* 5s per slide */
.slide1 { animation-delay: 0s; }
.slide2 { animation-delay: 5s; }
.slide3 { animation-delay: 10s; }
.slide4 { animation-delay: 15s; }
.slide5 { animation-delay: 20s; }

@keyframes crossfade {
    0%   { opacity: 0; }
    4%   { opacity: 1; }  /* fade in */
    20%  { opacity: 1; }  /* fully visible */
    24%  { opacity: 0; }  /* fade out */
    100% { opacity: 0; }
}





	
	/*About*/
	.timeline-wrapper {
      position: relative;
      height: 2400px; /* More height for scroll */
    }
    .timeline-container {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 100%;
    }
    .glow-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: linear-gradient(to bottom, #0ea5e9, #38bdf8);
      box-shadow: 0 0 20px #38bdf8;
      border-radius: 9999px;
    }
    .dot {
      position: absolute;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      background: #38bdf8;
      border: 4px solid #0ea5e9;
      border-radius: 50%;
      opacity: 0;
      z-index: 10;
	  left:2px;
    }
    .timeline-card {
      position: absolute;
      width: 250px;
      background: #2f3c51;	  
      padding: 16px;
      border-radius: 0.5rem;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      opacity: 0;
      transform: translateY(20px);
	  color: white;
    }
    .left-card {
      right: calc(50% + 30px);
      text-align: right;
	  border-left: 4px solid #38bdf8;
    }
    .right-card {
      left: calc(50% + 30px);
      text-align: left;
	  border-right: 4px solid #38bdf8;
    }

    @media (max-width: 768px) {
      .timeline-container {
        left: 10%;
      }
      .timeline-card {
        left: 20% !important;
        /*width: 100%;*/
        text-align: center;
		border-right: 4px solid #38bdf8;
      }
      .left-card, .right-card {
        right: auto !important;
      }
	  .dot {
		  left:0;
		}
    }