@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/fondoinicio2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    padding: 14% 10%;
}
.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;
}
@media only screen and (max-width: 1250px) {
    .inicio{
    padding: 8% ;
}
    .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%;
}
.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;
}
}