/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
    width: 100%;
    position: relative;
  }
  
 
  
/*============================================================================================*/
/* secciones */
/*============================================================================================*/

#section1 {
   
    background: linear-gradient(144deg, #004298, #69AFBF, #004298);
}

#section2 {
   background-color: #f5f8fa;
   
}

#section3 {
  /*background: linear-gradient(144deg, #0e7fcb, #3498db, #0e7fcb);*/
  background: linear-gradient(144deg, #1D3B59, #458FD9 40%, #458FD9 70%,  #1D3B59);
    /*background-color: #3498db;*/
}

#section4 {
  
    background-color: #f5f8fa;
}

#section5 {
 /* background: linear-gradient(144deg, #046FD9, #458FD9, #046FD9);*/
  background: linear-gradient(144deg, #1D3B59, #458FD9 40%, #458FD9 70%,  #1D3B59);

}

#section6 {
 /* background: linear-gradient(144deg, #BF9B0B, #F1C40F, #BF9B0B);*/
  background: linear-gradient(144deg, #78797A, #F5F8FA 40%, #F5F8FA 70%,  #78797A);
}

#section7 {
    background-color: #f8f9fa;
     height: 150vh; /* Ajusta esto a la altura que prefieras */
}

/*
#section8 {
    background-color: #08c8a8;
    padding-bottom: 300px; /* Ajusta este valor al tamaño de tu footer */
/*}*/

/*============================================================================================*/
/* color menu */
/*============================================================================================*/

.navbar {
    position: relative;
    font-family: sans-serif;
    background-color: rgba(255, 255, 255, 0.074);
    border: 1px solid rgba(255, 255, 255, 0.222);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: .7rem;
    transition: all ease .3s;
  }
  
  .navbar:hover {
    box-shadow: 0px 0px 20px 1px #ffbb763f;
    border: 1px solid rgba(255, 255, 255, 0.454);
  }
  
  .navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 10px;
  }


  .glowing-nav {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.454);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: .7rem;
    transition: all ease .3s;
    background-image: linear-gradient(120deg, rgba(229,229,229,0.07) 30%, rgba(240,240,240,0.07) 38%, rgba(240,240,240,0.07) 40%, rgba(229,229,229,0.07) 48%);
    background-size: 200% 100%;
    background-position: 100% 0;
    box-shadow: 0px 0px 15px 1px #ffffff, 0 0 10px rgba(255, 255, 255, 0.5);
    outline: none;
  }
  
  .glowing-nav.section2-glow {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.454);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: .7rem;
    transition: all ease .3s;
    background-image: linear-gradient(120deg, rgba(229,229,229,0.07) 30%, rgba(240,240,240,0.07) 38%, rgba(240,240,240,0.07) 40%, rgba(229,229,229,0.07) 48%);
    background-size: 200% 100%;
    background-position: 100% 0;
    box-shadow: 0px 0px 15px 1px #5b7dcf, 0 0 10px #5b7dcf;
    outline: none;
    
  }

  .navbar-nav .nav-item .nav-link:hover {
    color: #F2AE2E;
  }

  .nav-item .nav-link.active {
    color: #F2AE2E !important;
  }




  /* footer*/

.footer-container {
    display: block;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 10px;
}

footer.navbar {
    position: relative;
    font-family: sans-serif;
    background-color: rgba(255, 255, 255, 0.074);
    border: 1px solid rgba(255, 255, 255, 0.222);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: .7rem;
    transition: all ease .3s;
}

footer.navbar:hover {
    box-shadow: 0px 0px 20px 1px #ffbb763f;
    border: 1px solid rgba(255, 255, 255, 0.454);
}



/* linea para separar condiciones y privacidad */

.separador{
   margin-left: -7px; 
}

/* linea para separar condiciones y privacidad */

/* hover links footer */
.list-unstyled li a {
    position: relative;
    transition: all 0.3s ease;
    text-decoration: none;
}

.list-unstyled li a:hover {
    color: #0f68b5 !important;
    padding-left: 5px;
}

