/* =========================
   Singh Taxi Service — Responsive Overhaul
   Replaces previous style.css
   - Option 2 (balanced mobile)
   - Mobile stacking: Single-column on small screens (<=768px)
   ========================= */

/* Reset + Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #ffffff;
  color: #070707;
  overflow-x: hidden; /* avoid horizontal scroll */
}

img, svg, picture, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* CSS variables */
:root{
  --primary: #1aa9cd;
  --secondary: #f5b301;
  --dark: #070707;
  --light: #ffffff;
  --muted: #e3e6e6;
  --shadow: 0 6px 18px rgba(0,0,0,0.08);
  --transition: 0.28s ease;
  --max-width: 1200px;
}

/* Utility */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 28px;
  border: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  font-weight: 600;
}

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--primary); color: var(--light); }
.btn-secondary { background: var(--secondary); color: #111; }

/* === NAVBAR === */
.nav-bar {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1100;
  background: linear-gradient(180deg, rgba(7,7,7,0.97), rgba(7,7,7,0.95));
  padding: 12px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow);
}

.brand { display:flex; align-items:center; gap:12px; cursor:pointer; }
.logo-img { width:52px; height:auto; border-radius:6px; object-fit:cover; }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.main-title { color: var(--light); font-weight:700; font-size:1.15rem; }
.sub-title { color: var(--secondary); font-size:0.85rem; margin-top:2px; }

.nav-links {
  display:flex;
  gap:14px;
  align-items:center;
}

.nav-links a {
  color: var(--light);
  padding:8px 14px;
  border-radius:24px;
  font-weight:600;
  transition: background var(--transition), color var(--transition);
}

.nav-links a:hover,
.nav-links a.active { background: var(--secondary); color: var(--dark); }

/* mobile menu toggle */
.mobile-menu-toggle { display:none; color:var(--light); font-size:1.35rem; cursor:pointer; }

/* === HERO === */
.hero-image{
  position:relative;
  width:100%;
  height:72vh;
  max-height:760px;
  overflow:hidden;
  display:block;
}

.hero-img {
  width:100%;
  height:100%;
  object-fit:cover;
  vertical-align: middle;
}

.hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.5));
  z-index:1;
}

.hero-text{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:var(--light);
  width:92%;
  max-width:920px;
  padding: 18px;
}

.hero-text h1 { font-size:2.6rem; margin-bottom:10px; line-height:1.05; text-shadow:0 4px 18px rgba(0,0,0,0.45); }
.hero-text p { font-size:1.05rem; margin-bottom:14px; text-shadow:0 2px 10px rgba(0,0,0,0.35); }
.call-text { margin-top:8px; font-weight:600; }

