/* ===============================
   COCHIN EXPRESS – MOBILE HEADER
   =============================== */
@media (max-width: 768px) {
  .ce-mobile-header {
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 999;
  }

  @media (max-width: 768px) {
    .ce-mobile-top {
      background: #111;
      padding: 14px 0 42px;
      position: relative;
      text-align: center;
      overflow: hidden;
    }

    /* YELLOW BASE (SIDE VISIBLE ONLY) */
    .ce-mobile-top::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: -15%;
      width: 130%;
      height: 32px;
      background: #5441d0;
      border-top-left-radius: 60%;
      border-top-right-radius: 60%;
      z-index: 0;
    }

    /* BLACK CURVE (MAIN SHAPE) */
    .ce-mobile-top::after {
      content: "";
      position: absolute;
      bottom: 10px;
      left: -15%;
      width: 130%;
      height: 100px;
      background: #111;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      z-index: 1;
    }

    /* TEXT ABOVE CURVE */
    .ce-contact {
      position: relative;
      z-index: 2;
      color: #5441d0;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
  }

  /* LOGO BAR */
  .ce-mobile-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
  }

  .ce-logo img {
    width: 110px;
    height: auto;
  }

  .ce-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
  }

  .ce-icons a {
    color: #5441d0;
  }

  .ce-icons span {
    font-size: 22px;
    cursor: pointer;
    color: #333;
  }
}
@media (max-width: 768px) {
  .ce-contact a {
    color: #fff !important;
  }
}
@media (max-width: 768px) {
  /* Overlay covering background when menu is open */
  #mobileMenuOverlay {
    position: fixed;
    top: 0;
    left: 260px; /* SAME as mobile menu width */
    width: calc(100% - 260px);
    height: 100vh;
    background: transparent;
    z-index: 998;
    display: none;
  }

  /* Show overlay when menu is open */
  body.menu-open #mobileMenuOverlay {
    display: block;
  }

  /* Ensure menu is above overlay */
  .mobile-menu {
    z-index: 999;
  }
}
/* ================================
   MOBILE HEADER CONTACT – FULL BLUE BAR
   ================================ */
@media (max-width: 768px) {
  /* Apply blue background to FULL header strip */
  .main_header_area .header-content {
    display: block !important;
    background-color: #5441d0 !important;
    width: 100%;
  }

  /* Inner container layout */
  .main_header_area .header-content .container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    text-align: center;
    padding: 8px 0;
    background: transparent !important; /* important */
  }

  /* Phone + email */
  .main_header_area .header-content .links:first-child ul {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
  }

  /* Social icons */
  .main_header_area .header-content .links:last-child ul {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }

  /* White text & icons */
  .main_header_area .header-content a,
  .main_header_area .header-content i {
    color: #fff !important;
  }
}

@media (max-width: 768px) {
  .main_header_area .header-content {
    padding: 6px 0;
  }
}

/* =====================================
   HOME PAGE (home-thh) – MOBILE VIEW ONLY
   ===================================== */
