/* Hero */
main img {
  width: 15.625rem;
  height: 15.625rem;
}

main img:hover {
  cursor: pointer;
}

/* Main */
.main-wrap {
  display: flex;
  flex-direction: column;
}

.main-wrap .package-btn {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 3rem;
}

.main-wrap .package-btn a {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  width: 4.1875rem;
  text-align: center;
  align-items: center;
  cursor: pointer;
  border-radius: 3.125rem;
  padding: 1rem 0.625rem;
  background-color: #0bacd5;
}

.main-wrap .package-all-wrap {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.main-wrap .package-wrap {
  display: flex;
  flex-direction: column;
  margin: 2rem 2.375rem 0 2.4375rem;
  border: solid 0.125rem #000000;
  border-radius: 1.5625rem;
  background-color: #dedede;
  box-shadow: #000000 0px 0px 0.625rem;
  padding: 1.5rem;
}

.package-wrap .package-asia,
.package-wrap .package-eropa,
.package-wrap .package-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.package-wrap h1 {
  font-size: 1rem;
  font-weight: 700;
  background-color: #0bacd5;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 1.5625rem;
}

.package-content-wrap,
.package-content-wrap-eropa {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  overflow: auto;
  scrollbar-color: #0bacd5 #ffffff;
  scrollbar-width: thin;
  height: 22.5rem;
  flex: 0 1 auto;
}

@media (min-width: 43.75rem) {
  .package-content-wrap,
  .package-content-wrap-eropa {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
  }

  .package-content-wrap .package-content,
  .package-content-wrap-eropa .package-content {
    flex: 0 1 calc(50% - 1rem);
  }
}

.package-content-wrap .package-content,
.package-content-wrap-eropa .package-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.package-details {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}

.package-details h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000000;
}

.package-details p {
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
}

.modal {
  display: none;
  position: fixed;
  z-index: 2003;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 80%;
  height: auto;
}

.close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}
/* Main */

@media (min-width: 75rem) {
  /* Main */
  main img {
    width: 18.75rem;
    height: 18.75rem;
  }

  .main-wrap .travel-title {
    margin: 6rem;
    gap: 1rem;
  }

  .main-wrap .package-wrap {
    margin: 4rem 6rem 0 6rem;
    padding: 1.5rem;
  }

  .secondHero {
    margin-top: 7.5rem;
  }

  .travel-title h1 {
    font-size: 6rem;
  }

  .travel-title p {
    font-size: 4.5rem;
  }

  .main-wrap .package-btn {
    gap: 3rem;
  }

  .main-wrap .package-btn a {
    font-size: 1.375rem;
    width: 7.5rem;
    height: 4rem;
    padding: 1.25rem;
  }

  .package-wrap .package-asia,
  .package-wrap .package-eropa {
    gap: 2rem;
  }

  .package-wrap h1 {
    font-size: 1.375rem;
    padding: 1rem;
  }

  .package-content-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    height: auto;
    justify-content: space-between;
  }

  .package-content-wrap-eropa {
    height: 25.625rem;
  }

  .package-content-wrap .package-content,
  .package-content-wrap-eropa .package-content {
    flex: 0 1 calc(23% - 1rem);
  }

  .modal-content {
    width: 35%;
    height: auto;
  }
  /* Main */
}