/* HERO SECTION */

.hero {

  position: relative;

  width: 100%;

  height: 100vh;

  min-height: 600px; /* ensures mobile has enough space */

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding-top: 100px; /* push content below fixed header */

}



.hero-video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

}



.hero-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(15, 23, 42, 0.6);

  z-index: 1;

}



.hero-content {

  position: relative;

  z-index: 2;

  max-width: 900px;

  padding: 0 20px;

  color: #ffffff;

  display: flex;

  flex-direction: column;

  align-items: center;

}

/* FIX: Mobile header overlap on Contact page */
@media (max-width: 480px) {
    .hero-contact{
        margin-top: 80px; /* height of your mobile header */
        height: calc(35vh - 80px);
    }
}




/* HEADLINE */

.hero h1 {

  font-size: 60px;

  line-height: 1.2;

  font-weight: 700;

  margin-bottom: 15px;

}



/* GOLD TEXT */

.gold-text {

  color: #d4af37;

}



/* SUBTEXT */

.hero-subtext {

  font-size: 20px;

  margin-bottom: 25px;

}



/* HERO BUTTONS */

.hero-buttons {

  display: flex;

  gap: 20px;

  justify-content: center;

  flex-wrap: wrap;

  margin-bottom: 40px;

}



.hero-btn {

  padding: 15px 30px;

  border-radius: 30px;

  font-weight: 500;

  font-size: 16px;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: 0.3s;

}



.hero-btn i {

  font-size: 16px;

}



.hero-btn-gold {

  background: #d4af37;

  color: #0f172a;

}



.hero-btn-gold:hover {

  background: #f5d76e;

}



.hero-btn-white {

  background: #ffffff;

  color: #0f172a;

}



.hero-btn-white:hover {

  background: #e5e5e5;

}



/* HERO STATS */

.hero-stats {

  display: flex;

  gap: 40px;

  justify-content: center;

  flex-wrap: wrap;

  margin-top: 20px;

}



.stat-card h2 {

  font-size: 28px;

  color: #d4af37;

  margin-bottom: 5px;

}



.stat-card p {

  font-size: 14px;

  color: #ffffff;

}



/* =========================

   RESPONSIVE FIXES

========================= */



/* Tablet */

@media (max-width: 900px) {

  .hero {

    height: 80vh;

    min-height: 500px;

    padding-top: 90px;

  }



  .hero h1 {

    font-size: 45px;

  }



  .hero-subtext {

    font-size: 18px;

  }



  .hero-buttons {

    flex-direction: column;

    gap: 15px;

    margin-bottom: 30px;

  }



  .hero-btn {

    width: 70%;

    justify-content: center;

    padding: 12px 0;

  }



  .hero-stats {

    gap: 20px;

  }



  .stat-card h2 {

    font-size: 24px;

  }



  .stat-card p {

    font-size: 13px;

  }

}



/* Mobile */

@media (max-width: 600px) {

  .hero {

    height: 100vh;

    min-height: 650px; /* make room for header + content */

    padding-top: 120px; /* push below fixed header */

  }



  .hero h1 {

    font-size: 32px;

    line-height: 1.3;

    margin-bottom: 15px;

  }



  .hero-subtext {

    font-size: 16px;

    margin-bottom: 20px;

  }



  .hero-buttons {

    width: 100%;

    flex-direction: column;

    gap: 12px;

    align-items: center;

  }



  .hero-btn {

    width: 80%;

    padding: 12px 0;

  }



  .hero-stats {

    flex-direction: column;

    gap: 20px;

    margin-top: 25px;

  }



  .stat-card h2 {

    font-size: 22px;

  }



  .stat-card p {

    font-size: 14px;

  }

}

/* =========================

   TABLET FIXES (600px - 900px)

========================= */

