/**
* Template Name: Techie
* Updated: Jan 09 2024 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/techie-free-skin-bootstrap-3/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html, body {
  height: auto;
}
body, #main-content, #footer, #footer .copyright, #footer .credits {
  color: #444444 !important;
  background: linear-gradient(90deg, #f9f8fc 0%, #e0d0f2 100%);
  font-family: 'Manrope', 'Noto Sans', 'Poppins', Arial, sans-serif;
  min-height: unset;
  display: block;
  flex-direction: unset;
}

a {
  color: #6a1a9e; /* Morado vibrante de Nu Bank para enlaces */
  text-decoration: none;
}

a:hover {
  color: #8c3bcc; /* Un morado ligeramente más claro para hover */
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  /* Gradiente morado que va de oscuro a claro */
  background: linear-gradient(45deg, #af8bda 0%, #965abe 50%, #511f77 100%);
  transition: all 0.5s;
  z-index: 997;
  padding: 20px 0;
}

#header .logo {
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 2px;
  height: 50px; /* Define la altura de la imagen; ajústala según necesites */
  margin-left: 5px; /* Espacio a la izquierda del logo */
  width: auto; /* Mantiene la proporción original */
}

#header .logo a {
  color: #fff; /* Texto en blanco para buen contraste */
  font-size: 160%;
  font-weight: 600;
}

#header .logo img {
  max-height: 40px;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 91.9vh;
  /* Gradiente sutil que combina morado, un toque de azul o gris y blanco */
  background: linear-gradient(45deg, #d3c4ea 0%, #e0d0f2 50%, #ffffff 100%),
              url("../img/hero-bg.jpg") center center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  min-height: 80vh;
  background: linear-gradient(120deg, #f9f8fc 0%, #e0d0f2 100%);
  padding-bottom: 5rem; /* Espacio de seguridad para evitar desbordamiento */
}

#hero .container,
#hero .container-fluid {
  padding-top: 84px;
}

#hero h1 {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 64px;
  color: #4a148c; /* Morado oscuro para los títulos principales */
  font-family: 'Manrope', 'Noto Sans', 'Poppins', Arial, sans-serif;
}

#hero h2 {
  color: #6a1a9e; /* Morado vibrante para subtítulos */
  margin: 10px 0 0 0;
  font-size: 20px;
  font-family: 'Manrope', 'Noto Sans', 'Poppins', Arial, sans-serif;
}

#hero h3 {
  color: #9c5aa8; /* Un morado más suave para texto secundario */
  margin: 10px 0 0 0;
  font-size: 12px;
  font-family: 'Manrope', 'Noto Sans', 'Poppins', Arial, sans-serif;
}

#hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

/* Responsive - Ajuste de la imagen del Hero */
#hero .hero-img img {
  width: 100%;
  max-width: 450px;
  height: auto;
  margin: 0 auto;
  display: block;
  transform: translate(140px, -130px); /* mueve la imagen a la derecha y arriba */
  border-bottom-left-radius: 48px;
}

@media (max-width: 768px) {
  #hero .hero-img img {
    width: 60%;
    max-width: 300px;
    transform: translate(15px, -10px); /* menos desplazamiento en pantallas pequeñas */
  }

  /* Ajuste de tamaño de fuente para tablets */
  #hero h1 {
    font-size: 40px;
    line-height: 50px;
  }
  #hero h2 {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  #hero .hero-img img {
    width: 70%;
    max-width: 220px;
    transform: none; /* sin desplazamiento en móviles */
  }

  /* Ajuste de tamaño de fuente para móviles */
  #hero h1 {
    font-size: 30px; /* Tamaño de fuente más pequeño para el título principal */
    line-height: 40px; /* Ajuste de la altura de línea */
    text-align: center; /* Centrar el texto en móviles para mejor presentación */
  }

  #hero h2 {
    font-size: 16px; /* Tamaño de fuente más pequeño para el subtítulo */
    text-align: center; /* Centrar el texto */
  }

  #hero h3 {
    font-size: 10px; /* Tamaño de fuente más pequeño para el texto secundario */
    text-align: center; /* Centrar el texto */
  }
}

@media (max-width: 350px) {
  #hero h1 {
    font-size: 10px;
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
  }
  #hero h2 {
    font-size: 10px;
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
  }
  #hero h3 {
    font-size: 9px;
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
  }
  #hero .container-fluid, #hero .container {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  color: #fff;
  font-size: 14px;
  background: linear-gradient(90deg, #f4eefc 0%, #e0d0f2 100%);
  background-size: cover;
  padding: 10px 0;
  text-align: center;
  font-family: 'Manrope', 'Noto Sans', 'Poppins', Arial, sans-serif;
  flex-shrink: unset;
}




#main-content {
  flex: unset;
  background: linear-gradient(90deg, #f9f8fc 0%, #e0d0f2 100%);
}