@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

:root {
  --btncolor: rgb(67, 161, 255);
  --theme-orange: #f08a24;
}

button {
  transition: transform 0.3s ease;
}

button:hover {
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
              rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
              rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
              rgba(0, 0, 0, 0.06) 0px 2px 1px,
              rgba(0, 0, 0, 0.09) 0px 4px 2px,
              rgba(0, 0, 0, 0.09) 0px 8px 4px,
              rgba(0, 0, 0, 0.09) 0px 16px 8px,
              rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/* ================= NAVBAR ================= */

.div-1 {
  width: 100%;
  background-size: cover;
  background-position: right;
  padding-top: 20px;
  margin: 0;
  font-family: sans-serif;
  color: white;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

nav .left {
  height: auto;         /* allow logo to grow */
  display: flex; 
  align-items: center;  /* center logo vertically */
  flex: 0 0 220px; /* logo takes only its needed width */
  flex-shrink: 0;  /* prevents logo from collapsing */
}
nav .left img {
  width: 180px !important;   /* force larger logo */
  height: auto !important;
  max-width: 180px !important;
  flex-shrink: 0 !important;
  display: block;
   filter: drop-shadow(0 0 5px rgba(0,0,0,0.8)) drop-shadow(0 0 5px rgba(255,255,255,0.8));
    position: relative;
    z-index: 100;
  
}
nav .right1 {
  display: flex;
  gap: 30px;   /* space between menu items */
}




nav .right {
   display: flex;
    justify-content: flex-end; /* Sab kuch right side mein rakhega */
    align-items: center;
    width: auto;
    flex: 1; /* Poora bacha hua space le */
    gap: 40px; /* Menu aur Contact/Icons ke beech ka gap */
}

nav .right .right1 {
  display: flex;          /* ek line me arrange karega */
  align-items: center;    /* vertically center karega */
  gap: 15px;              /* beech me spacing */
}


          
nav .right2 {
   display: flex;
  justify-content:flex-end;
  align-items: center;
  gap: 30px;
}
nav .right2 ion-icon {
  font-size: 22px;
  color: white;
  cursor: pointer;
}

nav .right2 .navigation {
  padding-bottom: 15px;
  margin-left: 25px;
}

nav .right2 .nav-right {
 display: flex;
    align-items: center;
    gap: 15px; /* Icons aur button ke beech ka spacing */
    
    /* NEW: Right edge se space dega, taki button chhupe nahi */
    padding-right: 20px; /* <--- Isse button right edge se 20px andar rahega */
    
    /* Isse button shrink nahi hoga aur apni poori jagah lega */
    flex-shrink: 0;
}

nav .right2 .nav-right a {
   /*margin-right: 30px;
  color: white;
  text-decoration: none;
  font-size: 22px;*/
   color: white;
  font-size: 22px;   /* reasonable size, not too big */
  margin: 0;         /* remove extra margin pushing it down */
  display: flex;
  align-items: center;
   margin-left: 0px;  /* adds spacing between each item */
}

nav .right2 .nav-right button {
   height: 45px;
    padding: 7px 25px;
    
    /* NEW: Button ka size fixed rakha */
    width: auto; 
    flex-shrink: 0; /* Dobara confirm kiya ki shrink na ho */
    
    /* Agar button par koi ulta margin laga ho toh use reset karein */
    margin: 0;
}

/* Hamburger Menu */

.hamburger {
  position: relative;
  width: 30px;
  height: 4px;
  background: white;
  border-radius: 10px;
  cursor: pointer;
  z-index: 2;
  transition: 0.3s;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  height: 4px;
  right: 0;
  background: white;
  border-radius: 10px;
  transition: 0.3s;
}

.hamburger::before { top: -10px; width: 30px; }
.hamburger::after { top: 10px; width: 30px; }

.toogle-menu {
  position: relative;
  width: 30px;
  height: 100%;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
}

.hamburger,
.toggle-menu,
.menu {
  display: none;
}

input[type="checkbox"]:checked ~ .hamburger {
  background: transparent;
}

input[type="checkbox"]:checked ~ .hamburger::before {
  top: 0;
  transform: rotate(-45deg);
  width: 30px;
}

input[type="checkbox"]:checked ~ .hamburger::after {
  top: 0;
  transform: rotate(45deg);
  width: 30px;
}

input:checked ~ .menu {
  right: 0;
}

.intro-section {
    /* Background similar to the 'Explore Sacred Trails' image (very light gradient/blue) */
    background: linear-gradient(to bottom, #f7f9fc 0%, #eef5ff 100%); 
    padding: 40px 0; /* Add vertical space */
    text-align: center;
}

.intro-content {
    max-width: 1000px; /* Wider content area */
    margin: 0 auto; /* Center the content horizontally */
    padding: 0 30px;
}

.intro-content p {
    font-size: 1.1em; /* Slightly large font for good readability */
    line-height: 1.7;
    color: #444; /* Readable dark grey color */
    font-weight: 500;
}

/* New Right Nav */

.newNav-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.newNav-right div:nth-child(1) {
  background: rgba(222, 199, 22, 0.226);
  margin-right: 30px;
  padding: 10px;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

.newNav-right div:nth-child(1):hover {
  transform: scale(1.1);
}

.newNav-right h3.emails {
  font-size: 25px;
  margin: 0;
  padding: 0;
}

.newNav-right a#navnewIcon {
  color: white;
  text-decoration: none;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s, opacity 0.3s;
}

.newNav-right a#navnewIcon:hover {
  transform: rotate(180deg) scale(1.72);
  opacity: 0.8;
}

.newNav-right a#navnewIcon ion-icon {
  font-size: 25px;
}

/* ================= HERO ================= */

.div-1-1 h1 {
  text-align: center;
  margin-top: 10%;
  color: white;
}

/* Form */

.form1 {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.381);
}

