:root{
    --bs-blue: #024873;
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}


body{
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    line-height: 2;
}



.encabezado{
  position: relative;
  animation: Izquierda 1s ease;
}

.encabezado2{
  position: relative;
  animation: Derecha 1s ease;
}

.encabezado span, .servicios{
  font-size: 7rem;
  font-family: 'Italianno', cursive;
    color: #024873;
    margin-bottom: 0;
    padding-bottom: 0;
}


@media(min-width:768px) {
  .encabezado span, .servicios{
    font-size: 10rem;
    
  }
}



h1, h2, h3{
  font-family: 'Raleway', sans-serif;
  font-size: 2rem;
  color: #024873;
}

h1{
  font-size: 5rem;
  color: #024873;
}


@media (min-width:768px) {
  h1{
      font-size: 8rem;
  }
}

hr {border: 0; height: 12px; box-shadow: inset 0 12px 12px -12px green;}


    
.letra{
  font-size: 1.5rem!important;
}



h2{
    font-size: 3rem;
}

h3{
    font-size: 2.5rem;
}


.img-logo{
    height: 25rem;
}





    
   
/**
    background-image: linear-gradient(
       to bottom right,
        #6fc79f 0%,
        #bcf190e1 20%,
        #1a87cfb7 40%,
        #6ed8d1 60%,
        #0bb1aebb 80%
    );

    background-size: 200% 200%;

    animation: movimiento 5s linear infinite alternate;

}

@keyframes movimiento{
    from{
        background-position: 0 0;
    }
    to{
        background-position: 100% 100%;
    }



**/


/**BARRA NAVEGACION**/
.navegacion{
  background-color: #024873;
  -webkit-box-shadow: 0px 10px 6px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 6px -4px rgba(0,0,0,0.75);
box-shadow: 0px 10px 6px -4px rgba(0,0,0,0.75);
}

.navbar-toggler{
    background-color: #ffffff;
}

.navbar-light .navbar-brand{
    color: #ffffff;
}



.nav-link{
    color: #ffffff;
    font-size: 1.4rem;
    transition: background-color .3s ease-in-out;
    font-family: 'Raleway', sans-serif;
    border-radius: 3rem;
    font-size: 1.7rem;
}

.nav-link:hover{
    background-color: #0368a7;
    color: #ffffff;
    
}



@media (min-width:768px) {
    .producto img{
        height: 43rem;
        width: 100%;
        object-fit: cover;
    }
}

.nuevo-sitio{
  margin-top: 120px;
}


.w{
  font-size: 2.5rem!important;
  color: #007DBF;
}



.servi{
  background-image: url(../img/back.webp);
}


.btn-success{
    background-color: #23A5D9;
    border: #024873;
}

.btn-success:hover{
    background-color:#23a5d994;
}

.bg-primary,
.btn-primary{
    background-color: #024873!important;
}


/* servicios */

@media(min-width:768px) {
    .producto img{
        height: 43rem;
       width: 100%;
       object-fit: cover;
    }  
}

.tama{
  font-size: 1.2rem;
}

@media (min-width:768px) {
  .tama{
    font-size: 1.8rem;
  }
}

.fondo{
  background-image: url(../img/opinion-bg.png);
  background-size: cover;
  background-repeat: no repeat;
  background-position: center center;
  height: 800px;
  position: relative;
  color: #fff;
}

.fondo::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(31, 31, 41, 0.473);
}

.blanco{
  position: absolute;
}


@media(min-width:768px) {
  .fondo{
      background-repeat: no-repeat;
      height: 580px;
  }

  .color{
      margin-bottom: 20px;
  }
  
}



.datos{
  font-size: 40px;
  padding-top: 30px;
  position: relative;
}

@media(min-width:768px) {
  .datos{
      font-size: 70px;
      padding-top: 100px;
  }
  
  .txt{
      font-size: 20px;
  }

  .blanco{
  margin-left: 240px;
  }

}


.espacio{
  margin-top: 20px;
  position: relative;
  animation: Arriba 1s ease;

}


@media(min-width:768px) {
.espacio{
  margin-top: 70px;
  border-right: #fff 1px solid;
}  

.espacio:last-child {
  border-right: none;
}

}







