@font-face {
    font-family: Montserrat-Bold;
    src: url(../fonts/Montserrat-Bold.ttf);
}
@font-face {
    font-family: Montserrat-ExtraBold;
    src: url(../fonts/Montserrat-ExtraBold.ttf);
}
@font-face {
    font-family: Montserrat-Regular;
    src: url(../fonts/Montserrat-Regular.ttf);
}

:root{
    --color-main:         #1B84FF;
    --color-gray:         #6E7692;
    --color-grayLight:    #F3F6FB;
    --color-blueLight :   #E9F4FF;
    --color-orangeLight:  #FDEDEF;
    --border-color-gray:  #B6BCCF;
    --border-radius-main:   20px;
    --margin-sections:      0 0 120px 0;
    --background-linear-mainB: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0.08%, rgba(27, 132, 255, 0.2) 52.03%, rgba(255, 255, 255, 0.2) 100%), #1B84FF;;
    --background-linear-mainE: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 2.41%, rgba(27, 132, 255, 0.2) 51.67%, rgba(0, 0, 0, 0.2) 100%), #1B84FF;;
}
.shadow-main{
    box-shadow: 5px 5px 4px rgb(27 132 255 / 30%);
}
.bkg-main{
    background: var(--color-main);
}
.bkg-orangeLight{
    background: var(--color-orangeLight);
}
.bkg-blueLight{
    background: var(--color-blueLight);
}
.bkg-linear-main{
    background: var(--background-linear-mainB);
}
.bkg-linear-main:hover{
    background: var(--background-linear-mainE);
    transition: all 1s ease-in;
}
.border-color-gray{
    border: 1px solid var(--border-color-gray);
}
.radius-main{
    border-radius: var(--border-radius-main);
}
.margin-section{
    margin: var(--margin-sections);
}
body{
    font-family: 'Montserrat-Regular';
    font-size: 20px;
}
ul{
    list-style-type: none;
}
h2{
    font-family: 'Montserrat-ExtraBold';
    font-size: 40px;
}
h4{
    font-family: 'Montserrat-Bold';
}
header > .container-fluid{
    background: var(--color-grayLight);
}
.navbar{
    box-shadow: 0px 20px 10px 0px #00000008;
}
.nav-link, .boxSocialIcons i{
    color: var(--color-gray)!important;
}
main{
    margin: 0 180px;
}
header > .container-fluid, header > .navbar{
    padding: 0 180px;
}
#principal{
    height: calc(100vh - 200px);
}
#principal h1{
    font-family: 'Montserrat-ExtraBold';
}
#principal span{
    color: var(--color-main);
}
#principal a{
    border-radius: 14px;
    transition: 1s;
}
#principal a:hover{
    box-shadow: none;
    transition: 1s;
}
#misionvision .boxIcon{
    width: 80px;
    height: 80px;
}
#servicios li{
    font-size: 14px;
}
#ubicacion span{
    font-family: 'Montserrat-Bold';
}
footer p{
    font-size: 14px;
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px), (max-width: 767.98px), (max-width: 991.98px){
    header > .container-fluid, header > .navbar{
        padding: 0 40px;
    }
    main{
        margin: 0 30px!important;
    }
    #principal{
        height: inherit;
    }
}