body {
width: 100%;
margin: 0;
padding: 0;
height: 100vh;
font-family: 'Roboto', sans-serif;
}

h1 {
    text-transform: uppercase;
}

nav {
position:fixed;
width: 100%;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
border-bottom: 3px solid rgba(255, 255, 255, 0.7);
}

.nav-container {
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 2rem;
    margin: auto;
    padding: 1rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-logo p {
    font-size: 1.5rem;
    color: white;
    margin: 0;
    padding: 0;
    font-weight: bolder;
}

.nav-logo-child {
    width: 3rem;
    margin-right: .5rem;
}

.nav-menu {
    width: 50%;
}

.nav-menu ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.nav-menu ul li {
    list-style: none;
}

.nav-menu ul li a{
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: bold;
}

#carousel-container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}

/* Estilos para las imágenes del carrusel */
.carousel-image {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: -1;
filter: brightness(20%);
filter: contrast(150%);
object-fit: cover;
}

/* Capa de degradado */
#gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0.6), rgba(0, 0, 0, 0.8));
z-index: -1;
}

/* Estilos para la capa de texto y logo */
#overlay {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
color: white;
}


.header-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
}

.header-text h1 {
font-size: 3rem;
height: auto;
margin: 0;
padding: 0;
font-weight: bold;
text-align: center;
}

.header-text p {
    text-align: center;
    font-size: 1rem;
}

.overlay-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 40%;
    margin-top: 3rem;
}

.overlay-buttons a {
    font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
    justify-content: center;
  text-align: center;
  font-weight: bold;
  padding: 1rem 2rem;
  border: 3px solid white;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: white;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
  cursor: pointer;
}

.overlay-buttons a:before {
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: '';
    background-color: #003270;
    z-index: -1;
}

.overlay-buttons a:hover, .overlay-buttons a:focus{
   color: white;
}

.overlay-buttons a:hover:before, .overlay-buttons a:focus:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
  }
  
  .overlay-buttons a:active {
    transform: scale(0.9);
  }


.loader {
    width: 100%;
    height: 4rem;
    display: inline-block;
    background-color: #feb701;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.8) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.8) 75%, transparent 75%, transparent);
    font-size: 30px;
    background-size: 1em 1em;
    box-sizing: border-box;
    animation: barStripe 1s linear infinite;
  }
  
  @keyframes barStripe {
    0% {
      background-position: 1em 0;
    }
    100% {
      background-position: 0 0;
    }
  }

.nosotros {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23fcfcfc' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23fafafa' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23f7f7f7' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23f5f5f5' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23F2F2F2' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23f5f5f5' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23f7f7f7' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23fafafa' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fcfcfc' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFFFFF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    padding: 3rem 0;

}
.nosotros-container {
    width: 70%;
    display: flex;
    flex-direction: flex;
    align-items: center;
    justify-content: space-around;
}


