.p-4 {
    width: 145px;
}

.pink{
    background: #FFDBEF;  
}

.white {
    color: white;
}

.lightblue {
  background-color: #D3FFFD;
}

.lightpurple {
  background-color: #D5DAFF;
}

.offwhite
{
    background-color: #F9F9FB;
}
.dark {
    color: #595252;
}

a {
  color: inherit;
  text-decoration: none;
}

.title {
    font-family: "Poppins", sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #595252;
}

* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      background-color: white;
      color: #4d4d4d;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0rem 5rem;
      flex-wrap: wrap;
      
    }

    .logo img {
      width: 215px;
        justify-content: center;
        position: relative;
        overflow: hidden;
        
    }

    nav {
      display: flex;
      gap: 6rem;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 18px;
    }

    nav a {
      text-decoration: none;
      color: #595252;
      font-weight: 500;
    }

    nav a.active {
      color: #ff2fa0;
      font-weight: 700;

    }

    .inicio {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0rem;
      height: 542px;
      width: auto;
    }

    .inicio img {
      width: 100%;
      max-width: 497px;
      border-radius: 12px;
      overflow: visible;
      bottom: 96px;
      position:relative;
      align-items: center;
    }

    .inicio-text {
      max-width: 635px;
      padding: 1rem;
      color: #595252;
      align-items: start;
    }

    .inicio-text h1 {
      font-size: 36px;
      font-weight: 800;
      color: #595252;
      margin-bottom: 1rem;
    }

    .inicio-text p {
      font-size: 20px;
      line-height: 1.6;
    }

    .btn {
      display: inline-block;
      margin-top: 1.5rem;
      padding: 1rem 2rem;
      background-color: #ff2fa0;
      color: white;
      border: none;
      border-radius: 30px;
      font-size: 1.1rem;
      text-decoration: none;
      font-weight: bold;
      transition: background 0.3s ease;
    }

    .btn:hover {
      background-color: #e0268e;
    }

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

.icon_list {
    list-style: none;
}

.icon_list li {
    display: inline-block;
    margin: 0px 10px;
}

.image-text-container {
    position: relative;
    /* Make container relative */
}

.image-text {
    position: absolute;
    /* Make text absolutely positioned */
    top: 90px;
    /* Position 20px from top */
    left: 55%;
    /* Position horizontally at 50% */
    width: 75%;
    height: 90%;
    transform: translateX(-50%);
    /* Center horizontally */
    text-align: justify;
    bottom: 10%;
    color: white;
    /* Adjust text color for contrast */
}

.section-padding-both{
    padding: 10px 0px;
}

.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease;
}

.service-box {
  flex: 1 0 calc(25% - 15px); /* 4 por fila, con gap */
  background: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
  min-width: 0; /* clave para evitar overflow */
  
}

.service-box img {
  width: 80px;
  height: 80px;
  display:block;
  margin:auto;
}

.service-box h5,
.service-box p {
  text-align: left;
  width: 100%;
  padding-top: 20px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.05);
  color: #9B9B9B;
  border: none;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
}
.carousel-prev { left: 0; }
.carousel-next { right: 0; }

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Poppins;
    }
    
    p {
    font-size: 16px;
    font-weight: normal;
    }

    .bold-text {
      font-weight: 800;
    }
    .light-bold-text {
      font-weight: 400;
    }

    .large-text {
      font-size: 36px;
    }
/* SECCION BANNER VER EL MUNDO Y CRECIENDO */
    .banners {
      height: 480px;
      position: relative;
      padding-left:10rem;
      overflow: visible;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: auto;
      gap: 2rem;
      letter-spacing: 1px;
    }
    
    .banner1 {
      background-color: #9AA4EE;
      display: flex;
    }

    .banner1-text {
      
      padding: 1rem;
      color: white;
      text-align:left;
      word-wrap: break-word;
    }

    .banner1 img {
      height: 480px;
      width: auto;
      margin-right: 20px;
    }

    .banner2 {
      background-color: #F9F9FB;
      
    }

    .banner2-text {
      color: #595252;
      text-align:left;
      align-items: center;
      word-wrap: break-word;
    }

    .imagen-superpuesta {
      position: absolute;
      bottom: 0;
      right: -25px;
      height: 700px;
      width: auto;
      z-index: 2;
      margin-top: -220px;
    }


    /* SECCION FORM CONTACTAME */

