:root{
  --beige:#d8d1c7;      /* screenshot-like color */
  --dark:#1e1e1e;
  --light:#f6f4ef;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  background:var(--light);
  color:#222;
}

/* ================= NAV SECTION ================= */
.nav-section{
  background:rgba(246,244,239,0.9); /* soft background */
  position:fixed;                  /* FIXED ON SCROLL */
  top:0;
  width:100%;
  z-index:1000;
  backdrop-filter:blur(6px);       /* premium glass feel */
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 6%;
}

/* LOGO + TEXT */
.logo-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-img{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--beige);
}

.logo-text{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
  font-weight:600;
  color:#2b2b2b;
}

/* ================= NAV PILL ================= */
.nav-pill{
  background:var(--beige);          /* SCREENSHOT COLOR */
  padding:10px 28px;
  border-radius:40px;
  display:flex;
  gap:25px;
  box-shadow:0 15px 30px rgba(0,0,0,.12);
}

.nav-pill a{
  text-decoration:none;
  color:#2b2b2b;                    /* dark text like screenshot */
  font-size:.95rem;
  padding:8px 18px;
  border-radius:25px;
  transition:.3s;
}

.nav-pill a:hover{
  background:rgba(255,255,255,.35);
}

.nav-pill a.active{
  background:rgba(255,255,255,.45);
}

.menu-icon{
  display:none;
  font-size:1.8rem;
  cursor:pointer;
  color:#2b2b2b;
}

