/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Yellowtail&display=swap');

/* Base Reset */
*{margin:0; padding:0; box-sizing:border-box;}
html{font-size:100%;}
body{font-family:'Lexend', sans-serif; line-height:1.5; background-color:#ffffff; color:#000000;}

/* Font Utilities */
.font-primary{font-family:'Lexend', sans-serif;}
.font-secondary{font-family:'Yellowtail', cursive;}

/* Typography – Desktop First */
h1{font-size:3rem; font-weight:700; /* 48px */ }
h2{font-size:2.5rem; font-weight:600; /* 40px */}
h3{font-size:2rem; font-weight:600; /* 32px */}
h4{font-size:1.5rem; font-weight:500; /* 24px */}
h5{font-size:1.25rem; font-weight:500; /* 20px */}
h6{font-size:1rem; font-weight:500; /* 16px */}

p{font-size:1rem; font-weight:400; /* 16px */}
small {font-size:0.75rem; /* 12px */}
.caption {font-size:0.875rem; font-weight:400; /* 14px */}

/* Responsive Typography – Tablet */
@media (max-width:1024px) {
  h1{font-size:2.5rem;}   /* 40px */
  h2{font-size:2rem;}     /* 32px */
  h3{font-size:1.5rem;}   /* 24px */
  h4{font-size:1.25rem;}  /* 20px */
  h5{font-size:1rem;}     /* 16px */
  h6{font-size:0.875rem;} /* 14px */
  p{font-size: 0.875rem;}/* 14px */
}

/* Responsive Typography – Mobile */
@media (max-width: 640px) {
  h1{font-size:2rem; }     /* 32px */
  h2{font-size:1.5rem; }   /* 24px */
  h3{font-size:1.25rem; }  /* 20px */
  h4{font-size:1rem; }     /* 16px */
  h5{font-size:0.875rem; } /* 14px */
  h6{font-size:0.75rem; }  /* 12px */
  p{font-size:0.875rem; }/* 14px */
}


/* Primary - Pink */
.primary            { color: #EC008C; }
.primary-light      { color: #F250B2; }
.primary-lighter    { color: #F89AD1; }
.primary-dark       { color: #C60074; }
.primary-darker     { color: #96005A; }

.bg-primary         { background-color: #EC008C; }
.bg-primary-light   { background-color: #F250B2; }
.bg-primary-lighter { background-color: #F89AD1; }
.bg-primary-dark    { background-color: #C60074; }
.bg-primary-darker  { background-color: #96005A; }

/* Secondary - Blue */
.secondary            { color: #0072CE; }
.secondary-light      { color: #3391DC; }
.secondary-lighter    { color: #66B0E9; }
.secondary-dark       { color: #0059A6; }
.secondary-darker     { color: #003F7A; }

.bg-secondary         { background-color: #0072CE; }
.bg-secondary-light   { background-color: #3391DC; }
.bg-secondary-lighter { background-color: #66B0E9; }
.bg-secondary-dark    { background-color: #0059A6; }
.bg-secondary-darker  { background-color: #003F7A; }

/* Tertiary - Purple */
.tertiary            { color: #6C2A85; }
.tertiary-light      { color: #8C49A2; }
.tertiary-lighter    { color: #AD76BA; }
.tertiary-dark       { color: #521E66; }
.tertiary-darker     { color: #39134A; }

.bg-tertiary         { background-color: #6C2A85; }
.bg-tertiary-light   { background-color: #8C49A2; }
.bg-tertiary-lighter { background-color: #AD76BA; }
.bg-tertiary-dark    { background-color: #521E66; }
.bg-tertiary-darker  { background-color: #39134A; }

/* Neutral - Black and White */
.black         { color: #000000; }
.white         { color: #FFFFFF; }
.bg-black      { background-color: #000000; }
.bg-white      { background-color: #FFFFFF; }

/* Optional Neutral Grays */
.gray-100      { color: #f5f5f5; }
.gray-200      { color: #e0e0e0; }
.gray-300      { color: #c2c2c2; }
.gray-400      { color: #9e9e9e; }
.gray-500      { color: #757575; }
.gray-600      { color: #616161; }
.gray-700      { color: #424242; }
.gray-800      { color: #212121; }

.bg-gray-100   { background-color: #f5f5f5; }
.bg-gray-200   { background-color: #e0e0e0; }
.bg-gray-300   { background-color: #c2c2c2; }
.bg-gray-400   { background-color: #9e9e9e; }
.bg-gray-500   { background-color: #757575; }
.bg-gray-600   { background-color: #616161; }
.bg-gray-700   { background-color: #424242; }
.bg-gray-800   { background-color: #212121; }


/* Base Header Styles */
header{color:#fff; padding:1rem 2rem; overflow:hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background:red;}

/* Logo and Branding */
header{position:relative; top:0; left:0; right: 0; transition:all 0.3s ease; z-index:1000;}
header.fixed-header{position:fixed; top:0; width:100%; box-shadow:0 4px 8px rgba(0,0,0,0.1); animation:slideDown 0.3s ease-in-out;}

/* Smooth slide-in effect */
@keyframes slideDown {
  from{transform:translateY(-100%);}
  to {transform:translateY(0%);}
}
header h1{float:left; margin:0; font-size:1.25rem;}
header h1 a{text-decoration:none; color:#fff; vertical-align:middle; display:inline-block;}
.site-logo{height:40px; width:auto; vertical-align:middle; margin-right:0.5rem;}
header h1 span{display:block; font-size:0.75rem; font-weight:300; color:#ccc;}

/* Nav Container */
.main-navigation{text-align:center; margin-top:0.5rem; margin-bottom:0.5rem;}
.main-menu{display:inline-block; padding:0.5rem 2rem; border-radius:2rem; background-color:rgba(255, 255, 255, 0.05);}
.main-menu li{display:inline-block; margin:0 1rem;}
.main-menu li a{color:#ffffff; text-decoration:none; font-size:1rem; font-weight:500; transition:color 0.3s;}
.main-menu li a:hover,
.main-menu li.current-menu-item a{color:#f4c542;}

/* Responsive for smaller screens */
@media (max-width: 768px) {
  header{text-align:center;}
  header h1, .header-icons{float:none; display:block; margin-bottom:0.75rem;}
  .main-menu{width:100%; border-radius:0; padding:1rem 0;}
  .main-menu li{display: block; margin:0.5rem 0;}
  .header-icons{margin-top:0.5rem;}
}

/* Hamburger button default hidden */
#menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

/* Mobile styles */
@media (max-width: 768px) {
  /* Show hamburger */
  #menu-toggle{display:inline-block; float:right; margin-top:0.5rem; margin-right:0.5rem; background-color:red;}

  /* Hide menu by default */
  .main-navigation{display:none; text-align:left; background-color:#1a2e30; border-top:1px solid rgba(255, 255, 255, 0.1);}
  .main-navigation.show{display:block;}
  .main-menu{width:100%; padding:1rem; border-radius:0; display:block;}
  .main-menu li{display:block; margin:1rem 0;}
  .main-menu li a{display:block; padding:0.5rem 0;}
  header h1{float:left; text-align:left; margin-bottom:0.5rem;}
}

/* ====== Travel Homepage Styles ====== */

.container {
}

.travel-hero {
  background: url('https://images.unsplash.com/photo-1552232485-28281e306b26?q=80&w=1474&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
  color: white;
  text-align: center;
  padding: 100px 20px;
}

.travel-hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.travel-hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-primary {
  background: #0077cc;
  color: white;
}

.btn-primary:hover {
  background: #005fa3;
}

.btn-secondary {
  background: #222;
  color: white;
}

.btn-secondary:hover {
  background: #444;
}

.highlights {
  background: #f5f5f5;
  padding: 60px 20px;
}

.highlight-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.highlight {
  flex: 1 1 30%;
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.featured-destinations {
  background: #fff;
  padding: 60px 20px;
}

.destinations-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.destination-card {
  flex: 1 1 30%;
  background: #fefefe;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-align: center;
}

.destination-card img {
  width: 100%;
  height: auto;
  display: block;
}

.destination-card h3 {
  padding: 1rem;
  margin: 0;
}

.call-to-action {
  background: #0077cc;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.call-to-action h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* ==== Contact Us Page Styles ==== */
.contact-section {
  background: #f8f9fb;
  padding: 60px 20px;
  font-family: 'Segoe UI', sans-serif;
}

.contact-section h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.contact-section p {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
  color: #555;
}

.contact-form {
  max-width: 700px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-group label span {
  color: red;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: border 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #0077cc;
  outline: none;
}

.btn-submit {
  background: #0077cc;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-submit:hover {
  background: #005fa3;
}

/* Responsive */
@media (max-width: 600px) {
  .contact-form {
    padding: 20px;
  }
}

/* === Our Locations Section (Grid only, no flex) === */
.locations-section {
  background: #ffffff;
  padding: 60px 20px;
  font-family: 'Segoe UI', sans-serif;
}

.locations-section h2 {
  text-align: center;
  font-size: 2.4rem;
  color: #222;
  margin-bottom: 40px;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.location-card {
  background-color: #f5f5f5;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.location-card:hover {
  transform: translateY(-4px);
}

.location-card h3 {
  color: #0077cc;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.location-card p {
  color: #444;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .locations-section h2 {
    font-size: 1.6rem;
  }

  .location-card {
    padding: 20px;
  }
}

.travel-hero-section {
  padding: 4rem 1rem;
  background: #fff;
  font-family: 'Lexend', sans-serif;
}

.travel-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

/* Grid Layout Using Floats */
.travel-images {
  float: left;
  width: 48%;
}

.travel-images img {
  max-width:47%;
  border-radius: 1rem;
  display: block;
  margin-bottom: 1rem;
  object-fit: cover;
  max-height:500px;
  float:left;
  margin-right:3%;
  margin-top:10%;
}

.img-stack {
  width:50%;
  float:left;
}

.img-stack img {
  width:100%;
  max-width:none;
  border-radius: 1rem;
  margin-right: 2%;
  max-height:240px;
  min-height:auto;
  margin-top: 0px;
}

.img-stack img:last-child {
  max-height:200px;
}

.travel-content {
  float: right;
  width: 48%;
}

.travel-content h2 {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 1rem;
}

.travel-content p {
  font-size: 1rem;
  color: #444;
  margin-bottom: 1rem;
}

.travel-highlights {
  display: table;
  width: 100%;
  margin: 2rem 0 0rem 0;
}

.highlight {
  display: table-cell;
  vertical-align: top;
  padding:0px;
  padding-right: 1rem;
  background:none;
  box-shadow:none;
}

.highlight .icon {
  font-size: 2rem;
  color: #f4c542;
  display: block;
  margin-bottom: 0.5rem;
}

.highlight h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.travel-cta {
  display: table;
  width: 100%;
  margin-top: 1rem;
  border-top: 1px solid #eee;
  padding-top: 2rem;
}

.call-info {
  display: table-cell;
  vertical-align: middle;
}

.call-info .call-icon { 
  border-radius: 8px;
  padding: 0.75rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  vertical-align: middle;
  float:left;
}

.call-info p {
  margin: 0;
  color: #555;
  font-size: 0.875rem;
}

.call-info strong {
  font-size: 1.125rem;
}

.booking-btn {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  padding: 0.75rem 2rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  float:right ;
}

/* Responsive */
@media (max-width: 768px) {
  .travel-images,
  .travel-content {
    float: none;
    width: 100%;
  }

  .img-stack img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .highlight {
    display: block;
    margin-bottom: 1.5rem;
  }

  .travel-cta {
    display: block;
    text-align: center;
  }

  .booking-btn {
    display: inline-block;
    margin-top: 1rem;
  }
}
.why-choose-section {
  background-image: url('https://www.transparenttextures.com/patterns/cartographer.png'); /* optional texture */
  padding: 6rem 1rem;
  text-align: center;
  color: #222;
}

.why-choose-container {
  max-width: 1200px;
  margin: 0 auto;
}

.why-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

.why-subtext {
  font-size: 1rem;
  color: #fff;
  margin-bottom:4rem;
}

/* Boxes container */
.why-boxes {
  overflow: hidden;
}

/* Individual box */
.why-box {
  width: 23%;
  float: left;
  margin: 1%;
  background: #fff;
  border-radius: 1rem;
  padding: 2rem 1rem;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.why-box:hover {
  transform: translateY(-6px);
}

.why-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #e39d00;
}

.why-box h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.why-box p {
  font-size: 0.9375rem;
  color: #444;
}

/* Responsive Design */
@media (max-width: 992px) {
  .why-box {
    width: 46%;
    margin: 2%;
  }
}

@media (max-width: 600px) {
  .why-box {
    width: 100%;
    margin-bottom: 1.5rem;
  }
}

.testimonials-section {
  background-color: #fff;
  padding: 6rem 1rem;
  text-align: center;
  display: table;
  width:100%;
}

.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-heading {
  font-size: 2rem;
  font-weight: 700;
}

.testimonial-subtext {
  font-size: 1rem;
  color: #666;
  margin-bottom:4rem;
}

/* Boxes layout */
.testimonial-wrapper {
  margin: 0 -1%;
}

.testimonial-box {
  width: 30.66%;
  margin: 0 1%;
  border-radius: 1rem;
  padding: 2rem 1rem;
  float: left;
  box-sizing: border-box;
  transition: box-shadow 0.3s;
  background-color:#fff5fb;
}

.testimonial-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.testimonial-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  object-fit: cover;
}

.testimonial-text {
  font-size: 0.9375rem;
  color: #444;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

.testimonial-rating {
  color: #fbbf24;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.testimonial-name {
  font-weight: 600;
  margin: 0;
}

.testimonial-role {
  font-size: 0.875rem;
  color: #888;
}

/* Responsive */
@media (max-width: 992px) {
  .testimonial-box {
    width: 46%;
    margin-bottom: 2rem;
  }
}

@media (max-width: 600px) {
  .testimonial-box {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.main-blog{width: 100%; display: table; padding: 40px 100px; background: #f4f4f4;}
.blog-list{width: 65%; float: left;}
.blog-post{width: 100%; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.03); margin-bottom: 40px;}
.blog-post img{max-height: 280px; max-width: 100%; min-width: 100%; object-fit: cover;}
.blog-post .excerpt{padding:20px;}
.widget-area{width: 30%; float: right;}

.widget_search{margin-bottom:40px;}
.widget_search input[type="text"]{width: 74%; background: #fff; border: 1px solid #c2c2c2; border-radius: 8px; padding: 12px 20px; font-family: 'Lexend', sans-serif; font-size: 14px; line-height: 20px;}
.widget_search input[type="submit"]{background: #ec008c; border: none; font-family: 'Lexend', sans-serif; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 20px;
}
.widget_categories{margin-bottom:40px;}
.widget_categories ul li{list-style: none; float: left; margin-right:12px;}
.widget_categories ul li a{color: #444444; text-decoration: none; border: 1px solid #9d9d9d; padding: 4px 20px; border-radius: 20px; font-size: 13px; line-height: 16px;}
.blog-post .excerpt h4{margin-bottom:8px;}
.blog-post .excerpt h4 a{color: #1c1c1c; text-decoration:none;}
.blog-post .excerpt p{color: #787878; font-size: 15px; font-weight: 400; line-height: 24px;}
.blog-post:hover h4 a{text-decoration:underline;}
.blog-post:hover{background:#e9e9e9;}