/*============================================================================================*/
/* 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, #1D3B59, #004298), url('../img/front.png');
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}







#section2 {
   background-color: #f5f8fa;
   background: linear-gradient(144deg, #78797A, #F5F8FA 40%, #F5F8FA 70%,  #78797A);

   
}

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

#section4 {
  
  background: linear-gradient(144deg, #69AFBF, #fafbfc 40%, #fafbfc 70%, #69AFBF);
}


#section5 {
  
  background: linear-gradient(144deg, #6AA67F, #fafbfc 40%, #fafbfc 70%, #6AA67F);

}








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

}

#section7 {
 /* background: linear-gradient(144deg, #BF9B0B, #F1C40F, #BF9B0B);*/
  background: linear-gradient(144deg, #78797A, #F5F8FA 40%, #F5F8FA 70%,  #78797A);
  /*height: 90vh;  Ajusta esto a la altura que prefieras */
}





/*============================================================================================*/
/* NAVBAR */
/*============================================================================================*/

.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 12px 1px #343a40, 0 0 10px #343a40;
    outline: none;
    
  }


  .navbar-nav .nav-item .nav-link{
    color: #1D3644;
  }

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

  .navbar-nav .nav-item .nav-link:hover .fas {
    color: #F2AE2E; /* El color que quieres para el hover */
}

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

  .nav-item .nav-link.active {
    color: #F2AE2E !important;
  }
  
  .nav-link .fas {
    margin-right: 5px; 
    color: #1D3644;
    
}

/* MEDIAS QUERYS PARA EL NAVBAR */
@media screen and (max-width: 1024px) and (max-height: 768px) {
  .navbar-nav .nav-item .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em;
  }

  .nav-link .fas {
    margin-bottom: 5px; 
    font-size: 1rem;
  }

  #custom-search-input input[type='submit'] {
    background-image: url('../img/search.svg'); /* Reemplaza con la ruta a tu icono */
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    border: none;
    text-indent: -9999px; /* Esconde el texto del botón */
  }

 




 
}


@media screen and (max-width: 1024px) {
  #cards .item .title, #staff .item .title {
    bottom: 10px !important; 
}

.arrow-down {
  bottom: -5px !important; 
}


}





@media screen and (max-width: 1180px) and (max-height: 820px) {
  .navbar-nav .nav-item .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em;
  }

  .nav-link .fas {
    margin-bottom: 5px; 
    font-size: 1rem;
  }

  #custom-search-input input[type='submit'] {
    background-image: url('../img/search.svg'); /* Reemplaza con la ruta a tu icono */
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    border: none;
    text-indent: -9999px; /* Esconde el texto del botón */
  }

 




 
}



@media screen and (max-width: 1024px) and (max-height: 1366px) {
  .navbar-nav .nav-item .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em;
  }

  .nav-link .fas {
    margin-bottom: 5px; 
    font-size: 1rem;
  }

  #custom-search-input input[type='submit'] {
    background-image: url('../img/search.svg'); /* Reemplaza con la ruta a tu icono */
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    border: none;
    text-indent: -9999px; /* Esconde el texto del botón */
  }

 




 
}

@media screen and (max-width: 800px) and (max-height: 480px) {
  #section1 .titulo1, #section1 .titulo2   {
    font-size: 2.3rem !important;
}

.description
  {
      font-size: 0.8rem !important;
  }

  #section1 .titulo1 {
    margin-top: 300px !important;
  }
 
 
}

@media screen and (max-width: 960px) and (max-height: 600px) {
  #section1 .titulo1, #section1 .titulo2   {
    font-size: 2.3rem !important;
}

.description
  {
      font-size: 0.8rem !important;
  }

  #section1 .titulo1 {
    margin-top: 300px !important;
  }
 
 
}








/* FIN MEDIAS QUERYS PARA EL NAVBAR */
































  /* footer*/

