:root {
  /* Colors - UPDATED TO YOUR SPECIFICATION */
  --primary-color: #ffd700; /* Gold */
  --primary-dark: #e6c200; /* Darker Gold */
  --secondary-color: #000000; /* Black */
  --accent-color: #ffffff; /* White */
  --text-primary: #333333; /* Dark Grey for primary text */
  --text-secondary: #666666; /* Medium Grey for secondary text */
  --text-light: #999999; /* Light Grey for subtle text */
  --background-light: #f8f9fa; /* Very light grey */
  --background-dark: #1a1a1a; /* Dark background */
  --border-color: #e5e5e5; /* Light border */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.25);

  /* Typography - KEPT YOUR FONT VARIABLES */
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Poppins", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  /* Spacing - KEPT YOUR SPACING VARIABLES */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem; /* Adjusted hero/section padding to this */

  /* Border Radius - KEPT YOUR RADIUS VARIABLES */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions - KEPT YOUR TRANSITION VARIABLES */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index - KEPT YOUR Z-INDEX VARIABLES */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
  --z-toast: 1070;
}

body {
  font-family: var(--font-primary); /* Using your primary font variable */
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
  background-color: var(--background-light); /* Using a light background */
}

/* --- Section Resets for consistent spacing --- */
section {
  padding: var(--spacing-md) 0; /* Consistent vertical padding for all sections */
  margin: 0; /* Ensure no default section margins */
  overflow: hidden; /* Important for animations that might peek out */
}

/* --- Hero Section --- */
.hero {
  background: url("https://images.unsplash.com/photo-1502920514313-52581002a659?fit=crop&w=1600")
    center/cover no-repeat;
  position: relative;
  padding: var(--spacing-3xl) 0;
  color: var(--accent-color); /* White text over dark overlay */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Subtle text shadow for readability */
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(
    0,
    0,
    0,
    0.65
  ); /* Slightly darker overlay for better text contrast with gold */
  backdrop-filter: blur(2px);
  animation: fadeIn 1s ease-out forwards;
}

.hero .container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  text-align: center;
}

.hero h1 {
  font-size: var(--font-size-5xl); /* Larger heading for impact */
  margin-bottom: var(--spacing-md);
  font-family: var(--font-secondary); /* Use secondary font for headings */
  opacity: 0;
  animation: slideInUp 0.8s ease-out 0.5s forwards;
}

.hero p {
  font-size: var(--font-size-xl); /* Larger paragraph text */
  color: var(--accent-color); /* White for good contrast */
  max-width: 800px;
  margin: 0 auto var(--spacing-xl);
  opacity: 0;
  animation: slideInUp 0.8s ease-out 0.7s forwards;
}

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--primary-color);
  color: var(--secondary-color); /* Black text on gold */
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform var(--transition-fast),
    background var(--transition-fast);
}

.badge:hover {
  transform: translateY(-2px);
  background: var(--primary-dark); /* Darker gold on hover */
}

.badge.outline {
  background: none;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

/* --- Headings --- */
h1,
h2,
h3 {
  margin: var(--spacing-md) 0;
  font-weight: 700;
  line-height: 1.2;
  font-family: var(
    --font-secondary
  ); /* Using secondary font for all headings */
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}

p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

/* --- Grids --- */
.grid {
  display: grid;
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

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

/* --- Cards --- */
.card {
  background: var(--accent-color); /* White background for cards */
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px var(--shadow-light);
  border-left: 5px solid var(--primary-color); /* Gold left border */
  transition: box-shadow var(--transition-base),
    transform var(--transition-base), border-color var(--transition-base);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card:hover {
  box-shadow: 0 8px 20px var(--shadow-medium);
  transform: translateY(-5px);
  border-color: var(--primary-dark); /* Darker gold border on hover */
}

.card h3 {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.card p {
  flex-grow: 1;
}

/* --- Icons --- */
.icon {
  width: 56px;
  height: 56px;
  background: var(--primary-color); /* Gold background for icons */
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background var(--transition-fast);
}

.icon svg {
  color: var(--secondary-color); /* Black SVG on gold */
  width: 28px;
  height: 28px;
}

.card:hover .icon {
  background: var(
    --primary-dark
  ); /* Darker gold icon background on card hover */
}

/* --- Stats Section --- */
.stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
  padding-top: var(--spacing-lg);
}

.stats .card {
  text-align: center;
  border-left: none;
  padding: var(--spacing-lg) var(--spacing-md);
}

.stats .number {
  font-size: var(--font-size-5xl); /* Larger numbers */
  color: var(--primary-dark); /* Darker gold for numbers */
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--spacing-xs);
  transition: color var(--transition-base);
}

.stats .card:hover .number {
  color: var(--primary-color); /* Lighter gold on hover */
}

.stats .label {
  font-size: var(--font-size-lg); /* Slightly larger label */
  color: var(--text-secondary);
  margin-top: 0;
}

/* --- Call to Action (CTA) --- */
.cta {
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--primary-dark)
  ); /* Gold gradient */
  padding: var(--spacing-3xl) var(--spacing-md);
  color: var(--secondary-color); /* Black text on gold */
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Optional: Subtle background animation for CTA */
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  animation: slideLight 4s infinite linear;
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.cta h2 {
  color: var(--secondary-color); /* Black heading on gold */
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-md);
}