.list-unstyled li a:hover::after {
    content: "→";
    position: absolute;
    right: -20px;
    transition: all 0.3s ease;
}

.list-inline-item a {
    transition: color 0.3s ease;
    text-decoration: none;
}

.list-inline-item a:hover {
    color: #0f68b5 !important;
}

/* logo footer*/

.logo-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 177px; /* height of the image */
}



.logo-container img {
    margin-top: 20px; /* adjust this value as needed */
}

/* This will apply when the viewport is 768px or less */
@media (max-width: 768px) {
    .logo-container img {
        width: 150px;
        height: auto;
    }
}

/* css hero*/

.section.hero_home.version_2 {
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #3e3f77;
    background-color: rgba(63, 64, 121, 0.9);
    padding: 0;
  }
  
  .hero-image {
    position: relative;
    margin-top: 5px;
    top: 50px;
    width: 263px;
    height: 350px;
  }
  
  /* Estilos para tablets */
@media (max-width: 768px) {
    .hero-image {
      top: 50px;
      width: 263px;  /* Ajusta el tamaño según tus necesidades */
      height: 300px;  /* Ajusta el tamaño según tus necesidades */
    }
  }
  
  /* Estilos para teléfonos móviles */
  @media (max-width: 480px) {
    .hero-image {
      top: 30px;
      width: 200px;  /* Ajusta el tamaño según tus necesidades */
      height: 250px;  /* Ajusta el tamaño según tus necesidades */
    }
  }

  @media (max-width: 375px) {
    .hero-image {
      top: 1px;
      width: 133px;  /* Ajusta el tamaño según tus necesidades */
      height: 160px;  /* Ajusta el tamaño según tus necesidades */
    }
  }
 

  @media (max-width: 360px) {
    .hero-image {
      top: 20px;
      width: 133px;  /* Ajusta el tamaño según tus necesidades */
      height: 160px;  /* Ajusta el tamaño según tus necesidades */
    }
  }

  
 /* card section 2*/



.altura {

  min-height: 390px; /* Ajusta este valor según tus necesidades */
}

.altura2 {
 
  min-height: 365px; /* Ajusta este valor según tus necesidades */
}

.btnp{

  background: #014ba0 !important;
}

.btnp:hover {
  background: #00276c !important;
}

.btn_1.medium {
  margin-top: -100px !important;
  padding: 12px 45px;
  font-size: 16px;
  font-size: 1rem;
}

.main_title h2 {
  font-weight: 300;
  letter-spacing: -1px;
  font-size: 36px;
  margin-top: 70px;
  text-transform: uppercase;
}

/* iconos seccion 3 */




.box_feat#icon_4 {
  position: relative; /* Para que el SVG se posicione en relación a este elemento */
}

.box_feat#icon_5 {
  position: relative; /* Para que el SVG se posicione en relación a este elemento */
}

.box_feat#icon_6 {
  position: relative; /* Para que el SVG se posicione en relación a este elemento */
}


.background-image {
  position: absolute; /* SVG en posición absoluta */
  top: 45px; /* Ajusta estos valores según lo necesario */
  left: 50%; 
  transform: translateX(-50%);
  width: 100px; /* Ajusta el tamaño del SVG */
  height: 100px; 
}


.btnps{

  background: #014ba0 !important;
}

.btnps:hover {
  background: #00276c !important;
}


/*--------------------*/
/*card comentarios y reviews*/


.bgcard{
  background-color: white; 
  color: rgb(55, 53, 53);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
}

.bgcard:hover {
  animation: pulse 1s;
}

@media screen and (max-width: 768px) {
  .bgcard {
      /* Estos estilos se aplicarán solo cuando la pantalla tenga una anchura máxima de 768px */
      background-color: white;
      color: rgb(55, 53, 53);
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.5s ease;
  }

  .bgcard:hover {
      animation: pulse 1s;
  }
}

/* flecha ultima seccion*/

.arrow-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(30, 29, 29);
  font-size: 3em;
  cursor: pointer;
}