.contactame-container {
      display: flex;
      justify-content: space-between;
      padding-top: 5rem;
      margin: auto;
      height: 720px;
      vertical-align: middle;
    }

    .text-section {
      width: 45%;
      line-height: 1.6;
      padding-top: 2rem;
    }

    .text-section p{
      font-size: 1.5rem;
    }

    .form-section {
      width: 55%;
      padding-top: 2rem;
    }

    h2 {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 30px;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    input, textarea {
      border: 2px solid #50d3ce;
      border-radius: 30px;
      padding: 15px 20px;
      font-size: 1.5rem;
      background-color: transparent;
    }

    textarea {
      height: 200px;
      resize: none;
      border-radius: 30px;
    }

    input::placeholder,
    textarea::placeholder {
      color: #4d4d4d;
      font-weight: bold;
    }

    .submit-button {
    background-color: #50d3ce;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 15px 20px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }

    .submit-button:hover {
      background-color: #3bb7b2;
    }

    /* Seccion ACERCA DE */
.about-column {
      padding: 30px 20px;
      border-radius: 8px;
      color: #333;
      height: 100%;
    }
.about-title {
      font-weight: bold;
      font-size: 1.35rem;
      margin-top: 30px;
      color: #595252;
      text-align: center;

    }
.about-text {
      margin-top: 10px;
      font-size: 1rem;
      color: #595252;
      text-align: left;
    }
.about-img {
      width: 100%;
      max-height: 160px;
      object-fit: contain;
    }

     .more-text {
      display: none;
    }

    .read-more-btn {
      margin-top: 10px;
      background-color: transparent;
      border: none;
      color: #007bff;
      cursor: pointer;
      font-size: 0.9rem;
      padding: 0;
    }

    .read-more-btn:hover {
      text-decoration: underline;
    }
    
    /* SECCION CONTACTO */
    .contacto-container {
      max-width: 1200px;
      margin: auto;
      padding: 40px 20px;
      padding-bottom: 75px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .logo-section {
      flex: 1 1 200px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    
    .info {
      flex: 2 1 400px;
    }
    .info h1 {
      font-size: 22px;
      margin: 0;
    }
    .info p {
      margin: 4px 0;
    }
    .contact-section {
      display: flex;
      flex-wrap: wrap;
      gap: 120px;
      margin-top: 30px;
    }
    .contact-box {
      flex: 1 1 300px;
    }
    .contact-box h3 {
      margin: 0;
      font-weight: 700;
    }
    .contact-box em {
      font-style: italic;
    }
    .contact-box p {
      margin: 6px 0;
    }
    
    .icons {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }
    .icons img {
      width: 20px;
      height: 20px;
    }
    .footer {
      background-color: #a9aaf5;
      text-align: center;
      padding: 20px;
      font-size: 16px;
    }
    .social {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 10px;
    }
    .social img {
      width: 28px;
      height: 28px;
    }


/* --- Media Queries para hacer la sección responsive --- */ 
/* --- RESPONSIVE STYLES --- */

@media (max-width: 1200px) {
    /* Estilos para tablets y pantallas más pequeñas (máximo 1200px de ancho) */

    header {
        padding: 1rem 2rem; /* Reduce el padding del header */
        justify-content: center; /* Centra los elementos en el header */
    }

    nav {
        gap: 2rem; /* Reduce el espacio entre los enlaces de navegación */
        font-size: 16px; /* Ajusta el tamaño de fuente de la navegación */
        margin-top: 1rem;
    }

    .inicio {
        height: auto; /* Permite que la altura se ajuste al contenido */
        padding: 2rem 1rem; /* Añade padding para móviles */
    }

    .inicio img {
        width: 80%; /* Reduce el ancho de la imagen en tablets */
        max-width: 350px; /* Limita el ancho máximo para que no sea muy grande */
        margin-bottom: 2rem; /* Espacio entre la imagen y el texto */
        position: static; /* Elimina el posicionamiento relativo que puede causar problemas */
        bottom: auto; /* Reinicia la propiedad bottom */
        align-items: center;
    }

    .inicio-text {
        text-align: center; /* Centra el texto en pantallas pequeñas */
        padding: 0 1rem; /* Ajusta el padding del texto */
    }

    .inicio-text h1 {
        font-size: 28px; /* Reduce el tamaño del título */
        margin-bottom: 1rem;
    }

    .inicio-text p {
        font-size: 16px; /* Reduce el tamaño del párrafo */
        line-height: 1.5;
    }

    .btn {
        margin-top: 1.5rem;
        padding: 0.8rem 1.8rem; /* Ajusta el padding del botón */
        font-size: 1rem; /* Ajusta el tamaño de fuente del botón */
    }

     /* Banners */
  .banners {
      height: 420px;
      width: auto;
      padding-left:3.5rem;
    }

  .banner1 {
    flex-direction: column;
  }

  .banner1 img {
    width: 35%;
    height: auto;
    margin: 0 auto;
  }

  .banner1-text {
      display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente el texto */
  height: 100%; /* Asegura que ocupe toda la altura del contenedor padre */
    }

    .imagen-superpuesta {
      position: absolute;
      bottom: 0;
      right: -25px;
      height: auto;
      width: 33%; 
      z-index: 2;
      margin-top: -220px;
    }
}

@media (max-width: 992px) {
  /* Header y navbar */
  header {
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
  }

  nav {
    flex-direction: column;
    gap: 1rem;
    font-size: 16px;
    margin-top: 1rem;
  }

  /*SECCION MIS SERVICIOS */
  .service-box {
    flex: 1 0 calc(50% - 10px); /* 2 por fila */
  }

  /* Banners */
  .banners {
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    height: auto;
    text-align: center;
    letter-spacing: 0px;
  }

  .banner1 img {
    width: 35%;
    height: auto;
    margin: 0 auto;
  }

  .imagen-superpuesta {
    display: none; /* Ocultar imagen flotante en tablets y móviles */
  }

  .banner1-text,
  .banner2-text {
    text-align: center;
    padding: 0 1rem;
    line-height: 1.25;
  }

  /* Contacto */
  .contactame-container {
    flex-direction: column;
    height: auto;
    padding: 2rem 1rem;
    gap: 2rem;
  }

  .text-section,
  .form-section {
    width: 100%;
    padding-top: 0;
    text-align: center;
  }

  .text-section p {
    font-size: 1.2rem;
  }

  input,
  textarea {
    font-size: 1rem;
  }

  .submit-button {
    font-size: 1.1rem;
    padding: 12px 20px;
  }

  /* Contacto final */
  .contacto-container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
  }

  .logo-section{
    display: block;
  }

  .logo-section,
  .info,
  .contact-box {
    flex: 1 1 100%;
    text-align: center;
  }

  .contact-section {
    flex-direction: column;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
    /* Estilos para tablets y pantallas más pequeñas (máximo 768px de ancho) */

    header {
        padding: 1rem 2rem; /* Reduce el padding del header */
        justify-content: center; /* Centra los elementos en el header */
    }

    nav {
        gap: 2rem; /* Reduce el espacio entre los enlaces de navegación */
        font-size: 16px; /* Ajusta el tamaño de fuente de la navegación */
        margin-top: 1rem;
    }

    .inicio {
        height: auto; /* Permite que la altura se ajuste al contenido */
        padding: 2rem 1rem; /* Añade padding para móviles */
    }

    .inicio img {
        width: 80%; /* Reduce el ancho de la imagen en tablets */
        max-width: 350px; /* Limita el ancho máximo para que no sea muy grande */
        margin-bottom: 2rem; /* Espacio entre la imagen y el texto */
        position: static; /* Elimina el posicionamiento relativo que puede causar problemas */
        bottom: auto; /* Reinicia la propiedad bottom */
        align-items: center;
    }

    .inicio-text {
        text-align: center; /* Centra el texto en pantallas pequeñas */
        padding: 0 1rem; /* Ajusta el padding del texto */
    }

    .inicio-text h1 {
        font-size: 28px; /* Reduce el tamaño del título */
        margin-bottom: 1rem;
    }

    .inicio-text p {
        font-size: 16px; /* Reduce el tamaño del párrafo */
        line-height: 1.5;
    }

    .btn {
        margin-top: 1.5rem;
        padding: 0.8rem 1.8rem; /* Ajusta el padding del botón */
        font-size: 1rem; /* Ajusta el tamaño de fuente del botón */
    }
}

@media (max-width: 576px) {
  /* Ajustes más pequeños */
  .inicio-text h1,
  .title {
    font-size: 1.6rem;
  }

  .inicio-text p,
  p {
    font-size: 0.95rem;
  }

  .btn {
    font-size: 1rem;
    padding: 0.8rem 1.4rem;
  }

  /*SECCION MIS SERVICIOS */
  .service-box {
    flex: 1 0 100%; /* 1 por fila */
  }

  .service-box h5,
  .service-box p {
    text-align: center;
  }

  .submit-button {
    font-size: 1rem;
    padding: 10px 16px;
  }

  input,
  textarea {
    font-size: 0.95rem;
    padding: 12px 18px;
  }

  h2 {
    font-size: 1.5rem;
  }

  .logo img {
    width: 160px;
  }

  .social img {
    width: 24px;
    height: 24px;
  }
  
  .social {
      display: flow;
      align-items: center;
      gap: 15px;
      margin-top: 10px;
  }

  .icons {
      display: flow;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
  }

   /* Banners */
  .banner1 img {
    width: 75%;
    height: auto;
    margin: 0 auto;
  }

  
}

@media (max-width: 480px) {
    /* Estilos para móviles y pantallas muy pequeñas (máximo 480px de ancho) */

    header {
        padding: 1rem; /* Más padding para móviles */
    }

    nav {
        flex-direction: column; /* Apila los enlaces de navegación */
        gap: 1rem; /* Reduce el espacio entre enlaces apilados */
        text-align: center;
    }

    .logo img {
        width: 180px; /* Ajusta el tamaño del logo en móviles */
    }

    .inicio {
        padding: 1.5rem 0.5rem; /* Menos padding para pantallas muy pequeñas */
    }

    .inicio img {
        width: 90%; /* La imagen ocupa más ancho en pantallas muy pequeñas */
        max-width: 300px; /* Limita aún más el ancho máximo */
    }

    .inicio-text h1 {
        font-size: 24px; /* Más pequeño para móviles */
    }

    .inicio-text p {
        font-size: 15px; /* Más pequeño para móviles */
    }

}







/* Asegura que todas las imágenes sean responsivas */
img {
  max-width: 100%;
  height: auto;
}