.cta p {
  color: rgba(0, 0, 0, 0.8); /* Slightly transparent black for readability */
  margin-bottom: var(--spacing-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.cta-buttons button {
  background: var(--accent-color); /* White background for buttons */
  color: var(--primary-color); /* Gold text on white */
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: background var(--transition-fast),
    transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 8px var(--shadow-light);
}

.cta-buttons button:hover {
  background: var(--background-light); /* Lighter hover background */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-medium);
}

.cta-buttons button svg {
  width: 18px;
  height: 18px;
  color: var(--primary-color); /* Ensure SVG is gold */
}

/* --- Keyframe Animations --- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideLight {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  :root {
    --spacing-3xl: 3rem; /* Adjust padding for smaller screens */
    --font-size-5xl: 2.5rem;
    --font-size-4xl: 2rem;
    --font-size-3xl: 1.75rem;
  }

  .hero h1 {
    font-size: var(--font-size-4xl);
  }

  .hero p {
    font-size: var(--font-size-base);
  }

  .cta h2 {
    font-size: var(--font-size-3xl);
  }

  .cta p {
    font-size: var(--font-size-base);
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}
/* --- Our Story Section --- */
.story .container.grid {
  /* This targets the main grid within the story section */
  grid-template-columns: 1fr; /* Default to single column on smaller screens */
  align-items: center; /* Vertically align content in the middle */
  gap: var(
    --spacing-3xl
  ); /* Increase gap between text and stats on larger screens */
  padding-top: var(
    --spacing-2xl
  ); /* Ensure enough padding from the section top */
  padding-bottom: var(
    --spacing-2xl
  ); /* Ensure enough padding from the section bottom */
}

@media (min-width: 992px) {
  /* Adjust breakpoint as needed for when columns should appear */
  .story .container.grid {
    grid-template-columns: 2fr 1.5fr; /* Text takes more space than stats on larger screens */
    gap: var(--spacing-2xl); /* Adjust gap for larger screens */
  }
}

.story .text {
  padding-right: var(
    --spacing-lg
  ); /* Add some internal padding if needed, adjust as desired */
}

.story .text h2 {
  /* Optional: Add an animation to the heading */
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease-out forwards;
  animation-delay: 0.2s; /* Stagger animation */
}

.story .text p {
  /* Optional: Add an animation to paragraphs */
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease-out forwards;
  animation-delay: 0.4s; /* Stagger animation */
}

/* Ensure the stats grid itself remains responsive */
.stats {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(180px, 1fr)
  ); /* Adjust min-width for stats cards */
  gap: var(--spacing-md);
  padding-top: var(
    --spacing-lg
  ); /* Maintain separation from text in grid context */
}

/* Ensure individual stat cards retain their attractive styling */
.stats .card {
  text-align: center;
  border-left: none; /* No left border for stats cards */
  background-color: var(
    --background-light
  ); /* Use a lighter background for stat cards */
  box-shadow: 0 2px 8px var(--shadow-light); /* Lighter shadow for stats */
  transition: all var(--transition-base); /* Smooth transition for all properties */
}

.stats .card:hover {
  transform: translateY(-3px); /* Subtle lift on hover */
  box-shadow: 0 4px 15px var(--shadow-medium); /* More pronounced shadow on hover */
}

.stats .number {
  font-size: var(
    --font-size-4xl
  ); /* Slightly smaller numbers for balance in stats */
  color: var(--primary-color); /* Use primary gold for numbers */
}

.stats .label {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  font-weight: 500;
}
/* --- Mission & Vision Section --- */
.mission {
  background-color: var(
    --background-light
  ); /* Give this section a subtle background */
  padding: var(--spacing-3xl) 0; /* Generous vertical padding */
}

