body {
    font-family:'Winky Rough';
    margin: 0;
    padding: 0;
}
ul, li{
   list-style: none; 
}
a{
    text-decoration: none;
}
h1, h2{
    font-family: 'Oswald';
    font-weight:400 ;
    margin-top: 0;
}
h2{
    justify-self: center;
}
p{
    font-size: 20px;
}
.header{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 4.5rem;
    position: absolute;
    top: 0;
    background: #00000000;
    left: 0;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
    backdrop-filter: blur(10px);
    transition: all 1.5s ease;
}
.logo{
    width: 30%;
}
.logo img{
    height: 3.5rem;
}
.visible{
    display: flex;
}
.invisible{
    display: none;
}
nav{
    width: 40%;
}
.menuToggle{
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.menuToggle span{
    display: block;
    width: 26px;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
}
.menu{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.liMenu a{
    font-size: 20px;
    text-transform: capitalize;
}
.white{
    color: white;
}
.black{
    color: black;
}
.menu a.active {
  color: #36A9E1;
  font-weight: bold;
}
.liMenu a:hover{
    color: #36A9E1;
}
.head{
    position: relative;
    top: 0;
    width: -webkit-fill-available;
    padding: 17%;
    color: white;
    background-image: url('../assets/home/backcity.png');
    background-size: cover;
    background-position: center;
    font-size:larger;
    font-family: sans-serif;
    font-size: 1.75rem;
}
.head h1{
    transform-origin: left;
    transform: scaleX(2);
    animation: revelar 1.5s ease forwards;
}
.services{
    background-image:url('../assets/careers/background.png') ;
}
.services li{
    margin: 20px 0;
}
.services li:last-child{
    margin: 20px 0 0 0;
    padding-bottom: 50px;
}
.service{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: justify;
}
.service img{
    height: 300px;
    border-radius: 15px;
    
}
.service div{
    width: 35%;
    margin: 0 25px;
}
.seccion h1 {
    padding-top: 70px;
    justify-self:center;
}
#us{
    background: darkblue;
}
.misVis{
    background-image: url('../assets/careers/careers_3.jpg');
    width: -webkit-fill-available;
    background-size: cover;
    background-position: center;
    color: white;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
.misVis::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.785);
    backdrop-filter: blur(10%);
}
.aboutUs h1, .aboutUs p, .aboutUs h2{
    position: relative;
    z-index: 3;
    padding: 0 75px 0 75px;
    text-align: justify;
}
.imgMisVis{
    position: absolute;
    height: 250px;
    width: 250px;
    border-radius: 15px;
    display: flex;
    background-image: url('../assets/images/carousel/image2.jpg');
    background-size: cover;
    right: 16%;
    top: 10%;
    z-index: 2;
    box-shadow: 7px 7px 25px black;
}
.imgMisVis2{
    position: absolute;
    height: 250px;
    width: 250px;
    border-radius: 15px;
    display: flex;
    background-image: url('../assets/images/carousel/image1.jpg');
    background-size: cover;
    right: 8%;
    top: 35%;
    z-index: 3;
    box-shadow: 7px 7px 25px black;
}
#us{
    width: 100%;
    position: relative;
    justify-items: left;
    text-align: center;
    padding-bottom: 10%;
    font-size: 25px;
    background: #F6F6F6;
    color: black;
    background-image: url('../assets/home/fondoCuadros.png');
}
#us h1{
    justify-self: left;  
    text-align: center;
    padding-top: 75px
}
#us p{
    width: 50%;
    margin-bottom: 0;
}
.mis{
    width: 100%;
    position: relative;
    text-align: center;
    padding: 70px 0  70px 0;   
}
.vis{
    width: 100%;
    position: relative;
    text-align: center;
    padding: 70px 0 70px 0;
}
.values{
    grid-column: 1 / -1;
    width: 90%;
    padding: 0 4% 3% 4%;
}
.values h1{
    text-align: center;
    padding-top: 25px;
    margin-bottom: 35px;
}
.valuesGrid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.valueItem{
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    background: #ffffffbb;
    padding: 22px;
}
.valueItem h2{
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
    justify-self: start;
}
.valueItem p{
    margin: 0;
    font-size: 18px;
    padding: 0;
    text-align: left;
}
.contactUs{
    display: flex;
    background-image: url('../assets/images/background_general__.jpg');
    width: -webkit-fill-available;
    background-size: cover;
    background-position: center;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 92vh;
}
.inputFocus{
    transform: translate(5px, 0px) !important;
    color: #36A9E1  !important;
    font-size: 12px !important;
    margin: 5px 0 5px 0;
}
.contactUs label{
    color: black;
    font-size: 18px;
    transform: translate(10px, 28px);
    transition: all .37s ease-out;
    position: relative;
    z-index: 2;
}
.contactUs input, .contactUs textarea{
    position: relative;
    padding: 5px 5px 8px;
    font-size: 18px;
    border-radius: 4px;
    outline: none;
    border: #36A9E1 1px solid;
    text-align: start;
}
.contactUs button{
    margin-top: 25px;
    align-self: flex-end;
    width: 25%;
    border-radius: 5px;
    border: 1px;
    padding: 10px;
    background: wheat;
    font-weight: 500;
}
.cntUs{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 70%;
}
.contactUs form{
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    width: 35%;
    align-self: center;
}
.cntUs p, .cntUs h1{
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    width: 100%;
    align-self: center;
}
#descritionCU{
    height: 150px;
}
.careers{
    display: flex;
    background-image: url('../assets/home/backcity.png');
    width: -webkit-fill-available;
    background-size: cover;
    background-position: center;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: white;
    height: 92vh;
}
.careers label{
    color: black;
    font-size: 18px;
    transform: translate(10px, 28px);
    transition: all .37s ease-out;
    position: relative;
    z-index: 2;
}
.careers input, .careers textarea{
    position: relative;
    padding: 5px 5px 8px;
    font-size: 18px;
    border-radius: 4px;
    outline: none;
    border: #36A9E1 1px solid;
    text-align: start;
}
.careers button{
    margin-top: 25px;
    align-self: flex-end;
    width: 25%;
    border-radius: 5px;
    border: 1px;
    padding: 10px;
    background: wheat;
    font-weight: 500;
}
.crrs{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 70%;
}
.careers form{
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    width: 35%;
    align-self: center;
}
.formStatus{
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    min-height: 20px;
}
.formStatus.success{
    color: #16853a;
}
.formStatus.error{
    color: #b32424;
}
.crrs p, .crrs h1{
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    width: 100%;
    align-self: center;
}
#descritionCS{
    height: 150px;
}
.footer{
    height: 70px;
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    vertical-align: middle;
    border-top: 1px solid black;
}
.footer img{
    height: 50px;
}
.footer li{
    display: flex;
    flex-direction: row;
    align-items: center;
}
@keyframes revelar {
  to {
    transform: scaleX(1);
  }
}