.form1 form {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.form1 select,
.form1 input,
.date-inputs {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.381);
  color: white;
  font-size: large;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.form1 select:hover,
.form1 input:hover,
.date-inputs:hover {
  cursor: pointer;
  transform: scale(1.05);
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
              rgba(0, 0, 0, 0.07) 0px 2px 4px,
              rgba(0, 0, 0, 0.07) 0px 4px 8px,
              rgba(0, 0, 0, 0.07) 0px 8px 16px,
              rgba(0, 0, 0, 0.07) 0px 16px 32px,
              rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

input[type="date"]::before {
  content: attr(data-placeholder);
  width: 100%;
}

input[type="date"]:valid::before {
  display: none;
}

input[data-placeholder]::before {
  color: white;
  text-align: center;
  font-size: larger;
}

.form1 select { width: 100%; max-width: 220px; }
.form1 input[type="date"] { width: 100%; max-width: 220px; }

.form1 button {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.381);
  color: #fff;
  border: 1px solid #ccc;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.form1 button ion-icon {
  margin-left: 10px;
  font-size: large;
}

/* Timer */

.div-1-1 .timer {
  margin-top: 5%;
}

.div-1-1 .timer #upper p {
  text-align: center;
  color: white;
  font-size: x-large;
}

.div-1-1 .timer #upper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--btncolor);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: var(--btncolor);
  border-top-color: rgb(0, 0, 255);
  animation: spin 5s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#countdown {
  font-size: 24px;
  text-align: center;
  color: white;
}

