@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family: "poppins", sans-serif;
}


html{
    background-color: white;
    scroll-behavior: smooth;
}

main{
    display: flex;
    flex-direction: column;
}

strong {
    color: #1a1040;
}

.menu-des, #menu-des{
    display: none;
}

 /* nav */ 

.sirena-logo{
    height: 3rem;
}

.navegador {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    background-color: #1a1040;
    padding: 10px 14%;
}

.nav-list{
    display: flex;

}

.nav-item {
    padding-right: 2em;
    display: flex;
    align-items: center;
}

.nav-item-link{
    color: white;
    list-style-type: none;
}

.nav-item-link:hover{
    text-decoration: underline;
 }

/* hero */

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4% 7%;
  }
  
  .info {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 1% 7%;
  }
  
  .info h1 {
    font-size: 2.5rem;
    padding-left: 2%;
    text-align: center;
  }
  
  .info p{
    font-size: 1.10rem;
    padding: 0 3%;
    text-align: center;
  }
  
  .logo-avatar {
    width: 18.75rem;
    padding-right: 10%;
    display: flex;
    flex-direction: column;
  }

/* botones  */

  .botones {
    display: flex;
    gap: 10%;
    padding-left: 3%;
    justify-content: center;
}

.boton-deco{
    background-color: #1a1040;
    width: 10rem;
    height: 3rem;
    border: none;
    border-radius: 1.25rem;
    cursor: pointer;
    font-size: 1.0rem;

}

.boton-deco a {
    color:white;
}

.boton-deco:hover{
    font-size: 1.15rem;
}

/* descripcion */

.descripcion{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 1rem 21rem;
    font-size: 1.10rem;
}

#des-recuerda {
    margin-top: 1rem;
}

hr {
    height: 0.1rem;
    background-color: #1a1040;
    width: 25%;
    margin: 2% auto;
}

/* card */

.cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.700rem;
    margin-bottom: 2%;
}

.cards h2 {
    font-size: 1.6rem;
    padding-top: 2%;
}

.cards p{
    font-size: 1.10rem;
    text-align: center;
}

.contenedor-card {
    display: flex;
    gap: 1.25rem;
    width: 100%;
    justify-content: center;
    margin: 0% 10%;
    flex-wrap: wrap;

}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 18.75rem;
    padding: 1.375rem 0.75rem;
    gap: 0.938rem;
    border: 6px solid #1a1040;
    border-radius: 3rem;
    margin: 2%;
    transition: all 0.5s;
}

.card:hover {
    border-color: #2c7a8b;
    transition: all 0.5s;
    padding: 1.375rem 1.75rem;
    }
    

.card img {
    width: 80px;
    height: 69px;
}

.card h3 {
    font-size: 18px;
}

.card p {
    color:#818181;
    font-size: 17px;
}

/*contacto*/

.formulario{
    display: flex;
    justify-content: center;
    gap: 10rem;
}

.form{
    display: flex;
    flex-direction: column;
}

.form h2 {
    margin-bottom: 8%;
    text-align: center;
    font-size: 25px;
}

.form label{
    font-size: 18px;
}

.form textarea{
    resize: none;
    padding: 1% 2%;
}

.form input{
    border: none;
    border-bottom: 2px solid #1a1040;
    width: 24rem;
    padding: 1% 2%;
  }

  .submit{
    background-color: #1a1040;
    border-radius: 15px;
    color: white;
    font-size: 17px;
    cursor: pointer;
  }

  /*mapa*/

  .mapa{
    display: flex;
    align-items: center;
  }

.mapa iframe{
    width: 100%;
    height: 80%;
    padding-bottom: 23%;
}

/* fotter */


.footer {
    background-color: #1a1040;
    color:white;
    margin-top: 2%;
}

.logo-principal-footer {
    display: flex;
    justify-content: center;
}

.logo-principal-footer img {
    width: 10%;
    margin: 1% 0;
}

.footer p{
    padding: 1%;
    text-align: center;
}

.contactos {
    display: flex;
    justify-content: space-around;
    padding: 2% 10%;
}

.redes {
    display: flex;
    gap: 15px;
}

.redes img {
    width: 50px;
    cursor: pointer;
}

.contactos a {
    font-size: 18px;
    color: white;
}

.info-contacto {
    padding-top: 1%;
}