html {
  scroll-behavior: smooth;
   overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'montserrat', sans-serif;
  background-color: #2e2c2c;
  color: #fff;
    overflow-x: hidden;

}
/* #region Nav Bar Styles */



/* Base navbar styles */
.navbar {
  width: 100vw;
  position: fixed;
  box-sizing: border-box;
  top: 0;
  z-index: 999;
  background-color: #000000a0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 130px;
  flex-wrap: wrap;
  backdrop-filter: blur(10px); /* Optional: smooth background effect */
  
}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo img {
  height: 100px;
}

.nav-links {
  display: flex;
  gap: 60px;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
}

.nav-left,
.nav-right {
  display: flex;
  gap: 60px;
  list-style: none;
  z-index: 10;
}

.nav-item {
  color: #fff;
  font-size: 16px;
  position: relative;
}

.nav-link,
.dropdown-toggle {
  display: block;
  padding: 12px 10px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.nav-link:hover,
.dropdown-toggle:hover {
  color: #f0c040;
}


.arrow {
  font-size: 10px;
  margin-left: 5px;
}

/* Dropdown */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #222;
  min-width: 150px;
  list-style: none;
  padding: 10px 20;
  border-radius: 4px;
  z-index: 1000;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background-color: #00000000;
}


.dropdown:hover .dropdown-menu {
  display: block;
}



/* responsive mobile */

/* Hamburger icon */
.nav-toggle {
  display: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
  z-index: 1001;

}
.navbar-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}


@media (max-width: 900px) {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding: 10px 16px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999;
    min-height: 70px; /* space for centered logo */
  }

  /* ✅ Keep logo centered on mobile */
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6px;
    z-index: 1000;
  }

  .logo img {
    height: 60px; /* adjust if you want it bigger/smaller */
  }

  /* Hamburger stays clickable and above logo */
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 1001;
  }

  /* Stack links and keep them below the fixed header */
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: transparent;
    padding: 12px 0;
    margin-top: 70px; /* pushes dropdown below header */
  }

  .nav-links.show {
    display: flex;
  }

  .nav-left,
  .nav-right {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding: 0 20px;
    position: relative;
    right: auto;
  }

  /* Mobile dropdown behavior */
  .dropdown:hover .dropdown-menu {
    position: static;
  }

  .dropdown-menu {
    display: none;
    flex-direction: column;
    padding-left: 20px;
    background: #111111db;
    width: 100%;
  }

  .dropdown-menu.show {
    display: flex;
    background: #111111db;
  }

  .dropdown-menu li {
    padding: 10px 0;
    color: white;
    width: 100%;
  }

  .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    color: white;
  }
}






/* tablet responsiveness */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar {
    padding: 15px 40px; /* tighter on tablet */
  }

  .nav-left,
  .nav-right {
    gap: 40px; /* slightly reduced space */
  }

  .logo img {
    height: 50px;
  }
}

/* service pro  */
@media (min-width: 768px) and (max-width: 1024px) {
  .navbar {
    padding: 15px 30px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .nav-links {
    gap: 30px; /* Reduce space between left and right nav */
    flex-wrap: wrap;
  }

  .nav-left,
  .nav-right {
    gap: 30px; /* Reduce spacing between individual nav items */
  }

  .logo img {
    height: 50px;
  }

  .nav-item {
    font-size: 15px;
  }
}

/* #endregion Nav bar*/
 
/* #region  hero section */

/* cta  */
.cta-banner {
  margin-top: 99px;
  position: relative;
  background-color: #111;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 10px 15px;
  font-size: 16px;
}

.cta-banner a.cta-phone {
  text-decoration: none;
  color: inherit; /* Keeps it the same color as surrounding text */
  font-weight: bold;
}

.cta-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* Hero Section */
.hero-section {

  position: relative;
  width: 100%;
  height: 70vh;
  background: url('/images/Main_image.webp') no-repeat center center/cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5); /* dark overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

.hero-content h1 {
  color: white;
  font-size: 3rem;
  max-width: 900px;
  margin-bottom: 20px;
}

.hero-content p {
  color: #ccc;
  font-size: 1.5rem;
}

/* Travel gradient */
.gradient-reveal {
  background: linear-gradient(270deg, #b37c00, #ffcc00, #d4af37, #b37c00);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: revealToGradient 1.5s ease forwards, animatedGradient 12s ease infinite 1.5s;
  display: inline-block;
  padding: 0 4px;
  line-height: 1.1;
}

@keyframes animatedGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}





/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 1.5rem ;
  }