/* Cards Section */
html {
    scroll-behavior: smooth;
}
/* Premium Package Choice Banner Styling */
.package-choice-banner.premium-look {
    padding: 80px 20px;
    background: linear-gradient(135deg, #e0f2f7 0%, #c1e0e8 100%); /* Softer, inviting background */
    text-align: center;
    overflow: hidden; /* Ensures no overflow from animations */
}

.banner-heading {
    font-size: 3.2rem; /* Larger, more impactful heading */
    font-weight: 700;
    color: #0d47a1; /* Deep blue */
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.banner-subheading {
    font-size: 1.3rem;
    color: #3f51b5; /* Slightly lighter blue */
    margin-bottom: 60px; /* More space below subheading */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.banner-grid {
    display: flex;
    justify-content: center;
    gap: 40px; /* Increased gap between cards */
    flex-wrap: wrap;
}

.banner-card {
    text-decoration: none;
    color: #fff; /* White text for better contrast on gradients */
    border-radius: 20px; /* More rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Stronger, softer shadow */
    padding: 40px 30px; /* Increased padding */
    width: 100%;
    max-width: 320px; /* Slightly larger cards */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out; /* Smoother transitions */
    position: relative;
    overflow: hidden; /* For inner effects */
    display: flex; /* Flexbox for internal alignment */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Hover effect for the cards */
.banner-card:hover {
    transform: translateY(-15px) scale(1.03); /* Lift and slightly enlarge */
    box-shadow: 0 20px 40px rgba(42, 123, 228, 0.35); /* More prominent shadow on hover */
}

/* Icon styling */
.banner-card ion-icon {
    font-size: 4.5rem; /* Larger icons */
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9); /* White with slight transparency */
    transition: transform 0.3s ease;
}

.banner-card:hover ion-icon {
    transform: scale(1.1); /* Icon animation on hover */
}

/* Heading styling inside cards */
.banner-card h3 {
    font-size: 1.8rem; /* Larger headings */
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* Paragraph text styling inside cards */
.banner-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 25px; /* Space before the explore button */
    line-height: 1.5;
}

/* Explore Button styling */
.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white button */
    padding: 8px 18px;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.banner-card:hover .explore-btn {
    background-color: rgba(255, 255, 255, 0.35); /* More opaque on hover */
    transform: translateY(-3px);
}

.explore-btn ion-icon {
    font-size: 1.2rem;
    margin-bottom: 0; /* Reset icon margin */
}
.custom-temple-icon {
    /* Set the size to match the 60px of the IonIcons */
    width: 60px; 
    height: 60px;
    
    /* Set the color to white. The SVG property 'stroke="currentColor"' makes the outline this color. */
    color: #ffffff; 
    
    /* Ensure it behaves correctly and adds spacing */
    display: block;
    margin-bottom: 10px;
    
    /* Important: This ensures the stroke width matches the IonIcons */
    stroke-width: 2px;
}

/* Gradient Backgrounds for each card */
.gradient-pilgrimage {
    background: linear-gradient(45deg, #f7971e, #ffd200); /* Warm, golden gradient */
}

.gradient-adventure {
    background: linear-gradient(45deg, #1d976c, #93f9b9); /* Vibrant, fresh green gradient */
}

.gradient-destination {
    background: linear-gradient(45deg, #4facfe, #00f2fe); /* Cool, refreshing blue gradient */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .banner-heading {
        font-size: 2.5rem;
    }
    .banner-subheading {
        font-size: 1.1rem;
    }
    .banner-grid {
        gap: 25px;
    }
    .banner-card {
        max-width: 90%; /* Allow cards to take more width on smaller screens */
    }
    .banner-card ion-icon {
        font-size: 3.5rem;
    }
    .banner-card h3 {
        font-size: 1.6rem;
    }
    .banner-card p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .package-choice-banner.premium-look {
        padding: 50px 15px;
    }
    .banner-heading {
        font-size: 2rem;
    }
    .banner-subheading {
        font-size: 1rem;
        margin-bottom: 40px;
    }
    .banner-card {
        padding: 30px 20px;
    }
    .banner-card ion-icon {
        font-size: 3rem;
    }
    .banner-card h3 {
        font-size: 1.4rem;
    }
}

.div11 {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 5%;
  background: #7c7a2382;
}

.div11 .div12 {
  display: flex;
  align-items: center;
  color: white;
}

#div-1-2 {
  display: flex;
  width: 90%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5%;
  padding-top: 1%;
}

.card {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  max-width: 30%;
}

.imgDiv {
  flex: 0 0 auto;
  margin-right: 20px;
}

.image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.headDiv { flex: 1 1 auto; color: white; }
.txtdiv { margin-bottom: 10px; }
.cntxtDiv { color: white; }

/* Slideshow Background */

.slideshow-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.slideshow-bg img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.slideshow-bg img.active {
  opacity: 1;
  z-index: 1;
}

/* Fixed Navbar */

.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 15px 40px;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
  z-index: 9999 !important;
}




.navbar .left img { max-width: 180px; }

.navbar .right1 a {
  margin: 0 10px;
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.navbar .right1 a:hover { text-decoration: underline; }

.navbar .nav-right a {
  margin: 0 10px;
  font-size: 24px;
  color: white;
}

:root {
  --theme-orange: #f08a24;
  --btncolor: #00bcd4;
}

/* Navbar */
.navbar button {
  background: var(--theme-orange);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

/* Landing Section */
.landing {
  padding-top: 100px;
  text-align: center;
}

.main-content h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-shadow: 1px 1px 6px #000;
}

/* Form */
.form-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px;
  border-radius: 12px;
  max-width: 85%;
  margin: 0 auto;
}

.form-container select,
.form-container input,
.form-container button {
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.form-container button,
.form1 button,
nav .right2 .nav-right button {
  background-color: var(--theme-orange);
  border: 1px solid var(--theme-orange);
}

.form1 select:hover,
.form1 input:hover,
.date-inputs:hover {
  box-shadow: 0 0 10px var(--theme-orange);
}

.form1 button ion-icon {
  color: #fff;
}

/* Timer */
.timer-section {
  margin: 30px auto;
  text-align: center;
}

.timer-section .circle {
  width: 40px;
  height: 40px;
  border: 2px solid var(--theme-orange);
  border-radius: 50%;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top: 2px solid var(--theme-orange);
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Nav Hover Effects */
/* Nav Links (Home, About Us, Packages, etc.) */
nav .right .right1 a {
    margin: 0;
    color: black; /* Text black/dark rakhein taki white box par dikhe */
    text-decoration: none;
    padding: 8px 15px;
    font-weight: bold;
    background-color: white; /* <--- REVERT: White background wapas */
    border-radius: 5px;
    transition: 0.3s;
    white-space: nowrap;
}
nav .right .right1 a:hover{
   background-color: orange; /* Hover pe orange */
    color: white; /* Text white */
    box-shadow: none; /* Shadow hata dein */
}
nav .right2 .nav-right a:hover {
  box-shadow: 0 -5px 0 var(--theme-orange) inset;
  color: var(--theme-orange);
}

nav .right .right1 a:nth-child(1) {
  font-weight: bold;
    font-size: larger;
    /* Active link ka shadow ya background */
    box-shadow: 0 -5px 0 var(--theme-orange) inset; /* Orange line bottom pe */
    background-color: white; /* Wapas white background */
    color: black; /* Text color black */
}

/* Info Highlight */
.info-highlight {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 90px;
  background: rgba(0, 0, 0, 0.4);
}

.info-box {
  display: flex;
  align-items: center;
  margin: 10px;
  gap: 15px;
  flex: 1 1 300px;
  min-width: 250px;
}

.info-box img {
  width: 100px;
  border-radius: 5px;
}

.info-text h3 {
  color: orange;
  margin: 0;
  font-size: 20px;
}

.info-text p {
  margin: 10px;
  font-size: 15px;
}

.see-more a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

/* Responsive Navbar & Form */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    padding: 10px;
  }

  .form-container {
    flex-direction: column;
  }

  .form-container select,
  .form-container input,
  .form-container button {
    width: 100%;
  }
}

/* Popular Place to Visit */
#Popular_place_to_Visit {
  margin-top: 5%;
  padding: 0 5%;
  background: #f5f5f5;
}

.Popular_place_section-heading {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 50px;
  color: #1e88e5;
  font-family: sans-serif;
  letter-spacing: 2px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Main Slider Container --- */
.popular-place-slider {
  position: relative;
  width: 100%;
  padding: 20px 0;
  overflow: visible; /* allow smooth horizontal scroll */
}

/* --- Scrollable Cards Row --- */
.Popular_place_grid-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* hide scrollbar (Firefox) */
}
.Popular_place_grid-container::-webkit-scrollbar {
  display: none; /* hide scrollbar (Chrome, Safari) */
}

/* --- Individual Card --- */
.Popular_place_grid-item {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 0 0 280px; /* fixed width for consistent scroll */
}

.Popular_place_grid-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 3px rgb(67, 161, 255);
  cursor: pointer;
}

/* --- Card Image --- */
.Popular_place_grid-ele-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.Popular_place_grid-ele-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Card Content --- */
.Popular_place_grid-ele-cont {
  padding: 15px;
  font-family: sans-serif;
  font-size: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.Popular_place_grid-ele-cont h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 16px;
  margin-bottom: 5px;
}
.Popular_place_rating-value {
  color: #ff9800;
  font-weight: bold;
  font-size: 1.1rem;
}

/* --- View More Button --- */
#Popular_place_semorebtn {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#Popular_place_semorebtn button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  background-color: #2196f3;
  color: #fff;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}
#Popular_place_semorebtn button:hover {
  background-color: #1976d2;
}