@media (min-width: 601px) and (max-width: 900px) {

  .hero {

    height: 90vh; /* slightly smaller than desktop */

    min-height: 500px;

    padding-top: 100px; /* push below fixed header */

  }



  .hero h1 {

    font-size: 42px; /* smaller than desktop, bigger than mobile */

    line-height: 1.25;

    margin-bottom: 18px;

  }



  .hero-subtext {

    font-size: 17px;

    margin-bottom: 25px;

  }



  .hero-buttons {

    flex-direction: column; /* stack buttons */

    gap: 15px;

    align-items: center;

    margin-bottom: 35px;

  }



  .hero-btn {

    width: 65%; /* tablet-friendly button width */

    padding: 13px 0;

  }



  .hero-stats {

    flex-direction: row; /* keep stats in row */

    flex-wrap: wrap;

    gap: 25px;

    justify-content: center;

    margin-top: 20px;

  }



  .stat-card h2 {

    font-size: 24px;

  }



  .stat-card p {

    font-size: 14px;

  }

}



/* =========================

   FEATURED CARS SECTION

========================= */

.featured-cars {

  padding: 80px 20px;

  background: #0f172a;

  color: #ffffff;

  text-align: center;

}



.featured-cars .section-header h2 {

  font-size: 36px;

  color: #d4af37;

  margin-bottom: 10px;

}



.featured-cars .section-header p {

  font-size: 16px;

  margin-bottom: 40px;

  color: #ffffff;

}



.cars-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}



/* CAR CARD */

.car-card {

  position: relative;

  background: #fff;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.car-image-wrapper {

  position: relative;

}



.car-image-wrapper img {

  width: 100%;

  height: 200px;

  object-fit: cover;

}



.car-location {

  position: absolute;

  top: 10px;

  left: 10px;

  background: rgba(255, 215, 0, 0.9); /* gold badge */

  color: #000;

  padding: 5px 10px;

  border-radius: 5px;

  font-weight: bold;

  font-size: 0.9rem;

}



.car-info {

  padding: 15px;

}



.car-buttons {

  display: flex;

  gap: 10px;

  margin-top: 10px;

}



.car-btn {

  padding: 8px 12px;

  border-radius: 5px;

  text-decoration: none;

  font-weight: 600;

}



.car-btn-gold {

  background: #ffd700;

  color: #000;

}



.car-btn-white {

  background: #fff;

  border: 1px solid #ccc;

  color: #000;

}



.view-all-btn {

  text-align: center;

  margin-top: 20px;

}



.car-card {

  background: #1e293b;

  border-radius: 12px;

  overflow: hidden;

  transition: transform 0.3s;

}



.car-card:hover {

  transform: translateY(-5px);

}



.car-card img {

  width: 100%;

  height: 200px;

  object-fit: cover;

}



.car-info {

  padding: 15px 20px;

}



.car-info h3 {

  font-size: 18px;

  color: #d4af37;

  margin-bottom: 8px;

}



.car-category {

  font-size: 14px;

  background: #cbd5e1;

  color: #0f172a;

  padding: 2px 6px;

  border-radius: 4px;

  margin-left: 8px;

}



.car-price {

  font-size: 16px;

  margin-bottom: 10px;

}



.car-specs {

  display: flex;

  gap: 15px;

  font-size: 13px;

  margin-bottom: 15px;

  flex-wrap: wrap;

  justify-content: center;

}



.car-specs i {

  color: #d4af37;

  margin-right: 4px;

}



/* CAR BUTTONS */

.car-buttons {

  display: flex;

  gap: 10px;

  justify-content: center;

  flex-wrap: wrap;

}



.car-btn {

  padding: 10px 18px;

  border-radius: 25px;

  text-decoration: none;

  font-weight: 500;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: 0.3s;

}



.car-btn-gold {

  background: #d4af37;

  color: #0f172a;

}



.car-btn-gold:hover {

  background: #f5d76e;

}



.car-btn-white {

  background: #ffffff;

  color: #0f172a;

}