.cta-banner {
   display: none;
}
  .hero-content p {
    font-size: 1rem;
  }
  .hero-section {
        padding-top: 500px;
        scroll-padding-bottom: 100px;
        height: 0vh;
 
}
}
/* #endregion  hero section */

/* #region banner  */

.fleet-banner {
  background-color: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: px 20px;
  gap: 30px;
  flex-wrap: wrap;
  text-align: left;
}

.fleet-logo {
  max-width: 80px;
  height: auto;
}


 .fleet-banner h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 340;
    text-align: center;
    font-size: 24px;
    color: #000;
    line-height: 1.4;
    max-width: 1000px;
}


/* Optional: Responsive font scaling */
@media (min-width: 768px) {
  .fleet-banner h2 {
    font-size: 32px;
  }
} 
  @media (max-width: 768px) {
  .fleet-logo{
    height: 50%;
  }
    .fleet-banner h2 {
    font-size: 25px;
  }
}


/* #endregion banner  */



/* #reigion cars   */
.car-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 40px 20px;
  background-color: #000;
}

.car-card {
  background-color: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  color: white;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.car-card:hover {
  transform: translateY(-5px);
}

.card-image img {
  width: 100%;
  height: 220px; /* ⬅️ Ensures image shows fully & uniformly */
  object-fit: cover;
  display: block;
}

.card-content {
  padding: 16px;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card-content h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: white;
}

.card-content p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 16px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-links {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #fff;
}

.card-links span:last-child {
  text-decoration: underline;
}


@media (max-width: 1024px) {
  .car-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .car-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ribbon */
.card-ribbon {
  position: absolute;
  top: 27px;
  left: -40px;
  background: rgb(212, 175, 55, 1);
  color: white;
  font-size: 14px;
  font-family:'Montserrat', sans-serif;
  font-weight: bold;
  padding: 8px 60px;
  transform: rotate(-45deg);
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Make sure card has position relative */
.car-card {
  position: relative;
}


/* #endregion cars  */
/* #region about us section   */
.pet-section {
  background-color: #0a0a0a;
  color: white;
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
}

.pet-header h2 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

.pet-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.pet-column h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.pet-column p {
  font-size: 15px;
  color: #ccc;
  line-height: 1.7;
  margin-bottom: 15px;
}

.cta-button {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background-color: black;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid white;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background-color: #222;
}

/* Responsive */
@media (max-width: 900px) {
  .pet-content {
    grid-template-columns: 1fr;
  }

  .pet-header h2 {
    font-size: 28px;
  }
}
/* #endregion about us section   */

/* #region services section   */
.services-section {
    background: linear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%);
  padding: 80px 0;
  display: flex;
  justify-content: center;
}

.services-wrapper {
  max-width: 1200px;
  width: 80%;
  padding: 40px 40px;
  background-color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.services-title {
  font-size: 40px;
  margin-top: 0px;
  margin-bottom: 30px;
  font-weight: 500;
  text-align: center;
  color: #000;
}

.services-grid {
  display: grid;
  gap: 20px;
  padding: 20px;
  justify-content: center;
}





.service-card {
  border: 1px solid #000000;
  padding: 20px 10px;
  color: #000;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
}

.service-icon {
  font-size: 36px;
  margin-bottom: 18px;
}

.service-card h3 {
  font-size: 19px;
  font-weight: 350;
  margin-bottom: 14px;
}

.service-card p {
  font-size: 14px;
  color: #444;
  margin-bottom: 24px;
  line-height: 1.6;
  text-align: center;
}

.service-btn {
  background-color: #000;
  color: #fff !important;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.a.service-btn {
  color: #fff !important;
}


.service-btn:hover {
  background-color: #222;
}

/* media respponsive */
/* Desktop: 3 columns */
@media (min-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    margin: 0 auto;
  }
}

/* Tablet: 2 columns */
@media (min-width: 600px) and (max-width: 899px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Mobile: 1 column */
@media (max-width: 599px) {
  .services-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* #endregion services section   */

/* #region contact form section   */
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact-1388 {
        padding: var(--sectionPadding);
        background-color: #f7f7f7;
        position: relative;
        z-index: 1;
    }
    #contact-1388 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: column;
        column-gap: auto;
        /* 48px - 64px */
        gap: clamp(2rem, 3vw, 3rem);
        position: relative;
    }
    #contact-1388 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #contact-1388 .cs-title {
        max-width: 23ch;
    }
    #contact-1388 .cs-text {
        margin-bottom: 1rem;
    }
    #contact-1388 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #contact-1388 .cs-ul {
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        position: relative;
    }
    #contact-1388 .cs-li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.25rem;
    }
    #contact-1388 .cs-li:hover .cs-icon-wrapper {
        transform: scale(1.1);
    }
    #contact-1388 .cs-header {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.75rem;
        color: var(--headerColor);
        display: block;
    }
    #contact-1388 .cs-link {
        font-size: 1rem;
        line-height: 1.5em;
        text-decoration: none;
        color: #767676;
        display: block;
        position: relative;
    }
    #contact-1388 .cs-link:hover {
        text-decoration: underline;
    }
    #contact-1388 .cs-icon-wrapper {
        width: 3.75rem;
        height: 3.75rem;
        margin: 0;
        border-radius: 50%;
        border: 1px solid #bababa;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        transition: transform 0.3s;
    }
    #contact-1388 .cs-icon {
        width: 1.5rem;
        height: auto;
        display: block;
    }
    #contact-1388 .cs-form {
        width: 100%;
        max-width: 39.375rem;
        /* 24px - 48px top and bottom */
        /* 16px - 48px left and right */
        padding: clamp(1.5rem, 5.18vw, 3rem) clamp(1rem, 4vw, 3rem);
        /* prevents flexbox from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 1rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }
    #contact-1388 .cs-h3 {
        /* 20px - 39px */
        font-size: clamp(1.25rem, 3vw, 2.4375rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.25rem 0;
        color: var(--headerColor);
    }
    #contact-1388 .cs-label {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        width: 100%;
        color: var(--headerColor);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.25rem;
    }
    #contact-1388 .cs-input {
        font-size: 1rem;
        width: 100%;
        height: 3.5rem;
        padding: 0;
        padding-left: 1.5rem;
        color: var(--headerColor);
        background-color: #f7f7f7;
        border-radius: 0.5rem;
        border: none;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #contact-1388 .cs-input::placeholder {
        color: #7d799c;
        opacity: 0.6;
    }
    #contact-1388 .cs-textarea {
        min-height: 7.5rem;
        padding-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-family: inherit;
    }
    #contact-1388 .cs-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        color: #fff;
        padding: 0 3rem;
        border-radius: 1.875rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #contact-1388 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #contact-1388 .cs-button-solid:hover {
        color: var(--primary);
    }
    #contact-1388 .cs-button-solid:hover:before {
        width: 100%;
    }
    #contact-1388 .cs-submit {
        width: 100%;
        min-width: 12.5rem;
        border: none;
    }
    #contact-1388 .cs-submit:hover {
        color: #fff;
        cursor: pointer;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #contact-1388 .cs-container {
        max-width: 60rem;
        flex-direction: row;
        justify-content: space-between;
    }
    #contact-1388 .cs-content {
        width: 47%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #contact-1388 .cs-submit {
        width: auto;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #contact-1388 .cs-form {
        width: 46%;
        max-width: 36.125rem;
    }
    #contact-1388 .cs-submit {
        width: auto;
    }
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
    #contact-1388 .cs-graphic {
        display: block;
    }
}
/* code stitch styling */

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #262423;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #000000;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
                    
                    
/* #endregion contact form section   */
 /* region paragraoh at bottom */
 .executive-section {
  background-color: #f2f2f2;
  padding: 100px 20px;
  display: flex;
  justify-content: center;
}