/* --- Navigation Arrows --- */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 24px;
  z-index: 10;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.slider-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}
.slider-btn.left {
  left: 10px;
}
.slider-btn.right {
  right: 10px;
}

/* view more button */
.view-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background-color: #2196f3;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.view-more-link:hover {
  background-color: #1976d2;
}


/* Perfect Holiday Plan */
.perfect-holiday-section {
  padding: 60px 20px;
  background: #fdfdfd;
}

.perfect-holiday-heading {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 50px;
  color: #1e88e5;
  font-family: sans-serif;
  letter-spacing: 2px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.perfect-holiday-infinite {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.perfect-holiday-divs {
  background: #fff;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 16px;
  overflow: hidden;
  flex: 1 1 300px;
  max-width: 350px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.perfect-holiday-divs:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 188, 212, 0.4);
}

.perfect-holiday-images {
  height: 250px;
  overflow: hidden;
}

.perfect-holiday-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.perfect-holiday-divs:hover .perfect-holiday-images img {
  transform: scale(1.1);
}

.perfect-holiday-divs1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  gap: 10px;
  flex-wrap: wrap;
}

.perfect-holiday-place {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
}

.perfect-holiday-locations {
  color: #777;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.perfect-holiday-divider {
  width: 1px;
  height: 60px;
  background: rgba(0, 0, 0, 0.1);
}

.perfect-holiday-rating-value {
  color: #ff9800;
  font-weight: bold;
  font-size: 1.1rem;
}

.perfect-holiday-rating-value+span {
  margin-left: 5px;
}

.perfect-holiday-package {
  font-size: 0.95rem;
  color: #333;
  margin-top: 5px;
}