.nosotros-galery {
    width: 40%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Aplica un margen a las imágenes para desplazarlas */
.nosotros-galery .img-1 img {
    margin-bottom: 1rem;
}

.nosotros-galery .img-2 img {
    margin-top: 1.5rem;
}

.nosotros-galery .img-3 img {
    margin-top: .6rem;
}

.nosotros-galery .img-4 img {
    margin-top: 1.5rem;
}

.nosotros .text {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nosotros .phone_text {
    display: none;
}

.nosotros-galery img {
    width: 15rem;
    height: 15rem;
    object-fit: cover;
    border-radius: 10px;
}

.eleginos {
background-color: #003270;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23003270' width='11' height='11'/%3E%3Crect fill='%2300316f' x='10' width='11' height='11'/%3E%3Crect fill='%2300306e' y='10' width='11' height='11'/%3E%3Crect fill='%2300306d' x='20' width='11' height='11'/%3E%3Crect fill='%23002f6c' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23002e6b' y='20' width='11' height='11'/%3E%3Crect fill='%23002d6a' x='30' width='11' height='11'/%3E%3Crect fill='%23002d69' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%23002c69' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%23002b68' y='30' width='11' height='11'/%3E%3Crect fill='%23002a67' x='40' width='11' height='11'/%3E%3Crect fill='%23002966' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%23002965' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23002864' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23002763' y='40' width='11' height='11'/%3E%3Crect fill='%23002662' x='50' width='11' height='11'/%3E%3Crect fill='%23002661' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23002560' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%2300245f' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%2300235e' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%2300235e' y='50' width='11' height='11'/%3E%3Crect fill='%2300225d' x='60' width='11' height='11'/%3E%3Crect fill='%2300215c' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%2300215b' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%2300205a' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%23001f59' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%23001e58' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%23001e57' x='70' width='11' height='11'/%3E%3Crect fill='%23001d56' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%23001c55' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%23001c55' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%23001b54' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23001a53' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23001952' x='80' width='11' height='11'/%3E%3Crect fill='%23001951' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23001850' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%2300174f' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%2300174e' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%2300164d' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%2300154d' x='90' width='11' height='11'/%3E%3Crect fill='%2300154c' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%2300144b' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%2300134a' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%23001249' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%23001148' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%23001047' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%23000f46' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%23000e46' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%23000c45' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%23000b44' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23000943' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23000842' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23000741' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23000540' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23000440' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%2300023f' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%2300013e' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%2300003d' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%2300003c' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23000000' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}

.porque-elegirnos {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
}


.porque-elegirnos img {
    width: 50%;
    height: 50rem;
    object-fit: cover;
}

.eleginos-text {
    color: white;
    margin-left: 5rem;
    text-align: left;
    width: 35%;
}

.eleginos-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 4rem;
    gap: 1rem;
}

.eleginos-card {
    color: #003270;
    font-weight: bold;
    background-color: #feb701;
    width: 100%;
    height: 3rem;
    border-radius: .5vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #003270;
    border-radius: .5vh;
    margin: 0 .5rem;
}

.icon {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #feb701;
}

.icon-serv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-serv svg {
    width: 85%;
}

.servicios {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.servicios h1 {
    margin: .5rem 0;
    width: 80%;
    text-align: center;
}

.servicios p {
    width: 40%;
    text-align: center;
}

.servicios-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.servicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20rem;
    height: 22rem;
    border: 2px solid #003270;
    border-radius: 15px;
    margin: auto;
    cursor: pointer;
}

.servicio:hover{
    background-color: #003270;
    color: white;
    transition: all .5s ease-in-out;
}

.servicio:hover h1{
    color: white;
    transition: all .5s ease-in-out;
}


.servicio:hover a {
    background-color: #feb701;
    color: black;
}

.servicio:hover .icon-serv {
    background-color: #feb701;
    transition: all .5s ease-in-out;
    fill: #003270;
}

.servicio h1 {
    color: #003270;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    margin-top: 1rem;
}

.servicio p {
    width: 90%;
    text-align: center;
}

.servicio a {
    width: 8rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #003270;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: .5px;
    border: 2px solid #003270;
    cursor: pointer;
    margin-top: 1rem;
}

.icon-serv {
    width: 3rem;
    height: 3rem;
    border: 2px solid #003270;
    border-radius: 15px;
    margin: 1rem;
}

.clientes {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1003%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(0%2c 18%2c 41%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c403.507C74.132%2c389.992%2c138.914%2c355.369%2c204.214%2c317.764C272.861%2c278.232%2c354.603%2c248.936%2c390.784%2c178.465C427.389%2c107.168%2c401.309%2c22.981%2c396.637%2c-57.028C391.5%2c-144.999%2c417.5%2c-245.23%2c362.046%2c-313.715C306.499%2c-382.316%2c205.096%2c-387.977%2c117.843%2c-401.337C39.884%2c-413.274%2c-35.822%2c-400.212%2c-113.494%2c-386.527C-200.987%2c-371.111%2c-315.104%2c-389.779%2c-364.99%2c-316.266C-416.188%2c-240.819%2c-345.274%2c-140.36%2c-342.386%2c-49.228C-340.132%2c21.897%2c-362.92%2c89.835%2c-349.904%2c159.796C-333.786%2c246.429%2c-330.727%2c351.743%2c-258.418%2c402.107C-186.272%2c452.357%2c-86.495%2c419.276%2c0%2c403.507' fill='%23000e20'%3e%3c/path%3e%3cpath d='M1440 1013.347C1538.298 1002.066 1637.997 1046.787 1730.817 1012.52 1835.395 973.912 1931.007 905.935 1988.934 810.69 2050.3289999999997 709.742 2102.4880000000003 581.171 2060.274 470.818 2018.042 360.418 1858.6109999999999 353.666 1780.252 265.17 1703.261 178.219 1715.747 23.19399999999996 1614.132-33.041000000000054 1511.761-89.69500000000005 1373.709-72.20000000000005 1270.616-16.870000000000005 1172.622 35.724000000000046 1138.162 154.378 1083.97 251.498 1040.468 329.459 992.3199999999999 405.618 985.2149999999999 494.61199999999997 978.366 580.402 1028.106 656.018 1044.937 740.419 1068.159 856.8679999999999 1005.173 1017.095 1102.868 1084.588 1199.3220000000001 1151.223 1323.532 1026.714 1440 1013.347' fill='%23001632'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1003'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}

.clientes-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.left-cont {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.left-cont h1 {
    font-size: 2rem;
    margin: 1.5rem;
    padding: 0;
}

.left-cont p {
    width: 60%;
    text-align: center;
    margin: 0;
}

.clientes-cont img {
    width: 50%;
    height: 100%;
}

.count-container {
    border-radius: 10px;
    padding: 1rem;
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.count-circle {
    border: 2px solid white;   
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
  }

  .count-cicle-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
  }

  .count-cicle-cont h2 {
        margin: 1rem 0;
        margin-bottom: 0;
        padding: 0;
        font-size: 1.5rem;
        font-weight: bold;
        width: 80%;
        text-align: center;
        color: white;
    }

.cont-carouselContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99;
    width: auto;
    margin: 2rem 0;
}


#carouselContainer {
    display: flex;
    width: 100%;
    max-width: 300px; /* Ajusta según tus necesidades */
    margin: auto;
    overflow: hidden; /* Oculta el desbordamiento horizontal */
    z-index: 99;
    border-radius: 15px;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease; /* Suaviza la transición de desplazamiento */
}

.carousel-item {
    min-width: 100%; /* Cada imagen ocupa todo el ancho del contenedor */
    transition: transform 0.5s ease;
}

#prevButton, #nextButton, #closeButton {
    width: 2.3rem;
    height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Fondo de los botones */
    border: none; /* Sin bordes */
    cursor: pointer; /* Cursor tipo puntero */
    z-index: 100; /* Asegura que estén por encima de las imágenes */
    border-radius: 100%;
    font-weight: bold;
    margin: 0 1rem;
    color: white;
    border: 2px solid white;
}

/* Estilos adicionales para interacción con los botones */
#prevButton:hover, #nextButton:hover{
    background-color: #ddd;
}