.mission .container.grid {
  /* This targets the grid specifically within the mission section */
  grid-template-columns: 1fr; /* Stack columns by default on small screens */
  gap: var(--spacing-lg); /* Consistent gap between cards */
  max-width: 1000px; /* Slightly narrower max-width for focus */
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

@media (min-width: 768px) {
  .mission .container.grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Two columns on medium screens and up */
    gap: var(--spacing-xl); /* Increased gap between cards on larger screens */
  }
}

.mission .card {
  text-align: center; /* Center align content within each card */
  border-left: none; /* Remove the left border, as it's less impactful here */
  background: var(--accent-color); /* White card background */
  padding: var(--spacing-2xl); /* More internal padding for spacious feel */
  border-radius: var(
    --radius-lg
  ); /* Slightly more rounded corners for softness */
  box-shadow: 0 6px 20px var(--shadow-light); /* More prominent initial shadow */
  transition: all var(--transition-base); /* Smooth transitions for all changes */
  display: flex; /* Use flexbox for internal centering */
  flex-direction: column;
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
}

.mission .card:hover {
  transform: translateY(-8px); /* More pronounced lift effect on hover */
  box-shadow: 0 12px 30px var(--shadow-medium); /* Deeper shadow on hover */
  border-bottom: 5px solid var(--primary-color); /* Add a gold bottom border on hover for elegance */
}

.mission .card .icon {
  width: 72px; /* Larger icon for more impact */
  height: 72px;
  margin-bottom: var(--spacing-md);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow for the icon */
  border-radius: var(--radius-full); /* Keep it circular */
  transition: background var(--transition-fast),
    transform var(--transition-fast);
}

.mission .card:hover .icon {
  background: var(--primary-dark); /* Darker gold icon on hover */
  transform: scale(1.05); /* Slightly enlarge icon on hover */
}

.mission .card .icon svg,
.mission .card .icon i {
  /* Target Font Awesome icons specifically */
  font-size: var(--font-size-3xl); /* Larger icon size */
  color: var(--secondary-color); /* Black icon on gold background */
}

.mission .card h3 {
  font-size: var(--font-size-2xl); /* Larger heading for emphasis */
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.mission .card p {
  font-size: var(--font-size-lg); /* Slightly larger paragraph text */
  color: var(--text-secondary);
  line-height: 1.7; /* Improve readability */
  margin-bottom: 0; /* Remove bottom margin if it's the last element */
}
.team {
  margin-bottom: 50px;
}
.travel-testimonials-section {
  padding: var(--spacing-3xl) 0;
  background-color: var(--background-light);
  color: var(--text-primary);
  overflow: hidden;
}

.travel-testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  text-align: center;
}

.travel-testimonials-section .badge.outline {
  display: inline-block;
  padding: 0.3em 1em;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-sm);
}

.testimonials-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: var(--spacing-2xl) auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.testimonials-carousel {
  display: flex;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
}

.testimonial-item-card {
  scroll-snap-align: center;
  background-color: var(--accent-color);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 15px var(--shadow-light);
  transition: all var(--transition-base);
  border-top: 5px solid transparent;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  flex: 0 0 90%;
  margin: 0 auto;
}

.testimonial-item-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px var(--shadow-medium);
  border-top-color: var(--primary-color);
}

.testimonial-quote-content {
  position: relative;
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.testimonial-quote-icon {
  position: absolute;
  font-size: var(--font-size-5xl);
  color: var(--primary-color);
  opacity: 0.1;
  top: -var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.testimonial-quote-content p {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin: var(--spacing-xs) 0;
  position: relative;
  z-index: 1;
  max-width: 90%;
  line-height: 1.6;
}

.testimonial-author-info {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-lg);
  gap: var(--spacing-md);
  flex-direction: column;
}

.author-avatar-img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--primary-color);
  box-shadow: 0 1px 5px var(--shadow-light);
}

.testimonial-author-info h4 {
  font-size: var(--font-size-xl);
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.author-title-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .testimonial-item-card {
    flex: 0 0 calc(50% - var(--spacing-md));
  }
}

@media (min-width: 1024px) {
  .testimonial-item-card {
    flex: 0 0 calc(33.333% - var(--spacing-md));
  }
}

@media (max-width: 480px) {
  .testimonial-item-card {
    padding: var(--spacing-lg);
  }
  .testimonial-quote-content p {
    font-size: var(--font-size-base);
    max-width: 100%;
  }
  .testimonial-quote-icon {
    font-size: var(--font-size-4xl);
  }
  .testimonial-author-info h4 {
    font-size: var(--font-size-lg);
  }
}