.perfect-holiday-book-now {
  padding: 10px 20px;
  background-color: var(--btncolor);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.perfect-holiday-book-now:hover {
  background-color: #0288a1;
  box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
}

/* Perfect Holiday Responsive */
@media (max-width: 768px) {
  .perfect-holiday-heading {
    font-size: 2.3rem;
  }

  .perfect-holiday-divs1 {
    flex-direction: column;
    align-items: flex-start;
  }

  .perfect-holiday-divider {
    display: none;
  }

  .perfect-holiday-book-now {
    width: 100%;
    text-align: center;
  }
}

.perfect-holiday-btn-container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

.perfect-holiday-see-more {
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: #2196f3;
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
}

.perfect-holiday-see-more:hover {
  background-color: #1976d2;
  transform: translateY(-2px);
}

.perfect-holiday-see-more:hover {
  background-color: #1976d2;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .perfect-holiday-see-more {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
    border-radius: 10px;
  }

  .perfect-holiday-btn-container {
    padding: 0 15px;
  }
}

/* Featured Packages Carousel */
:root {
  --btncolor: #00bcd4;
}

.featured-packages-section {
  width: 100vw;
  min-height: 100vh;
  padding: 60px 20px;
  background-color: #f2f7fb;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.featured-packages-heading {
  text-align: center;
  font-size: 3rem;
  font-family: sans-serif;
  color: #1e88e5;
  margin-bottom: 50px;
  padding: 0 10px;
}

.featured-carousel-container {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 0 15px;
}

.featured-carousel {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
}

.featured-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  width: 270px;
  transition: transform 0.3s ease;
  padding-bottom: 10px;
}

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

.featured-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.featured-card-content {
  padding: 20px;
  text-align: left;
}

.featured-card-content h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 15px;
  font-family: sans-serif;
}

.featured-card-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.featured-card-content ul li {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.8;
  margin-left: 5px;
}

.featured-see-more-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  padding: 0 15px;
}

.featured-see-more-link,
a {
  text-decoration: none;
}

.featured-see-more-btn {
  padding: 14px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background-color: #2196f3;
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
}

.featured-see-more-btn:hover {
  background-color: #1976d2;
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .featured-packages-heading {
    font-size: 2.5rem;
  }

  .featured-card {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .featured-packages-heading {
    font-size: 2rem;
  }

  .featured-carousel {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 20px;
  }

  .featured-card {
    flex: 0 0 80%;
    margin-right: 20px;
  }

  .featured-see-more-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .featured-packages-heading {
    font-size: 1.8rem;
  }

  .featured-card {
    width: 90%;
    margin: 0 auto;
  }

  .featured-see-more-container {
    margin-top: 30px;
  }
}

/* How it Works & Why Choose Us */
.how-it-works-why-choose-us {
  padding: 60px 20px;
  background-color: #f9f9f9;
  height: auto;
}

.how-it-works h2,
.why-choose-us h2 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;
  color: #1e88e5;
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: 2px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.how-why-card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.how-why-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  width: 240px;
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.2s ease;
}

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

.how-why-card .how-why-icon {
  font-size: 36px;
  margin-bottom: 15px;
}

.how-why-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.how-why-card p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .how-it-works-why-choose-us {
    height: auto;
    padding: 40px 20px;
  }

  .how-why-card {
    width: 45%;
  }
}

@media (max-width: 768px) {
  .how-why-card {
    width: 100%;
    max-width: 320px;
  }

  .how-why-card-row {
    gap: 20px;
  }

  .how-it-works h2,
  .why-choose-us h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .how-why-card h3 {
    font-size: 1rem;
  }

  .how-why-card p {
    font-size: 0.85rem;
  }
}

/* Footer */
.footer {
  background-color: #1e1e1e;
  color: #fff;
  padding: 60px 20px 30px;
  font-family: sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

.footer-box {
  flex: 1 1 220px;
  min-width: 200px;
}

.footer-box h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #1e88e5;
}

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

.footer-box ul li {
  margin-bottom: 10px;
}

.footer-box ul li a {
  color: #ddd;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-box ul li a:hover {
  color: #fff;
}

.footer-box p {
  font-size: 0.9rem;
  margin: 8px 0;
}

.newsletter-form input {
  width: 100%;
  padding: 8px;
  border: none;
  margin-bottom: 10px;
  border-radius: 4px;
}

.newsletter-form button {
  padding: 8px 16px;
  background-color: #1e88e5;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}

.newsletter-form button:hover {
  background-color: #1565c0;
}

.social-icons .icons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.social-icons a {
  color: #ccc;
  font-size: 1.3rem;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #fff;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #444;
  margin-top: 40px;
  font-size: 0.85rem;
  color: #aaa;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }

  .footer-box {
    text-align: center;
  }

  .social-icons .icons {
    justify-content: center;
  }
}

/* Header Responsive */
@media (max-width: 1090px) {
  .right1 {
    display: none;
  }

  .hamburger,
  .toogle-menu {
    display: block;
    align-items: center;
    justify-content: center;
  }

  .header {
    padding: 10px 20px;
  }

  .menu {
    display: flex;
    justify-content: start;
    text-align: center;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    right: -500px;
    background-color: rgba(67, 224, 255, 0.681);
    width: 300px;
    padding-top: 30px;
    margin-top: 8.2%;
    margin-right: 7%;
    z-index: 5;
  }

  .menu a {
    width: 100%;
    padding: 30px;
    font-size: 24px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 1px rgba(255, 255, 255, 0.1) inset;
  }

  .menu a:hover {
    cursor: pointer;
    font-weight: bolder;
    color: #000;
    padding: 35px 25px 20px 25px;
  }

  #div-1-2 {
    padding-top: 2%;
  }

  .card {
    max-width: 45%;
  }

  .grid-container {
    margin: 5%;
    grid-gap: 15px;
  }
}

