/*index.html styles*/
.active {
  background-color: #054E72;
  backdrop-filter: blur(0px);
  border: 0px;
}

@keyframes zoomOut {
  to {
    transform: scale(1);
  }
}

/* Slide */
.banner-slider {
  position: relative;
  top: -98px;
  width: 100%;
  height: 90vh;
  /* ou a altura que você preferir */
  overflow: hidden;

  font-family: "Poppins", sans-serif;
}

.banner-slider .swiper-slide {
  width: 100%;
  height: 100%;
}

.banner-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  position: relative;
  overflow: hidden;

  width: 100%;
  min-height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  text-decoration: none;
  color: white;
}

.banner-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  /* usa a mesma imagem definida na classe ex: slide-1 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;

  transform: scale(1.2);
  animation: zoomOut 2s ease-out forwards;
  will-change: transform;
}

.banner-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'><circle cx='2' cy='2' r='1' fill='black'/></svg>");
  opacity: 0.15;
  pointer-events: none;
}

.banner-slide h1,
.banner-slide h2 {
  position: relative;
  z-index: 10;

  font-size: 71px;
  font-weight: 800;
  text-shadow: 5px 4px 6px rgba(0, 0, 0, 0.38);
  max-width: 768px;
  text-align: center;

  text-transform: uppercase;

  margin: 0 12px 12px;

  line-height: 0.95em;
}

.banner-slide h1::after,
.banner-slide h2::after {
  content: '';
  display: block;
  width: 100%;
  margin: 12px auto 0;
  height: 3px;
  background-color: #FFC600;
}

.banner-slide p {
  position: relative;
  text-shadow: 5px 4px 6px rgba(0, 0, 0, 0.38);
  z-index: 10;

  font-size: 22px;
  max-width: 768px;
  text-align: center;

  margin: 0 12px;

  line-height: 0.95em;

  text-transform: uppercase;
}

.banner-slide .btn {
  position: relative;
  z-index: 10;

  margin-top: 30px;
  background-color: #0072ce;
  padding: 12px 40px;

  font-size: 24px;
  color: white;

  border: 0;
  border-radius: 32px;

  cursor: pointer;

  transition: 0.35s;

  text-transform: uppercase;
}

.banner-slide .btn:hover {
  transform: scale(1.05);
}

.slide-1 {
  background-image: url('../images/banner/hotel_ideal_banner.webp');
}

.slide-2 {
  background-image: url('../images/banner/hotel_ideal_banner_2.webp');
}

.slide-3 {
  background-image: url('../images/banner/hotel_ideal_banner_3.webp');
}

/*Parte de Formulário*/

.booking-form-container {
  top: -98px;

  margin-bottom: -98px;
}

.form-div h2 {
  text-align: center;
  text-transform: uppercase;
  color: #054E72;
}

.form-div h2::after {
  content: '';
  display: block;

  height: 3px;
  max-width: 895px;
  margin: auto;
  background-color: #FFC600;

}

/* Seção visit buttons*/
#visit-buttons {
  padding: 0 24px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  height: auto;
  gap: 12px;

  /* flex-wrap: wrap; */
}

#visit-buttons img {

  max-width: 425px;
  width: 100%;
  height: auto;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Títulos bonitos */
.resorts-text {
  max-width: 1320px;
  margin: 0 auto;

  padding: 0 10px;
}

.title-container {
  display: flex;
  align-items: flex-end;
}

.color-line {
  display: flex;
  margin-left: 10px;
  margin-bottom: 6px;
}

.color-block {
  height: 5px;
  width: 24px;
}

.yellow {
  background-color: #FFC600;
}

.orange {
  background-color: #FF6A14;
}

.green {
  background-color: #97D700;
}

.blue {
  background-color: #054E72;
}

.resorts-text h2 {
  font-size: 2em;
  font-weight: 300;
  margin: 0;
  color: #0072ce;
}

.resorts-text p {
  font-size: 1.1em;

  font-weight: 200;

  letter-spacing: 1px;
}


/*Quebra de seção 1 ----------------------------------------------------------------------------------------------------------------*/
.content-break {
  width: 100%;
  height: 450px;
}

.paralax-img {
  background-image: url("../images/Teste.webp");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  z-index: 0;
}

.paralax-img::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 34, 40, 0.3);
}

.content-break-div {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.break-text {
  max-width: 400px;
  text-align: center;

  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.15);
}

.content-break-div h3,
.content-break-div h2 {
  margin: 0;
  color: white;
}

.content-break-div h3 {
  font-weight: 800;
  font-size: 1em;
  margin-bottom: 24px;
}

.content-break-div h2 {
  font-size: 2em;
}

.break-button {
  max-width: 400px;
  text-align: center;
  margin-top: 32px;
}

.break-button a {
  text-decoration: none;
  color: #054e72;
  background-color: #ffc600;
  padding: 16px 20px;
  border-radius: 24px;
  position: relative;
}

