body{
    margin: -10px;
}

/*----------------------------- Navbar Styles ---------------------------------------*/
.navbar {
    background-color: white;
    color: #FFFFFF;
}

.navbar-brand img{
    width: 10vw;
}

.navbar-brand {
    font-size: 2.4vw;
    color: #74b2e4;
}

.navbar-brand:hover{
    color: #74b2e4;
}

.navbar .btn, .navbar .btn1 {
    margin-top: 1.5vw;
    padding: 1vw 3vw;
    color: white;
    border: 2px solid #74b2e4;
    background-color: #74b2e4;
    border-radius: 1vw;
}

.navbar .btn a{
    color: white;
    text-decoration: none;
}

.navbar .btn:hover{
    background-color: white;
    border: 2px solid #74b2e4;
    color: #74b2e4;
}

.navbar .btn a:hover{
    color: #74b2e4;
}


/*----------------------------- Section Styles ---------------------------------------*/

.banner{
    position: relative;
}

.banner div{
    width: 100%;
    height: auto;
}

.banner p{
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 5vw;
    font-weight: bold;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 1);
    z-index: 9999;
}


/*--------------------------------------------------------------------*/

.servicios {
    display: flex;

    padding: 10vw;
    justify-content: space-around;
    gap: 13vw;
    text-align: justify;

    margin-top: 5vw;
    margin-bottom: 5vw;
    padding: 1vw 2vw;

}
.servicios img{
    width: 10vw;
}

.servicios p{
    font-size: 1.5vw;
    
}


/*--------------------------------------------------------------------*/

.contact-form-section form{
    margin: 2em 10em;
    padding: 1em 2em;
}

.contact-form-section form input, .contact-form-section form select{
    border: 2px solid #74b2e4;
    font-size: 2vw;
    color: rgb(85, 85, 85);
}

.contact-form-section .btn{
    color: white;
}

.btn {
    margin-top: 2vw;
    padding: 1.5vw 3vw;
    background-color: #74b2e4;
}

.btn:hover{
    background-color: white;
    border: 2px solid #74b2e4;
    color: #74b2e4;
}

.contact-form-section label{
    font-size: 3vw;
}

.contact-form-section select{
    padding: .6vw 4vw;
    border-radius: 5px;
}



/*-----------------------------Texto de Agradecimiento--------------------------------*/

.contact-form-section h4{
    margin: 1em 2em 2em 2em;
    font-size: 5vw;
}


/*----------------------------- Mail de Contacto ---------------------------------------*/

.contacto{
    background-color: #74b2e4;
    padding: 1.5vw;
    border-bottom: 2px solid #FFFFFF;

    display: flex;
    justify-content: center;
    gap: 1vw;

    font-size: 2vw;
    color: #FFFFFF;
}

.fa-envelope{
    margin-top: .4vw;
}

.contacto :hover{
    color: black;
}


/*----------------------------- Footer Styles ---------------------------------------*/

footer{
    background-color: black;
    padding: 1em;
    display: flex;
    justify-content: space-around;
    color: white;

    font-size: 1.5vw;
}

footer .contacto a{
    color: white;
}

footer .microcomputers a{
    color: white;
}

.microcomputers a:hover{
    color: black;
}