.stats {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 0 auto;
}

/* Botón de menú hamburguesa */
.nav-toggle {
    width: 3rem;
    height: 3rem;
    display: none; /* Oculto por defecto */
    cursor: pointer;
    z-index: 99;
    background-color: #003270;
    border-radius: 10px;
    border: none;
}

.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
    content: '';
    display: block;
    margin: auto;
    background-color: white;
    height: 3px;
    width: 25px;
    border-radius: 5px;
    transition: all .3s ease-in-out;
}

.nav-toggle .hamburger::before {
    transform: translateY(-8px);
}

.nav-toggle .hamburger::after {
    transform: translateY(5px);
}

#prevButton_servicio, #nextButton_servicio {
    display: none;
}

#readMoreBtn {
    display: none;
}

.contacto {
    background-image: url('/img/svg_back/back_contacto.svg');
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.cont-contact {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: white;
    border-radius: 10px;
    padding: 5rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.185); /* Sombra exterior */
}

.contacto_left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width:50%;
}

.contacto_left h2 {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-weight: bold;
    color: black;
}

.contacto_left p {
    text-align: left;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%; /* Ajusta al ancho del contenedor */
    padding: 10px; /* Espaciado interno */
    margin: 8px 0; /* Margen entre inputs */
    display: inline-block; /* Alineación */
    border: none; /* Borde */
    border-radius: 4px; /* Esquinas redondeadas */
    box-sizing: border-box; /* Cálculo de ancho y alto */
    background-color: #f5f4fa;
    font-size: .8rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    outline: none; /* Elimina el contorno predeterminado */
}


