html, body, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
.btn.btn-primary{
  margin-left: auto;
  margin-top: auto;
  display: flex;
}
#codigoLugar , #codigoJuris, #tipojuris{
  width: 110px; /* o cualquier valor que desees */
}

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #edeef6;
  font-family: 'Poppins', sans-serif;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}
button {
  
  background-color:#78b9ff;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 14px;
  padding: 10px 25px;
}
.boton{
  background-color:#78b9ff;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 14px;
  padding: 10px 25px;
}
/* NUEVO FORM VENTANA MODAL EMERGENTE   */

/* *FIN NUEVO FORM VENTANA MODAL EMERGENTE   */
header {
  background-image:url('/static/assets/images/2.png');
  padding: 10px;
  border-radius: 50px 8% 100cm 0.2em;
  background-size: cover;
   
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: bold;
  margin-left: 100px;
  font-size: 1.5em;
}

.menu {
  display: flex;
}

.menu a {
  text-decoration: none;
  color: #1e1e1e;
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 9px ;

}
.modal header{
  background-color: #78b9ff;

}
.hamburger-menu {
  display: none;
  cursor: pointer;
  
}

@media screen and (max-width: 900px) {
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 10px;
    background-color: #f0f0f0;
    z-index: 1;
   
    width: 250px; /* Ancho del menú cuando está desplegado */
  }

  .menu a {
    margin: 5px;
    text-align: center;
  }

  .hamburger-menu {
    display: block;
  }
}
.body{
    background:#ebebec;

    transition: all .5s;
    padding: 1px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dark{
    background: transparent;
    /* //background-image: linear-gradient(90deg, #e0b722, #a1ccfd); */
    display: inline-block;
    padding: 10px 30px;
    border: 3px solid #fff;
    border-radius: 50px;
    background-clip: padding-box;
    position: relative;
    color: #FFF;
      box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
    transition: all .25s;
    border-color: #a1ccfd;
    background: #a1ccfd;
  }
  .veen{
    width: 70%;
    background: rgba(255,255,255,.5);
    min-height: 400px;
    display:table;
    position: relative;
    box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
    border-radius: 40px;
  }
  form {
    display:block; /* Cambia la presentación del formulario */
     /* Cambia los márgenes del formulario */
  }
  
  .veen > div {
    background-color:#9ad6e0;
   
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    color: #fff;
    border-radius: 40px;
  }
  .veen button{
    background: transparent;
    /* //background-image: linear-gradient(90deg, #e0b722, #a1ccfd); */
    display: inline-block;
    padding: 10px 30px;
    border: 3px solid #fff;
    border-radius: 50px;
    background-clip: padding-box;
    position: relative;
    color: #FFF;
      box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
    transition: all .25s;
  }
  .veen button.dark{
    border-color: #a1ccfd;
    background: #a1ccfd;
  }
  /* .veen .move button.dark{
    border-color: #e0b722;
    background: #e0b722;
  } */
  .veen .splits p{
    font-size: 18px;
  }
  .veen button:active{
    box-shadow: none;
  }
  .veen button:focus{
    outline: none;
  }
  .veen > .wrapper {

    position: absolute;
    height: 120%;
    top: -10%;
    left: 5%;
    background: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
    transition: all .5s;
    color: #303030;
    overflow: hidden;
  }
  .veen .wrapper > form{

    padding: 15px 30px 30px;
    width: 100%;
    transition: all .5s;
   background-image: url(/src/static/assets/images/diccionario.jpg);
    width: 100%;
  }
/* .veen .wrapper > form:focus{
outline: none;
} */
  .veen .wrapper #login{

    padding-top: 20%;
    visibility: visible;
  }

  .veen .wrapper.move #register{
    transform: translateY(-80%) translateX(0%);
    visibility: visible;
  }
  .veen .wrapper.move #login{
    transform: translateX(-100%);
    visibility: hidden;
  }
  .veen .wrapper > form > div {
    position: relative;
    margin-bottom: 15px;
  }
  .veen .wrapper label{
    border-radius: 50px;
    position: absolute;
    top: -7px;
    font-size: 12px;
    white-space: nowrap;
    background: #fff;
    text-align: left;
    left: 15px;
    padding: 0 5px;
    color: #999;
    pointer-events: none;
  }
  .veen .wrapper h3{
    margin-bottom: 25px;

  }
  .veen .wrapper input{
    border-radius: 10px;
    height: 40px;
    padding: 5px 15px;
    width: 100%;
    border: solid 1px #999;
  }


  @media (max-width: 767px){
    .veen{
      padding: 5px;
      margin: 0;
      width: 100%;
      display: block;
    }
    .veen > .wrapper{
      position: relative;
      height: auto;
      top: 0;
      left: 0;
      width: 100%;
    }
    .veen > div{
      display: inline-block;
    }
    .splits{
      width: 50%;
      background: #fff;
      float: left;
    }
    .splits button{
      width: 100%;
      border-radius: 0;
      background: #505050;
      border: 0;
      opacity: .7;
    }
    .splits button.active{
      opacity: 1;
    }
    .splits button.active{
      opacity: 1;
      background: #a1ccfd;
    }
    .splits p{
      display: none;
    }
    .veen > .wrapper.move{
      left: 0%;
    }
  }

/* input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
box-shadow: inset 0 0 0 50px #fff
} */


/* Estilos generales para los divs de servicio */
.services {
  background-color: #f0f0f0;
  padding: 30px 0;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
}

/* Centrar verticalmente las imágenes de los iconos */
.service-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ajusta el tamaño del contenedor del icono según tus necesidades */
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
}

.service-item .icon img {
  max-width: 100%;
  max-height: 100%;
}




/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/
.services .service-item:hover .icon img {
  margin-top: -10px;
}

.services .service-item {
  position: relative;
  margin-top: 95px;
}

.services .service-item .icon {
  width: 190px;
  height: 190px;
  text-align: center;
  line-height: 190px;
  background-color: #78b9ff;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: -95px;
}

.services .service-item .icon img {
  max-width: 86px;
  transition: all .2s;
}

.services .service-item .main-content {
  border-radius: 25px;
  padding: 80px 30px 50px 30px;
  background-color: #f1f0fe;
  margin-bottom: 30px;
  margin-right: 80px;
  transition: all .4s;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 30px;
  transition: all .4s;
}

.services .service-item p {
  color: #4a4a4a;
  margin-bottom: 25px;
}
/* Estilos para el diseño de escritorio */
@media (min-width: 768px) {
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Espacio entre los divs de servicio */
  }

  .col-lg-4 {
    flex: 0 0 calc(33.3333% - 20px); /* Ancho de las columnas (tres en una fila) */
  }
}

/* Estilos para el diseño de dispositivos móviles */
@media (max-width: 767px) {
  .row {
    display: flex;
    flex-direction: column;
  }

  .col-md-6 {
    width: 100%;
  }
}