@font-face {
    font-family: 'Carnas';
    src: url('../fonts/Carnas-Black.eot');
    src: url('../fonts/Carnas-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Carnas-Black.woff2') format('woff2'),
        url('../fonts/Carnas-Black.woff') format('woff'),
        url('../fonts/Carnas-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Carnas';
    src: url('../fonts/Carnas-Bold.eot');
    src: url('../fonts/Carnas-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Carnas-Bold.woff2') format('woff2'),
        url('../fonts/Carnas-Bold.woff') format('woff'),
        url('../fonts/Carnas-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Carnas';
    src: url('../fonts/Carnas-Regular.eot');
    src: url('../fonts/Carnas-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Carnas-Regular.woff2') format('woff2'),
        url('../fonts/Carnas-Regular.woff') format('woff'),
        url('../fonts/Carnas-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root{
    --light-color:#ffffff;
    --secondary-color:#181c64;
    --terciary-color:#4d87fb; 
}
.color-light{
    color: var(--light-color)!important;
}
.color-secondary,
.color-secondary:hover,
.color-secondary:visited,
.color-secondary:focus{
    color: var(--secondary-color)!important;
}
.color-terciary{
    color: var(--terciary-color);
}
.bg-light{
    background-color: var(--light-color);
}
.fw-black{
    font-weight: 900;
}
html{
    font-size: 16px;
}
body{
    color: var(--light-color);
    background-color: var(--terciary-color);
    font-family: 'Carnas', sans-serif;
    font-weight: normal;
    line-height: 1;
}
.fs-1 {
    font-size: 3.8vw !important;
}
.fs-2 {
    font-size: 3.2vw !important;
}
.fs-3 {
    font-size: 2.6vw !important;
}
.fs-4 {
    font-size: 1.6vw !important;
}
.fs-5 {
    font-size: 1.2vw !important;
}
.bg-image{
    background-image: url('../images/new-bg-desktop.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0px -10px 0px #01396b;
}
.nota{
    max-width: 23.28vw;
    height: auto;
}
.box-logotipo{
    padding: 2vw 6vw 3vw;
}
.logotipo{
    max-width: 15vw;
    height: auto;
}
.btn{
    border: none;
    width: 95%;
    border-radius: .8rem;
}
.btn-shadow{
    width: 90%;
    height: 50%;
    display: block;
    box-shadow: 4px 8px 24px 7px #000;
}
.btn-light-1{
    box-shadow: inset 0px 4px 5px 0px #ffffffbd;
    background: linear-gradient(to bottom, #ffffff 85%, #a9abc3 100%);
    background-color: #ffffff;
}
.btn-light-2{
    box-shadow: inset 0px 5px 5px 0px #ffffff66;
    background: linear-gradient(to bottom, #92add2 85%, #4d618a 100%);
    background-color: #92add2;
}
.btn-light-3{
    box-shadow: inset 0px 5px 5px 0px #ffffff66;
    background: linear-gradient(to bottom, #cccccc 85%, #6f6f79 100%);
    background-color: #cccccc;
}
@media screen and (max-width:1399px) {
    html{
        font-size: 14px;
    }
}
@media screen and (max-width:1199px) {
    html{
        font-size: 12px;
    }
    
}
@media screen and (max-width:991px) {
    body{
        background: #0388FF;
        background: linear-gradient(180deg, rgba(3, 136, 255, 1) 40%, rgba(0, 28, 107, 1) 75%);
    }
    .vh-100{
        height: auto!important;
        min-height: 100vh;
    }
    .bg-image{
        background-image: none
    }
    .p0-mbl{padding: 0; margin-bottom: 2rem;}
    .box-logotipo {
        padding: 4vw 13vw 7vw;
    }
    .rounded-top-4{
        border-top-left-radius: unset!important;
        border-top-right-radius: unset!important;
        border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
        border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
    }
    .logotipo {
        max-width: 37vw;
    }
    .fs-1 {
        font-size: 12.2vw !important;
    }
    .fs-2 {
        font-size: 9.6vw !important;
    }
    .fs-3 {
        font-size: 8.6vw !important;
    }
    .fs-4 {
        font-size: 5vw !important;
    }
    .fs-5 {
        font-size: 3.5vw !important;
    }
    .btn.fs-5{
        font-size: 4.8vw !important;
    }
    .mobile.fs-2{
        font-size: 6.8vw ! Important;
    }
    .vw-85{
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
    }
    .border-light {
        border-color: #5bc3e2!important;
        border-width: 2px!important;
    }
    .btn{
        width: 90%;
        padding-top: 2rem !important;
        padding-bottom: 2.2rem !important;
    }
    .btn-light-1{
        background: linear-gradient(to bottom, #ffffff 92%, #a9abc3 100%);
    }
    .btn-light-2{
        background: linear-gradient(to bottom, #92add2 92%, #4d618a 100%);
    }
    .btn-light-3{
        background: linear-gradient(to bottom, #cccccc 92%, #6f6f79 100%);
    }
    .btn-shadow {
        width: 85%;
        height: 60%;
    }
    .py-5,.pt-5{
        padding-top: 5.8vw!important;
    }
    .py-5,.pb-5{
        padding-bottom:5.8vw!important ;
    }
    .my-5,.mt-5{
        margin-top: 5.8vw!important;
    }
    .my-5,.mb-5{
        margin-bottom:5.8vw!important ;
    }
    .nm-mobile{
        margin-top: -12vw;
    }
    .icone-social{
        max-width: 7vw;
        height: auto;
    }
    
    
}
@media screen and (max-width:575px) {
    html{
        font-size: 10px;
    }
    .btn-shadow{
        width: 85%;
        height: 59%;
        box-shadow: 4px 8px 12px 7px #000;
    }
    
}