body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #fff;
}

.nav{
display: flex;
flex-direction: row-reverse;
background-color: #0074ff;
height: 3.5em;
font-size: 1.3em !important;
color: #fff;
text-decoration: none;
}

.nav a{
    text-decoration: none;
    color:#fff;
    padding-right: 1%;
    padding-top:1% ;
}

.nav a:hover{
    color: rgb(76, 218, 112);
}

/*.nav__logo img{
    width: 100px;
    position: absolute;
    left: 20px;
    top: 2px;
}*/

.nav__logo img{
    width: 50px; 
    position: absolute;
    left: 20px;
    top: 2px;
}


main{
    background-color: #fff;
}





.main__img img {
    width: 100%;
    height: 550px;
    display: block;
}

.main__principal{
    margin: auto;
    width: 80%;
    padding: 0 1% 0 1%;
    text-align: justify;
    font-size: 1.7em;
}



footer{
    background-color:#008cff;;
    color: #fff;
    height: auto;
}

.footer__derechos{
    padding: auto;
    display: inline;
}

.footer_direccion{
    margin: 0 0 0 5%;
    padding: 0 0 0 0;
}

.contact_info{
    background-color: rgb(112, 200, 226);
    display: flex;
    align-items: row;

}

.contact_info h1{
    margin: 0 15% 1% 20%;
}

.main__us-img img {
    display: block;
    /* Para permitir la configuración de los márgenes automáticos */
    margin: 5% auto;
    /* Establece los márgenes superior e inferior a 0 y los laterales automáticos para centrar horizontalmente */
}


.contact__map h1{
    margin: 2% auto 2% 2%;
} 

.contact__input{
    margin: auto 10px auto auto;
    padding: 5px;

}

.contact__input input{
    width: 65%;
    height: 30px;
    margin: 30px 0 0 40px;
    color: #878787;
    background: #f5f5f5;
    border: none;
    font-size: 25px;
}

.contact__input h1{
margin: 30px 0 0 40px;

}
.contact__input textarea{
    width: 85%;
    height: 400px;
    margin: 30px 0 0 40px;
    color: #878787;
    background: #f5f5f5;
    border: none;
}

.contact__input button{
    height: 50px;
    width: 200px;
    margin: 30px 10px 0 40px;
    color: #fff;
    background: #7ab1c2;
    border: none;
    }

.menu-container{
    display: none;
}


  .principal-top-container__a-resonsive {
      display: none;
  }

  .hamburger {
    display: none;
  }

.main__us{
    display: flex;
}

.main__us-text{
    width: 50%;
    margin: 1%;
    font-size: 1.3em;
}

.main__us-img{
    width: 50%;
    background-color: #d3faff;
}

.main__us-img img {
    width: 350px;
    position: relative;
    left: 2%;

}

.main__services h1 {
    padding: 1% 5% 1% 5%;
    color: rgb(85, 82, 63);
    width: 90%;
}

.main__services-container{
    padding: 1% 5% 1% 5%;
    font-size: 1.5em;
}

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

.main__services-container{
    display: flex;
    flex-direction: row;

}

.main__services-container img{
    width: 400px;
    height: 400px;
}

.container-1{
    background-color: rgb(249, 246, 148);
    width: 100%;
}

.container-2 {
    background-color: rgb(148, 249, 168);
    width: 100%;
}

.container-3 {
    background-color: rgb(148, 183, 249);
    width: 100%;
}
.container-4 {
    background-color: rgb(229, 172, 255);
    width: 100%;
}


.slide img {
    height: 80vh;
}


.bg{
background-color: #008cff;
}
.img-nav{
    height: 100px;
}


/*cambio de color menu desplegable*/

.active-dropdown-item:active {
    background-color: #008cff !important;
    color: #ffffff !important;
        /*color: rgb(139, 23, 157) !important;*/
}


/*cambio de color menu*/
.active-nav-link {

    color: #ffffff !important;
    /*color: rgb(139, 23, 157) !important;*/
}



@media (max-width: 991px) {
    .sidebar {
        background-color: #0073ff79 !important;
        backdrop-filter: blur(10px) !important;
    }

}

@media (min-width: 1px) and (max-width: 700px) {


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

    .main__services-container {
        display: flex;
        flex-direction: column;

    }

    .main__us-text {
        width: 100%;
    }

    .main__us-img {
        width: 100%;
    }

    .main__services-container img {
        width: auto;
        height: 400px;
    }
}