.break-button a:hover {
  top: -4px;
}

/*Slide de Parques */
#park-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px 40px;
  margin: 40px auto;
}

.parks {
  max-width: 1320px;
  width: 100%;
}

.parks h2 {
  font-size: 2em;
  font-weight: 300;
  margin: 0;
  color: #0072ce;
}

.park-content {

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: 2rem;
  gap: 24px;
}

.park-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  position: relative;

  height: 525px;

  width: 100%;

  color: white;

  cursor: pointer;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  flex-direction: column;

  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;


  text-decoration: none;
}

.park-img::after {
  content: '';

  background-color: rgba(0, 0, 0, 0.253);

  display: block;
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;

  opacity: 0.3;

  transition: 0.3s;
}

.park-img:hover::after {
  background-color: rgb(0, 0, 0);
}

.park-img1 {
  background-image: url('/images/thermas_dos_laranjais.png');
}

.park-img3 {
  background-image: url('/images/hot_beach.png');
}

.park-img2 {
  background-image: url('/images/grupo_dreams.png');
}

.park-img1,
.park-img1::after {
  border-top-left-radius: 2rem;
}

.park-img2,
.park-img2::after {
  border-bottom-right-radius: 2rem;
}

.park-img .park-name,
.park-img .park-price {
  position: relative;
  top: 0;

  z-index: 1;

  padding: 0 1.5rem;
}

.park-img h2 {
  color: white;
  font-weight: bold;

  text-shadow: 5px 4px 6px rgba(0, 0, 0, 0.38);
}

.park-price {
  background-color: #FFC600;

  padding: 0.5rem 1.5rem !important;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-shadow: 5px 4px 6px rgba(0, 0, 0, 0.123);
}

.park-span-from {
  margin-bottom: -4px;

}

.park-span-price {
  font-weight: 900;
  font-size: 2rem;
}

.park-span-desc {
  margin-top: -6px;
  font-size: 0.75rem;
}

.park-name {

  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

.span-real {
  font-size: 1rem;
}

.span-cents {
  font-size: 1rem;
}

/* Packages section -----------------------------------------------------------------------------------------------------------------*/
#packages-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  margin: 0 auto;
}

#packages-section .swiper-pagination {
  bottom: 10px;
}

.packages-text h2 {
  font-size: 2em;
  font-weight: 300;
  margin: 0;
  color: #0072ce;
}

.packages {
  max-width: 1400px;
  width: 90%;
  position: relative;
  overflow: hidden;
}

.packages-swiper {
  padding: 20px 10px 30px;
}

.package-image img {
  width: 100%;
  height: auto;
}

.package-card {
  text-decoration: none;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  color: #054E72;
}

.package-card * {
  margin: 0;
}

.package-information {
  text-align: start;
  padding: 24px 12px;
  height: 100%;
  max-height: 240px;
}

.package-names h3 {
  font-size: 1.65em;
  font-weight: 900;
}

.package-names h4 {
  font-size: 1em;
  font-weight: 400;
  margin-bottom: -8px;
}

.diarias {
  display: flex;
  align-items: center;
  font-weight: bolder;
  margin-top: 8px;
  gap: 8px;
}

.diarias img {
  max-width: 25px;
}

.package-utilities {
  margin: 24px 0 32px;
}

.package-utilities ul {
  list-style: none;
  padding: 0;
}

.package-utilities ul li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #2e5c85;
  /* Tom azul similar à imagem */
}

.package-utilities ul li::before {
  content: "✓";
  color: #2e5c85;
  /* Mesmo tom do texto */
  margin-right: 8px;
  font-weight: bold;
}

.package-price {
  margin-top: 24px;
}

.package-price h2 {
  font-size: 1.7em;
  font-weight: 900;
  color: #FF6A14;
}

.package-price p {
  font-size: 0.8em;
}

/*Email */
.email-sec {
  background-color: #054e72;

}

/* Sobre nós */
.about-us {
  background-image: url('/images/about_us.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;


  padding: 3rem 3rem 4.5rem;
}

.about-us-container {
  display: flex;
  align-items: center;
  justify-content: center;

  max-width: 1320px;

  margin: auto;

  height: 100%;

}

.about-us-images,
.about-us-text {
  margin: 0 20px;
}

.about-us-images img {
  max-width: 400px;
  width: 100%;

  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.295));
}

.about-us-text {
  width: 40%;

  color: #0072ce;
  font-size: 1.4rem;

  margin-top: 20px;
}

.about-us-text h2 {
  font-size: 1.75rem;

  font-weight: 600;

  margin: 0;
}

.about-us-text h3 {
  font-weight: 600;

  margin: 0;
}

.about-us-text p {
  margin: 0 0 20px 0;
}

.about-us-text h3:last-child {
  margin-top: 34px;
}

.about-us-text strong {
  font-weight: 500;
}

/* before footer section */
.before-footer {
  background-color: #054E72;
  padding: 40px 20px;
  border-bottom: 1px solid #FFFFFF;
  border-top: 4px solid white;
}

