body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #e0f7fa, #cce0ff); /* Softer gradient background */
  color: #333;
  line-height: 1.6;
  text-transform: capitalize;
}

.manali-package {
  width: 90%; /* Increased width for better readability on larger screens */
  max-width: 850px;
  margin: 0px auto 30px auto;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
  border-radius: 15px;
  overflow: hidden; /* Prevents potential overflow issues */
}

.manali1-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('manali-weekend-trip-3-nights-4-days-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}



main .package-book-now{
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

main .package-book-now .book-now{
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: blue;
  color: white;
  width: 100%;
  text-decoration: none;
}

.package-book-now .book-now:hover{
  background-color: aqua;
  transition: 0.3s ease;
  color: black;
}
/* other manali packages styling */

.manali2-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('manali-kasol-manikaran-tour-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}


.manali3-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Manali-tour-by-volvo-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}


.manali4-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Shimla-short-tour-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.manali5-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Shimla-short-tour-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.manali6-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Complete-himachal-tour-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.manali7-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Dharamshala-dalhousie-tour-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.manali8-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('himachal-amritsar-tour-golden-temple-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}
/* ladakh package start */

.ladakhp1-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('ladakh-pangong-sham-valley-tour-kairos-roam-banner.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.ladakhp2-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Ladakh-pangong-nubra-turtuk-tour-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.ladakhp3-img {
  position: relative;
  height: 350px; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Ladakh-pangong-nubra-tso-moriri-tour-kairos-roam-banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.ladakhp4-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Ladakh-pangong-nubra-tour-kairos-roam-Banner.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

/* ladakh package end */
/* spiti package start */
.spiti1-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Chandartal-kaza-tour-kairos-roam-banner.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.spiti2-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Chandartal-spiti-grand-tour-kairos-roam-banner.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

.spiti3-img {
  position: relative;
  height: auto; /* Increased height for a more immersive header */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('On-the-way-to-Spiti-tour-kairos-roam-banner.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px 12px 0 0;
}

/* spiti end */
/* utrakhand start */

.utrakhand1-img {
    position: relative;
    height: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Mussoorie-dhanaulty-tour-kairos-roam-banner.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.utrakhand2-img {
    position: relative;
    height: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Rishikesh-jim-corbbet-tour-kairos-roam-banner.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.utrakhand3-img {
    position: relative;
    height: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Haridwar-auli-rishikesh-tour-kairos-roam-Banner.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 0 0;
}


.utrakhand4-img {
    position: relative;
    height: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('auli-chopta-rishikesh-tour-kairos-roam-Banner.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.delhip1-img {
    position: relative;
    height: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('taj-mahal-agra-delhi-tour-package-kairos-roam.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.delhip2-img {
    position: relative;
    height: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('akshardham-temple-delhi-sightseeing-kairos-roam.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 0 0;
}


.delhip3-img {
    position: relative;
    height: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('india-gate-delhi-agra-jaipur-tour-sightseeing-kairos-roam.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.manali1-img h1 {
  font-size: 2em;
  margin-bottom: 10px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
  font-weight: 600;
}

.manali-package .days {
  font-size: 1.3em;
  margin: 8px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  color: red;
}


.price {
  font-weight: 700;
  font-size: 1.8em;
  color: #ff9800; /* Vibrant price color */
  border-radius: 2px solid;
}

hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent); /* Gradient hr */
  margin: 30px 0;
}

h2 {
  color: #2c3e50; /* Darker, professional heading color */
  margin-bottom: 15px;
  font-weight: 600;
  background-color: orange;
  border-radius: 10px;
  text-align: center;
}

h3 {
  color: #2c3e50; /* Darker, professional heading color */
  margin-bottom: 15px;
  font-weight: 600;
  background-color: lightgreen;
  border-radius: 10px;
  text-align: center;
}

.exclusion{
  background-color: lightcoral;
}
ul, ol {
  padding-left: 25px;
  margin-bottom: 20px;
  list-style-type: disc; /* Use disc for unordered lists */
}

li {
  margin-bottom: 8px;
  line-height: 1.5;
}

p {
  line-height: 1.5;
  margin-bottom: 15px;
  color: #555;
}

/* Inclusions/Exclusions styling */
h3 {
  margin-top: 25px;
  font-weight: 700;
  color: #34495e;
}

p[class^="&#"] {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 200px;
}

p[class^="&#"]::before {
  margin-right: 12px;
  font-size: 1.3em;
  font-weight: 200px;
  color: #27ae60; /* Green for checkmarks */
}

p[class^="❌"]::before {
  color: #e74c3c; /* Red for exclusions */
}

/* Fixed button styling */
.fixed-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, #64b5f6, #1e88e5); /* Gradient button */
  color: #fff;
  padding: 18px 30px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s; /* Smooth transitions */
}

.fixed-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .manali-package {
    width: 95%;
    padding: 20px;
  }
  

  .manali1-img h1 {
    font-size: 2.5em;
  }

  .manali1-img p {
    font-size: 1.1em;
  }

  .fixed-button {
    padding: 12px 20px;
    font-size: 1em;
    bottom: 20px;
    right: 20px;
  }
}