/* ================= HERO ================= */
.hero{
  height:50vh;
  margin-top:90px;                 /* SPACE FOR FIXED NAV */
  background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
    url("https://images.unsplash.com/photo-1600948836101-f9ffda59d250")
    center/cover;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-content{
  color:white;
}

.hero-content span{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
}

.hero-content h1{
  font-family:'Playfair Display',serif;
  font-size:3.2rem;
  letter-spacing:3px;
  margin:10px 0 25px;
}

.hero-btn{
  border:1px solid white;
  padding:12px 38px;
  border-radius:30px;
  color:white;
  text-decoration:none;
  transition:.4s;
}

.hero-btn:hover{
  background:white;
  color:black;
}
/* ================= FAST HORIZONTAL SERVICES ================= */
.scroll-services{
  padding:100px 6%;
  background:var(--light);
}
.services-title{
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  margin-bottom:50px;
}

/* OUR – same as before (light / beige) */
.services-title .our{
  color:#c7bfb4;   /* ya jo pehle use kar rahe the */
}

/* SERVICES – BLACK */
.services-title .services-word{
  color:#000;
}


.services-title{
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  margin-bottom:50px;
  color:#c7bfb4;
}

.services-row{
  display:flex;
  gap:30px;
  overflow-x:auto;
  padding-bottom:15px;
}

.services-row::-webkit-scrollbar{
  height:6px;
}

.services-row::-webkit-scrollbar-thumb{
  background:#cfc6bb;
  border-radius:10px;
}

.service-item{
  min-width:250px;
  background:white;
  border-radius:20px;
  padding:15px;
  text-align:center;
}

.service-img{
  width:100%;
  height:220px;
  border-radius:140px 140px 20px 20px;
  overflow:hidden;
  margin-bottom:15px;
}

.service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-item h3{
  font-family:'Playfair Display',serif;
  font-size:1.3rem;
  margin-bottom:6px;
}

.desc{
  font-size:.9rem;
  color:#666;
  margin-bottom:8px;
}

.price{
  font-size:.95rem;
  margin-bottom:12px;
}

.price del{
  color:#999;
  margin-right:6px;
}

.price span{
  color:#2b2b2b;
  font-weight:600;
}

.service-item button{
  padding:10px 26px;
  border-radius:22px;
  border:none;
  background:var(--beige);
  cursor:pointer;
  font-weight:500;
}

/* Explore Button */
.explore-wrap{
  margin-top:60px;
  text-align:center;
}

.explore-btn{
  padding:14px 44px;
  border-radius:28px;
  background:#2b2b2b;
  color:white;
  text-decoration:none;
}

/* ================= SECTIONS ================= */
.section{
  padding:90px 8%;
}

.section-title{
  font-family:'Playfair Display',serif;
  font-size:2.4rem;
  text-align:center;
  margin-bottom:30px;
}
/* ================= ABOUT US ================= */
.about-section{
  padding:120px 8%;
  background:var(--light);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:center;
}

/* Heading */
.about-title{
  font-family:'Playfair Display',serif;
  font-size:2.8rem;
  margin-bottom:30px;
}

.about-word{
  color:#c7bfb4; /* ABOUT */
}

.us-word{
  color:#000; /* US */
}

/* Text */
.about-content p{
  font-size:1rem;
  line-height:1.9;
  color:#444;
  margin-bottom:22px;
  max-width:560px;
}

/* Button */
.about-btn{
  display:inline-block;
  margin-top:20px;
  padding:14px 44px;
  border-radius:30px;
  background:var(--beige);
  color:#fff;
  text-decoration:none;
  font-weight:500;
}

/* Image */
.about-image img{
  width:100%;
  max-width:420px;
  border-radius:220px 220px 40px 40px; /* arch style */
  display:block;
  margin-left:auto;
}

/* Responsive */
@media(max-width:900px){
  .about-section{
    grid-template-columns:1fr;
    text-align:center;
  }

  .about-image img{
    margin:40px auto 0;
  }

  .about-content p{
    margin-left:auto;
    margin-right:auto;
  }
}

/* ================= SERVICES ================= */
.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.card{
  background:white;
  padding:30px;
  border-radius:22px;
  box-shadow:0 15px 35px rgba(0,0,0,.12);
  transition:.4s;
  text-align:center;
}

.card:hover{
  transform:translateY(-10px);
}
/* ================= OUR JOURNEY ================= */
.journey-section{
  padding:10px 8%;
  background:var(--light);
  display:grid;
  grid-template-columns:1fr 1.1fr; /* IMAGE LEFT, TEXT RIGHT */
  gap:80px;
  align-items:center;
}

/* Heading */
.journey-title{
  font-family:'Playfair Display',serif;
  font-size:2.8rem;
  margin-bottom:30px;
}

.journey-light{
  color:#c7bfb4; /* OUR */
}

.journey-dark{
  color:#000; /* JOURNEY */
}

/* Text */
.journey-content p{
  font-size:1rem;
  line-height:1.9;
  color:#444;
  margin-bottom:22px;
  max-width:560px;
}

/* Button */
.journey-btn{
  display:inline-block;
  margin-top:20px;
  padding:14px 44px;
  border-radius:30px;
  background:var(--beige);
  color:#fff;
  text-decoration:none;
  font-weight:500;
}

/* Image */
.journey-image img{
  width:100%;
  max-width:420px;
  border-radius:220px 220px 40px 40px; /* arch style */
  display:block;
  margin-right:auto;
}

/* Responsive */
@media(max-width:900px){
  .journey-section{
    grid-template-columns:1fr;
    text-align:center;
  }

  .journey-image img{
    margin:0 auto 40px;
  }

  .journey-content p{
    margin-left:auto;
    margin-right:auto;
  }
}
/* Hide Our Journey image on mobile */
@media (max-width: 900px) {
  .journey-image {
    display: none;
  }
}

/* ================= BOOKING ================= */
.booking{
  padding:90px 8%;
  text-align:center;
}

.booking h2{
  font-family:'Playfair Display',serif;
  font-size:2.4rem;
  margin-bottom:30px;
}

.booking-form{
  max-width:420px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:15px;
}

.booking-form input,
.booking-form select{
  padding:14px;
  border-radius:12px;
  border:1px solid #ccc;
}

.booking-form button{
  padding:14px;
  border-radius:30px;
  border:none;
  background:var(--dark);
  color:white;
  cursor:pointer;
  transition:.3s;
}

.booking-form button:hover{
  background:black;
}
.booking-title{
  font-family:'Playfair Display',serif;
  font-size:2.4rem;
  margin-bottom:30px;
  text-align:center;
}

.booking-title .light-text{
  color:#c7bfb4;   /* same beige/light color */
}

.booking-title .dark-text{
  color:#000;      /* black */
}
/* ================= HOME PHOTOS ================= */
.home-photos{
  padding:110px 6%;
  background:var(--light);
}

.photos-title{
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  margin-bottom:60px;
}

.photos-title .light-text{
  color:#c7bfb4;
}

.photos-title .dark-text{
  color:#000;
}

/* Horizontal scroll (ONE ROW) */
.photos-horizontal{
  display:flex;
  gap:30px;
  overflow-x:auto;
  padding-bottom:20px;

  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

/* Scrollbar */
.photos-horizontal::-webkit-scrollbar{
  height:6px;
}
.photos-horizontal::-webkit-scrollbar-thumb{
  background:#cfc6bb;
  border-radius:10px;
}

/* Photo card */
.photo-card{
  min-width:260px;
  max-width:260px;
  height:360px;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
}

.photo-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.4s;
}

/* Hover */
.photo-card:hover img{
  transform:scale(1.06);
}

/* Button */
.photos-btn-wrap{
  margin-top:40px;
  text-align:center;
}

.photos-btn{
  padding:14px 48px;
  border-radius:30px;
  background:var(--beige);
  color:#000;
  text-decoration:none;
  font-weight:500;
}

/* Mobile tweak */
@media(max-width:768px){
  .photo-card{
    min-width:220px;
    height:300px;
  }
}

/* ================= RECENT REVIEWS ================= */
.reviews-section{
  padding:10px 8%;
  background:var(--light);
}

.reviews-title{
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  margin-bottom:70px;
}

.reviews-title .recent{
  color:#c7bfb4;
}

.reviews-title .reviews-word{
  color:#000;
}

/* Reviews grid */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:60px;
}