input[type="submit"] {
    width:100%;
    background-color: #003270; /* Color de fondo */
    color: white; /* Color de texto */
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer; /* Cursor tipo mano al pasar el mouse */
}

input[type="submit"]:hover {
    background-color: #003270; /* Color de fondo al pasar el mouse */
}

input::placeholder {
    color: #888; /* Color del texto del placeholder */
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

textarea.form-control {
    background-color: #f5f4fa;
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    padding: 10px; /* Espaciado interno */
    margin: 8px 0; /* Margen exterior */
    display: inline-block; /* Alineación */
    border: none; /* Borde sutil */
    border-radius: 4px; /* Bordes redondeados */
    box-sizing: border-box; /* El ancho y alto incluyen el padding y border */
    resize: vertical; /* Permite al usuario ajustar la altura del textarea */
    font-size: .8rem;
}

textarea.form-control:focus {
    outline: none; /* Elimina el contorno predeterminado al enfocar */
}

textarea.form-control::placeholder {
    color: #888; /* Color del texto del placeholder */
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}


.contacto_right {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
    margin-left: 3rem;
}

.info-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    height: 20rem;
}

.cont-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.cont-data svg {
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 1rem;
    background-color: #f5f4fa;
    border-radius: 100%;
    padding: .4rem;
    fill: #003270;
}