.form-container {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;

  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

/* Style the inputs & selects */
.form-container select,
.form-container input {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  background: #fff;   /* keep inputs white for readability */
  color: #333;
  font-size: 14px;
  min-width: 160px;
  transition: all 0.3s ease;
}

.form-container select:focus,
.form-container input:focus {
  border-color: #f08a24;
  box-shadow: 0 0 8px rgba(240, 138, 36, 0.4);
}

/* Search button */
.form-container button {
  padding: 10px 20px;
  background: #f08a24;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.form-container button:hover {
  background: #d9761f;
}
/* --- 1. Logo Visibility Fix --- */
nav .left a img {
    /* Logo ka original color rakhte hue shadow se highlight karein */
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8)) drop-shadow(0 0 5px rgba(255,255,255,0.8));
    position: relative;
    z-index: 100;
}

/* --- 2. Interactive Menu Styling --- */
/* Hide the actual checkbox input */
.toogle-menu {
    display: none;
}

/* Hamburger Label ka size aur position set karein */
.hamburger-label {
    position: relative; 
    display: block;
    width: 30px; 
    height: 30px;
    cursor: pointer;
    z-index: 200; 
}

/* Hamburger bar (Middle line) */
.hamburger {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #FF5722; /* Orange color */
    border-radius: 5px;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}

/* Top aur Bottom lines banana */
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #FF5722; /* Orange color */
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.hamburger::before {
    transform: translateY(-10px); 
}

.hamburger::after {
    transform: translateY(10px); 
}

/* ANIMATION: Jab Checkbox 'Checked' ho (i.e., menu open ho) */
#menu-toggle:checked ~ .hamburger-label .hamburger {
    transform: translateX(-30px); 
    opacity: 0;
}

#menu-toggle:checked ~ .hamburger-label .hamburger::before {
    transform: rotate(45deg) translate(21px, 21px); 
}

#menu-toggle:checked ~ .hamburger-label .hamburger::after {
    transform: rotate(-45deg) translate(21px, -21px); 
}

/* Menu Panel ko Interactive banana (Menu slide-in effect) */
.navigation .menu {
    position: fixed;
    top: 0;
    right: 0; 
    width: 250px; 
    height: 100vh;
    background: rgba(42, 123, 228, 0.95); 
    padding-top: 80px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    transform: translateX(100%); 
    transition: transform 0.5s ease-out; 
    z-index: 150;
    
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

#menu-toggle:checked ~ .menu {
    transform: translateX(0); 
}

/* Menu links ka style behtar karein */
.navigation .menu a {
    color: white; 
    text-decoration: none;
    font-size: 1.1rem;
    padding: 10px 20px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.navigation .menu a:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* --- Styling for the New Stats and Testimonials Section --- */

.stats-testimonial-section {
    padding: 60px 20px;
    background-color: #f0f8ff; /* Light blue background */
    text-align: center;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto 40px;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-box {
    background-color: white;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 50, 100, 0.1);
    flex-basis: 22%; 
    min-width: 150px; 
    transition: transform 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 2.5em;
    color: #007FFF; /* Bright Blue */
    margin-bottom: 5px;
    font-weight: 700;
}

.stat-label {
    font-size: 1em;
    color: #555;
    font-weight: 500;
}

/* Testimonial Placeholder Styling */
.testimonial-placeholder {
    max-width: 800px;
    margin: 40px auto 0;
    font-style: italic;
    font-size: 1.2em;
    color: #333;
    padding: 20px;
    border-top: 2px solid #ADD8E6;
}

.testimonial-placeholder .banner-heading {
    font-style: normal;
    margin-bottom: 20px;
    color: #004d99;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .stats-container {
        justify-content: center;
    }
    .stat-box {
        flex-basis: 45%; 
        margin-bottom: 15px;
    }
}

/* --- 3. Contact Info Styling --- */
.contact-top-row {
    display: flex;
    align-items: center;
    gap: 15px; /* Number aur Email ke beech ka space */
    
    /* Right side se thoda padding de, taki Sign Up button ke saath align ho */
    padding-right: 20px; 
}