.executive-wrapper {
  max-width: 1200px;
  background-color: #fff;
  padding: 60px;
  color: #000;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.executive-title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
}

.executive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}

.executive-card {
  text-align: left;
}

.executive-card .icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.executive-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.executive-card p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.executive-bottom {
  text-align: center;
  border-top: 1px solid #ccc;
  padding-top: 40px;
}

.executive-bottom h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.executive-bottom p {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 30px;
}

.executive-cta {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 12px 24px;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
}

a.executive-cta{
  color: white !important;
}
/* #region footer section   */
.site-footer {
  background-color: #000;
  color: #fff;
  padding: 60px 20px 30px;
  font-family: sans-serif;
  font-size: 14px;
}

.footer-logo {
  text-align: center;
  margin-bottom: 40px;
}

.footer-logo img {
  max-height: 80px;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.footer-column h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 8px;
}

.footer-column ul li a {
  color: #ccc;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

.footer-column ul li img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.footer-bottom {
  text-align: center;
  font-size: 13px;
  color: #999;
    border-top: 1px solid #ffffff; ;/* 🔲 add top border here */
  padding-top: 20px;           /* space between border and text */
  margin-top: 30px; 
}

.footer-legal {
  margin-bottom: 10px;
  
}

.footer-legal a {
  color: #999;
  text-decoration: none;
  margin: 0 4px;
}

.footer-legal a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns on mobile */
  }
}
/* endregion footer section   */

