/* Reset estilos */
/**
The most merciful thing in the world, 
I think, is the inability of the human mind to correlate all its contents.
 We live on a placid island of ignorance in the midst of black seas of infinity,
  and it was not meant that we should voyage far. 
  The sciences, each straining in its own direction, 
  have hitherto harmed us little; but some day the piecing together of dissociated knowledge 
  will open up such terrifying vistas of reality, and of our frightful position 
  therein, that we shall either go mad from the revelation or flee from 
  the deadly light into the peace and safety of a new dark age.
  ______ _ _                      _____              _       
 |  ____| (_)             ___    |  __ \            | |      
 | |__  | |_  __ _ ___   ( _ )   | |__) |_ _ _ __ __| | ___  
 |  __| | | |/ _` / __|  / _ \/\ |  ___/ _` | '__/ _` |/ _ \ 
 | |____| | | (_| \__ \ | (_>  < | |  | (_| | | | (_| | (_) |
 |______|_|_|\__,_|___/  \___/\/ |_|   \__,_|_|  \__,_|\___/ 
                                                            
**/

*{
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
  }

  body{
    overflow-x: hidden;
  }

/** Fuente **/

@font-face {
    font-family: "Paralucentt";
    src: url('../fonts/fonnts.com-Paralucent_Demi_Bold.otf');
    font-weight: 600;
}

@font-face {
    font-family: "Paralucent";
    src: url('../fonts/fonnts.com-Paralucent_Medium.otf');
    font-weight: 400;
}

@font-face {
    font-family: "Paralucent";
    src: url('../fonts/fonnts.com-Paralucent_Ligth.otf');
    font-weight: 300;
}

h1, h2, h3, h4, p, li{
    font-family: 'Paralucent';
}

/* Utility classes */
.d-none {
    display: none;
}
.d-flex {
    display: flex;
}
.flex-justify-between {
    justify-content: space-between;
}
.flex-align-center {
    align-items: center;
}
.text-decoration-none {
    text-decoration: none;
}

.text-orange{
    color:#D88026;
}

.z-front{
    z-index: 100000;
}

.container{
    padding: 3rem;
    text-align: center;
    max-width: 1420px;
    margin: 0 auto;
}

.container-sm{
    max-width: 1080px;
}

@media only screen and (max-width:768px){
    .container{
        padding: 1rem;
    }
}

.container-lg{
    text-align: center;
    max-width: 1980px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.title{
    font-size: 3.75rem;
}

.p-0{
    padding: 0!important;
}

.pt-3{
    padding-top: 3rem;
}

.pt-6{
    padding-top: 6rem;
}

.pb-3{
    padding-bottom: 3rem;
}



.mt-3{
    margin-top: 3rem;
}

/* Navbar Styling */

header#header{
    position: sticky;
    top:0;
    z-index: 10000000;
}


.navbar {
    background-color: rgba(62, 70, 135, 1);
    color: #fff;
    display: flex;
    height: 120px;
    justify-content: center;

}

.navbar-scrolled{
    height: 75px!important;
}

.navbar__container {
    display: flex;
    width: 90%;
    justify-content: space-between;
    align-items: center;
}

.navbar__logo img {
    height: 40px;
}

.navbar__menu {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.navbar__link {
    color: #fff;
    font-weight:600;
    text-decoration: none;
    transition: all 0.5s ease;
}

.navbar__link:hover{
    color:#D88026;
}

.navbar__toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 0.3rem;
}

