/* General Body Styling */
body {
    font-family: 'Roboto Flex', Arial, sans-serif; /* Consistent font */
    color: #333333; /* Dark text for readability */
    background-color: #F8F8F8; /* Light background */
    padding-top: 70px; /* Adjust if navbar is taller */
}

/* Consistent Navbar Styling */
.navbar {
    margin: 0;
    padding: 0.5rem 0;
    z-index: 9999;
    background-color: #FFFFFF !important; /* White background for navbar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.navbar-brand {
    color: #87CEEB !important; /* Sky Blue for brand name */
    font-weight: 700;
}

.navbar-brand img {
    filter: brightness(1.1); /* Logo ko thoda bright karein agar dark hai */
}

.nav-link {
    color: #333333 !important; /* Dark text for nav links */
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #87CEEB !important; /* Sky Blue on hover */
}

.dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
    color: #333333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
    background-color: #87CEEB;
    color: #FFFFFF;
}

.btn-primary {
    background-color: #87CEEB; /* Sky Blue for primary buttons */
    border-color: #87CEEB;
    color: #FFFFFF;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #6495ED; /* Slightly darker blue on hover */
    border-color: #6495ED;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif; /* Montserrat for headings */
    font-weight: 700;
    color: #333333; /* Dark text for headings */
}

/* Glass Hero Section (if applicable) */
.glass-hero {
    height: 50vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    color: #FFFFFF; /* White text for hero overlay */
}