/* individual page templates */
.individual-car-image {
  position: relative;
  height: 90vh; /* Default height for desktop/tablet */
  width: 100%;
  overflow: hidden;
}

.individual-car-image__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}


/* ✅ Mobile-specific: reduce height */
@media (max-width: 600px) {
  .individual-car-image {
    height: 50vh; /* Much smaller on mobile */
  }

  .individual-car-image__content h1 {
    font-size: 1.3rem;
  }

  .individual-car-image__content p {
    font-size: 0.95rem;
  }
}


/* description of indivudal */
.car-intro {
  background: #111;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  padding: 60px 20px;
  text-align: center;
   font-family: Montserrat;
}

.car-intro__header {
  margin-bottom: 40px;
}

.car-intro__cta {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  display: inline-block;
  border: 1px solid #fff;
  font-weight: bold;
  font-size: 14px;
}

.car-intro__title {
  font-size: 32px;
  margin-top: 20px;
}

.car-intro__content-box {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  color: #000;
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.car-intro__subtitle {
  font-size: 24px;
  margin-bottom: 10px;
}

.car-intro__divider {
  border: none;
  border-top: 2px solid #000;
  width: 60px;
  margin: 0 auto 30px;
}

.car-intro__paragraph {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .car-intro__title {
    font-size: 24px;
  }

  .car-intro{
    padding-top: 10px;
  }
  .car-intro__subtitle {
    font-size: 20px;
  }

  .car-intro__content-box {
    padding: 20px;
  }
}
 /* how to use the car */
 .g63-uses {
  text-align: center;
  padding: 60px 20px;
  background-color: #fff;
  font-family: 'Segoe UI', sans-serif;
}

.g63-uses__title {
   font-family: Montserrat;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #000;
}

.g63-uses__divider {
  width: 60px;
  border: none;
  border-top: 2px solid #000;
  margin: 0 auto 40px;
}

.g63-uses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.g63-uses__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.g63-uses__icon {
  font-size: 33px;
  margin-bottom: 10px;
}

.g63-uses__item h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.g63-uses__item p {
  font-size: 14px;
  color: #333;
}

.g63-uses__icon img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  display: block;
}

/* Responsive tweak */
@media (max-width: 600px) {
  .g63-uses__item h3 {
    font-size: 18px;
  }

  .g63-uses__item p {
    font-size: 13.5px;
    font-family: montserrat;

    
  }
}
/* book with this car */
.dark-booking-form {
  background-color: #111;
  color: white;
  padding: 60px 20px;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
}

.dark-booking-form__title {
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.dark-booking-form__desc {
  font-size: 14px;
  max-width: 500px;
  margin: 0 auto 30px;
  color: #ccc;
}

.dark-booking-form__form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dark-booking-form__form input,
.dark-booking-form__form select,
.dark-booking-form__form textarea {
  padding: 14px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
  width: 100%;
  box-sizing: border-box;
}

.dark-booking-form__form input::placeholder,
.dark-booking-form__form textarea::placeholder {
  color: #666;
}

.dark-booking-form__form button {
  background-color: #fff;
  color: #000000;
  padding: 14px;
  border: none;
  font-weight: bold;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dark-booking-form__form button:hover {
  background-color: #e4e4e4;
}

@media (max-width: 500px) {
  .dark-booking-form__title {
    font-size: 20px;
  }

  .dark-booking-form__desc {
    font-size: 13px;
  }
}

/* desktop */
@media (min-width: 768px) {
  .dark-booking-form__form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1000px;
  }

  .dark-booking-form__form textarea {
    grid-column: span 2;
  }

  .dark-booking-form__form button {
    align-self: end;
    height: 100%;
  }

  /* Full-width across one row */
  .dark-booking-form__form input[name="car-type"] {
    grid-column: span 2;
  }
}

/* slider */



/* === Slider Container === */
.slider-container {
  position: relative;
  width: 100%;
  height: 60vh;           /* Responsive height */
  overflow: hidden;
}

/* === Slider Track === */
.slider {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

/* === Individual Slide === */
.slide {
  min-width: 100%;
  height: 100%;
}

/* === Images in Slides === */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* Crops to fill, full-bleed */
  display: block;
}

/* === Navigation Arrows === */
.slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 30px;
  z-index: 2;
  pointer-events: none;
}