/* Clients carousel */
.clients-carousel { background:#e8e8e8; padding:28px 0; position:relative; }
.clients-title { text-align:center; margin:0 0 12px; font-size:20px; letter-spacing:1px; color:#333; }
.clients-wrapper { position:relative; display:flex; align-items:center; max-width:1400px; margin:0 auto; }
.clients-inner { overflow:hidden; width:100%; flex:1; }
.clients-track { display:flex; gap:48px; align-items:center; width:max-content; animation:clients-scroll 50s linear infinite; transition:transform 0.5s ease; }
.clients-track:hover { animation-play-state:paused; }
.client { flex:0 0 auto; width:140px; display:flex; align-items:center; justify-content:center; }
.client img { max-width:100%; height:auto; display:block; filter:grayscale(60%); opacity:.9; transition:filter .25s, opacity .25s; }
.client img:hover { filter:none; opacity:1; }
.client img.logo-small { max-width:50%; }
.client img.logo-medium { max-width:70%; }.client img.logo-height-small { max-height:50px; width:auto; max-width:100%; }
/* Navigation arrows */
.clients-nav { 
  position:absolute; 
  top:50%; 
  transform:translateY(-50%); 
  background:rgba(255,255,255,0.9); 
  border:2px solid #333; 
  border-radius:50%; 
  width:48px; 
  height:48px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  cursor:pointer; 
  z-index:10; 
  transition:all 0.3s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.clients-nav:hover { 
  background:#333; 
  transform:translateY(-50%) scale(1.1); 
}
.clients-nav:hover svg { 
  stroke:#fff; 
}
.clients-nav svg { 
  stroke:#333; 
  transition:stroke 0.3s ease; 
}
.clients-nav-prev { left:10px; }
.clients-nav-next { right:10px; }
.clients-nav:active { 
  transform:translateY(-50%) scale(0.95); 
}

@media (max-width: 1200px) {
    .logo {
        width: 24%;
    }
    nav {
        width: 72%;
    }
    .liMenu a {
        font-size: 18px;
    }
    .service div {
        width: 42%;
    }
    .cntUs,
    .crrs {
        width: 84%;
    }
    .contactUs form,
    .careers form {
        width: 42%;
    }
    .valuesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .header {
        padding: 0 12px;
    }
    .menu {
        gap: 12px;
    }
    .head {
        padding: 24% 8% 16% 8%;
        font-size: 1.25rem;
    }
    .head h1 {
        transform: scaleX(1.3);
    }
    .service {
        flex-direction: column;
    }
    .service div {
        width: 86%;
        margin: 10px 0;
    }
    .service img {
        width: 100%;
        height: auto;
        max-height: 320px;
        object-fit: cover;
    }
    .misVis {
        flex-direction: column;
    }
    .aboutUs h1,
    .aboutUs p,
    .aboutUs h2 {
        padding: 0 32px;
    }
    
    .cntUs,
    .crrs {
        flex-direction: column;
        width: 90%;
        gap: 12px;
    }
    .contactUs,
    .careers {
        height: auto;
        min-height: 92vh;
        padding: 35px 0;
    }
    .contactUs form,
    .careers form {
        width: 100%;
        max-width: 680px;
    }
    .contactUs button,
    .careers button {
        width: 42%;
    }
}

@media (max-width: 768px) {
    p {
        font-size: 18px;
    }
    .header {
        height: auto;
        min-height: 4.5rem;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
    }
    .logo {
        width: auto;
        display: flex;
        justify-content: flex-start;
    }
    .logo img {
        height: 2.8rem;
    }
    nav {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-end;
    }
    .menuToggle {
        display: flex;
    }
    .menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 20;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px;
        margin: 0;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(8px);
    }
    .menu.open {
        display: flex;
    }
    .menu .liMenu {
        width: 100%;
        text-align: center;
    }
    .liMenu a,
    #languageToggle {
        font-size: 16px;
        color: white !important;
    }
    .head {
        padding: 42% 6% 18% 6%;
        font-size: 1.05rem;
    }
    .head h1 {
        transform: none;
        animation: none;
    }
    .seccion h1 {
        padding-top: 35px;
    }
    .aboutUs h1,
    .aboutUs p,
    .aboutUs h2 {
        padding: 0 20px;
    }
    .mis,
    .vis {
        padding: 42px 0;
    }
    
    .values h1 {
        margin-bottom: 20px;
    }
    .valuesGrid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .valueItem {
        padding: 16px;
    }
    .contactUs,
    .careers {
        padding: 28px 0;
    }
    .cntUs,
    .crrs {
        width: 94%;
    }
    .contactUs label,
    .careers label {
        font-size: 16px;
    }
    .contactUs input,
    .contactUs textarea,
    .careers input,
    .careers textarea {
        font-size: 16px;
    }
    .contactUs button,
    .careers button {
        width: 100%;
        align-self: stretch;
    }
    .footer {
        height: auto;
        flex-direction: column;
        gap: 10px;
        padding: 14px 0;
    }
}

/* adjust speed/responsiveness */
@media (max-width:800px){
  .client { width:120px; gap:20px; }
  .clients-track{ gap:20px; animation-duration:55s; }
  .clients-nav { width:40px; height:40px; }
  .clients-nav svg { width:20px; height:20px; }
  .clients-nav-prev { left:5px; }
  .clients-nav-next { right:5px; }
}

@keyframes clients-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}