.footer-container {
    display: block;
    position: relative;
    top: 0;
    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 */
    }
  }
  

  @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 */
    }
  }

    /* 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 */
      }
    }
  
  





 /* Estilos para teléfonos móviles */


 @media only screen and (min-width: 321px) and (max-width: 360px) {
  /* Estilos para pantallas entre 321px y 360px */

    #section1 .titulo1, #section1 .titulo2   {
      font-size: 1.2rem !important;
  }

  .description
    {
        font-size: 0.8rem !important;
    }

    #section1 .titulo1 {
      margin-top: 300px !important;
    }
  }







  @media only screen and (max-width: 360px){
    #section1 .titulo1, #section1 .titulo2   {
        font-size: 0.9rem !important;
    }
  
     .description
      {
          font-size: 0.8rem !important;
      }
  
      #section1 .titulo1 {
        margin-top: 300px !important;
      }
  
    }


    @media only screen and (max-width: 375px){
      #section1 .titulo1, #section1 .titulo2   {
          font-size: 1.2rem !important;
      }
    
       .description
        {
            font-size: 0.7rem !important;
        }
    
        #section1 .titulo1 {
          margin-top: 300px !important;
        }
    
      }
  

      @media only screen and (max-width: 414px){

        #section1 .titulo1, #section1 .titulo2   {
          font-size: 1.2rem !important;
      }

      .description
        {
            font-size: 0.7rem !important;
        }
        
      
          #section1 .titulo1 {
            margin-top: 300px !important;
          }
      
        }
    

        @media only screen and (max-width: 480px){

          #section1 .titulo1, #section1 .titulo2   {
            font-size: 1.17rem !important;
        }
  
        .description
          {
              font-size: 0.8rem !important;
          }
          
        
            #section1 .titulo1 {
              margin-top: 300px !important;
            }
        
          }
      









 /* 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: 400;
  letter-spacing: -1px;
  font-size: 34px;
  margin-top: 70px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.main_title h2.empresas {
  font-weight: 400;
  letter-spacing: -1px;
  font-size: 34px;
  margin-top: -10px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* 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;
}



/*Footer Paginas*/

.footer-container2 {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff; /* Color de fondo blanco */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 10px;
  border-radius: 10px;
  /*top: 12px;*/ /* comentado para que el footer se empalme con el contenido */
}

footer.navbar {
  position: relative;
  font-family: sans-serif;
  background-color: #ffffff; /* Color de fondo blanco */
  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;
}

.label-required::after {
  content: "*";
  color: #dc3545;
  margin-left: 2px; /* Un pequeño margen para separar el asterisco del texto de la etiqueta */
}


/*iconos de la tarjeta vista usuario*/

.contact_icons {
  display: flex;
  justify-content: space-between;
}

.contact_icons a {
  margin-right: 10px;
  font-size: 16px;
  color: #333;
  transition: color 0.3s ease;
}

.contact_icons a:hover {
  color: #F2AE2E;
}




.perfil_usuario {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh; /* vh = viewport height, esto asegura que el contenedor ocupe al menos toda la altura visible de la pantalla */
}


.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

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



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



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


.contact_icons2 a i{
  margin-top: 10px;
  margin-right: 10px !important;
  margin-bottom: 10px;
  font-size: 14px !important;
  color: #333 !important;
  transition: color 0.3s ease !important;
}

.left_icons2 a:hover i {
  color: #F2AE2E !important; 
  
}

a:hover .mapa {
  color: #D95525 !important;
}



.strip_list ul li a.perfil {
  color: #D95525 !important;
}

.recaptcha-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

/* Estilos para la navegación dentro del custom-header */
.custom-header .custom-navigation {
  background: #fff;
  display: inline-block;
  border-radius: 6px;
  height: 70px;
  width: 100%;
  margin-bottom: 30px;
  line-height: 70px;
  box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
}

.custom-header .custom-navigation ul li {
  float: left;
}