.car-btn-white:hover {

  background: #e5e5e5;

}



/* =========================

   RESPONSIVE FEATURED CARS

========================= */

@media (max-width: 900px) {

  .cars-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .cars-grid {

    grid-template-columns: 1fr;

  }



  .car-card img {

    height: 180px;

  }

}



/* =========================

   FEATURED STAYS SECTION

========================= */

/* Grid */

.stays-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 1.5rem;

}



/* Card */

.stay-card {

  position: relative;

  background: #fff;

  border-radius: 14px;

  overflow: hidden;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  transition: transform 0.3s ease;

}



.stay-card:hover {

  transform: translateY(-5px);

}



/* Image */

.stay-card img {

  width: 100%;

  height: 220px;

  object-fit: cover;

}



/* Location badge */

.stay-location-badge {

  position: absolute;

  top: 12px;

  left: 12px;

  background: rgba(0, 0, 0, 0.75);

  color: #fff;

  padding: 6px 10px;

  border-radius: 20px;

  font-size: 0.8rem;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 5px;

}



/* Info */

.stay-info {

  padding: 1rem;

}



.stay-category {

  background: #d4af37;

  color: #000;

  font-size: 0.7rem;

  padding: 3px 8px;

  border-radius: 12px;

  margin-left: 6px;

}



.stay-price {

  font-weight: bold;

  margin: 0.5rem 0;

}



/* Buttons */

.stay-buttons {

  display: flex;

  gap: 0.5rem;

  margin-top: 0.8rem;

}



.stay-btn {

  flex: 1;

  text-align: center;

  padding: 0.6rem;

  border-radius: 8px;

  font-size: 0.85rem;

  text-decoration: none;

}



.stay-btn-gold {

  background: #d4af37;

  color: #000;

}



.stay-btn-white {

  border: 1px solid #ddd;

  color: #333;

}



/* View all */

.view-all-wrap {

  text-align: center;

  margin-top: 2rem;

}



.view-all-btn {

  padding: 0.8rem 2rem;

  color: #fff;

  border-radius: 30px;

  text-decoration: none;

  font-weight: 600;

}



/* Mobile tweaks */

@media (max-width: 480px) {

  .stay-card img {

    height: 180px;

  }

}



.featured-stays {

  padding: 5px 20px;

  background: #0f172a;

  color: #ffffff;

  text-align: center;

}



.featured-stays .section-header h2 {

  font-size: 36px;

  color: #d4af37;

  margin-bottom: 10px;

}



.featured-stays .section-header p {

  font-size: 16px;

  margin-bottom: 40px;

  color: #ffffff;

}



.stays-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}



/* STAY CARD */

.stay-card {

  background: #1e293b;

  border-radius: 12px;

  overflow: hidden;

  transition: transform 0.3s;

}



.stay-card:hover {

  transform: translateY(-5px);

}



.stay-card img {

  width: 100%;

  height: 200px; /* same height as car cards */

  object-fit: cover;

}



.stay-info {

  padding: 15px 20px;

}



.stay-info h3 {

  font-size: 18px;

  color: #d4af37;

  margin-bottom: 8px;

}



.stay-category {

  font-size: 14px;

  background: #cbd5e1;

  color: #0f172a;

  padding: 2px 6px;

  border-radius: 4px;

  margin-left: 8px;

}



.stay-price {

  font-size: 16px;

  margin-bottom: 10px;

}



.stay-specs {

  display: flex;

  gap: 15px;

  font-size: 13px;

  margin-bottom: 15px;

  flex-wrap: wrap;

  justify-content: center;

}



.stay-specs i {

  color: #d4af37;

  margin-right: 4px;

}



/* STAY BUTTONS */

.stay-buttons {

  display: flex;

  gap: 10px;

  justify-content: center;

  flex-wrap: wrap;

}



.stay-btn {

  padding: 10px 18px;

  border-radius: 25px;

  text-decoration: none;

  font-weight: 500;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: 0.3s;

}