.navbar__icon {
    width: 25px;
    height: 3px;
    background-color: #fff;
    transition: all 0.3s;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .navbar__menu {
        display: none;
        flex-direction: column;
        gap: 1rem;
        background-color:#D88026;
        padding: 1rem;
        padding-top: 30%;
        position: absolute;
        top: 0px;
        bottom: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        font-size: 3rem;
    }

    .navbar__link:hover{
        color:#3e4687;
    }

    .navbar__toggle {
        display: flex;

    }
    .navbar__menu--active {
        display: flex;
    }

    /* Transform the menu icon to an 'X' when active */
    .navbar__toggle--active .navbar__icon:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .navbar__toggle--active .navbar__icon:nth-child(2) {
        opacity: 0;
    }
    .navbar__toggle--active .navbar__icon:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6.5px);
    }
}
/* Slider Styling */
.slider {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

.slider__container {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.slider__slide {
    min-width: 100%;
    height: 100%;
    position: relative;

    display: flex;
    align-items: center;
    overflow: hidden;
}


.slider__content {
    position: relative;
    color: #fff;
    /**width: 55%;**/
    max-width: 1280px;
    min-width: 60%;
}

.slider__content-right{
    text-align: right;
    max-width: 50%;
    position: absolute;
    right: 10%;
}


.slider__background-image{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.slider__title {
    font-size: 3.75rem;
    margin-bottom: 0.5rem;
}


.slider__title-blue{
    font-size: 2rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, rgba(62,70,135,1) 0%, rgba(255,255,255,0) 100%);
    text-align: left;
    text-transform: uppercase;
    padding-left: 1rem;
    padding: 1.5rem;
    margin-bottom: 3rem;
}


h1.slider__title-blue span{
    display: block;
    width: 100%;
    text-transform: uppercase;
    margin-bottom: 3rem;
}


.slider__text {
    padding-top: 1rem;
    font-size: 1.9rem;
}


.slider__text-orange{
margin-left: 2%;
background-color: rgba(216,128,38,.8);
border-radius: 25px;
padding: 5% 10% 20% 4%;
width: 50%;
}

.slider__text-orange p{
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 600;
}

.slider__text-orange ul{
    margin-top: 2rem;
    padding-left: 3rem;
    font-size: 1.5rem;
    font-weight: 400;
}


@media (max-width: 768px) {
    .slider__content {
        position: relative;
        color: #fff;
        margin-right: 0;
        text-align: center;
        width: 80%;
        margin: 0 auto;
    }

    .slider__title-blue{
        background-color: rgba(62,70,135,.8);
        font-size: 2.75rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    h1.slider__title-blue span{
        margin-bottom: 0;
    }

    .slider__text-orange{
        padding: 5%;
        margin: 0;
        min-width: none;
        width: 80%;
        margin: 0 auto;
    }
    .slider__text-orange p span{
        font-size: 1.5rem;
    }

    .slider__text-orange ul{
        padding-left: 15%;
        margin-left: 0;
        text-align: left;
        margin-top: 0.5rem;
    }

    .slider__content-right{
        right: 0%;
        max-width: 80%;
    }
    .slider__title {
        font-size: 2.75rem;
    }
    
    .slider__text {
        font-size: 1rem;
    }
}


.hero {
    width: 100%;
    height: 85vh;
}
/** Nosotros **/
.nosotros__container{
    padding: 3rem 0;
    width: 100%;
    text-align: center;
}

.nosotros__title{
    padding-bottom: 1rem;
    width: 100%;
}

.nosotros__text{
    width: 75%;
    margin: 0 auto;
    font-size: 1.75rem;
    padding-bottom: 3rem;
    color: #3e4687;
}

@media only screen and (max-width:768px){
    .nosotros__text{
        width: 100%;
        font-size: 1rem;
    }
}


.nosotros__items{
    /**
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 3rem 0;
    **/
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 2rem;

}
@media only screen and (min-width:430px){
    .nosotros__text{
        width: 90%;
        margin: 0 auto;
    }

}

@media only screen and (min-width:400px){
    .nosotros__items{
        grid-template-columns: repeat(2,1fr);
        width: 90%;
        margin: 0 auto;
    }

}

@media only screen and (min-width:720px){
    .nosotros__items{
        grid-template-columns: repeat(4,1fr);
    }

}


@media only screen and (min-width:1280px){
    .nosotros__items{
        gap:0.5rem;
    }

}

@media only screen and (min-width:1840px){
    .nosotros__items{
        gap:0;
    }

}

section#nosotros{
    padding-top: 3rem;
}

.nosotros__item{
    display: grid;
    justify-content: center;
}
.item__circle{
    border: 0.89px solid rgba(209, 209, 209, 1);
    border-radius: 50%;
    width: 140px;
    height: 140px;
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.nosotros__homologaciones{
    color:rgba(62, 70, 135, 1);
    font-size: 2.5rem;

}

.nosotros__homologaciones-grid{
    padding-top: 2rem;
    display: grid;
    justify-content: center;
}
.nosotros__homologaciones-grid img{
    max-width: 100%;
}

/** Servicios **/
.servicios__container{
    background-image: url(../img/ruway-servicios-bg.png);
    background-size:cover;
    padding: 3rem 0;
    min-height: 774px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.servicios__title{
    padding-top: 3rem;
    color:white;
    text-align: center;
}

.servicios__grid{
    width: 50%;
    margin: 0 auto;
    padding-top: 8rem;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2rem;
    align-items: center;
    justify-items: center;
}

@media screen and (min-width: 300px) {
    .servicios__grid{
        grid-template-columns: 1fr;
        width: 100%;
    }
}

@media screen and (min-width: 720px) {
    .servicios__grid{
        grid-template-columns: repeat(2,1fr);
        width: 90%;
    }
}

@media screen and (min-width: 1280px) {
    .servicios__grid{
        grid-template-columns: repeat(4,1fr);
        width: 100%;
    }
}

@media screen and (min-width: 1500px) {
    .servicios__grid{
        grid-template-columns: repeat(4,1fr);
        width: 90%;
    }
}

@media screen and (min-width: 1920px) {
    .servicios__grid{
        grid-template-columns: repeat(4,1fr);
        width: 50%;
    }
}

.servicio_wrapper{
 perspective: 900px;
}

.servicio_wrapper, .servicio{
    width: 260px;
    position: relative;
    text-align: center;
}

.servicio{
    transition: all 0.8s;
    transform-style: preserve-3d;
    background-color: white;
    border-radius: 25px;
}

@media only screen and (min-width:768px){
    .servicio_wrapper:hover .servicio{
        transform: rotateY(180deg);
    }
}


.servicio_front, .servicio_back{
    position: relative;
    width: 100%;
    top:0;
    left:0;
    backface-visibility: hidden;
}

.servicio_front{
    cursor: pointer;
    height: 100%;
    backface-visibility: hidden;
}

.servicio_back{
    transform: rotateY(180deg);
    position:absolute;
    background-color: white;
    height: 100%;
    width: 100%;
    border-radius: 25px;
}

.servicio_back__descripcion{
    padding: 25% 10%;
}

.servicio_back__descripcion p{
    color:#3e4687;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.servicio_back__descripcion ul{
    text-align: left;
    padding-left: 10%;
}

.servicio_back__descripcion ul li{
    padding-bottom: 1rem;
}


.servicio__icono{
    background-color: white;
    padding: 4rem 0;
    border-radius: 25px 25px 0 0;
}

.servicio__icono img{
    max-width: 81px;
}

.servicios__text{
    background-color: #D88026;
    min-height: 210px;
    border-radius: 0 0 25px 25px;
    display: grid;
    align-items: center;
    padding: 0 1rem;
}

.servicios__text p{
    color:white;
    font-size: 1.5rem;
}


.swiper.swiper-servicios {
    max-width: 80%;
    margin: 0 auto;
    min-height: 500px;
    padding-top: 2rem;
    margin-top: 3rem;
}

.swiper-servicios .swiper-slide{
    justify-items: center;
}



@media only screen and (max-width:768px){
    .servicios__grid{
        grid-template-columns: 1fr;
    }

    .swiper.swiper-servicios{
        max-width: 100%;
    }

}

/** Tarjetas horizontales **/
@media only screen and (max-width:768px){

    .servicio_wrapper, .servicio{
        width: 90%;
        margin: 0 auto;
        height: 400px;
    }

    .servicio_front{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .servicio__icono{
        display: grid;
        align-items: center;
        justify-content: center;
        border-radius: 25px 0 0 25px;
    }

    .servicios__text{
        border-radius: 0 25px 25px 0;
    }

    .servicio_back__descripcion{
        padding: 10%;
    }

}

@media only screen and (max-width:768px){
    /* CSS para el efecto de voltear en móviles */
    .flipped {
        transform: rotateY(180deg);
    }
    }

/** Clientes **/
.clientes__container{
    padding: 6rem 0;
}
.clientes__title{
    color: #3e4687;
    padding-bottom: 8rem;
}

.clientes__grid {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem 0;
    align-items: center;
    justify-content: center;
}



.cliente{
    max-width: 200px;
    margin: 0 auto;
}

.cliente img{
    width: auto;
    max-height: 150px;
    filter: grayscale(100%);
    margin: 0 auto;
    transition: all 0.5s ease;
}

.cliente img:hover{
    filter: grayscale(0%);
    transform: scale(105%);
}

/** Partners **/

.partners__container{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.partners__title{
    background-color: #D88026;
    height: 180px;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.partners__title h1{
    color:white;
}
/** 
.partners__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    align-items: center;
    justify-content: center;
    padding: 8rem 0;
    gap:3rem 0rem;
}
**/

.partners__grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem 0rem;
    margin: 4rem auto;
    margin-bottom: 6rem;
}

.partner{
    width:20%
}





@media only screen and (max-width:1280px){
    .partner{
        width: 33%;
    }
}

@media only screen and (max-width:768px){
    .partner{
        width: 50%;
    }
}


@media only screen and (max-width:768px){
    .partners__title h1{
        font-size: 2.75rem;
    }
}

@media only screen and (min-width:300px){
    .clientes__grid{
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .cliente img, .partner img{
        max-width: 150px;
        max-height: auto;
    }

}

@media only screen and (min-width:768px){
    .clientes__grid{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        max-height: auto;
    }

    .cliente img{
        max-width: 250px;
        max-height: auto;
    }
}

/** Contacto **/

section#contacto{
    background-image: url(../img/ruway-contact-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.contacto__container{
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.contacto__text{
text-align: left;
}

.contacto__text h2{
    color:white;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.contacto__text h1{
    color:#D88026;
    font-size: 2.5rem;
    font-weight: 500;
    width: 70%;
}


.contacto__form form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem
}

.contacto__whatsapp{
    text-align: left;
    display: flex;
    align-items: center;
}

.contacto__whatsapp h2{
    color: white;
}

.contacto__whatsapp img{
    margin-left: 3rem;
}

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

.contacto__info .contacto__datos{
    text-align: right;
    color: white;
}

.contacto__info .contacto__datos >*{
    padding-bottom: 1rem;
}

.divider {
    height: 1.5px;
    background-color:#D88026;
    max-width: 1480px;
    margin: 0 auto;
}

#wpcf7-f93-o1 > form > p:nth-child(7) {
    text-align: left;
    margin-left: 20px;
}

@media only screen and (max-width:1080px){
    .contacto__container, .contacto__form form{
        grid-template-columns: 1fr;
    }
    #wpcf7-f93-o1 > form > p:nth-child(7){
        text-align: center;
        margin-left: 0px;  
    }
}

form input[type=text], form input[type=email], form input[type=tel]{
    background-color: rgba(255, 255, 255, 0);
    border:none;
    border-bottom: 1px solid #D88026;
    padding: 1rem 0;
    font-family: "Paralucent";
    color:white;
    font-size: 1.5rem;
    width:90%;
}

input:focus{
    outline: none;
}

input::placeholder {
    color: rgba(203, 203, 203, 0.723);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
}

form p input[type=submit]{
    background-color: #D88026;
    font-size: 1.5rem;
    color:white;
    border: none;
    border-radius: 10px;
    outline: none;
    width: 50%;
    height: 100%;
}



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


    form{
        margin-top: 3rem;
    }

    form input[type=submit]{
        padding: 1rem 0;
        margin: 0 auto;
    }
}


footer{
    background-color: #3e4687;
    padding: 2rem;
    color:white;
    text-align: center;
}


/** Animaciones **/

@keyframes fade-in {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.fade-in{
    animation: fade-in linear;
    animation-timeline: view();
    animation-range: entry 0 cover 30%;
}

@media only screen and (max-width:768px){
    .fade-in{
        animation: fade-in linear;
        animation-timeline: view();
        animation-range: entry 0 cover 20%;
    }
}

@keyframes transposeX{
    from{
        transform: translateX(1000px);
        opacity: 0;
    }
    to{
        transform: translateX(0px);
        opacity: 1;
    }
}


.transposeX{
    animation: transposeX linear;
    animation-timeline: view();
    animation-range: entry 0 cover 20%;
}

@keyframes transposeX-rigth{
    from{
        transform: translateX(-500px);
        opacity: 0;
    }
    to{
        transform: translateX(0px);
        opacity: 1;
    }
}


.transposeX-rigth{
    animation: transposeX-rigth linear;
    animation-timeline: view();
    animation-range: entry 0 cover 20%;
}


:root {
    --swiper-theme-color: #e6e6e6;
}


/**
.parallax {
    animation-timeline: view();
    animation: parallax 30s infinite ease-in-out;

  }

@keyframes parallax {
    0% {
      background-position: center;
      background-size: 110%;
      background-size: cover;
    }
    50% {
      background-position: center -10px;
      background-size: 120%;
      background-size: cover;
    }

    100% {
        background-position: center;
        background-size: 110%;

      }
  }
  
**/


.wpcf7-response-output{
    background-color: #D88026;
    color:white;
    grid-column: 1/3;
    height: 3rem;
    display: flex;
    align-items: center;
    border-radius: 10px;
}