.information {
  display: flex;
  gap: 100px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: #FFFFFF;
}

.information a {
  text-decoration: none;
  color: #FFFFFF;
}

.info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1em;
  border-radius: 44px;
  border: 1px solid white;
  padding: 16px;
}

.info ion-icon {
  font-size: 1.3em;
}

/* Responsividade para tablets e celulares */

@media (max-width: 1365px) {
  #visit-buttons img {
    max-width: 380px;
  }

  .resorts-cards .swiper-slide {
    transform: scale(1) !important;
  }

  .resorts-cards .swiper-slide-active {
    transform: scale(1) !important;
  }
}

@media (max-width: 1280px) {
  .park-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .park-img {
    max-height: 400px;
  }

  .park-img1 {
    grid-column: 1 / 3;
  }
}

@media (max-width: 1170px) {
  #visit-buttons {
    flex-wrap: wrap;
  }

  #visit-buttons img {
    max-width: 450px;
  }

  .swiper-slide {
    width: calc(33.33% - 15px);
    /* 3 slides visíveis */
  }

  .resort-card img {
    max-width: 400px;

    border-radius: 16px;
  }

  .resort-card-content {
    padding: 0.5rem;

    top: -45px;
  }
}

@media (max-width: 1095px) {
  .about-us-text {
    font-size: 1.20rem;

    width: 45%;
  }

  .about-us-text h2 {
    font-size: 1.45rem;
  }
}


@media (max-width: 1023px) {
  .resorts-cards .swiper-slide {
    transform: scale(0.9) !important;
  }

  .resorts-cards .swiper-slide-active {
    transform: scale(1) !important;
  }
}

@media (max-width: 921px) {
  .about-us-text {
    font-size: 1.1rem;

    width: 45%;
  }

  .about-us-text h2 {
    font-size: 1.35rem;
  }
}

@media (max-width: 860px) {
  .resorts-cards {
    margin-top: 36px;

    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  header {
    background-color: rgba(0, 0, 0, 0.05);
    /* Fundo cinza translúcido */
    backdrop-filter: blur(6px);
    /* Desfoque de 10 pixels */
    border-bottom: 1px solid rgba(255, 255, 255, 0.692);
  }

  #resorts-section {
    margin: 40px auto 0;
  }

  .banner-slider {
    height: 102vh;
  }

  .banner-slide h1,
  .banner-slide h2 {
    font-size: 3em;
  }

  .banner-slide p {
    font-size: 1.25em;
  }

  .banner-slide .btn {
    font-size: 1.25em;
  }

  .park-content {
    grid-template-columns: repeat(1, 1fr);
  }

  .park-img1 {
    grid-column: unset;
  }

  .swiper-slide {
    width: calc(100% / 2 - 10px);
    /* Para ajustar 2 slides em telas menores */
  }

  .about-us {
    padding: 3rem 1rem;
  }

  .about-us-container {
    flex-direction: column;
  }

  .about-us-images {
    margin: 24px 0;
  }

  .about-us-text {
    text-align: center;

    font-size: 1.25rem;

    width: 70%;

    margin: 12px 0;
  }

  .about-us-text h2 {
    font-size: 1.55rem;
  }

}

@media (max-width: 578px) {
    .about-us-text {
    width: 90%;

    font-size: 1.1rem;
  }

  .about-us-text h2{
    font-size: 1.35rem;
  }
}

@media (max-width: 480px) {
  .slider {
    height: auto;
  }

  .banner-slide h1,
  .banner-slide h2 {
    font-size: 2.5em;
  }

  .banner-slide p {
    font-size: 1.15em;
  }

  .banner-slide .btn {
    font-size: 1.15em;
  }


  .title-container h2 {
    font-size: 1.8em;
  }

  .packages-text h2 {
    font-size: 1.8em;
  }

  .package-card {
    width: 100%;
    /* Ajusta para 1 por linha */
  }

  .swiper-slide {
    width: 100%;
    /* Um slide por vez em telas muito pequenas */
  }
}

@media (max-width: 425px) {

  #resorts-section .swiper-container {
    width: 90%;
    margin: 20px auto 0;
  }

  .resort-card img {
    max-width: 350px;

    border-radius: 16px;
  }

  .resort-card-content {
    padding: 0.5rem;

    top: -45px;
  }

  .content-break-div h3 {
    font-size: 0.9em;
  }

  .content-break-div h2 {
    font-size: 1.6em;
  }
}

@media (max-width: 400px) {
  .title-container h2 {
    font-size: 1.6em;
  }

  .packages-text h2 {
    font-size: 1.6em;
  }
}

@media (max-width: 375px) {

  .title-container h2 {
    font-size: 1.4em;
  }

  .packages-text h2 {
    font-size: 1.4em;
  }

  .content-break-div h3 {
    font-size: 0.8em;
  }

  .content-break-div h2 {
    font-size: 1.4em;
  }
}