:root {
      --motion-ease: cubic-bezier(.2, .8, .2, 1);
      --float-duration: 6s;
      --card-raise: 20px;
      --pulse-duration: 3s;
    }

    /* Prevent accidental horizontal overflow on small screens */
    html { overflow-x: hidden; }

    body {
      background-color: #0a0a0a;
      color: #e5e5e5;
    }

    /* Enhanced 3D Card with continuous subtle movement */
    .card-3d {
      transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateZ(0);
      transition: transform 0.6s var(--motion-ease), box-shadow 0.4s var(--motion-ease);
      box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(34, 197, 94, 0.1);
      animation: gentleFloat 8s var(--motion-ease) infinite;
      background: #111111;
    }

    .card-3d:hover {
      transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(var(--card-raise)) scale(1.02);
      box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(34, 197, 94, 0.3);
      animation-play-state: paused;
    }

    @keyframes gentleFloat {

      0%,
      100% {
        transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateZ(0) translateY(0px);
      }

      50% {
        transform: perspective(1000px) rotateX(4deg) rotateY(-6deg) translateZ(0) translateY(-8px);
      }
    }

    /* Glass Effect */
    .glass {
      backdrop-filter: blur(10px);
      background: rgba(17, 24, 39, 0.7);
      /* border: 1px solid rgba(34, 197, 94, 0.2); */
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #1a1a1a;
    }

    ::-webkit-scrollbar-thumb {
      background: #22c55e;
      border-radius: 10px;
    }

    /* Pulsing glow effect */
    .glow {
      box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
    }

    .pulse-glow {
      animation: pulseGlow 4s ease-in-out infinite;
    }

    @keyframes pulseGlow {

      0%,
      100% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
      }

      50% {
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
      }
    }

    /* Vehicle showcase grid */
    .vehicle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.5rem;
    }

    .vehicle-card {
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      background: #111111;
      transition: all 0.3s ease;
    }

    .vehicle-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    }

    /* Stats grid */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
    }

    /* Compact pricing cards */
    .pricing-card {
      background: #111111;
      border: 1px solid #1a1a1a;
      transition: all 0.3s ease;
    }

    .pricing-card:hover {
      border-color: #22c55e;
      transform: translateY(-5px);
    }
    
    /* Compact instructor cards */
    .instructor-card {
      background: #111111;
      border: 1px solid #1a1a1a;
      transition: all 0.3s ease;
    }
    
    .instructor-card:hover {
      border-color: #22c55e;
      transform: translateY(-5px);
    }
    
    /* Compact testimonial cards */
    .testimonial-card {
      background: #111111;
      border: 1px solid #1a1a1a;
      transition: all 0.3s ease;
    }
    
    .testimonial-card:hover {
      border-color: #22c55e;
    }
    
    /* Compact FAQ */
    .faq-item {
      background: #111111;
      border: 1px solid #1a1a1a;
      transition: all 0.3s ease;
    }
    
    .faq-item:hover {
      border-color: #22c55e;
    }
    
    .faq-item[open] {
      border-color: #22c55e;
      background: rgba(34, 197, 94, 0.05);
    }
    
    /* Improved mobile menu */
    .mobile-menu {
      background: rgba(10, 10, 10, 0.95);
      backdrop-filter: blur(10px);
    }
    
    /* Improved form styling */
    .form-input {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      color: #e5e5e5;
    }

    .form-input:focus {
      border-color: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    /* Improved footer */
    .footer-link:hover {
      color: #22c55e;
    }
    /* Small screens (e.g., up to 640px) */
    @media (max-width: 640px) {
      /* Horizontal scroll container utility: convert grid -> single-row scrollable list */
      .horizontal-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scroll-snap-type: x proximity !important;
        padding-bottom: 0.625rem !important;
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
      }

      /* Each child becomes a snap-aligned card with fixed relative width */
      .horizontal-scroll > * {
        scroll-snap-align: start !important;
        flex: 0 0 80% !important;
        min-width: 260px !important;
        max-width: 420px !important;
        box-sizing: border-box !important;
        transform: none !important; /* cancel earlier blanket scaling */
      }

      /* Tweak padding so cards fit better in the viewport */
      .horizontal-scroll > * .p-6,
      .horizontal-scroll > * .p-5,
      .horizontal-scroll > * .p-4 {
        padding: 0.6rem !important;
      }

      /* Improve scrollbar appearance (light, narrow) */
      .horizontal-scroll::-webkit-scrollbar { height: 8px; }
      .horizontal-scroll::-webkit-scrollbar-track { background: transparent; }
      .horizontal-scroll::-webkit-scrollbar-thumb { background: rgba(34,197,94,0.25); border-radius: 8px; }

      /* Prevent page horizontal overflow */
      html, body { overflow-x: hidden !important; }
    }
    @media (max-width: 767px) {
      /* The camera-controls attribute enables interaction */
      /* By removing the attribute via CSS, interaction is disabled. */
      model-viewer[camera-controls] {
        pointer-events: none; /* Prevents all mouse/touch interaction */
      }
    }
    
    /* signals sign scroll  */
    .infinite-scroll-container {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      background-color: white;
    }

    .scrolling-content {
      display: inline-block;
      animation: scroll 30s linear infinite;
      padding: 10px 0;
    }

    .scrolling-content img {
      display: inline-block;
      height: 80px; /* Adjust as needed */
      margin: 0 0px;
      vertical-align: middle;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-200%);
      }
    }

    /* Pause on hover */
    .scrolling-content:hover {
      animation-play-state: paused;
    }

    /* Responsive speed adjustment */
    @media (max-width: 768px) {
      .scrolling-content {
        animation: scroll 20s linear infinite;
      }
      .scrolling-content img {
        height: 65px;
      }
    }