/* Review card */
.review-card{
  background:var(--beige);
  padding:40px 35px;
  border-radius:6px;
  text-align:center;
}

.review-card p{
  font-size:.95rem;
  line-height:1.8;
  color:white;
  margin-bottom:20px;
}

.review-name{
  font-size:.9rem;
  color:white;
  opacity:.9;
}

/* Responsive */
@media(max-width:900px){
  .reviews-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
}
/* ================= SOCIAL FOOTPRINTS ================= */
.social-section{
  padding:100px 6%;
  background:var(--light);
}

.social-title{
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  margin-bottom:60px;
}

.social-light{
  color:#c7bfb4;
}

.social-dark{
  color:#000;
}

/* Horizontal scroll container */
.insta-horizontal{
  display:flex;
  gap:30px;
  overflow-x:auto;
  padding-bottom:25px;

  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

/* Scrollbar styling */
.insta-horizontal::-webkit-scrollbar{
  height:6px;
}
.insta-horizontal::-webkit-scrollbar-thumb{
  background:#cfc6bb;
  border-radius:10px;
}

/* ================= INSTAGRAM CARD ================= */
.insta-card{
  min-width:300px;
  max-width:300px;
  height:520px;             
  overflow:hidden;  
  background:#fff;
  border-radius:14px;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  position:relative;
}

/* Scale down Instagram embed safely */
.insta-card blockquote{
  transform:scale(0.9);
  transform-origin:top center;
}

/* Premium fade at bottom (optional but recommended) */
.insta-card::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:90px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    #ffffff
  );
}

/* ================= VIEW MORE BUTTON ================= */
.insta-btn-wrap{
  margin-top:60px;
  text-align:center;
}

.insta-view-btn{
  padding:14px 48px;
  border-radius:30px;
  background:var(--beige);
  color:#000;
  text-decoration:none;
  font-weight:560;
}

/* ================= MOBILE TWEAK ================= */
@media(max-width:768px){
  .insta-card{
    min-width:260px;
    max-width:260px;
    height:640px;
  }

  .insta-card blockquote{
    transform:scale(0.85);
  }
}

/* ================= LOCATE US ================= */
.locate-section{
  padding:10px 8%;
  background:var(--light);
  text-align:center;
}