@keyframes show{
  from{
    opacity: 0;
    scale: 25%; 
  }

  to{
    opacity: 1;
    scale: 100%;
  }
}


  img{
    view-timeline-name: --image;
    view-timeline-axis: block;
    animation-timeline: --image;
    animation-name: show;
    animation-range: entry 25% cover 30%;
    animation-fill-mode: both;
  }




  @keyframes Izquierda{
    from{
      transform: translateX(-200%);
    }
    to{
      transform: translateX(0);
    }
  }



  @keyframes Derecha{
    from{
      transform: translateX(400%);
    }
    to{
      transform: translateX(0);
    }
  }


  @keyframes Arriba{
    from{
      transform: translateY(-200%);
    }
    to{
      transform: translateX(0);
    }
  }

















.categoria img{
    width: 10rem;
}

.boton-servicios{
    width: auto;
   padding: 1rem 2rem;
    font-size: 2rem;
    background-color: #024873;
}


h1{
    padding-top: 2rem;
    padding-bottom: 2rem;
}


footer{
    background-color: #024873;
}


.dropdown-menu{
    width: 100%;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 1.6rem;
    background-color: #007DBF;
}

 .menus:hover{
    background-color: #019bee;

}



.dropdown:hover .dropdown-menu{
    display: block;
    box-shadow: 3px 3px 3px #024873;
				
}




.fondo-ini{
  background-color: #007DBF;
}




.txt-titulos{
   color: #024873;
}

.imagen{
    height: 40rem;
}

@media (min-width:768px) {
  .imagen{
    height: 70rem;
} 
}

.texto{
    text-align: justify;
    font-size: 2rem;
}

.contenido{
    text-align: justify;
    padding-left:5rem;
    padding-right:5rem;
}

.icono{
    height: 5rem;
}

.img{
    height: 20rem;
    width: 20rem;
}

@media (min-width:768px) {
    .mapa{
        width: 100%;
        height: 400px;
    }
}
    



.img-ambu{
    height: 60rem;
}




@media (min-width:768px) {
    .video{
        width: 800px!important;
        height: 500px!important;
    }
}


.categoria img{
    transition-property: transform;
    transition-duration: 300ms;
    height: 50rem;
    width: 50rem;
}

.categoria img:hover{
    transform: scale(1.2);
}


.categoria1 img:hover{
    transform: scale(1.2);
}

.borde:hover {
  box-shadow: 0px 30px 80px 0 rgba(20,52,92,0.2);
  border-radius: 5px;
  border-color: #fff;
  background-color: #fff;
}

.borde{
  transition: all 0.3s ease-in-out;
}



.categoria1 img{
    transition-property: transform;
    transition-duration: 300ms;
    height: 10rem;
    width: 10rem;
}


.tramites{
  background-color: #fbfbfbda;
}



.tramites-text{
  color: #6D4A54;
}





.categoria11 .tramites-text::before{
  content: " ";
  display: block;
  margin: auto auto 2px auto;
  height: 1px;
  width: 20px;
  background-color: #009eb3;
  transition: all .4s ease;
}

.categoria11:hover p::before{
  width: 180px;
}




.iconos{
    width: 3rem;

}

.icono{
    width: 5rem;
}



.ambu img:hover{
    transform: scale(1.1);
}


.ambu img{
    transition-property: transform;
    transition-duration: 300ms;
    height: 90%;
    width: 90%;
}


.radio img:hover{
    transform: scale(1.1);
}


.radio img{
    transition-property: transform;
    transition-duration: 300ms;
    height: 50rem;
    width: 50rem;
}



video{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}




@media (min-width:768px) {
    video{
        
        width: 75%;
        height: 50%;
    }
}









.lista{
    font-size: 2rem;
}


.form-control{
    padding: 0.5rem;
    font-size: 1.6rem;
}



.color{
    color: red;
}



.btn-p{
    margin: 1rem 0;
    padding: 0.5rem 4rem!important;
    font-size: 2rem!important;
    font-weight: bold;
}





.categoria2 img:hover{
    transform: scale(1.2);
}


.categoria2 img{
    transition-property: transform;
    transition-duration: 300ms;
    height: 14rem;
    width: 14rem;
}


.publi{
    font-size: 2rem!important;
    font-weight: bold;
}






.whatsapp {
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
  }
  
  .whatsapp-icon {
    margin-top:13px;
  }



  .estado{
    height: 10rem;
    margin-bottom: 5rem;
  }
 

  @media (min-width:768px) {
    .estado{
        height: 20rem;
        margin-bottom: 5rem;
      }
     
  }
  

  .estado1{
    height: 35rem;
  }


  


  .contenedor img:hover{
    transform: scale(1.1);
}