/* 3. Contact Details (Number aur Email) ka style aur Separator (Optional) */
.contact-top-row .contact-detail {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Separator Line ( | ) sirf pehle element ke baad */
.contact-top-row .contact-detail:first-child:after {
    content: "|";
    color: #ccc; /* Halki gray line */
    margin-left: 15px; /* Separator aur email ke beech ka space */
}

/* 4. BOTTOM ROW: Icons aur Button Container ki final position */
.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
    
    /* Sign Up button ko extreme right se thoda andar push karna */
    padding-right: 20px; 
}
.contact-info-header {
     color: #1e1e1e; /* <--- CHANGE: Dark color (Black/Very Dark Gray) */
    text-decoration: none;
    line-height: 1.2; 
    padding: 2px 0;
    transition: color 0.3s;
}

.contact-detail {
    color: white; /* Image background ke karan white color diya */
    text-decoration: none;
    line-height: 1.2; /* Line spacing kam kiya */
    padding: 2px 0;
    transition: color 0.3s;
}
.contact-info-header .contact-detail:hover {
     /* Image 7e2a36.jpg mein yahan blue color use hua tha */
    color: #f1f3f6; /* <--- Dark Blue color for visibility */
    text-decoration: none;
    line-height: 1.2; 
    font-size: 0.95rem; 
    padding: 2px 0;
}
.contact-detail ion-icon {
    font-size: 1.2rem;
    margin-right: 5px;
}

.contact-detail:hover {
    color: #FF5722; 
}
.right2 {
    display: flex;
    flex-direction: column; /* Upar-Neeche stack karega */
    align-items: flex-end; /* Sab kuch right side mein align karega */
    justify-content: center;
    gap: 5px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Icons aur Sign Up button ke beech ka gap */
}

.nav-right ion-icon {
    font-size: 1.5rem; /* Icons ka size */
    color: #333; /* Darker color for visibility */
}
/* Navigation Icons aur Sign Up button ko theek se align karne ke liye */
nav .right2 .nav-right {
     display: flex;
    align-items: center;
    gap: 15px; /* Icons aur button ke beech ka gap thoda kam kiya */
    padding-right: 0px; /* Right edge se spacing */
    overflow: visible;
    margin-right: 25px; 
}
/* Icons size thoda chhota kiya */
nav .right2 .nav-right a {
    color: white;
    font-size: 22px; /* Icon size 22px se 20px kiya */
}

/* Agar aap Sign up button ko aur control karna chahte hain */
nav .right2 .nav-right button {
    height: 45px;
    padding: 7px 25px; /* <--- Button ki original padding */
    background-color: var(--theme-orange); /* Orange color */
    border: none;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    
   
    margin-left: 0; 
    min-width: auto; 
    flex-shrink: 0; 
}

/* Responsiveness: Look ko clean rakhne ke liye choti screens par chhipayein */
@media (max-width: 768px) {
    .contact-info-header {
        margin-right: 15px;
    }
    
    /* Email ID ko chhipayein */
    .contact-info-header .desktop-only {
        display: none;
    }
}

