/* =========================================================
       CSS VARIABLES – ek jagah rango aur fonts ko control karo
    ========================================================= */
 :root {
   --clr-bg: #E8ECEF;
   /* dark background */
   --clr-surface: #f0f4f7;
   /* cards / sections */
   --clr-accent: #f59e0b;
   /* amber / gold accent */
   --clr-accent2: #ef4444;
   /* red highlight */
   --clr-text: #110f0f;
   /* main text */
   --clr-muted: #f8f5f5;
   /* secondary text */
   --clr-border: #1e293b;
   /* subtle borders */
   --font-head: 'Oswald', sans-serif;
   --font-body: 'Nunito Sans', sans-serif;
   --radius: 20px;
   --transition: 0.3s ease;
   --max-w: 1200px;
 }

 /* =========================================================
       RESET & BASE
    ========================================================= */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: var(--font-body);
   background: var(--clr-bg);
   color: var(--clr-text);
   line-height: 1.7;
   overflow-x: hidden;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 img {
   max-width: 100%;
   display: block;
 }

 ul {
   list-style: none;
 }

 /* =========================================================
       UTILITY CLASSES
    ========================================================= */
 .container {
   width: min(var(--max-w), 95%);
   margin-inline: auto;
 }

 /* Section heading style */
 .section-label {
   font-size: 0.78rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--clr-accent);
   font-weight: 700;
   margin-bottom: 0.5rem;
 }

 .section-title {
   font-family: var(--font-head);
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 700;
   line-height: 1.15;
   margin-bottom: 1rem;
 }


 .section-desc {
   color: var(--clr-text);
   max-width: 560px;
   font-size: 1rem;
 }

 /* Gold accent button */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.8rem;
   border-radius: 50px;
   font-family: var(--font-head);
   font-size: 0.95rem;
   letter-spacing: 0.06em;
   font-weight: 600;
   cursor: pointer;
   border: none;
   transition: var(--transition);
 }

 .btn-primary {
   background: var(--clr-accent);
   color: #0a0d14;
 }

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

 .btn-outline {
   background: transparent;
   border: 2px solid var(--clr-accent);
   color: var(--clr-accent);
 }

 .btn-outline:hover {
   background: var(--clr-accent);
   color: #0a0d14;
   transform: translateY(-2px);
 }

 /* Divider line accent */
 .divider {
   width: 60px;
   height: 4px;
   background: var(--clr-accent);
   border-radius: 4px;
   margin-bottom: 1.5rem;
 }

 /* Section padding */
 section {
   padding: 40px 0;
   margin: 0;
 }

 /* =========================================================
       NAVIGATION BAR
    ========================================================= */
 /* =========================================================
   NAVIGATION BAR
========================================================= */
 /* =========================================================
   NAVIGATION BAR
========================================================= */
 #navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background: rgba(10, 18, 30, 0.88);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   transition: all 0.3s ease;
 }

 .nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 82px;
   gap: 20px;
 }

 /* Logo */
 .logo {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   text-decoration: none;
   background-color:  rgba(10, 18, 30, 0.88);
 }

 .logo img {
   height: 70px;
   width: auto;
   object-fit: contain;
   border-radius: 14px;
   display: block;
 }

 /* Desktop nav links */
 .nav-links {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-left: auto;
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
 }

 .nav-links li {
   list-style: none;
 }

 .nav-links a {
   font-size: 0.9rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: #ffffff;
   transition: 0.3s ease;
   position: relative;
   padding-bottom: 4px;
   text-decoration: none;
 }

 .nav-links a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--clr-accent);
   transition: width 0.3s ease;
 }

 .nav-links a:hover {
   color: var(--clr-accent);
 }

 .nav-links a:hover::after {
   width: 100%;
 }

 /* Desktop right section */
 .nav-right {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-left: 18px;
 }

 /* Desktop phone */
 .nav-phone {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   font-size: 0.92rem;
   font-weight: 700;
   color: var(--clr-accent);
   white-space: nowrap;
   transition: 0.3s ease;
   text-decoration: none;
 }

 .nav-phone:hover {
   color: #ffffff;
 }

 /* Desktop socials */
 .nav-socials {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .nav-socials a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--clr-accent);
   color: #ffffff;
   font-size: 15px;
   transition: all 0.3s ease;
   text-decoration: none;
 }

 .nav-socials a:hover {
   background: var(--clr-accent);
   color: #0f172a;
   transform: translateY(-2px);
 }

 /* Mobile top phone */
 .mobile-top-phone {
   display: none;
   align-items: center;
   gap: 6px;
   font-size: 0.82rem;
   font-weight: 700;
   color: var(--clr-accent);
   white-space: nowrap;
   margin-left: auto;
   margin-right: 10px;
   transition: 0.3s ease;
   text-decoration: none;
 }

 .mobile-top-phone:hover {
   color: #ffffff;
 }

 /* Hamburger */
 .hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   cursor: pointer;
   padding: 6px;
   flex-shrink: 0;
 }

 .hamburger span {
   display: block;
   width: 28px;
   height: 3px;
   background: #ffffff;
   border-radius: 3px;
   transition: 0.3s ease;
 }

 /* Mobile Menu */
 .mobile-menu {
   display: none;
   flex-direction: column;
   gap: 0;
   padding: 0.8rem 1rem 1.2rem;
   background: #0f172a;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .mobile-menu a {
   font-size: 0.95rem;
   font-weight: 600;
   color: #ffffff;
   padding: 0.95rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   transition: 0.3s ease;
   text-decoration: none;
 }

 .mobile-menu a:hover {
   color: var(--clr-accent);
 }

 .mobile-menu.open {
   display: flex;
 }

 /* Mobile socials inside menu only */
 .mobile-socials {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-top: 16px;
 }

 .mobile-socials a {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--clr-accent);
   color: #ffffff;
   font-size: 16px;
   transition: 0.3s ease;
   text-decoration: none;
   border-bottom: none !important;
   padding: 0 !important;
 }

 .mobile-socials a:hover {
   background: var(--clr-accent);
   color: #0f172a;
 }

 /* =========================================================
   RESPONSIVE NAVBAR
========================================================= */

 /* Tablet + Mobile */
 @media (max-width: 992px) {

   .nav-links,
   .nav-right {
     display: none !important;
   }

   .nav-inner {
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     min-height: 76px;
     gap: 10px;
   }

   .logo {
     justify-self: start;
   }

   .mobile-top-phone {
     display: flex !important;
     justify-self: center;
     align-items: center;
     justify-content: center;
     margin: 0 !important;
     text-align: center;
   }

   .hamburger {
     display: flex !important;
     justify-self: end;
   }

   .logo img {
     height: 64px;
   }
 }

 /* Mobile */
 @media (max-width: 640px) {
   .logo img {
     height: 60px;
   }

   .nav-inner {
     min-height: 72px;
     gap: 10px;
   }

   .mobile-top-phone {
     font-size: 0.74rem;
     gap: 5px;
     margin-right: 8px;
   }

   .mobile-top-phone i {
     font-size: 0.75rem;
   }
 }

 /* Extra small mobile */
 @media (max-width: 420px) {
   .mobile-top-phone {
     font-size: 0.68rem;
   }

   .logo img {
     height: 60px;
   }

   .hamburger span {
     width: 25px;
   }
 }

 /* Desktop only */
 @media (min-width: 993px) {
   .nav-links {
     display: flex !important;
   }

   .nav-right {
     display: flex !important;
   }

   .mobile-top-phone {
     display: none !important;
   }

   .hamburger {
     display: none !important;
   }

   .mobile-menu {
     display: none !important;
   }
   .mobile-menu.active {
  display: flex;
}
   
 }

 

 /* =========================================================
       HERO SECTION
    ========================================================= */

 /*  #home {
  width: 100%;
  height: 30% !important;
  min-height: 5% !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#home img {
  width: 100%;
  height: auto;        👈 image proportion maintain 
  display: block;
  object-fit: contain; /* 👈 full image show 
}

    /* Animated gradient background */
 /*.hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(245,158,11,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 10% 20%, rgba(239,68,68,0.07) 0%, transparent 60%),
        var(--clr-bg);
      z-index: 0;
    } */

 /* Grid overlay texture */
 /*   .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--clr-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--clr-border) 1px, transparent 1px);
      background-size: 50px 50px;
      opacity: 0.25;
    } */
 /* ===== HERO SECTION FULL BACKGROUND ===== */

 #home {
   position: relative;

   /* 👇 apni image ka path yahan do */
   background-image: url("/Front Page Images/Home-Page-Front-Image.webp");

   background-size: cover;
   /* image full cover kare */
   background-position: center;
   /* center align */
   background-repeat: no-repeat;

   min-height: 80vh;
   width: 100vw;
   /* desktop height */
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   padding: 0;
 }

 .moving-tag {
   position: absolute;
   top: 100px;
   /* default for desktop */
   left: 50%;
   transform: translateX(-50%);
   width: auto;
   max-width: 90%;
   overflow: hidden;
   z-index: 2;
   white-space: nowrap;
   text-align: center;
 }

 .moving-tag span {
   display: inline-block;
   color: var(--clr-accent);
   font-size: 1rem;
   /* default font size */
   font-weight: 700;
   padding-left: 100%;
   /* start off-screen */
   animation: moveTag 20s linear infinite;
 }

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

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

 /* Responsive adjustments */

 /* Tablets (max-width 992px) */
 @media (max-width: 992px) {
   .moving-tag {
     top: 90px;
     /* slightly lower for smaller navbar */
   }

   .moving-tag span {
     font-size: 0.9rem;
   }
 }

 /* Mobile (max-width 768px) */
 @media (max-width: 768px) {
   .moving-tag {
     top: 80px;
     /* adjust based on navbar height */
   }



   .moving-tag span {
     font-size: 0.8rem;
     animation: moveTag 20s linear infinite;
     /* slightly faster on mobile */
   }
 }

 /* Extra small devices (max-width 480px) */
 @media (max-width: 480px) {
   .moving-tag {
     top: 70px;
   }

   .moving-tag span {
     font-size: 0.7rem;
     animation: moveTag 20s linear infinite;
   }
 }


 /* ===== LIGHT OVERLAY (shadow) ===== */
 .home-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

   /* 👇 light shadow (image clearly dikhegi) */
   background: linear-gradient(rgba(0, 0, 0, 0.63),
       rgba(10, 10, 10, 0.781));
   z-index: 1;
   /* content ke peeche rahe */

 }

 /* ===== TEXT CONTENT ===== */
 .home-content {
   position: relative;
   z-index: 1;
   /* overlay ke upar */
   text-align: center;
   max-width: 1000px;
   padding: 0 20px;
   transform: translateY(-10px);
   /* 👈 text upar chala jayega */
 }

 .home-content h1 {
   font-size: 42px;
   margin-bottom: 0px;
   color: #ddd;
 }

 .home-content h2 {
   font-size: 42px;
   margin-bottom: 0px;
 }

 .home-content h3 {
   font-size: 17px;
   margin-bottom: 0px;


 }

 .home-content p {
   font-size: 18px;
   margin-bottom: 0px;
   color: white;
   padding-top: 20px;

 }

 /* ===== BUTTON ===== */
 .home-content .btn {
   background: #f59e0b;
   padding: 8px 20px;
   margin-top: 80px;
   color: white;
   text-decoration: none;
   border-radius: 10px;
 }


 .hero-content {
   position: relative;
   z-index: 1;
   max-width: 700px;
   
 }

 /* Hero badge */
 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   background: rgba(248, 246, 242, 0.15);
   border: 1px solid rgba(245, 158, 11, 0.35);
   padding: 0.4rem 1rem;
   border-radius: 50px;
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--clr-accent);
   margin-bottom: 1.5rem;
   animation: fadeDown 0.8s ease both;
 }

 .hero-title {
   font-family: var(--font-head);
   font-size: clamp(2.2rem, 5.5vw, 4.2rem);
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 1.5rem;
   animation: fadeUp 0.9s 0.15s ease both;
 }

 .hero-title .highlight {
   color: var(--clr-accent);
 }

 .hero-desc {
   color: var(--clr-muted);
   font-size: 1.05rem;
   max-width: 550px;
   margin-bottom: 2.2rem;
   animation: fadeUp 0.9s 0.28s ease both;
 }

 .hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   animation: fadeUp 0.9s 0.4s ease both;
 }

 */
 /* Stats bar */

 .hero-stats {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
   margin-top: 4rem;
   animation: fadeUp 0.9s 0.55s ease both;
 }

 .stat-item {
   display: flex;
   flex-direction: column;
 }

 .stat-number {
   font-family: var(--font-head);
   font-size: 2rem;
   font-weight: 700;
   color: var(--clr-accent);
 }

 .stat-label {
   font-size: 0.82rem;
   color: var(--clr-muted);
   font-weight: 600;
   letter-spacing: 0.05em;
 }

 @keyframes floatY {

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

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

 /* =========================================================
       SERVICES SECTION
    ========================================================= */
 #services {
   background: var(--clr-surface);
 }

 .services-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 3rem;
 }

 /* Services grid */
 .services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1.5rem;
 }

 .service-card {
   background: var(--clr-bg);
   border: 1px solid var(--clr-accent);
   border-radius: var(--radius);
   overflow: hidden;
   transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
   cursor: pointer;
 }

 .service-card:hover {
   transform: translateY(-6px);
   border-color: var(--clr-accent);
   box-shadow: 0 0 30px rgba(247, 246, 245, 0.15);
 }

 /* Image placeholder with gradient overlay */
 .service-img {
   position: relative;
   height: 200px;
   background: linear-gradient(135deg, #1e293b, #0f172a);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 3rem;
   color: var(--clr-accent);
   overflow: hidden;
 }

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

 .service-card:hover .service-img img {
   transform: scale(1.06);
 }

 .service-img-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(10, 13, 20, 0.75) 0%, transparent 60%);
 }

 .service-body {
   padding: 1.4rem;
 }

 .service-body h4 {
   font-family: var(--font-head);
   font-size: 1.15rem;
   font-weight: 600;
   margin-bottom: 0.6rem;
 }

 .service-body p {
   font-size: 0.88rem;
   color: var(--clr-text);
   line-height: 1.6;
   margin-bottom: 1rem;
 }

 .service-link {
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--clr-accent);
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   transition: gap var(--transition);
 }

 .service-link:hover {
   gap: 0.65rem;
 }

 /* =========================================================
       VISSION
    ========================================================= */


 /* Container grid */
 #vision .why-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center;
   gap: 60px;
   margin-top: 80px;
   margin-bottom: 80px;
 }

 /* Text content */
 #vision .reveal {
   text-align: justify;
   /* fully justify like Word */
   max-width: 600px;
   /* readable width */
   margin: 0 auto;
   /* center in its column */
 }

 #vision .section-label h1 {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-family: var(--font-head);
   font-weight: 700;
   margin-bottom: 20px;
   line-height: 1.15;
   text-align: center;
   /* title centered */
 }

 #vision .divider {
   width: 50px;
   height: 3px;
   background-color: var(--clr-accent);
   margin: 0 auto 20px auto;
   /* centered divider */
 }

 #vision .section-title {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-family: var(--font-head);
   font-weight: 700;
   margin-bottom: 20px;
   line-height: 1.15;
   text-align: center;
   /* title centered */
 }

 #vision .section-desc,
 #vision .reveal p:last-child {
   font-size: 1rem;
   line-height: 1.8;
   color: #555;
   margin-bottom: 20px;
   text-align: justify;
   /* full justification for paragraphs */
 }

 /* Image styling */
 #vision .why-visual {
   text-align: center;
   position: relative;
 }

 #vision .why-main-img {
   max-width: 100%;
   border-radius: 10px;
   display: inline-block;
   object-fit: cover;
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
   #vision .why-grid {
     grid-template-columns: 1fr;
     gap: 30px;
   }

   #vision .reveal {
     text-align: justify;
     /* still justified on mobile */
     max-width: 90%;
   }

   #vision .section-title {
     font-size: 1.8rem;
   }

   #vision .section-desc,
   #vision .reveal p:last-child {
     font-size: 0.95rem;
   }
 }

 @media (max-width: 480px) {
   #vision .section-title {
     font-size: 1.5rem;
   }

   #vision .section-desc,
   #vision .reveal p:last-child {
     font-size: 0.9rem;
   }
 }

 /* =========================================================
       VEHICLES / CARS SECTION
    ========================================================= */
 #cars {
   background: var(--clr-bg);
 }

 .cars-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 3rem;
 }

 /* Filter buttons */
 .filter-btns {
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
   margin-bottom: 2.5rem;
 }

 .filter-btn {
   padding: 0.45rem 1.1rem;
   border-radius: 50px;
   border: 1.5px solid var(--clr-border);
   background: transparent;
   color: var(--clr-text);
   font-size: 0.82rem;
   font-weight: 600;
   cursor: pointer;
   transition: var(--transition);
 }

 .filter-btn.active,
 .filter-btn:hover {
   border-color: var(--clr-accent);
   color: var(--clr-accent);
   background: rgba(245, 158, 11, 0.1);
 }

 .cars-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1.5rem;
 }

 /* Vehicle card */
 .vehicle-card {
   background: var(--clr-surface);
   border: 1px solid var(--clr-accent);
   border-radius: var(--radius);
   overflow: hidden;
   transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
 }

 .vehicle-card:hover {
   transform: translateY(-6px);
   border-color: var(--clr-accent);
   box-shadow: 0 0 30px rgba(245, 158, 11, 0.12);
 }

 /* Vehicle image area */
 .vehicle-img {
   height: 200px;
   background: linear-gradient(135deg, #f9fafa 0%, #E8ECEF 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   position: relative;
 }

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

 .vehicle-card:hover .vehicle-img img {
   transform: scale(1.05);
 }

 /* Badge on card */
 .vehicle-badge {
   position: absolute;
   top: 12px;
   left: 12px;
   background: var(--clr-accent);
   color: #0a0d14;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 0.25rem 0.7rem;
   border-radius: 50px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }

 .vehicle-body {
   padding: 1.3rem;
 }

 .vehicle-body h4 {
   font-family: var(--font-head);
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 1rem;
 }

 /* Specs grid inside card */
 .vehicle-specs {
   display: flex;
   /* Horizontal layout for all spec items */
   flex-wrap: wrap;
   /* Wrap on small screens */
   gap: 0 px;
   /* Space between items */
 }

 .spec-item {
   display: flex;
   /* Label + value in same line */
   justify-content: space-between;
   /* Spread label & value to edges */
   width: 100%;
   /* 2 items per row approx; adjust as needed */
   margin-bottom: 10px;
 }

 .spec-label {
   font-weight: bold;
 }

 .spec-val {
   text-align: right;
   /* Align values to right side of container */
 }

 /* Responsive for mobile */
 @media screen and (max-width: 600px) {
   .spec-item {
     width: 100%;
     /* Stack vertically on mobile */
   }
 }

 .vehicle-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 1rem;
   border-top: 1px solid var(--clr-border);
 }

 /* =========================================================
       WHY US SECTION
    ========================================================= */
 #about {
   background: var(--clr-surface);
 }

 .why-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center;
 }

 .why-features {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
   margin-top: 2.5rem;
 }

 .feature-box {
   position: relative;
   background: var(--clr-bg);
   border: 1px solid var(--clr-accent);
   border-radius: var(--radius);
   padding: 1.4rem;
   overflow: hidden;
 }

 /* Common watermark style */
 .feature-box::before {
   content: "";
   position: absolute;
   inset: 0;

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

   opacity: 0.14;
   z-index: 0;
 }

 /* Content above */
 .feature-box * {
   position: relative;
   z-index: 1;
 }

 /* =========================
   DIFFERENT IMAGES
   ========================= */

 /* About section box image */
 .feature-box.about-bg::before {
   background-image: url("/aboutus1.png");
   background-position: top;
 }

 /* Vission Section Box image */
 .feature-box.vission-bg::before {
   background-image: url("/aboutus.png");
 }




 /* =========================
   IMPROVED RESPONSIVE CONTROL
   ========================= */

 /* Default (Desktop first approach already OK) */
 .feature-box::before {
   content: "";
   position: absolute;
   inset: 0;

   background-size: cover;
   /* responsive */
   background-position: center;
   /* focus center */
   background-repeat: no-repeat;

   opacity: 0.14;
   z-index: 0;
 }

 /* =========================
   MOBILE (small screens)
   ========================= */
 @media (max-width: 576px) {
   .feature-box::before {
     background-position: top;
     /* better framing mobile */
     opacity: 0.14;
     /* halka watermark */
   }

   .feature-box {
     padding: 1rem;
     /* space optimize */
   }
 }

 /* =========================
   TABLET
   ========================= */
 @media (min-width: 577px) and (max-width: 991px) {
   .feature-box::before {
     background-position: center;
     opacity: 0.14;
   }
 }

 /* =========================
   LARGE SCREENS (optional polish)
   ========================= */
 @media (min-width: 1200px) {
   .feature-box::before {
     background-size: cover;
     background-position: center;
   }
 }


 .feature-box:hover {
   border-color: var(--clr-accent);
   box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
 }

 .feature-icon {
   width: 48px;
   height: 48px;
   background: rgba(245, 158, 11, 0.12);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   color: var(--clr-accent);
   margin-bottom: 1rem;
 }

 .feature-box h5 {
   font-family: var(--font-head);
   font-size: 1rem;
   margin-bottom: 0.4rem;
 }

 .feature-box p {
   font-size: 0.82rem;
   color: var(--clr-text);
   line-height: 1.6;
 }


 /* Right side — image mosaic / visual */
 .why-visual {
   position: relative;
 }

 .why-main-img {
   width: 100%;
   height: 420px;
   object-fit: cover;
   border-radius: var(--radius);
   border: 1px solid var(--clr-border);
 }

 /* Floating stats box */
 .stats-float {
   position: absolute;
   bottom: -24px;
   left: -24px;
   background: var(--clr-accent);
   color: #0a0d14;
   border-radius: var(--radius);
   padding: 1.2rem 1.6rem;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
 }

 .stats-float .big-num {
   font-family: var(--font-head);
   font-size: 2rem;
   font-weight: 700;
   line-height: 1;
 }

 .stats-float .small-text {
   font-size: 0.8rem;
   font-weight: 700;
   margin-top: 4px;
   opacity: 0.8;
 }

 /* =========================================================
       HOW IT WORKS — STEPS
    ========================================================= */
 #how {
   background: var(--clr-bg);
 }

 .steps {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
   gap: 2rem;
   margin-top: 3rem;
   position: relative;
 }

 /* Connecting dashed line between steps */
 .steps::before {
   content: '';
   position: absolute;
   top: 40px;
   left: 10%;
   right: 10%;
   height: 2px;
   background: repeating-linear-gradient(90deg, var(--clr-accent) 0 8px, transparent 8px 18px);
   z-index: 0;
 }

 .step {
   text-align: center;
   position: relative;
   z-index: 1;
 }

 .step-num {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background: var(--clr-surface);
   border: 3px solid var(--clr-accent);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-head);
   font-size: 1.4rem;
   font-weight: 700;
   color: var(--clr-accent);
   margin: 0 auto 1.2rem;
 }

 .step h4 {
   font-family: var(--font-head);
   font-size: 1.05rem;
   margin-bottom: 0.6rem;
 }

 .step p {
   font-size: 0.85rem;
   color: var(--clr-muted);
   max-width: 200px;
   margin: 0 auto;
 }

 /* =========================================================
    UPDATED TESTIMONIALS (SWIPER SLIDER)
   ========================================================= */

 /* Slider ki spacing */
 .testimonial-slider {
   padding: 50px 10px 80px !important;
   overflow: visible !important;
   /* Laptop zoom k liye zaroori hai */
 }

 /* Har card ka style */
 .testimonial-card {
   background: var(--clr-bg);
   border: 1px solid var(--clr-accent);
   border-radius: var(--radius);
   padding: 2rem;
   position: relative;
   transition: all 0.5s ease-in-out;
   opacity: 0.5;
   /* Side slides halki dikhengi */
   transform: scale(0.85);
   /* Side slides choti dikhengi */
 }

 /* Laptop par jo center slide hogi wo zoom hogi */
 .swiper-slide-active .testimonial-card {
   opacity: 1;
   transform: scale(1.1);
   /* 10% bari dikhegi */
   box-shadow: 0 15px 40px rgba(245, 158, 11, 0.2);
 }

 /* --- Avatar Icon Style (First Letter wala circle) --- */
 .author-avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   /* Colorful Gradient */
   background: linear-gradient(135deg, var(--clr-accent), #ffb347);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   color: #000;
   /* Letter color */
   font-size: 1.1rem;
   flex-shrink: 0;
 }

 .stars {
   color: #f59e0b;
   /* Professional Golden/Orange color */
   font-size: 0.9rem;
   margin-bottom: 1.2rem;
   display: flex;
   gap: 4px;
   /* Stars k beech thora gap */
 }

 .testimonial-author {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 1.5rem;
 }

 /* Mobile setting: Sab barabar dikhengi */
 @media (max-width: 992px) {
   .testimonial-slider {
     overflow: hidden !important;
   }

   .testimonial-card {
     opacity: 1;
     transform: scale(1) !important;
   }
 }

 /* =========================================================
       FAQ SECTION
    ========================================================= */
 #faq {
   background: var(--clr-bg);
 }

 .faq-wrapper {
   max-width: 760px;
   margin: 3rem auto 0;
 }

 /* Accordion item */
 .faq-item {
   border: 1px solid var(--clr-accent);
   border-radius: var(--radius);
   margin-bottom: 1rem;
   overflow: hidden;
   transition: border-color var(--transition);
 }

 .faq-item.open {
   border-color: var(--clr-accent);
 }

 .faq-question {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.2rem 1.4rem;
   background: var(--clr-surface);
   border: none;
   color: var(--clr-text);
   font-family: var(--font-body);
   font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;
   text-align: left;
   gap: 1rem;
   transition: background var(--transition);
 }

 .faq-item.open .faq-question {
   background: rgba(245, 158, 11, 0.07);
 }

 .faq-icon {
   flex-shrink: 0;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   border: 2px solid var(--clr-accent);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--clr-accent);
   font-size: 0.9rem;
   transition: transform var(--transition);
 }

 .faq-item.open .faq-icon {
   transform: rotate(45deg);
 }

 .faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease, padding 0.3s ease;
   padding: 0 1.4rem;
   color: var(--clr-text);
   font-size: 0.9rem;
   line-height: 1.7;
 }

 .faq-item.open .faq-answer {
   max-height: 200px;
   padding: 1rem 1.4rem 1.4rem;
 }

 /* =========================================================
       CONTACT SECTION (CTA Banner)
    ========================================================= */
 /* Contact Section Styling */

 .contact-wrapper {
   display: flex;
   flex-wrap: wrap;
   /* Mobile par niche lane ke liye */
   background: #fff;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .contact-info {
   flex: 1;
   min-width: 300px;
   background: var(--clr-accent);
   color: #fff;
   padding: 40px;
 }

 .contact-form {
   flex: 1.5;
   min-width: 300px;
   padding: 40px;
 }

 .info-item {
   display: flex;
   margin-bottom: 25px;
   /* Har item ke beech barabar gap */
   align-items: center;
 }

 .info-icon {
   width: 45px;
   height: 45px;
   background: #ffb83d;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   margin-right: 15px;
   font-size: 1.1rem;
 }

 /* Hover effect taaki pata chale ke click ho sakta hai */
 .info-item:hover .info-icon {
   background: #ffb83d;
   color: var(--clr-accent);
   transition: 0.3s;
 }



 .info-text span {
   display: block;
   font-size: 0.8rem;
   text-transform: uppercase;
   opacity: 0.9;
 }

 .info-text p {
   font-size: 1.1rem;
   font-weight: 600;
   margin: 0;
 }

 .contact-form .form-group {
   margin-bottom: 15px;
 }

 .contact-form input,
 .contact-form textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #ddd;
   border-radius: 8px;
   outline: none;
 }

 /* MOBILE RESPONSIVE RULES */
 @media (max-width: 768px) {
   .contact-wrapper {
     flex-direction: column;
     /* Mobile par column layout */
   }

   .contact-info,
   .contact-form {
     padding: 25px;
     min-width: 100%;
   }

   .section-title {
     font-size: 2rem;
   }
 }

 /* Sabhi screens ke liye base style */
 #submit-btn {
   display: block;
   width: 100%;
   /* Mobile par default full width rahega */
   padding: 15px 25px;
   background-color: #ffb83d;
   color: white;
   border: none;
   border-radius: 8px;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   box-sizing: border-box;
   /* Isse padding width se bahar nahi nikalegi */
 }

 /* Desktop screens ke liye (Badi screens par button chota dikhega) */
 @media (min-width: 768px) {
   #submit-btn {
     width: auto;
     /* Desktop par text ke mutabiq width */
     min-width: 200px;
     /* Thoda professional look dene ke liye */
     display: inline-block;
   }
 }

 #submit-btn:hover {
   background-color: #ffa500;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 #submit-btn:active {
   transform: translateY(0);
 }

 /* =========================================================
       FOOTER
    ========================================================= */
 footer {
   background: #070a10;
   border-top: 1px solid var(--clr-accent);
   padding: 60px 0 30px;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.2fr;
   gap: 3rem;
   margin-bottom: 3rem;
 }

 .footer-brand .logo {
   font-size: 1.4rem;
   margin-bottom: 1rem;
 }

 .footer-brand p {
   font-size: 0.85rem;
   color: var(--clr-muted);
   line-height: 1.7;
   margin-bottom: 1.4rem;
   max-width: 280px;
 }

 .social-links {
   display: flex;
   gap: 0.8rem;
 }

 .social-link {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1.5px solid var(--clr-accent);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--clr-muted);
   font-size: 0.9rem;
   transition: var(--transition);
 }

 .social-link:hover {
   border-color: var(--clr-accent);
   color: var(--clr-accent);
   transform: translateY(-3px);
 }

 .footer-col h5 {
   font-family: var(--font-head);
   font-size: 0.9rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--clr-accent);
   margin-bottom: 1.2rem;
 }

 .footer-links li {
   margin-bottom: 0.65rem;
 }

 .footer-links a {
   font-size: 0.87rem;
   color: var(--clr-muted);
   transition: color var(--transition);
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
 }

 .footer-links a:hover {
   color: var(--clr-accent);
 }

 .footer-links a i {
   font-size: 0.7rem;
   color: var(--clr-accent);
 }

 .footer-contact-item {
   display: flex;
   align-items: flex-start;
   gap: 0.7rem;
   margin-bottom: 0.9rem;
 }

 .footer-contact-item i {
   color: var(--clr-accent);
   margin-top: 3px;
   font-size: 0.9rem;
 }

 .footer-contact-item span {
   font-size: 0.85rem;
   color: var(--clr-muted);
   line-height: 1.5;
 }

 .footer-bottom {
   border-top: 1px solid var(--clr-border);
   padding-top: 1.5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
 }

 .footer-bottom p {
   font-size: 0.82rem;
   color: var(--clr-muted);
 }

 .footer-bottom a {
   color: var(--clr-accent);
   font-weight: 700;
 }

 /* =========================================================
       WHATSAPP FLOATING BUTTON
    ========================================================= */
 .whatsapp-float {
   position: fixed;
   bottom: 28px;
   right: 28px;
   z-index: 9999;
   background: #25d366;
   color: #fff;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
   transition: transform var(--transition), box-shadow var(--transition);
   animation: pulse 2s ease-in-out infinite;
 }

 .whatsapp-float:hover {
   transform: scale(1.12);
   box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
 }

 @keyframes pulse {

   0%,
   100% {
     box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
   }

   50% {
     box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7);
   }
 }

 /* =========================================================
       SCROLL-TO-TOP BUTTON
    ========================================================= */
 .scroll-top {
   position: fixed;
   bottom: 28px;
   right: 96px;
   z-index: 9999;
   background: var(--clr-accent);
   color: #0a0d14;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   cursor: pointer;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity var(--transition), transform var(--transition);
   pointer-events: none;
 }

 .scroll-top.visible {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
 }

 .scroll-top:hover {
   background: #d97706;
 }

 /* =========================================================
       ANIMATIONS
    ========================================================= */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(28px);
   }

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

 @keyframes fadeDown {
   from {
     opacity: 0;
     transform: translateY(-16px);
   }

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

 /* Scroll reveal (JS adds .revealed class) */
 .reveal {
   opacity: 0;
   transform: translateY(32px);
   transition: opacity 0.65s ease, transform 0.65s ease;
 }

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

 /* =========================================================
       RESPONSIVE BREAKPOINTS
    ========================================================= */
 /* Tablet (max 900px) */

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

   .stats-float {
     left: 0;
   }

   .why-main-img {
     height: 320px;
   }

   .footer-grid {
     grid-template-columns: 1fr 1fr;
   }

   .steps::before {
     display: none;
   }

   .contact-form {
     grid-template-columns: 1fr;
   }

   .form-field.full {
     grid-column: unset;
   }

   /* IMPORTANT: tablet par desktop links hide */
   .nav-links,
   .nav-phone {
     display: none;
   }

   .hamburger {
     display: flex;
   }

   .logo img {
     height: 90px;
   }

   .nav-inner {
     min-height: 76px;
   }
 }

 /* Mobile */
 @media (max-width: 640px) {
   section {
     padding: 45px 0;
   }

   #home {
     min-height: 70vh;
     padding-top: 90px;
   }

   .home-content h1 {
     font-size: 15px;
     line-height: 1.2;
     word-spacing: 0.08rem;
     color: #f59e0b;
     
   }

   .home-content h3 {
     font-size: 15px;
     line-height: 1.2;
     word-spacing: 0.08rem;
   }

   .home-content {
     font-size: 20px;
     padding-top: 50px;
     line-height: 1.2;
     word-spacing: 0.08rem;
   }

   .home-content p {
     font-size: 15px;
     line-height: 1.5;
   }

   .hero-stats {
     gap: 1.2rem;
   }

   .why-features {
     grid-template-columns: 1fr;
   }

   .footer-grid {
     grid-template-columns: 1fr;
     gap: 2rem;
   }

   .footer-bottom {
     flex-direction: column;
     text-align: center;
   }

   .logo img {
     height: 75px;
   }

   .nav-inner {
     min-height: 72px;
   }
 }

 /* Desktop only */
 @media (min-width: 993px) {
   .mobile-menu {
     display: none !important;
   }

   .nav-links {
     display: flex;
   }

   .nav-phone {
     display: flex;
   }

   .hamburger {
     display: none !important;
   }
   .home-content h1{
    color: #ddd;
   }

 }

 /* Laptop specific adjustment - Sirf Laptop screen par asar karega */
 @media (min-width: 600px) and (max-width: 1440px) {

   /* "Khan Refrigerated..." wale text ko nechy lane k liye */
   .home-content h1,
   .home-content h2 {
     margin-top: 25px !important;
     /* Isse Welcome to aur Name k beech gap barh jayega */
     font-size: 36px;
     /* Laptop screen par size thora adjust kiya gaya hai */
     color: #ddd;
   }

   /* Poore content container ki position adjust karne k liye */
   .home-content {
     transform: translateY(20px);
     /* Jo pehle -10px tha usko positive kar diya taakay nechy aaye */
     padding-top: 20px;
     color: #ddd;
   }

   /* Book Now button k liye space */
   .home-content .btn {
     margin-top: 40px !important;
     color: white;
   }
 }

 /* =========================================================
   VEHICLE DETAIL PAGE STYLES (Clean Version)
   ========================================================= */

 .vehicle-page-container {
   padding: 100px 0 60px;
   background-color: var(--clr-bg);
 }

 .v-header {
   margin-bottom: 30px;
 }

 .v-title {
   font-family: var(--font-head);
   font-size: 2.5rem;
   color: var(--clr-text);
 }

 .v-title span {
   color: var(--clr-accent);
 }

 /* Grid Logic */
 .v-detail-grid {
   display: grid;
   grid-template-columns: 1.8fr 1fr;
   gap: 30px;
   align-items: start;
 }

 /* Left Section Styles */
 .v-main-img {
   width: 100%;
   border-radius: 20px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   margin-bottom: 25px;
 }

 .v-description {
   padding: 10px 20px;
   /* Sides se door rakhne k liye */
 }

 .section-title {
   font-family: var(--font-head);
   margin: 25px 0 15px;
   font-size: 1.5rem;
   color: var(--clr-text);
 }

 .info-list {
   list-style: none;
   padding-left: 0;
 }

 .info-list li {
   position: relative;
   padding-left: 25px;
   margin-bottom: 10px;
   line-height: 1.6;
   color: #444;
 }

 /* Custom Bullet Point */
 .info-list li::before {
   content: "•";
   color: var(--clr-accent);
   font-weight: bold;
   font-size: 20px;
   position: absolute;
   left: 0;
   top: -2px;
 }

 /* Sidebar & Cards */
 .v-card {
   background: #fff;
   padding: 25px;
   border-radius: 20px;
   margin-bottom: 20px;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .v-specs-list .v-spec-item {
   display: flex;
   justify-content: space-between;
   padding: 12px 0;
   border-bottom: 1px solid #f0f0f0;
 }

 .v-label {
   font-weight: bold;
   color: #555;
 }

 /* Button Styling (Small & Responsive) */
 .btn-container {
   margin-top: 20px;
 }

 .v-booking-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 25px;
   width: auto !important;
   /* Fixed: button chota rahega */
   font-size: 0.95rem;
   font-weight: 700;
   border-radius: 50px;
 }

 /* Bottom Features */
 .v-features {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
   margin-top: 40px;
 }

 .f-box {
   background: #fff;
   padding: 20px;
   text-align: center;
   border-radius: 15px;
   font-weight: 600;
 }

 .f-box i {
   color: var(--clr-accent);
   margin-right: 10px;
 }

 /* --- RESPONSIVE SETTINGS --- */

 @media (max-width: 992px) {
   .v-detail-grid {
     grid-template-columns: 1fr;
   }

   .v-description {
     padding: 10px 0;
     /* Mobile par width full */
   }

   .v-booking-btn {
     width: 100% !important;
     /* Mobile par button bara taakay click asaan ho */
     justify-content: center;
   }
 }

 @media (max-width: 768px) {
   .v-title {
     font-size: 1.8rem;
   }
 }