.custom-header .custom-navigation ul li a {
  font-size: 14px;
  font-weight: bold;
  color: #000;
  padding: 0 10px;
  line-height: 73px;
  display: block;
}

.custom-header .custom-navigation ul li a:hover {
  transition: all ease 0.3s;
}

.custom-header .custom-navigation ul li a:after {
  border-right: 1px solid #dfdfdf;
}

.custom-header .custom-navigation a.home-btn {
  color: #000;
  border-radius: 6px 0 0 6px;
  padding: 0px 24px;
  float: left;
  height: 70px;
  line-height: 70px;
 
  transition: all ease 0.4s;    
}

.custom-header .custom-navigation a.home-btn:hover {
  transition: all ease 0.3s;
}

.custom-header .custom-navigation a.home-btn i {
  font-size: 21px;
}

.custom-header .custom-navigation .site-btn {
  margin: 18px 18px 0 5px;  
}

.tab{
background: #f2ae2e !important;
border-radius: 6px 0 0 6px;
}




/* carusel profesionales */






#cards.owl-carousel .owl-dots .owl-dot.active span {
  background: #69AFBF !important;
}












/* fin carusel profesionales */






/* carusel empresas */

.business-logo img {
  width: 200px !important;
  height: auto;
  margin-top: 20px;
  border-radius: 50%; /* Esto hace que la imagen sea circular */
  object-fit: contain;
  display: block;
  margin: 0 auto;
   
}

.business-name h4 {
  font-family: 'Roboto', sans-serif; /* Usa una fuente sans-serif moderna */
  color: #fdfdfd; /* Un color neutro para la legibilidad */
  text-align: center;
  margin-top: 10px;
  transition: color 0.3s ease;
  font-family: "Poppins", Helvetica, sans-serif;
  font-size: 14px;
}

.business-name h4:hover {
  color: #1D3644; /* Cambia el color al pasar el ratón por encima */
}


.carousel-title {
  background-color:#6AA67F; 
  border: 1px solid #6AA67F;
  color: #6AA67F;
  cursor: pointer;
  padding: 5px 20px;
  transition: all 0.3s ease-in-out;
  border-radius: 30px;
}


.owl-carousel .item {
  margin: 35px 25px; /* Ajusta este valor según necesites */
}

/* Estilo para todos los ítems */
.owl-carousel .item {
    transition: transform 0.3s ease;
    opacity: 0.6; /* Hacer los ítems no centrales más tenues */
}

/* Estilo para el ítem central */
.owl-carousel .center .item {
    transform: scale(1.2); /* Agrandar el ítem central */
    opacity: 1; /* Hacer el ítem central completamente opaco */
}


#empresas.owl-carousel .owl-dots .owl-dot.active span {
  background: #6AA67F !important;
}

/* fin carusel empresas */






.justified-text p {
  text-align: justify;
}


.directora-image {
  border-radius: 7px; /* Bordes redondeados */
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1); /* Sombra */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transición suave */
}

.directora-image:hover {
  transform: scale(1.05); /* Efecto de zoom al pasar el ratón por encima */
  box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al pasar el ratón por encima */
}

/* estilos modal directorio*/
.btn-aceptar {
  background-color: #f2ae2e; 
  border-color: #f2ae2e; 
  color: #fff; 
}

.btn-aceptar:hover {
  background-color: #e6a123; 
  border-color: #e6a123; 
}

.sweet-alert-custom-content {
  text-align: justify;
  padding: 1px;
  font-size: 12px;
  /* Agrega aquí más estilos según tus necesidades */
}

.custom-confirm-button {
  background-color: #f2ae2e !important; /* Color de fondo del botón */
  border-color: #f2ae2e !important; /* Color del borde del botón */
}

/* Estilo para el hover del botón */
.custom-confirm-button:hover {
  background-color: #e6a123 !important; /* Oscurecer un poco el color para el efecto hover */
  border-color: #e6a123 !important;
}