.slider-nav button {
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.slider-nav button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* === Responsive Heights === */
@media (min-width: 1024px) {
  .slider-container {
    margin-top: 80px;
    height: 70vh;
  }
}

@media (max-width: 768px) {
  .slider-container {
    height: 300px;
    margin-top: 80px;
  }

  .slider-nav button {
    font-size: 1.5rem;
  }
}

/* === Optional: Mobile Caption Styles === */
.slider-caption {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 5px;
  z-index: 10;
}

@media (max-width: 768px) {
  .slider-caption {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
}

@media (max-width: 480px) {
  .slider-caption {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    bottom: 4%;
  }
}


/* === Link Reset === */
a {
  text-decoration: none !important;
  color: inherit;
}
a:link,
a:visited,
a:active,
a:hover {
  color: inherit;
  text-decoration: none;
}

/* === Mobile Padding Fix for Car Intro (if relevant) === */
@media (max-width: 768px) {
  .car-intro {
    padding-bottom: 10px;
  }
}

/* video */
/* --- VIDEO THUMBNAIL SLIDE --- */
.video-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-thumbnail {
  position: relative;
  cursor: pointer;
  display: inline-block;
  border: none;
  padding: 0;
  background: none;
  width: 100%;
  max-width: 100%;
}

.video-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* --- PLAY ICON OVERLAY --- */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: white;
  pointer-events: none;
  z-index: 2;
}

/* --- VIDEO MODAL --- */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.video-modal-content video {
  width: 100%;
  max-height: 80vh; /* Prevent it from being taller than the screen */
  object-fit: contain;
  border-radius: 8px;
}

.video-close {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 48px;
  color: white;

  padding: 12px 18px;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.3s;
}

.video-close:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}


/* whatsapp */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-in-out;
}
.whatsapp-float:hover {
  transform: scale(1.05);
}

.ample-aid-link {
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1rem;
    text-decoration: none;
    background: linear-gradient(90deg, rgb(0, 198, 255), rgb(0, 114, 255)) text;
}

/* ==== FIX: desktop logo too big + mobile hamburger spacing ==== */

/* Desktop / Tablet */
@media (min-width: 901px) {
  /* Slightly smaller logo so it doesn't overlap nav items */
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6px;                 /* keep it near the top */
    z-index: 1000;
  }
  .logo img {
    height: 92px;            /* ↓ from the oversized value */
  }

  /* Make the bar tall enough so centered logo never sits over links */
  .navbar {
    min-height: 104px;        /* >= logo height + top offset */
    padding-left: 24px;       /* some breathing room */
    padding-right: 24px;
  }

  /* Push nav buttons to the right cleanly */
  .nav-links {
    margin-left: auto;
 
  }
}

/* Mobile */
@media (max-width: 900px) {
  /* Keep the logo centered and sized sensibly */
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6px;
    z-index: 1000;
  }
  .logo img {
    height: 72px;            /* tidy size on mobile */
  }

  /* Ensure header is tall enough and menu starts below it */
  .navbar {
    min-height: 84px;
    padding: 10px 18px;      /* gives the hamburger some space from edges */
  }
  .nav-links {
    margin-top: 84px;        /* dropdown below fixed header */
  }

  /* Hamburger with a bit of right padding (not hugging the edge) */
  .nav-toggle {
    display: block;
    position: absolute;
    right: 20px;             /* ← space from the right edge */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
  }
}

/* Mobile: add padding between hamburger and right edge */
@media (max-width: 900px) {
  .navbar {
    padding-right: calc(24px + env(safe-area-inset-right)); /* extra breathing room */
  }
  .nav-toggle {
    right: calc(27px + env(safe-area-inset-right)); /* keep icon inset from edge */
  }
}