/* Jab screen bahut chhoti ho (mobile view), toh puri contact info chhipa denge */
@media (max-width: 768px) {
    .contact-info-header {
        display: none;
    }
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ABOUT US */

/* --- 1. Global & Typography --- */
/* (Assuming base body styles are in index.css) */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 2. Hero Section (Header) Styling --- */

.about-hero {
    /* Deep Teal to Sea Green Gradient */
    background: linear-gradient(145deg, #004d40 0%, #26a69a 100%); 
    color: white;
    padding: 100px 20px 60px;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.about-hero h1 {
    font-size: 3em;
    margin-bottom: 15px;
    font-weight: 800;
}

.about-hero p {
    font-size: 1.3em;
    font-style: italic;
    opacity: 0.9;
}

.about-hero .tagline {
    margin-top: 30px;
    font-size: 1.5em;
    font-weight: 600;
    color: #FF8A65; /* Soft Coral/Orange Accent */
}

/* --- 3. General Content Sections --- */

.content-section {
    padding: 80px 0;
    overflow: hidden;
}

.content-section h2 {
    font-size: 2.2em;
    color: #004d40; /* Deep Teal Accent */
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

.content-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #FF8A65; /* Soft Coral/Orange Underliner */
    border-radius: 2px;
}

.light-bg {
    background-color: #fcfcfc; /* Clean Off-White */
}

.dark-bg {
    background-color: #f0f8f7; /* Very light Teal tint for contrast */
}


/* --- 4. Vision, Mission, Story --- */

.vision-mission {
    display: flex;
    justify-content: space-around;
    gap: 40px;
    margin-bottom: 60px;
}

.vision-mission > div {
    flex-basis: 45%;
    padding: 30px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-top: 5px solid #26a69a; /* Sea Green Top Bar */
    text-align: center;
}

.vision-mission h2 {
    color: #26a69a;
    font-size: 1.6em;
    border: none;
    margin: 0 0 10px;
}
.vision-mission h2::after {
    content: none;
}

/* --- 5. Feature Grid (What Makes Us Different) --- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.feature-box {
    background-color: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 77, 64, 0.15); /* Teal shadow on hover */
    border-color: #26a69a;
}

.feature-box h3 {
    color: #004d40;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
    border: none;
    padding: 0;
    text-align: left;
}

.feature-box ul li::before {
    content: "✓";
    color: #FF8A65; /* Coral checkmark */
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
}

/* --- 6. Comparison Table (Challenges vs Solutions) --- */

.comparison-section {
    background-color: #fffaf0; /* Warm, soft background */
}

.comparison-table .column {
    flex: 1;
    min-width: 300px;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.common-challenges {
    background-color: #fef0f0; /* Light Pink */
    border-left: 5px solid #004d40;
}

.sacred-solutions {
    background-color: #e8f5e9; /* Light Mint Green */
    border-left: 5px solid #26a69a;
}

.common-challenges h3 {
    color: #004d40;
}
.sacred-solutions h3 {
    color: #26a69a;
}

/* --- 7. Commitment & Values --- */

.commitment-box {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #FF8A65; /* Coral underline */
}

.commitment-box h3 {
    color: #004d40;
}

.value-item {
    flex: 1;
    min-width: 180px;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #FF8A65;
}

.value-item p:first-child {
    font-size: 1.3em;
    font-weight: 800;
    color: #004d40;
}

/* --- 8. CTA Section --- */

.cta-section-about {
    background-color: #004d40; /* Deep Teal CTA Background */
    color: white;
    padding: 60px 20px;
    text-align: center;
}

.cta-box h2 {
    color: #FF8A65; /* Coral CTA heading */
    font-size: 2.5em;
    margin-bottom: 20px;
}

.contact-links strong {
    color: white;
    padding: 5px 10px;
    background-color: #26a69a; /* Sea Green background */
    border-radius: 4px;
}

/* --- 9. Responsive Adjustments --- */
/* (Remaining media queries remain the same) */
.modal-overlay {
    display: none; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10000; 
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 800px; /* Increased width to easily fit three cards */
    text-align: center;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}

.modal-overlay.active {
    display: flex; 
    opacity: 1; 
}
.modal-overlay.active .modal-content {
    transform: scale(1);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #555;
}

#modal-title {
    color: #2a7be4; 
    margin-bottom: 5px;
    font-size: 2.5rem;
    font-weight: 700;
}

#modal-message {
    color: #777;
    margin-bottom: 30px;
    line-height: 1.5;
    font-size: 1.1rem;
}

/* Styling the cards inside the modal */
.banner-grid-modal {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    gap: 20px;
    margin-top: 20px;
}

.banner-grid-modal .banner-card {
    display: block;
    padding: 30px 20px;
    border-radius: 12px;
    color: white;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 200px;
}

.banner-grid-modal .banner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.banner-grid-modal ion-icon {
    font-size: 50px;
    margin-bottom: 10px;
    color: white;
}
.banner-grid-modal h4 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 5px;
}
.banner-grid-modal p {
    font-size: 0.9rem;
    opacity: 0.8;
}
/* --- Add this to your existing CSS --- */
.banner-grid-modal .custom-temple-icon {
    width: 50px; 
    height: 50px; 
    margin-bottom: 10px;
    color: white; 
    stroke: white; 
    /* NEW: Add these two lines for centering */
    display: block; /* Make it a block element */
    margin-left: auto; /* Auto margin left */
    margin-right: auto; /* Auto margin right */
}

/* Card Backgrounds - Using your gradient colours (approximate) */
.gradient-pilgrimage-modal { background: #FF9900; } /* Orange */
.gradient-adventure-modal { background: #45B39C; } /* Green */
.gradient-destination-modal { background: #3498DB; } /* Blue */


.testimonial-section {
  text-align: center;
  padding: 60px 40px;
  font-family: 'Open Sans', sans-serif;
}

.testimonial-title {
  text-align: center;
  font-size: 3rem;
  font-family: sans-serif;
  color: #1e88e5;
  margin-bottom: 50px;
  padding: 0 10px;
}

.testimonial-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center;
}

.testimonial-card {
  border: 2px solid #4a90e2;
  border-radius: 20px;
  padding: 30px 25px;
  max-width: 400px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

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

.testimonial-img {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid #4a90e2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background-color: #f0f6ff;
  color: #4a90e2;
  font-size: 1.2rem;
}

.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #222;
  margin-bottom: 15px;
}

.testimonial-meta {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 10px;
}

.testimonial-rating {
  color: #f9b208;
  font-size: 1.1rem;
}