.glass-box {
    background:transparent; /* Semi-transparent white */
    backdrop-filter: blur(5px); /* Glass effect */
    border-radius: 15px;
    padding: 2rem 3rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-box h1 {
    color: #FFFFFF; /* White text for hero heading */
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.glass-box p {
    color: #EEEEEE; /* Light gray for hero paragraph */
    font-size: 1.2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Cards and Sections */
.card {
    border: 1px solid #E0E0E0; /* Light border */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.card-title {
    color: #87CEEB; /* Sky Blue for card titles */
}

.list-group-item {
    border-color: #E0E0E0; /* Light border for list items */
    color: #333333;
}

.table {
    --bs-table-bg: #FFFFFF; /* White background for tables */
    --bs-table-striped-bg: #F8F8F8; /* Light gray for striped rows */
    --bs-table-hover-bg: #F0F0F0; /* Slightly darker gray on hover */
    border: 1px solid #E0E0E0;
}

.thead-dark th {
    background-color: #666666; /* Medium Gray for table headers */
    color: #FFFFFF;
    border-color: #666666;
}

/* Specific Page Elements (adjust as needed) */
.section-subtitle {
    color: #666666; /* Medium gray for subtitles */
    font-style: italic;
}

.attraction img, .img-fluid {
    border-radius: 8px;
    transition: transform 0.3s ease;
    max-width: 400px;
}

.attraction img:hover, .img-fluid:hover {
    transform: scale(1.02);
}

.btn-custom {
    background-color: #FFD700; /* Gold for custom buttons */
    color: #333333; /* Dark text for contrast */
    border: none;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #DAA520; /* Darker gold on hover */
    color: #FFFFFF; /* White text on hover for better contrast */
}

/* Footer Styling */
.footer {
    background-color: #333333; /* Dark Gray background for footer */
    color: #F8F8F8; /* Light text for footer */
    padding: 2rem 0;
}

.footer h5 {
    color: #87CEEB; /* Sky Blue for footer headings */
}

.footer a {
    color: #F8F8F8; /* Light text for footer links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #87CEEB; /* Sky Blue on hover for footer links */
}

.footer .list-unstyled li {
    margin-bottom: 0.5rem;
}

.footer .fab {
    color: #F8F8F8; /* Light icons */
    transition: color 0.3s ease;
}

.footer .fab:hover {
    color: #87CEEB; /* Sky Blue on hover for icons */
}

/* Specific styles for sortbyactivities.html */
.sort-container {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.sort-container label {
    color: #333333;
}

.sort-container select {
    border: 1px solid #87CEEB; /* Sky Blue border for selects */
    background-color: #FFFFFF;
    color: #333333;
}

.sort-container select:focus {
    border-color: #6495ED;
    box-shadow: 0 0 0 0.25rem rgba(135, 206, 235, 0.25); /* Light blue focus ring */
}

.tour-item {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.tour-item:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.tour-name {
    color: #87CEEB; /* Sky Blue for tour names */
}

.tour-meta span {
    color: #666666; /* Medium gray for meta info */
}

.tag {
    background-color: #E0F2F7; /* Very light blue for tags */
    color: #333333;
}

/* Specific styles for sortbycontinents.html */
.sidebar {
    background: #FFFFFF;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.continent-card {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.continent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.continent-card h5 {
    color: #87CEEB; /* Sky Blue for continent card titles */
}

/* Linear gradient background for specific pages */
/* Note: This linear gradient is present in many of your HTML files.
   If you want to override it with the new body background, you might need
   to remove it from individual HTML files or use !important in body style.
   For now, I'm keeping it as a comment, assuming you might want to remove it.
*/
/*
body {
    background: linear-gradient(to bottom, #ffffff 0%, #FCEAC5 40%, #F55D3D 80%, #0A1A2F 100%);
}
*/


  .carousel-inner img {
  height: 60vh; /* screen ka 60% height le */
  object-fit: cover;
  width: 100%;
}
.card {
  border: none; /* Default border hatana */
  border-radius: 15px; /* Smooth rounded corners */
  overflow: hidden; /* Rounded corners me image bhi adjust ho */
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover animation */
}

.card:hover {
  transform: translateY(-5px); /* Thoda upar lift ho hover par */
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card-img-top {
  height: 250px; /* Equal image size */
  object-fit: cover; /* Crop images neatly */
}

.card-body {
  padding: 20px;
  background-color: #fff;
}

.card-title {
  font-weight: 600;
  color: #333;
}

.card-text {
  color: #555;
  font-size: 0.95rem;
}

.btn-dark {
  border-radius: 30px;
  padding: 6px 20px;
  transition: background-color 0.3s ease;
}

.btn-dark:hover {
  background-color: #444;
}

   
    h1, h2, h3, h4 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      color: #2E5E4E;
    }
    .main-heading {
      margin-top: 40px;
      text-align: center;
    }
    .section {
      margin-top: 50px;
    }
    .img-fluid {
      border-radius: 10px;
      transition: transform 0.3s ease;
    }
    .img-fluid:hover {
      transform: scale(1.03);
    }
    .btn-custom {
      background-color: #F55D3D;
      color: white;
      border: none;
      padding: 10px 20px;
      margin-top: 20px;
      border-radius: 5px;
      transition: background 0.3s ease;
    }
    .btn-custom:hover {
      background-color: #d94328;
    }
    .description {
      margin-top: 10px;
      margin-bottom: 30px;
    }

    .attraction {
      margin-bottom: 40px;
      text-align: center;
    }
    .attraction img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 15px;
  transition: transform 0.3s ease;
}
.attraction img:hover {
    transform: scale(1.03);
}
    .big-subheading {
      font-size: 1.725rem;
    }
        h1, h2, h3, h4 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      color: #2E5E4E;
    }
    
    .sort-container {
      max-width: 1000px;
      margin: 0 auto 3rem;
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      padding: 0 1rem;
    }
    label {
      font-weight: 600;
      align-self: center;
      color: #2E5E4E;
    }
    select {
      border-radius: 6px;
      border: 2px solid #F55D3D;
      padding: 0.4rem 0.8rem;
      font-size: 1rem;
      font-family: 'Roboto Flex', Arial, sans-serif;
      color: #333;
      cursor: pointer;
      transition: border-color 0.3s ease;
      min-width: 140px;
    }
    select:focus {
      outline: none;
      border-color: #d94328;
      box-shadow: 0 0 5px #d94328;
    }
    .tour-list {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    .tour-item {
      background: white;
      border-radius: 10px;
      padding: 1rem 1.5rem;
      box-shadow: 0 3px 10px rgb(245 93 61 / 0.2);
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease;
      cursor: default;
      margin-bottom: 1.5rem;
      height: 100%;
    }
    .tour-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgb(245 93 61 / 0.35);
    }
    .tour-name {
      font-weight: 700;
      font-family: 'Montserrat', sans-serif;
      color: #F55D3D;
      font-size: 1.3rem;
      margin-bottom: 0.4rem;
    }
    .tour-details {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 0.75rem;
    }
    .tour-meta {
      font-size: 0.9rem;
      color: #2E5E4E;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
      font-weight: 600;
    }
    .tour-meta span {
      flex: 1 1 45%;
    }
    .tag {
      display: inline-block;
      background-color: #FCEAC5;
      color: #0A1A2F;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.2rem 0.5rem;
      margin-top: 0.3rem;
      border-radius: 5px;
      margin-right: 0.5rem;
    }
     h1 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      text-align: center;
      margin-top: 3rem;
      margin-bottom: 1rem;
      color: #2E5E4E;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    body {
      background-color:white;
    }
    h2 {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .tip-section {
      margin-bottom: 40px;
    }
    .tip-card {
      background:rgb(192, 240, 236);
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .tip-title {
      font-size: 1.25rem;
      margin-bottom: 10px;
      font-weight: 600;
    }
    /* style.css */

/* General Body Styling */


/* Headings */
.main-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  text-align: center;
  color: #366342;
  
}

.section h2 {
  font-size: 1.8rem;
  color: #366342;
  margin-top: 40px;
  
}

.section h4 {
  font-size: 1.3rem;
  color:  #366342;
  margin-top: 20px;
}

.section p.description {
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Image Styling */
.section img {
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}

/* Button Styling */
.btn-primary {
  background-color: #2980b9;
  border-color: #2980b9;
  
}

.btn-primary:hover {
  background-color: #1f6391;
  border-color: #1f6391;
}
.star-rating {
  direction: rtl;
  display: inline-flex;
  font-size: 2rem;
  justify-content: center;
}

.star-rating input {
  display: none;
}

.star-rating label {
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.star-rating input:checked ~ label {
  color: gold;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color: gold;
}
/* Sort Tours Page Specific Styles */

/* Page Heading */
.sort-page h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin: 30px 0;
  color: #1a1a1a;
}

/* Sort Container */
.sort-page .sort-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  font-family: 'Roboto Flex', sans-serif;
}

.sort-page .sort-container label {
  font-weight: 600;
  margin-right: 5px;
}

.sort-page .sort-container select {
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  min-width: 150px;
}

/* Tour Cards */
.sort-page .tour-item {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
  
}

.sort-page .tour-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Tour Name */
.sort-page .tour-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #2c3e50;
}

/* Tour Details */
.sort-page .tour-details {
  font-size: 0.95rem;
  margin-bottom: 15px;
  color: #555555;
}

.sort-page .tour-details .tag {
  display: inline-block;
  background-color: #f1f1f1;
  color: #333;
  padding: 2px 8px;
  margin-right: 5px;
  margin-top: 5px;
  border-radius: 15px;
  font-size: 0.8rem;
}

/* Tour Meta (price, duration, rating) */
.sort-page .tour-meta {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
  flex-wrap: wrap;
  gap: 5px;
}

/* Container spacing */
.sort-page .container {
  padding-bottom: 50px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sort-page .sort-container {
    flex-direction: column;
    align-items: center;
  }
  .sort-page .tour-meta {
    flex-direction: column;
    gap: 2px;
  }
}
/* Make card text black */
.sort-container + main .tour-item {
  color: #000 !important;
}

.sort-container + main .tour-item .tour-name,
.sort-container + main .tour-item .tour-details,
.sort-container + main .tour-item .tour-meta {
  color: #000 !important;
}
