@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
:root {
  --primary-color: #3b6890;
  --primary-color-dark: #5681a7;
  --secondary-color: #e8f1fa;
  --text-dark: #282d31;
  --text-light: #767268;
  --extra-light: #f3f4f6;
  --max-width: 1200px;
}

.section__container {
  max-width: var(--max-width);
  margin: auto;
}

.section__title {
  font-size: 2rem;
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 1rem;
  text-align: center;
}

.section__subtitle {
  font-size: 1rem;
  font-style: italic;
  color: var(--primary-color);
  text-align: center;
}

img {
  width: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}

.hero {
  height: 50vh;
  background-image: linear-gradient(
      rgba(45, 92, 132, 0.5),
      rgba(45, 92, 132, 0.5)
    ),
    url('https://images.unsplash.com/photo-1543431243-e4b709062b84?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-content {
  color: white;
}

.hero-content p {
  max-width: 700px;
  font-size: 20px;
}

header .section__container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  color: var(--extra-light);
}

.header__content h1 {
  font-size: 5rem;
  font-weight: 400;
  line-height: 5rem;
}

.header__content p {
  text-align: center;
}

.header__content button {
  padding: 1rem 2rem;
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: var(--primary-color);
  color: var(--extra-light);
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.header__content button:hover {
  background-color: var(--primary-color-dark);
}

.journey__container {
  background-color: var(--secondary-color);
}

.journey__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.country__card {
  background-color: var(--extra-light);
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  position: relative;
}

.country__name {
  padding: 1rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-light);
  cursor: pointer;
}

.country__name i {
  font-size: 1.2rem;
}

.country__name span {
  font-weight: bold;
  font-size: 20px;
  color: #3b6890;
  white-space: nowrap; /* Prevent text from wrapping to the next line */
  overflow: hidden; /* Hide any content that exceeds the width */
  text-overflow: ellipsis;
}
.more-details-button {
  width: 100%; /* Make the button take the full width of the card */
  padding: 0.5rem; /* Add some padding for better styling */
  background-color: #3b6890; /* Choose a color for the button */
  color: white; /* Text color */
  border: none;
  border-radius: 0 0 10px 10px; /* Round the bottom corners */
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.more-details-button:hover {
  background-color: #2b4f70; /* Change the background color on hover */
}
.package__container {
  background-color: #fff; /* Set a background color for the package section */
  color: #333; /* Set a text color for the package section */
  padding: 5rem 1rem; /* Adjust padding as needed */
}

.package__content {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}

.package__content h2 {
  font-size: 2rem;
  font-weight: 400;
}

.package__content .package__description {
  max-width: 600px; /* Set a maximum width for the description */
  margin: 0 auto; /* Center the description within the container */
  text-align: center;
}

.banner__container {
  background-image: linear-gradient(
      rgba(35, 71, 103, 0.5),
      rgba(35, 71, 103, 0.5)
    ),
    url('../../assets/sub-pages/packages/package-cover.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--extra-light);
}

.bannercontainer .sectioncontainer {
  padding: 10rem 1rem;
  display: flex;
  justify-content: center;
}

.banner__content {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}

.banner__content h2 {
  font-size: 2rem;
  font-weight: 400;
}
.banner__content p {
  text-align: center;
  margin: 0;
}

.banner__content button {
  padding: 0.5rem 2rem;
  outline: none;
  border: 2px solid var(--secondary-color);
  background-color: transparent;
  color: var(--secondary-color);
  font-size: 1rem;
  cursor: pointer;
}

.display__container {
  background-color: var(--secondary-color);
}

.displaycontainer :is(.sectiontitle, .section__subtitle) {
  color: var(--text-dark);
}

.display__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.display__card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--extra-light);
  text-align: center;
}
.display__card i {
  font-size: 2rem;
  color: var(--primary-color);
}

.display__card h4 {
  font-size: 1rem;
  font-weight: 500;
  padding: 0 1rem;
  color: var(--text-dark);
}

.display__card p {
  font-size: 0.8rem;
  padding: 0 1rem;
  color: var(--text-dark);
}

.display__grid .grid-1 {
  grid-area: 1/1/3/3;
}

@media (min-width: 640px) {
  header .section__container {
    justify-content: flex-start;
  }

  .header__content {
    max-width: 400px;
    align-items: flex-start;
  }

  .header__content p {
    text-align: left;
  }

  .display__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .display__card {
    gap: 0;
  }

  .display__card i {
    font-size: 1.75rem;
  }

  .display__card h4 {
    font-size: 1rem;
  }

  .display__card p {
    font-size: 0.7rem;
  }
}

@media (min-width: 786px) {
  .bannercontainer .sectioncontainer {
    justify-content: flex-end;
  }

  .banner__content {
    align-items: flex-end;
    text-align: right;
    max-width: 800px;
  }

  .journey__grid {
    grid-template-columns: repeat(2, 5fr);
    gap: 1rem;
  }

  .display__card {
    gap: 0.5rem;
  }

  .display__card i {
    font-size: 2.5rem;
  }

  .display__card p {
    font-size: 0.8rem;
  }
}

@media (min-width: 1024px) {
  .display__card {
    gap: 1rem;
  }

  .display__card i {
    font-size: 3rem;
  }

  .display__card h4 {
    font-size: 1.5rem;
  }

  .display__card p {
    font-size: 1rem;
  }
}

/* .amenity span {
  border: 5px solid red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
} */

@media (max-width: 786px) {
  .journey__grid {
    grid-template-columns: repeat(1, 5fr);
    gap: 1rem;
  }
}

/* Modals */
.modal-title {
  font-family: 'Great Vibes', cursive;
}

.tour-plan h2 {
  color: #365f82;
}

.package-details {
}

.tour-plan ul li {
  font-size: 20px;
  color: #282d31;
}

.amenities {
  margin-top: 30px;
}

.amenity-icon-container {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 20px;
}

.amenity-icon-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amenity {
}

.amenity i {
  width: 3rem;
  vertical-align: middle;
  color: crimson;
}

.amenity-title {
  font-size: 1.25rem;
  color: crimson;
}

.book {
  display: flex;
  justify-content: end;
}