/* hero buttons */
.hero-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.call-btn { background:var(--primary); color:var(--light); padding:12px 20px; border-radius:28px; display:inline-flex; align-items:center; gap:10px; font-weight:700; }
.whatsapp-btn { background:#25D366; color:var(--light); padding:12px 20px; border-radius:28px; display:inline-flex; align-items:center; gap:10px; font-weight:700; }

/* === SECTIONS GENERIC === */
.section { padding:56px 0; }
.section h2 { text-align:center; font-size:2.2rem; margin-bottom:18px; color:var(--dark); position:relative; }
.section h2::after { content:""; display:block; height:4px; width:72px; background:var(--secondary); margin:12px auto 0; border-radius:4px; }

/* === CARDS GRID === */
.cards {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
  align-items:start;
  padding: 0 20px;
}

.card {
  background:var(--light);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card img { width:100%; height:210px; object-fit:cover; display:block; }
.card h3 { padding:14px 18px 6px; font-size:1.15rem; }
.card p { padding: 0 18px 12px; color:#555; font-size:0.98rem; }
.price { padding: 0 18px 8px; color:var(--primary); font-weight:700; }
.book-btn { margin:0 18px 18px; padding:10px; border-radius:8px; background:var(--secondary); color:#111; display:block; width:calc(100% - 36px); font-weight:700; border:none; cursor:pointer; }

/* hover */
.card:hover { transform:translateY(-8px); box-shadow:0 18px 40px rgba(0,0,0,0.12); }

/* === SERVICES SECTION === */
.services-section {
  display:flex;
  gap:24px;
  padding:40px 5%;
  align-items:flex-start;
  background:var(--muted);
  flex-wrap:wrap;
}

.services-left, .services-right { flex:1; min-width:260px; }
.services-left h2 { text-align:left; margin-bottom:18px; font-size:1.8rem; display:inline-block; background:var(--light); padding:12px 20px; border-radius:18px; box-shadow:var(--shadow); }
.services-box { background:var(--light); padding:18px; border-radius:12px; box-shadow:var(--shadow); }
.service-item { background: #f5f6f7; padding:12px 14px; margin-bottom:12px; border-radius:8px; font-weight:600; cursor:pointer; transition:transform var(--transition); }
.service-item:hover { transform:translateX(6px); background:var(--secondary); color:#111; }

/* feature cards grid */
.services-right { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
.feature-card { background:var(--light); padding:14px; border-radius:10px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow); }
.feature-card i { font-size:1.4rem; color:var(--secondary); }

/* === THREE PART SECTION (Payment / Fare / Tour) === */
.three-part-section {
  display:flex;
  gap:20px;
  padding:40px 5%;
  align-items:stretch;
  flex-wrap:wrap;
  background:#bfe6f3;
}

.payment-info, .fare-info, .tour-planner { flex:1; min-width:260px; background:var(--light); padding:18px; border-radius:12px; box-shadow:var(--shadow); }
.payment-info img { width:180px; height:180px; object-fit:cover; margin:0 auto 10px; display:block; border-radius:8px; }
.fare-card { background:#f0f3f6; padding:12px; margin:12px 0; border-radius:8px; }

/* tour planner image controls */
.planner-img { width:100%; height:240px; object-fit:cover; border-radius:8px; }
.planner-controls { position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:space-between; padding:0 12px; }

/* === REVIEWS === */
.review-section { padding:48px 5%; background:#aee0f3; text-align:center; }
.rating-summary { display:flex; gap:12px; align-items:center; justify-content:center; margin-bottom:18px; flex-wrap:wrap; }
.rating-summary img{
  width:100px;
  height:auto;
}
.rating-score { font-size:2rem; font-weight:800; color:var(--dark); }
.review-carousel { display:flex; gap:18px; overflow-x:auto; padding:10px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.review-card { flex:0 0 300px; background:var(--light); padding:16px; border-radius:10px; box-shadow:var(--shadow); scroll-snap-align:start; text-align:center; }
.review-card .initial { width:70px; height:70px; border-radius:50%; margin:10px auto; background:#f0f0f0; display:flex; justify-content:center; align-items:center; font-weight:800; }

/* === GALLERY === */
/* === Gallery Section === */
/* === Gallery Section === */
.gallery-section {
    padding: 60px 5%;
    background-color: #B0C4DE;
    text-align: center;
}

/* Smaller + tighter + premium masonry layout */
.gallery-grid {
    column-count: 4;        /* smaller image size */
    column-gap: 16px;
    width: 100%;
    margin: 30px auto;
}

.gallery-grid img {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    border-radius: 10px;
    display: block;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* hover effect */
.gallery-grid img:hover {
    transform: scale(1.035);
    box-shadow: 0px 8px 25px rgba(0,0,0,0.28);
}

/* responsive */
@media(max-width: 1200px){
    .gallery-grid{
        column-count: 3;
    }
}

@media(max-width: 768px){
    .gallery-grid{
        column-count: 2;
    }
}

@media(max-width: 480px){
    .gallery-grid{
        column-count: 1;
    }
}

/* Fullscreen popup image fix */
#popupImage {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    object-position: center;
    background: black;
}


/* === CONTACT & BOOKING === */
.contact-booking-section { display:flex; gap:24px; padding:48px 5%; background:#93b8d6; flex-wrap:wrap; }
.contact-info, .booking-form { flex:1; min-width:260px; background:var(--light); padding:18px; border-radius:12px; box-shadow:var(--shadow); }
.contact-info ul { list-style:none; padding:0; margin:0 0 12px; }
.contact-info li { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.map-container { border-radius:8px; overflow:hidden; height:260px; }

/* booking form */
.booking-form form { display:flex; flex-direction:column; gap:10px; }
.booking-form input, .booking-form select, .booking-form textarea { padding:12px; border-radius:8px; border:1px solid #e2e6e6; font-size:1rem; width:100%; }
.form-row { display:flex; gap:10px; }
.form-row input { flex:1; }

/* === ABOUT SECTION === */
.about-section { display:flex; gap:22px; padding:48px 5%; background:var(--muted); flex-wrap:wrap; align-items:center; }
.about-left {
    flex:1;
    min-width:300px;
}

.slideshow {
    position:relative;
    width:100%;
    height:380px;
    border-radius:12px;
    overflow:hidden;
    background:black;
}

.slideshow img {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:rgb(255, 255, 255);
    opacity:0;
    transition:opacity .6s ease-in-out;
}

.slideshow img.active {
    opacity:1;
}


/* stats */
.about-stats { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.stat { background:var(--light); padding:12px; border-radius:10px; display:flex; gap:12px; align-items:center; min-width:140px; box-shadow:var(--shadow); }

/* === FOOTER === */
.footer { background:var(--dark); color:var(--light); padding:28px 5%; text-align:center; }
.footer-links { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; color: #0077ff;}
.social-icons { display:flex; gap:12px; justify-content:center; margin-bottom:12px; }

/* === POPUPS & BACK-TO-TOP === */
.image-popup, .offer-popup { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); z-index:2200; padding:18px; }
.image-popup.active, .offer-popup.active { display:flex; }
.image-popup img, .offer-content img { max-width:100%; max-height:80vh; border-radius:8px; }
.offer-content { background:#fff; padding:20px; border-radius:12px; width:100%; max-width:420px; text-align:center; box-shadow:0 12px 36px rgba(0,0,0,0.25); }

/* back to top */
.back-to-top { position:fixed; right:18px; bottom:18px; width:48px; height:48px; border-radius:50%; display:none; align-items:center; justify-content:center; z-index:2000; background:var(--primary); color:var(--light); border:none; box-shadow:var(--shadow); }
.back-to-top.visible { display:flex; }

/* small helper */
.text-center { text-align:center; }
.muted { color:#666; }

/* =========================
   RESPONSIVE BREAKPOINTS
   Order: large -> medium -> small
   ========================= */

/* Large screens (<= 1200) */
@media (max-width:1200px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .planner-img { height:220px; }
}

/* Medium screens (<= 992) */
@media (max-width:992px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap:18px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .services-right { grid-template-columns: repeat(2, 1fr); }
  .hero-text h1 { font-size:2.2rem; }
  .hero-image { height:64vh; }
  .slideshow { height:320px; }
}

/* Tablet / small laptop (<= 768) -> MOBILE single-column stacking (Option A) */
@media (max-width:768px) {
  /* NAV */
  .mobile-menu-toggle { display:block; }
  .nav-links {
    position: fixed;
    left: 0;
    right: 0;
    top: 70px;
    background: rgba(7,7,7,0.98);
    flex-direction: column;
    align-items: center;
    padding: 18px 12px;
    gap:12px;
    transform: translateY(-130%);
    transition: transform var(--transition);
    z-index:1500;
  }
  .nav-links.active { transform: translateY(0); }

  /* Hero */
  .hero-image { height:56vh; }
  .hero-text { left:50%; top:50%; transform:translate(-50%,-50%); width:92%; padding:12px; }
  .hero-text h1 { font-size:1.6rem; }
  .hero-text p { font-size:0.95rem; }

  /* single column: cards, gallery, services */
  .cards { grid-template-columns: 1fr; padding:0 12px; gap:14px; }
  .gallery-grid { grid-template-columns: 1fr; gap:12px; }
  .services-section { flex-direction:column; padding:20px 5%; gap:14px; }
  .three-part-section { flex-direction:column; gap:14px; padding:20px 5%; }
  .contact-booking-section { flex-direction:column; padding:20px 5%; gap:14px; }
  .about-section { flex-direction:column; padding:22px 5%; gap:12px; }

  .services-right { grid-template-columns: 1fr; }
  .feature-card { justify-content:flex-start; }

  /* booking form */
  .form-row { flex-direction:column; gap:8px; }
  .booking-form input, .booking-form select, .booking-form textarea { font-size:1rem; padding:12px; }

  .slideshow { height:260px; }
  .planner-img { height:200px; }

  /* footer adjustments */
  .footer { padding:22px 12px; text-align:center; }
  
}

/* Very small phones (<= 576px) */
@media (max-width:576px) {
  .hero-image { height:48vh; }
  .hero-text h1 { font-size:1.3rem; }
  .hero-text p { font-size:0.95rem; }

  .logo-img { width:46px; }
  .brand-text .main-title { font-size:1rem; }
  .brand-text .sub-title { font-size:0.8rem; }

  .card img { height:160px; }
  .gallery-grid img { height:140px; }
  .review-card { flex: 0 0 260px; }
  .slideshow { height:220px; }
}

/* Tiny phones (<= 400px) */
@media (max-width:400px) {
  .hero-text { padding:8px; width:94%; }
  .hero-text h1 { font-size:1.1rem; }
  .call-btn, .whatsapp-btn { padding:8px 12px; font-size:0.9rem; border-radius:20px; }
  .book-btn { margin: 0 14px 14px; }
  .cards { gap:12px; padding:0 10px; }
}

/* Final micro-fixes to avoid overflow */
html, body { -webkit-text-size-adjust:100%; -ms-overflow-style:-ms-autohiding-scrollbar; }
/**/
.card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* optional subtle shadow */
}
/**/
/* --- Tour Planner Slideshow --- */
.tour-slider {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 12px;
}

.tour-slider .slides {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
     object-fit: cover;
    object-position: center top;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 12px;
}

.slide.active {
    opacity: 1;
}

/* Arrows */
.tour-prev, .tour-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    border: none;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 1.1rem;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s ease;
}

.tour-prev:hover, .tour-next:hover {
    background: rgba(0,0,0,0.75);
}

.tour-prev { left: 12px; }
.tour-next { right: 12px; }

/* Dots */
.tour-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.tour-dots .dot {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.tour-dots .dot.active {
    background: var(--secondary);
    transform: scale(1.2);
}
/**/