/* Escritorios extra grandes (menos de 1400px) */
@media only screen and (max-width: 1400px) {
    .nav-container {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 2rem;
        margin: auto;
        padding: 1rem;
    }
  }
  
  /* Escritorios grandes (menos de 1200px) */
  @media only screen and (max-width: 1199.98px) {
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #carousel-container {
        width: 100%;
        height: 100vh;
        position: relative;
        }

    .header-text {
        width: 90%;
    }
        
        
    .header-text h1 {
        font-size: 2rem;    
    }

    .logo_and_nav-toggle {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
    }

    .nav-container {    
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        display: none;
        width: 100%;
        text-align: center;
    }

    .nav-menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 1rem;
    }

    .nav-menu ul li {
        width: 60%;
        margin: 10px 0;
        padding: 1rem 0;
        border-bottom: #ffffff94 solid 1px;
    }

    .nav-menu ul li a {
        color: white;
        text-decoration: none;
        font-size: 1.2rem;
    }

    .nav-menu.is-active {
    display: block;
    }


    .nav_back {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .overlay-buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 80%;
        margin-top: 3rem;
    }


    .nosotros {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 0;
    
    }
    .nosotros-container {
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    
    
    .nosotros-galery {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .nosotros-galery .img-1,
    .nosotros-galery .img-2,
    .nosotros-galery .img-3,
    .nosotros-galery .img-4 {
        display: flex;
        justify-content: center;
    }
    
    .nosotros .text {
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .nosotros .phone_text {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .nosotros-galery img {
        width: 8rem;
        height: 8rem;
        object-fit: cover;
        border-radius: 10px;
    }

    #readMoreBtn {
        display: flex;
        background-color: #feb701; /* Amarillo para el fondo */
        color: #003270; /* Azul oscuro para el texto */
        border: none; /* Sin borde */
        padding: 10px 15px; /* Espaciado interno */
        font-size: 16px; /* Tamaño del texto */
        border-radius: 5px; /* Bordes redondeados */
        cursor: pointer; /* Cursor tipo puntero */
        transition: all 0.3s ease; /* Transición suave */
        margin-bottom: 1rem;
    }
    
    #readMoreBtn:hover {
        background-color: #fcd232; /* Amarillo claro para el fondo en hover */
        color: #003270; /* Azul oscuro para el texto en hover */
    }
        
    .porque-elegirnos {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    
    .porque-elegirnos img {
        width: 90%;
        border-radius: 10px;
    }
    
    .eleginos {
        padding: 1rem;
    }
    .eleginos-text {
        color: white;
        margin: 0;
        text-align: center;
        width: 90%;
    }
    
    .eleginos-cards {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 2rem;
        gap: 1rem;
    }
    
    .servicios {
        margin: 3rem 0;
        height: auto;
    }
    
    .servicios p {
        width: 90%;
    }
    
    .servicios-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
    }
    
    .servicio {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 15rem;
        height: 22rem;
        border: 2px solid #003270;
        border-radius: 15px;
        cursor: pointer;
    }

    #prevButton_servicio, #nextButton_servicio {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: none;
        background-color: #003270;
        color: white;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.2rem;
        margin: 0 1rem;
    }

    .servicio {
        display: none;
    }

    .servicio.activo {
        display: flex;
    }


    .clientes {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .clientes-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        padding: 2rem 0;
    }
    
    .left-cont {
        width: 100%;
        height: 100%;
    }
    
    .left-cont h1 {
        text-align: center;
    }
    
    .left-cont p {
        width: 70%;
        text-align: center;
        margin: 0;
    }
    
    .left-cont a {
        width: 10rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: white;
        text-decoration: none;
        font-weight: bold;
        letter-spacing: .5px;
        border: 3px solid white;
        cursor: pointer;
        margin: 1.5rem 0;
    }
    
    .left-cont a:hover {
        background-color: white;
        color: #003270;
        transition: all .5s ease-in-out;
    }
    
    .clientes-cont img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .count-container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .count-circle {
        position: relative;
        width: 10rem;
        height:10rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
        color: white;
        margin: 1rem;
      }

      .contacto {
        background-image: url('/img/svg_back/back_contacto.svg');
        background-size: cover;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }

      .cont-contact {
        width: 60%; /* Cambia el ancho del cont-contact en pantallas pequeñas */
        flex-direction: column; /* Cambia a dirección de columna */
    }

    .contacto_left,
    .contacto_right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
        margin-left: 0; /* Elimina el margen izquierdo */
    }

    .contacto_left p {
        width: 95%;
        text-align: center;
    }

    .cont-opt-conct {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .info-contact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 1rem;
        height: 15rem;
    }

    .cont-data {
        flex-direction: row; /* Cambia a dirección de columna para .cont-data */
        align-items: center; /* Alinea al inicio */
        justify-content: center; /* Alinea al centro */
        margin-top: 1rem; /* Agrega margen superior */
    }

    .cont-data svg {
        margin-right: 0.5rem; /* Reduce el margen derecho */
    }

    .stats {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 0;
        margin: 0 auto;
    }
  }
  
  /* Escritorios medianos (menos de 992px) */
  @media only screen and (max-width: 991.98px) {
    /* Reglas CSS aquí para escritorios medianos */
  }
  
  /* Tabletas y dispositivos pequeños de escritorio (menos de 768px) */
  @media only screen and (max-width: 768px) {

  }
  
  /* Teléfonos medianos (menos de 576px) */
  @media only screen and (max-width: 575.98px) {
    .overlay-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .overlay-buttons a {
        text-align: center;
        width: 10rem;
        margin: 1rem 0;
    }
  }