.stay-btn-gold {

  background: #d4af37;

  color: #0f172a;

}



.stay-btn-gold:hover {

  background: #f5d76e;

}



.stay-btn-white {

  background: #ffffff;

  color: #0f172a;

}



.stay-btn-white:hover {

  background: #e5e5e5;

}



/* =========================

   RESPONSIVE FEATURED STAYS

========================= */

@media (max-width: 900px) {

  .stays-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .stays-grid {

    grid-template-columns: 1fr;

  }



  .stay-card img {

    height: 200px; /* maintain same size as cars */

  }

}



/* =========================

   REVIEWS SECTION

========================= */

.reviews {

  padding: 80px 20px;

  background: #0f172a;

  color: #ffffff;

  text-align: center;

}



.reviews .section-header h2 {

  font-size: 36px;

  color: #d4af37;

  margin-bottom: 10px;

}



.reviews .section-header p {

  font-size: 16px;

  margin-bottom: 40px;

}



.reviews-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}



/* REVIEW CARD */

.review-card {

  background: #1e293b;

  padding: 20px;

  border-radius: 12px;

  text-align: left;

  transition: transform 0.3s;

}



.review-card:hover {

  transform: translateY(-5px);

}



.review-card p {

  font-size: 14px;

  margin-bottom: 15px;

}



.reviewer {

  display: flex;

  flex-direction: column;

  gap: 5px;

}



.reviewer-name {

  font-size: 16px;

  color: #d4af37;

  font-weight: 600;

}



.reviewer-product {

  font-size: 13px;

  color: #ffffff;

}



.review-rating i {

  color: #d4af37;

}



/* CTA BUTTON */

.review-cta {

  margin-top: 40px;

}



.review-cta .cta-btn {

  background: #d4af37;

  color: #0f172a;

  padding: 12px 25px;

  border-radius: 30px;

  font-weight: 500;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: 0.3s;

}



.review-cta .cta-btn:hover {

  background: #f5d76e;

}



/* =========================

   RESPONSIVE REVIEWS

========================= */

@media (max-width: 900px) {

  .reviews-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .reviews-grid {

    grid-template-columns: 1fr;

  }

}



/* ===== Submit Review Form ===== */

form.submit-review {

  max-width: 600px;

  margin: 30px auto;

  padding: 20px;

  background: #ffffff;

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  font-family: "Arial", sans-serif;

}



/* Form elements */

form.submit-review input[type="text"],

form.submit-review select,

form.submit-review textarea {

  width: 100%;

  padding: 12px 15px;

  margin-bottom: 15px;

  border: 1px solid #ddd;

  border-radius: 8px;

  font-size: 1rem;

  transition: border 0.3s;

}



form.submit-review input[type="text"]:focus,

form.submit-review select:focus,

form.submit-review textarea:focus {

  border-color: #007bff;

  outline: none;

}



/* Label styling */

form.submit-review label {

  font-weight: bold;

  margin-bottom: 5px;

  display: block;

  font-size: 0.95rem;

}



/* Textarea */

form.submit-review textarea {

  resize: vertical;

  min-height: 100px;

}



/* Submit button */

form.submit-review button[type="submit"] {

  background-color: #28a745;

  color: #fff;

  padding: 12px 25px;

  border: none;

  border-radius: 8px;

  font-size: 1rem;

  cursor: pointer;

  transition: background-color 0.3s;

  width: 100%;

}



form.submit-review button[type="submit"]:hover {

  background-color: #218838;

}



/* Responsive tweaks */

@media (max-width: 768px) {

  form.submit-review {

    padding: 15px;

  }



  form.submit-review input[type="text"],

  form.submit-review select,

  form.submit-review textarea {

    padding: 10px 12px;

  }



  form.submit-review button[type="submit"] {

    padding: 10px;

    font-size: 0.95rem;

  }

}