body {
       font-family: 'Manrope', sans-serif;
   }

   html {
       scroll-behavior: smooth;
   }

   /* Truck Cursor Styles */
   #truckCursor {
       position: fixed;
       pointer-events: none;
       z-index: 99998;
       opacity: 0;
       transition: opacity 0.3s ease;
       transform: translate(-50%, -50%);
   }

   #truckCursor.active {
       opacity: 1;
   }

   .truck-cursor-inner {
       font-size: 20px;
       animation: gearRotate 1s linear infinite;
       filter: drop-shadow(0 0 4px rgba(255, 122, 24, 0.6));
   }

   @keyframes gearRotate {
       from {
           transform: rotate(0deg);
       }

       to {
           transform: rotate(360deg);
       }
   }

   /* Hero slider animations */
   @keyframes kenBurns {
       from {
           transform: scale(1.06);
       }

       to {
           transform: scale(1);
       }
   }

   /* Navigation link styles */
   .nav-link {
       color: #a1a8b6;
       padding: 28px 18px;
       position: relative;
       transition: 0.3s;
   }

   .nav-link:hover,
   .nav-link.active {
       color: #fff;
   }

   .nav-link::after {
       content: '';
       position: absolute;
       bottom: 20px;
       left: 18px;
       right: 18px;
       height: 3px;
       background: #fc811b;
       transform: scaleX(0);
       transition: 0.3s;
   }

   .nav-link:hover::after,
   .nav-link.active::after {
       transform: scaleX(1);
   }

   /* Hero slider */
   .hero {
       position: relative;
       overflow: hidden;
       height: 700px;
   }

   .slide {
       position: absolute;
       inset: 0;
       opacity: 0;
       transition: opacity 1s ease;
       z-index: 1;
   }

   .slide.active {
       opacity: 1;
       z-index: 2;
   }

   .slide-bg {
       position: absolute;
       inset: 0;
   }

   .slide-bg img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transform: scale(1.06);
       animation: kenBurns 9s ease forwards;
   }

   .slide-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to right, rgba(19, 34, 60, .82) 40%, rgba(19, 34, 60, .35));
       z-index: 2;
   }

   .slide-content {
       position: absolute;
       inset: 0;
       z-index: 3;
       display: flex;
       align-items: center;
       padding: 0 10%;
       flex-direction: column;
       justify-content: center;
       text-align: center;
   }

   .slide-tag,
   .slide-desc,
   .slide-content h1,
   .slide-btns {
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.6s ease;
   }

   .slide.active .slide-tag,
   .slide.active .slide-desc,
   .slide.active .slide-btns,
   .slide.active .slide-content h1 {
       opacity: 1;
       transform: translateY(0);
   }

   .slide-tag {
       font-size: 13px;
       color: #fc811b;
       letter-spacing: 4px;
       text-transform: uppercase;
       margin-bottom: 15px;
   }

   .slide-content h1 {
       font-size: clamp(34px, 5vw, 70px);
       color: #fff;
       font-weight: 700;
       line-height: 1.1;
       margin-bottom: 20px;
   }

   .slide-desc {
       color: rgba(255, 255, 255, .75);
       max-width: 550px;
       margin-bottom: 30px;
   }

   .btn-primary {
       background: #fc811b;
       color: #fff;
       padding: 14px 32px;
       text-transform: uppercase;
       font-weight: 700;
       clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%);
       transition: all 0.2s;
   }

   .btn-primary:hover {
       background: #e06a0a;
       transform: translateY(-3px);
   }

   .btn-secondary {
       border: 2px solid rgba(255, 255, 255, .5);
       color: #fff;
       padding: 12px 30px;
       text-transform: uppercase;
       font-weight: 700;
       transition: all 0.25s;
   }

   .btn-secondary:hover {
       background: #fc811b;
       border-color: #fff;
   }

   .hero-arrows {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 100%;
       display: flex;
       justify-content: space-between;
       padding: 0 20px;
       z-index: 10;
       pointer-events: none;
   }

   .hero-arr {
       pointer-events: all;
       width: 48px;
       height: 48px;
       border: 2px solid rgba(255, 255, 255, .35);
       color: #fff;
       background: rgba(19, 34, 60, .4);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all .2s;
       font-size: 16px;
   }

   .hero-arr:hover {
       border-color: #fc811b;
       background: #fc811b;
   }

   .hero-dots {
       position: absolute;
       bottom: 25px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 10;
       display: flex;
       gap: 10px;
   }

   .hdot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: rgba(255, 255, 255, .4);
       cursor: pointer;
       transition: all .25s;
   }

   .hdot.active {
       background: #fc811b;
       transform: scale(1.2);
   }

   /* Decorative Image Responsiveness */
   #decorativeImage {
       position: absolute;
       z-index: 10;
       pointer-events: none;
       width: 563px;
       height: 253px;
       bottom: -1px;
       right: 75px;
   }

   @media (max-width: 1280px) {
       #decorativeImage {
           display: none;
       }
   }

   /* Scroll transparency effect */
   .top-bar {
       transition: all 0.3s ease;
   }

   .top-bar.scrolled {
       background-color: rgba(111, 99, 99, 0);
       border-color: rgba(0, 0, 0, 0);
   }

   header {
       transition: all 0.3s ease;
   }

   header.scrolled {
       background-color: rgba(85, 86, 87, 0.72);
   }

   /* SCROLL TOP */
   .scroll-top {
       position: fixed;
       bottom: 28px;
       right: 28px;
       width: 46px;
       height: 46px;
       background: orange;
       border-radius: 50%;
       color: #fff;
       display: none;
       align-items: center;
       justify-content: center;
       font-size: 17px;
       cursor: pointer;
       z-index: 9999;
   }

   .scroll-top.show {
       display: flex;
   }

   .scroll-top:hover {
       background: var(--dark);
   }

   @keyframes pulseGlow {
       0% {
           box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6);
       }

       70% {
           box-shadow: 0 0 0 12px rgba(249, 115, 22, 0);
       }

       100% {
           box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
       }
   }

   .scroll-glow {
       animation: pulseGlow 2s infinite;
   }

   /* ===== TRUCK LOADER ===== */
   /* ================= CONTAINER ================= */
   .loader-container {
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   /* ================= TRUCK ================= */
   .truck {
       position: relative;
       width: 130px;
       /* ✅ small size */
       animation: truckBounce 1.6s ease-in-out infinite;
   }

   /* Layout */
   .truck-body {
       display: flex;
       align-items: flex-end;
       gap: 3px;
   }

   /* ================= CONTAINER (BACK) ================= */
   .truck-container {
       width: 70px;
       height: 32px;
       background: linear-gradient(135deg, #ff7a18, #ffb347);
       /* colorful */
       border-radius: 5px;
       position: relative;
       box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
   }

   /* Panel lines */
   .truck-container::before {
       content: '';
       position: absolute;
       inset: 5px;
       border: 1px solid rgba(255, 255, 255, 0.3);
       border-radius: 3px;
   }

   /* ================= CABIN ================= */
   .truck-cabin {
       width: 36px;
       height: 28px;
       background: linear-gradient(135deg, #ffffff, #e5e7eb);
       border-radius: 5px 5px 3px 3px;
       position: relative;
       box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
   }

   /* Window */
   .truck-cabin::before {
       content: '';
       position: absolute;
       top: 5px;
       left: 6px;
       width: 18px;
       height: 10px;
       background: #13223c;
       border-radius: 2px;
   }

   /* Headlight */
   .truck-cabin::after {
       content: '';
       position: absolute;
       bottom: 4px;
       right: -3px;
       width: 5px;
       height: 5px;
       background: #ffd700;
       border-radius: 50%;
   }

   /* ================= WHEELS ================= */
   .wheels {
       display: flex;
       justify-content: space-between;
       width: 95px;
       margin-top: 5px;
   }

   /* Wheel */
   .wheel {
       width: 16px;
       height: 16px;
       background: radial-gradient(circle at center, #444 30%, #111 70%);
       border-radius: 50%;
       position: relative;
       animation: wheelSpin 0.5s linear infinite;
   }

   /* Rim (realistic) */
   .wheel::after {
       content: '';
       position: absolute;
       inset: 4px;
       background: radial-gradient(circle, #bbb, #666);
       border-radius: 50%;
   }

   /* ================= ROAD ================= */
   .road {
       width: 130px;
       height: 3px;
       margin-top: 6px;
       background: repeating-linear-gradient(to right,
               #fff,
               #fff 12px,
               transparent 12px,
               transparent 24px);
       animation: roadMove 0.6s linear infinite;
       border-radius: 2px;
   }

   /* ================= TEXT ================= */
   .loader-text {
       color: #fff;
       font-size: 9px;
       letter-spacing: 2px;
       margin-top: 6px;
       opacity: 0.8;
       animation: pulse 1.5s infinite;
   }

   /* ================= ANIMATIONS ================= */
   @keyframes truckBounce {

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

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

   @keyframes wheelSpin {
       from {
           transform: rotate(0deg);
       }

       to {
           transform: rotate(360deg);
       }
   }

   @keyframes roadMove {
       from {
           background-position: 0 0;
       }

       to {
           background-position: 24px 0;
       }
   }

   @keyframes pulse {

       0%,
       100% {
           opacity: 0.4;
       }

       50% {
           opacity: 1;
       }
   }

   /* ================= DECORATIVE IMAGE ANIMATION ================= */
   #decorativeImage {
       position: absolute;
       z-index: 10;
       pointer-events: none;
       width: 563px;
       height: 253px;
       bottom: -10px;
       right: 75px;
       opacity: 0;
       filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.3));
   }

   /* Smooth reveal on page load + gentle floating animation */
   #decorativeImage {
       animation:
           decorativeReveal 1.8s ease-out forwards 600ms,
           decorativeGentleFloat 8s ease-in-out infinite 2.8s;
   }

   @keyframes decorativeReveal {
       from {
           opacity: 0;
           transform: translateY(90px) scale(0.88);
       }

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

   /* Hide on smaller screens */
   @media (max-width: 1280px) {
       #decorativeImage {
           display: none;
       }
   }