@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Nastaliq+Urdu:wght@400..700&display=swap');

:root {
   --light-bg: #faf8f6;
   --primary-color: #842e1b !important;
   --text-color: #333 !important;
   --light-text: #666 !important;
   --card-radius: 12px !important;
   --card-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1) !important;
   --section-bg: #faf8f6 !important;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Fira Sans", sans-serif;
 }
a {
 text-decoration: none !important;
}
 
 body {
   background: #f9f9f9;
   color: var(--text-color);
   overflow-x: hidden;
 }

 a {
   text-decoration: none;
 }
 /* Animations */
 @keyframes slideDown {
   from {
     transform: translateY(-100%);
     opacity: 0;
   }

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

 @keyframes fadeInUp {
   from {
     transform: translateY(30px);
     opacity: 0;
   }

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

 @keyframes fadeInScale {
   from {
     transform: translateY(20px) scale(0.95);
     opacity: 0;
   }

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

 #header {
   animation: slideDown 0.8s ease-out forwards;
   position: relative; 
   z-index: 2;        
 }
.hero-section{
  background: var(--section-bg);
  padding: 95px 20px 50px 20px;
}
 .hero {
   padding-top: 100px; /* header ki height ke hisaab se adjust kar lena */
   display: flex;
   justify-content: left;
   align-items: center;
   padding: 50px;
   position: relative;
   z-index: 1;

 }

 .hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
 }

 .hero-text {
   max-width: 50%;
   text-align: left;
 }

 .hero-text h4 {
   color: #555;
   font-size: 16px;
   margin-bottom: 10px;
 }

 .hero-text h1 {
   font-size: 40px;
   margin-bottom: 15px;
   font-weight: 600;
 }

 .hero-text h1 span {
   color: var(--primary-color);
    font-weight: 700;
 }

 .hero-text p {
   margin-bottom: 20px;
   line-height: 1.5;
 }
 .hero-text p span {
  
   color: var(--light-text);
    font-weight: 600;
 }

 .hero img {
   max-width: 500px;
   width: 100%;
 }
.view-btn
{
  background-color: var(--section-bg);
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.view-btn:hover
{
  background: var(--primary-color);
  color: #fff;  
}
 .btn {
   background: var(--primary-color);
   color: #fff;
   border: 2px solid var(--primary-color);
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
     transition: 0.8s;
  /* transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; */
   /* 👈 ye add karo */
 }


 .btn:hover {
   background: white;
   border: 2px solid var(--primary-color);
   color: var(--primary-color);
 }

 section {
   padding: 20px;
   text-align: center;
 }

 section h2 {
   margin-bottom: 25px;
   /* thoda zyada gap niche */
   font-size: 28px;
   /* thoda bada font */
   text-align: center;
   /* center me text */
   font-weight: bold;
   /* bold heading */
   color: #222;
   /* dark text color */
   position: relative;
   /* underline ke liye */
   display: inline-block;
   /* underline center align hoga */
 }

 section h2::after {
   content: "";
   display: block;
   width: 60px;
   height: 3px;
   background: #842e1b;
   /* tumhara theme primary color */
   margin: 8px auto 0;
   /* center underline */
   border-radius: 2px;
 }

 section p {
   margin-bottom: 30px;
   color: #555;
 }

 /* Card Container */
.card-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* Default to 3 columns on larger screens */
   gap: 20px;
   /* max-width: 1200px; */
   margin: 0 auto;
   padding: 20px;
}

/* For Mobile View - 1 Card per Row */
@media (max-width: 768px) {
   .card-container {
     grid-template-columns: 1fr; /* 1 column for smaller screens */
     gap: 15px;
   }
}

/* Optional: Adjust card size/spacing for better visual on mobile */
@media (max-width: 480px) {
   .card-container {
     grid-template-columns: 1fr; /* Ensure 1 card per row for very small screens */
     gap: 10px;
   }
}

/* Keep existing card styling as is */
.card {
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  background: #fff;
  height: 900px;
  opacity: 0;                  /* start hidden */
  transform: translateY(40px); /* start slightly below */
  transition: transform 600ms cubic-bezier(.2,.9,.2,1), opacity 600ms ease;
  will-change: transform, opacity;
  padding: 15px;
}

/* When visible in viewport */
.card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Hover effect for card images */
.car-image {
   position: relative;
   width: 95% !important;  /* Keeps the width of the image container at 80% */
   margin: 0 auto;        /* Centers the image container */
   box-sizing: border-box;
   /* height: 100%; Fixed height to control the image container size */
}

.car-image img {
  
   width: 100% !important;  /* Ensures the image spans the full width */
   height: 100% !important; /* Ensures the image spans the full height */
   object-fit: contain !important; /* Ensures the image covers the container and maintains aspect ratio */
  object-position: center !important; /* Centers the image within the container */
   display: block ;
   transition: transform 0.3s ease; /* Smooth zoom effect */
   border-radius: 0; /* Rounded corners for the image */
}

.car-image:hover img {
   transform: scale(1.031); /* Zoom-out effect: reduces the image size to 95% of the original */
}

.code-Name {
   position: absolute;
   top: 10px;
   left: 10px;
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   padding: 4px 8px;
   border-radius: 5px;
   font-size: 13px;
   font-weight: 500;
}

.car-name {
   position: absolute;
   bottom: 10px;
   left: 10px;
   background: var(--primary-color);
   color: #fff;
   padding: 6px 12px;
   border-radius: 5px;
   font-size: 14px;
   font-weight: 600;
   text-align: left;
   white-space: nowrap;
   max-width: calc(100% - 20px);
   overflow: hidden;
   text-overflow: ellipsis;
}

.car-details {
   padding: 15px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}
.car-details p strong
{
    color: var(--text-color);
    font-weight: 600;
    
}
.car-details i 
{
    color: var(--primary-color);
    
}

.car-details h3 {
   margin-bottom: 10px;
   font-size: 18px;
   color: #333;
}

.car-details p {
   margin: 4px 0;
   color: #555;
   font-size: 14px;
}

.car-price {
   font-size: 16px;
   font-weight: bold;
   color: var(--primary-color);
   margin: 15px 0;
}

.rent-btn {
   display: block;
   width: 100%;
   background: var(--primary-color);
   color: #fff;
   text-align: center;
   padding: 12px;
   border: none;
   border-radius: 0 0 12px 12px;
   cursor: pointer;
   font-size: 15px;
   font-weight: bold;
   transition: 0.8s;
   margin-top: auto;
}

.rent-btn:hover {
   background: white;
   border: 2px solid var(--primary-color);
   color: var(--primary-color);
}


 .section-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.section-header h2 {
  text-align: center; /* puri line center */
  font-size: 25px;
  width: 100%;
}
.section-header p {
  text-align: center; /* puri line center */
  font-size: 14px;
  color: var(--light-text);
 
  max-width: 600px;
  margin: 0 auto; /* center align */
}
.filters {
  display: flex;
  justify-content: flex-end; /* desktop pe left side */
  margin-bottom: 10px;
  gap: 10px;
  width: 100%;
    padding-right: 10px; /* 👈 yahan se left se thoda andar aa jayega */

}

.filter-search,
.filter-select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.filters label {
  font-weight: 700;    /* bold label on desktop */
  margin: 0 8px;
  color: var(--light-text);
  align-self: center;  /* ensure label stays vertically centered */
}

/* ✅ Mobile responsive */
@media (max-width: 768px) {
  body
  {
    padding-top: 70px;
  }
  .hero img
  {
    display: none;
  }
  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  /* make label appear above select and bold */
  .filters label {
    display: block;
    font-weight: 700;
    margin: 6px 0 4px;
    order: 1; /* after search */
  }

  /* search stays on top */
  .filters .filter-search {
    order: 0;
    width: 100%;
  }

  /* select below label and full width */
  .filters .filter-select {
    order: 2;
    width: 100%;
  }
}
 /* Facts Section */
 .facts-section {
   background: #1b1b1b;
   color: white;
   padding: 50px 20px;
   text-align: center;
 }

 .facts-header h2 {
   font-size: 28px;
   font-weight: bold;
   margin-bottom: 10px;
 }

 .facts-header p {
   color: #ccc;
   font-size: 16px;
   margin-bottom: 40px;
 }

 .facts-container {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
 }

 .fact-card {
   background: white;
   color: black;
   padding: 30px 20px;
   border-radius: 10px;
   width: 100%;
   box-shadow: var(--card-shadow);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   margin-bottom: 20px;
 }

 .fact-card:hover {
   transform: translateY(-8px);
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
 }

 .fact-card .icon {
   font-size: 30px;
   margin-bottom: 15px;
 }

 .fact-card h3 {
   font-size: 26px;
   font-weight: bold;
   margin: 10px 0;
 }

 .fact-card p {
   font-size: 14px;
   color: var(--light-text);
 }

 /* Responsive */
 @media (max-width: 768px) {
   .hero {
     flex-direction: column;
     text-align: center;
     padding: 30px 20px;
   }

   .hero-content {
    flex-direction: column;
   }
   .hero-text {
     max-width: 100%;
   }
   .hero-text h1 {
     font-size: 27px;
   }
   .hero-text p {
     font-size: 14px;
   }  

   .hero img {
     margin-top: 20px;
     width: 100%;
   }

   .card-container {
     grid-template-columns: 1fr;
   }


   .filter-search {
     flex: 1;
     width: 100%;
   }

   .car-image {

   width: 100% !important;  /* Full width */
    margin: 0 auto !important;
    height: auto !important; /* Maintain aspect ratio */
    min-height: 200px; /* Optional: ensure minimum height for consistency */
   }
   .car-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Maintain the aspect ratio of the image */
  }
 }

 @media (max-width: 480px) {
   .car-image {
     height: 180px;
   }

   .car-name {
     font-size: 12px;
   }

   .hero-text h1 {
     font-size: 28px;
   }
 }
 @media (max-width: 900px) {
  .car-image { height: 160px; }
}
@media (max-width: 480px) {
  .car-image { height: 140px; }
  .car-name { font-size: 12px; white-space: normal; }
}