@media (max-width: 767px) {
  /* 🔹 Compact Header */
  body.home-thh .main_header_area {
    position: relative !important;
    background: #ffffff !important;
    padding: 0px 0 !important;
  }

  body.home-thh .main_header_area .navbar {
    min-height: auto !important;
    padding: 0 10px !important;
    background-color: #ffffff !important;
  }

  /* Reduce logo size */
  body.home-thh .main_header_area .navbar-header img,
  body.home-thh .main_header_area img {
    max-height: 80px !important;
  }

  /* 🔹 Banner height like second layout */
  body.home-thh .banner,
  body.home-thh .banner .swiper-container,
  body.home-thh .banner .swiper-wrapper,
  body.home-thh .banner .swiper-slide,
  body.home-thh .banner .slide-inner {
    height: 42vh !important;
    min-height: 260px !important;
  }

  /* Background image handling */
  body.home-thh .banner .slide-image {
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* 🔹 Remove extra spacing inside banner */
  body.home-thh .banner .slide-content,
  body.home-thh .banner .banner-content {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }
}
@media (max-width: 767px) {
  body.home-thh .header_menu {
    background-color: #ffffff !important;
  }
}

.table-header {
  background-color: #ada6d9;
  font-weight: normal;
  border-bottom: 2px solid #ddd;
}

.table-header .wa-btn {
  visibility: hidden; /* Hide button in header if you don't want it clickable */
  pointer-events: none;
}

/* Price Card Styling with Alternate Rows */
.price-card {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 0;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  transition: all 0.3s ease;
  min-height: 40px;
}

/* Alternate row colors */
.price-card:nth-child(2) {
  /* First data row */
  background-color: #ffffff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.price-card:nth-child(2) {
  background-color: #e3e1e1;
}

.price-card:nth-child(4) {
  /* Highlight row */
  background-color: #e3e1e1;
}

.price-card:nth-child(5) {
  background-color: #ffffff;
}

.price-card:nth-child(6) {
  background-color: #e3e1e1;
}

.price-card:nth-child(7) {
  background-color: #ffffff;
}

.price-card:nth-child(8) {
  background-color: #e3e1e1;
}

.price-card:nth-child(9) {
  background-color: #ffffff;
}

.price-card:nth-child(10) {
  background-color: #e3e1e1;
}

.price-card:nth-child(11) {
  background-color: #ffffff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* HOVER EFFECT - #5441d0 background with white text */
.price-card:hover {
  background-color: #cac8da !important;
  transform: scale(1.005);
  box-shadow: 0 4px 12px rgba(84, 65, 208, 0.2);
  border-color: transparent;
}

.price-card:hover > div {
  color: #5441d0 !important;
  font-weight: 500;
}

/* DO NOT CHANGE BUTTON BACKGROUND ON ROW HOVER */
.price-card:hover .wa-btn {
  background: #5441d0; /* Keep original purple background */
  color: white; /* Keep white text */
  border: 1px solid white; /* Add white border for visibility */
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Button hover effect remains the same */
.price-card:hover .wa-btn:hover {
  background: #5441d0; /* Darker purple on button hover */
  border: 1px solid white;
}

/* Header Row */
.price-card.table-header {
  background: #f5f3ff;
  color: #4a1fb8;
  font-weight: normal;
  font-size: 16px;
  border: 2px solid #ddd6fe;
  margin-bottom: 10px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.price-card.table-header > div {
  color: black;
  font-weight: 600;
}

/* Keep header from changing on hover
.price-card.table-header:hover {
  background: #f5f3ff;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 2px solid #ddd6fe;
} */

.price-card.table-header:hover .wa-btn {
  display: none;
}

.price-card.highlight > div {
  color: black;
  font-weight: normal;
}

.price-card.highlight .wa-btn {
  background: #5441d0;
  color: white;
  border: none;
}

.price-card.highlight .wa-btn:hover {
  background: #5441d0;
}

/* Individual Column Styling */
.price-card > div:nth-child(1) {
  font-weight: normal;
  color: black;
  font-size: 15px;
}

.price-card > div:nth-child(2) {
  color: black;
  font-weight: 500;
}

.price-card > div:nth-child(3) {
  color: black;
  font-weight: 500;
  font-size: 16px;
}

/* WhatsApp Button - Keep original purple background */
.wa-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #5441d0; /* Original purple background */
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  min-width: 120px;
  box-shadow: 0 2px 4px rgba(123, 63, 228, 0.2);
}

.wa-btn:hover {
  background: #5441d0; /* Darker purple on hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(123, 63, 228, 0.3);
}

/* Container Styling */
.car-item {
  background: #fafafa;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 010px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
}

.car-title {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  /* margin-bottom: 15px; */
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e7eb;
  position: relative;
}

.car-content {
  display: flex;
  flex-direction: column;
}

/* Additional Notes */
.additional-notes {
  background: #f8fafc;
  border-left: 4px solid #5441d0;
  padding: 20px;
  margin: 25px 0;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.additional-notes p {
  margin: 8px 0;
  color: #4b5563;
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* .additional-notes p::before {
  content: "•";
  color: #5441d0;
  font-weight: bold;
  margin-right: 10px;
  font-size: 18px;
} */

/* Disclaimer */
.car-content > h5 {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: black;
  padding: 10px;
  border-radius: 6px;
  font-size: 16px;
  margin-top: 10px;
  text-align: left;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .price-card {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
    padding: 20px;
    border-radius: 8px !important;
    margin-bottom: 10px;
  }

  .price-card.table-header {
    display: none;
  }

  .price-card > div::before {
    content: attr(data-label);
    font-weight: 600;
    color: #5441d0;
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
  }

  .price-card > div:nth-child(1)::before {
    content: "Package";
  }
  .price-card > div:nth-child(2)::before {
    content: "Distance";
  }
  .price-card > div:nth-child(3)::before {
    content: "Price";
  }

  .wa-btn {
    width: 100%;
    margin-top: 10px;
  }

  .price-card.highlight::before {
    right: -25px;
    top: 8px;
    font-size: 10px;
    padding: 3px 25px;
  }
}

/* Animation for hover effect */
@keyframes rowHover {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.005);
  }
}

.price-card:hover {
  animation: rowHover 0.3s ease forwards;
}

.payment-icon {
  height: 2.8rem; /* same as fs-4 */
  width: auto;
  vertical-align: middle;
}

.banner-image {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-row: 1;
  position: relative;
  z-index: 3;
}

.banner-image img {
  grid-column: 4 / span 6;
  margin-top: -150px;
}

@media (max-width: 1300px) {
  .banner-image img {
    margin-top: -200px;
  }
}

@media (max-width: 1200px) {
  .banner-image img {
    margin-top: -190px;
  }
}

@media (max-width: 1100px) {
  .banner-image img {
    margin-top: -150px;
  }
}

@media (max-width: 999px) {
  .banner-image img {
    display: none !important;
  }
}