@font-face {
    font-family: "nunito-regular";
    src: url("../font/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf");
}

@font-face {
    font-family: "raleway-regular";
    src: url("../font/Raleway-Regular.ttf");
}

@font-face {
    font-family: "rubick-regular";
    src: url("../font/Rubik-Regular.ttf");
}

.menu {
    font-family: "nunito-regular";
    font-weight: 700;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0px;
    background-color: transparent;
    /* Color inicial */
    transition: background-color 0.8s ease;
    /* Transición suave */
}

.menu .nav-item a {
    color: #fff;
}

.menu.scrolled {
    background-color: #ffffff;
    /* Color al hacer scroll */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.21);
    z-index: 1200;
}


/* Opcional: cambiar color de los enlaces */

.menu.scrolled nav a {
    color: #0e2939;
}

.menu img {
    max-width: 100%;
}

.menu.scrolled img {
    max-width: 70%;
}

.inicio {
    background-image: url(../img/fondoinicio.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    padding: 14% 10%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}

.inicio h1 {
    text-align: center;
    font-size: 3.2vw;
    margin-bottom: 3%;
    color: #fff;
    font-family: "nunito-regular";
    font-weight: 700;
}

.recini {
    font-size: 1.7vw;
    color: #c7dbff;
    text-shadow: 2px 2px 8px #000000;
    font-weight: 500;
    margin-bottom: 3%;
    font-family: "rubick-regular";
}

.botonpr {
    width: 55% !important;
    padding: 2%;
    border-radius: 8px;
    background-color: #0e2939;
    color: #fff;
    border-color: transparent;
    font-size: 1.5vw;
    font-family: "nunito-regular";
    font-weight: 500;
}

.botonpr:hover {
    background-color: #084063;
    transition: background-color 0.4s ease;
}

.botonvd {
    width: 50% !important;
    padding: 1%;
    border-radius: 8px;
    background-color: #ffffffac;
    color: #084063;
    border-color: transparent;
    font-size: 1.5vw;
    font-family: "nunito-regular";
    font-weight: 500;
}

.botonvd img {
    max-width: 15%;
}

.botonvd:hover {
    background-color: #ffffff;
    transition: background-color 0.4s ease;
    color: #084063;
}

.infolbtx {
    padding: 5% 5%;
    font-size: 18px;
    font-family: "rubick-regular";
    color: #454545;
}

.infolbtx img {
    max-width: 100%;
    margin: 5% 0%;
    padding: 0% 5%;
}

.infolbtx h2 {
    color: #80807f;
    font-family: "nunito-regular";
    font-weight: 700;
}

.regcon {
    padding: 5% 0%;
    background-color: #F4F8FA;
}

.regreg {
    margin: 5% !important;
    padding: 5%;
    border-radius: 8px;
    background-color: #4c8fb8;
    color: #fff;
    font-size: 20px;
    text-align: center;
    box-shadow: 2px 2px 2px #747474;
}

.cfuncio {
    background-color: #ffffff;
    padding: 5% 18%;
}

.cfuncio h2 {
    text-align: center;
    margin-bottom: 5%;
    color: #80807f;
    font-family: "nunito-regular";
    font-weight: 700;
}

.numero {
    width: 56px !important;
    height: 56px;
    border-radius: 50%;
    background-color: #80807f;
    text-align: center;
    color: #ffffff;
    font-size: 25px;
    padding-top: 5px;
    margin: 0% 5%;
}

.textpe {
    padding: 0% 0% 5% 0%;
    font-family: "rubick-regular";
    font-size: 18px;
}

.textpe h4 {
    color: #4c8fb8;
}

.venben {
    background-color: #0e2939;
    height: 800px;
}

.recvenben {
    position: absolute;
    padding: 8% 15% !important;
    color: #fff;
    width: 100%;
    font-size: 18px;
    text-align: center;
    font-family: "rubick-regular";
}

.recvenben img {
    max-width: 90px;
    margin: 2% 0% 4% 0%;
}

.recvenben h2 {
    text-align: center;
    margin-bottom: 5%;
    font-family: "nunito-regular";
    font-weight: 700;
}

.intart {
    padding: 5%;
}

.intart img {
    padding: 5%;
    max-width: 100%;
}

.intarttex {
    font-size: 18px;
    padding: 5%;
    font-family: "rubick-regular";
}

.videosm {
    background-color: #F4F8FA;
    padding: 5%
}

.contacto {
    padding: 5%;
}

.contacto h2 {
    color: #80807f;
    font-family: "nunito-regular";
    font-weight: 700;
    margin-bottom: 0%;
    text-align: center;
}

.readre {
    margin: 2% !important;
    padding: 5%;
    border-radius: 8px;
    color: #0e2939;
    font-size: 18px;
    text-align: center;
    box-shadow: 0px 0px 16px #b2b2b2;
    text-align: center;
    color: #0e2939;
    font-weight: 500;
    font-family: "rubick-regular";
}

.videosm h2 {
    text-align: center;
    color: #80807f;
    font-family: "nunito-regular";
    font-weight: 700;
}

.footer {
    background-color: #0e2939;
    color: #fff;
    text-align: center;
    padding: 2%;
}

.botoncont {
    width: 50% !important;
    padding: 1%;
    border-radius: 8px;
    background-color: #0e2939;
    color: #ffffff;
    border-color: transparent;
    font-size: 1.5vw;
    font-family: "nunito-regular";
    font-weight: 500;
}

.botoncont:hover {
    background-color: #084063;
    transition: background-color 0.4s ease;
    color: #ffffff;
}

.modal-content2 {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: #69696985;
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid rgb(255 255 255 / 82%);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}

.btns2 {
    color: #fff;
    background-color: #0E2939;
    border: none;
    padding: 1% 2%;
    border-radius: 8px;
}

.modalRD {
    --bs-modal-width: 75% !important;
}

@media only screen and (max-width: 1250px) {
    .inicio h1 {
        font-size: 35px;
        margin: 10% 0% 5% 0%;
    }
    .recini {
        font-size: 22px;
    }
    .botonpr {
        padding: 2% 3%;
        font-size: 18px;
        width: 85% !important;
    }
    .botonvd {
        font-size: 18px;
        width: 85% !important;
    }
    .botonvd img {
        max-width: 8%;
    }
    .cfuncio {
        padding: 5% 10%;
    }
    .botoncont {
        padding: 2% 3%;
        font-size: 18px;
        width: 85% !important;
    }
}

@media only screen and (max-width: 992px) {
    .venben {
        height: 1100px;
    }
}

@media only screen and (max-width: 650px) {
    .inicio {
        padding: 15% 5%;
        background-image: url(../img/fondoiniciomb.jpg);
    }
    .inicio h1 {
        font-size: 25px;
        margin: 15% 0% 5% 0%;
    }
    .recini {
        font-size: 18px;
    }
    .botonpr {
        padding: 2% 5%;
        font-size: 15px;
    }
    .botonvd {
        font-size: 15px;
    }
    .botonvd img {
        max-width: 6%;
    }
    .infolbtx {
        padding: 15% 5%;
    }
    .cfuncio {
        padding: 5% 5%;
    }
    .regcon {
        padding: 15% 0%;
    }
    .recvenben img {
        max-width: 90px;
    }
    .contacto h2 {
        margin-bottom: 10%;
    }
}

@media only screen and (max-width: 575px) {
    .venben {
        height: 1600px;
    }
}