@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap&family=Matemasie&display=swap");

:root {
  --font-roboto: "Roboto", sans-serif;
  --font-rubik: "Rubik", sans-serif;
  --clr-success: #0eb582;
  --clr-success-light: #b2eddb;
  --clr-success-blur: #f0fdfa;
  --clr-para: #555555;
  --clr-header: #333;
  --clr-gray: #777777;
  --clr-light: #a5b7d9;
  --clr-white: #fff;
}

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: var(--font-rubik);
  color: var(--clr-para);
}

/* ==================== BANNER ==================== */
.banner {
  position: relative;
  max-width: 100vw;
  min-height: 85vh;
  background: linear-gradient(to bottom, white, var(--clr-success));
  display: flex;
  flex-direction: column; /* Layout en columna para que la imagen vaya debajo */
}

.banner-container {
  width: 100%;
  height: 100%;
  padding-block-start: 5rem;
  padding-inline: 10%;
  display: grid;
  gap: 2rem;
  align-items: center;
  justify-items: center;
}

.banner-content {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 2rem;
}

.banner-content p {
  color: var(--clr-white);
  text-transform: capitalize;
  font-size: 1rem;
  line-height: 2rem;
}

.banner-btn {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.banner-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-btn a:first-child {
  background-color: var(--clr-white);
  font-weight: 500;
}

.banner-btn a:first-child * {
  color: var(--clr-success);
}

.banner-btn a:last-child {
  background-color: var(--clr-para);
}

.banner-btn a:last-child * {
  color: var(--clr-white);
}

.banner-image {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-image img {
  width: 100%;
  object-fit: cover;
}

/* ==================== MEDIA QUERIES ==================== */
@media (min-width: 992px) {
  .section-size {
    width: 80%;
  }

  .section-spacing {
    padding-block: 3rem 4rem;
  }

  /* Banner grid para pantallas grandes */
  .banner-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .banner-container h1 {
    text-wrap: nowrap;
  }

  .email-section {
    width: 70%;
  }
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
  .banner-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .banner-image {
    order: 1; /* Mover la imagen debajo del contenido */
    margin-top: 2rem;
  }

  .banner-image img {
    width: 70%; /* Ajustar el tamaño de la imagen */
    margin: 0 auto;
  }

  .banner-content h1 {
    font-size: 1.5rem; /* Ajustar el tamaño del título */
    line-height: 2rem;
  }

  .banner-content p {
    font-size: 0.9rem; /* Ajustar el tamaño del texto */
    line-height: 1.5rem;
  }

  .banner-btn {
    flex-direction: column; /* Cambiar la disposición de los botones */
    gap: 0.5rem;
  }
}