.contenedor img{
    transition-property: transform;
    transition-duration: 300ms;
}


  .estado:hover {filter: saturate(180%);}




  .esta{
    height: 15rem;
  }



  .parra{
    font-size: 3rem;
    text-align: justify;
  }



/**

  #particles-js{
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: -1;
  }

**/

  .text-l{
    color: #024873;
    font-weight: bold;
  }




  .margen{
    margin-top: 5rem;
    margin-bottom: 3rem;
    font-size: 5rem;
  }


  .titu{
    font-weight: bold;
    font-size: 3rem;
  }

  .conte{
    font-size: 2rem;
  }
  



  .img1{
    height: 5rem;
    width: 5rem;
}


@media(min-width: 768px) {
    .img1{
        height: 7rem;
        width: 7rem;
    } 
}



.cuadro{
    border: #019bee 1px solid;
}

  button {
    font-size: 1.3rem;
    background: #3498db;
    color: #fff;
    border: 0.25rem solid #3498db;
    border-radius: 5px;
    padding: 0px 10px;
    margin: 1rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  button:hover {
    color: #3498db;
  }
  button::after {
    content: "";
    background: #ecf0f1;
    position: absolute;
    z-index: -1;
    padding: 0.85em 0.75em;
    display: block;
  }
  button[class^="slide"]::after {
    transition: all 0.35s;
  }
  button[class^="slide"]:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.35s;
  }
  button.slide_from_left::after {
    top: 0;
    bottom: 0;
    left: -100%;
    right: 100%;
  }


  .redondo{
    border-radius: 15px!important;
  }

  .t{
    font-size: 2rem;
  }


















  /*** ESTILOS BOTÓN SLIDE LEFT ***/
.ov-btn-slide-left {
    text-decoration: none;
    background:#0281cf ; /* color de fondo */
    color: #FFF; /* color de fuente */
    border: 1px solid #0275bd; /* tamaño y color de borde */
    padding: 10px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
  }
  .ov-btn-slide-left:hover {
    color: #fff; /* color de fuente hover */
  }
  .ov-btn-slide-left::after {
    content: "";
    background: #024873; /* color de fondo hover */
    position: absolute;
    z-index: -1;
    padding: 16px 20px;
    display: block;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 100%;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
  }
  .ov-btn-slide-left:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
  }







  
  /*** LOGIN ***/

  .cabeza {
    background-image: url("../img/1.jpg");
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }


  label {
    min-width: 80px;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  
  .container123 {
    width: 500px;
    padding: 20px;
    background: white;
    margin: auto;
    margin-top: 50px;
  }
  



  .titulo2{
    display: inline-block;
    position: relative;
    color: #024873;
    font-weight: bold;
    font-size: 5rem;
}

@media(min-width:768px) {
  .titulo2{
    font-size: 7rem;
  }
  
}



.titulo2::after,.titulo2::before{
    display: none;
}


@media(min-width:768px) {
  
.titulo2::after,.titulo2::before{
  display: block;
  content: "";
  position: absolute;
  width: 120px;
  height: 3px;
  background-color: currentColor;
  top: 0.9em;
}
}



h1::before{
  left: -140px;
}

h1::after{
  right: -140px;
}








  .titulo {
    text-align: center;
    border: solid rgb(176, 176, 209) 1px;
    border-style: dashed;
    padding: 15px;
    color: rgb(95, 93, 93);
  }
  .padre {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    color: rgb(128, 128, 128);
  }
  .nombre,
  .apellido,
  .usuario,
  .clave {
    display: flex;
    flex-direction: column;
  }
  input {
    padding: 10px;
  }
  input:focus {
    outline: solid rgb(158, 158, 158) 2px;
  }
  .cuenta {
    display: flex;
    flex-direction: column;
  }
  
  .boton {
    width: 100%;
    background: rgb(0, 132, 255);
    border: none;
    color: white;
    padding: 15px 0;
    font-size: 18px;
  }
  .cuenta a{
    padding: 10px;
    color: blue;
    font-weight: bold;
  }
  
  .alerta{
    text-align: center;
    color: red;
  }
  
  
  .success{
    text-align: center;
    color: rgb(31, 156, 0);
  }