.locate-title{
  font-family:'Playfair Display',serif;
  font-size:2.8rem;
  margin-bottom:60px;
}

.locate-light{
  color:#c7bfb4; /* LOCATE US */
}

.locate-dark{
  color:#000; /* ON MAP */
}

/* Map container */
.map-wrap{
  max-width:1000px;
  margin:0 auto;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

/* Responsive map */
.map-wrap iframe{
  width:100%;
  height:450px;
  border:0;
}

/* Mobile */
@media(max-width:768px){
  .map-wrap iframe{
    height:320px;
  }
}
/* Open in Maps Button */
.map-btn-wrap{
  margin-top:40px;
  text-align:center;
}

.map-btn{
  display:inline-block;
  padding:14px 48px;
  border-radius:30px;
  background:var(--beige);
  color:#000;
  text-decoration:none;
  font-weight:500;
}

.map-btn:hover{
  background:#cfc6bb;
}

/* ================= FOOTER ================= */
footer{
  text-align:center;
  padding:18px;
  background:#000;
  color:#aaa;
  font-size:.9rem;
}

/* ================= ANIMATIONS ================= */
.fade{
  opacity:0;
  transform:translateY(25px);
  animation:fadeUp .9s forwards;
}

.delay-1{ animation-delay:.3s }
.delay-2{ animation-delay:.6s }
.delay-3{ animation-delay:.9s }

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ================= MOBILE ================= */
@media(max-width:768px){

  .nav-pill{
    position:absolute;
    top:70px;
    right:6%;
    flex-direction:column;
    display:none;
    background:var(--beige);
    padding:20px;
  }

  .nav-pill.show{
    display:flex;
  }

  .menu-icon{
    display:block;
  }

  .hero-content h1{
    font-size:2.4rem;
  }
}
/* ================= MOBILE SPACE FIX ================= */
@media (max-width: 768px) {

  /* Global spacing control */


  /* Headings spacing fix */
  h1, h2, h3 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    line-height: 1.2;
  }

  /* Remove unnecessary big gaps */
  .services-page,
  .contact-page,
  .about,
  .journey,
  .social,
  .map-section {
    margin-bottom: 40px !important;
  }

  /* Buttons gap fix */
  button,
  .btn,
  .book-btn {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Image sections */
  .services-image,
  .journey-image,
  .about-image {
    margin-bottom: 20px !important;
  }

  .services-image img,
  .journey-image img,
  .about-image img {
    width: 240px !important;
    height: auto !important;
  }

  /* Social footprints cards */
  .social-card {
    margin-bottom: 16px !important;
  }

  /* Explore / Learn More button spacing */
  .explore-btn,
  .learn-more-btn {
    margin: 20px auto !important;
  }

  /* ================= MAP FIX ================= */
  .map-wrapper,
  .map-container {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    padding: 12px;
    border: 1px solid #e0d9cf;
    border-radius: 16px;
    background: #fff;
  }

  .map-wrapper iframe,
  .map-container iframe {
    height: 260px !important;   /* 👈 IMPORTANT */
    width: 100%;
    border-radius: 12px;
  }

  /* Locate us heading */
  .map-title {
    margin-bottom: 14px !important;
  }

  /* Contact page left text spacing */
  .contact-left p {
    margin-bottom: 10px !important;
  }

  /* Form card spacing */
  .contact-form {
    padding: 20px !important;
  }

  /* Remove empty blocks if any */
  .spacer,
  .empty-space {
    display: none !important;
  }
}
/* Fix date input visibility on mobile */
.booking-input[type="date"],
.booking-input[type="time"]{
  color:#000 !important;
  background:#fff;
  font-size:15px;
}

/* Placeholder / default text color */
.booking-input::placeholder{
  color:#777;
  opacity:1;
}

/* Mobile Chrome calendar icon visibility */
.booking-input[type="date"]::-webkit-calendar-picker-indicator,
.booking-input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(0);
  opacity:1;
  cursor:pointer;
}

/* Label styling */
.input-label{
  display:block;
  text-align:left;
  font-size:13px;
  color:#555;
  margin:6px 0 4px;
}
