/* 
 ! MOBILE FIRST (MAX-WIDTH: 767PX)
*/



/* Header */

.header{
    width: 100%;
    padding: 24px 16px;
    position: relative;
}


.header .logo {
    flex-grow: 1;
}

.header .logo img{
    width: 56px;
    max-width: 96px;
}


.header__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    gap: 8px;
}

/* navigation reveal */

.navigation.show{
    position: absolute;
    right: 0;
    top: 0;
    background-color: #F0FAFA;
    width: 295px;
    min-height: 100dvh;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 16px;
}

.close__navigation--mobile{
    display: none;
}


.navigation.show .close__navigation--mobile{
    display: block;
    position: absolute;
    right: 16px;
    top: 32px;
}

.navigation__link{
    font-size: 2.1rem;
}

.navigation.show .desktop-only{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 55dvh;
    align-items: center;
    margin-top: 10dvh;
}


.contact__section,
.faq__section,
.benefits__section,
.about__section,
.footer__container{
    max-width: 1240px;
    margin: 80px auto 0;
}

.faq__section{
    padding: 16px;
    margin-bottom: 40px;
}

.cta__buttons{
    display: none;
}

.navigation .cta__buttons--mobile{
    display: none;
}

.navigation.show .cta__buttons--mobile{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 5dvh;
    width: 100%;
}

.navigation.show .cta__buttons--mobile button{
    width: 100%;
    display: flex;
    justify-content: space-around;
}


.navigation.show .cta__buttons--mobile .btn__secondary{
    border: 0.1px solid #29797E;
}

.cta__buttons--mobile{
    display: flex;
    gap: 4px;
    align-items: center;
}

.cta__buttons button,
.cta__buttons--mobile button{
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-only{
    display: block;
}

.desktop-only__950,
.desktop-only{
    display: none;
}


.navigation__link:hover{
    color: var(--primary-color);
    font-weight: 500;
}


/* Buttons login / register */

.dropdown__menu{
    background: #FFF;
    box-shadow: var(--shadow);
    border-radius: var(--input-radius);
    display: flex;
    flex-direction: column;
    gap: 0
}

.dropdown__menu__item a{
    display: flex;
    align-items: center;
    padding: 12px 8px;
    gap: 8px;
}

.dropdown__menu__item a:hover{
    background: var(--light-color);
}

.cta__buttons__container{
    position: relative;
}



.dropdown__menu--todown{
   height: 0;
   overflow: hidden;
   padding: 0;
   width: 0;
}

.dropdown__menu--todown.register__dropdown.drop,
.dropdown__menu--todown.login__dropdown.drop{
    position: absolute;
    bottom: -95px;
    right: 0;
    width: auto;
    height: auto;
}


/* To UP Mobile */


.dropdown__menu--toup{
    height: 0;
    overflow: hidden;
    padding: 0;
    width: 0;
 }
 
 .dropdown__menu--toup.register__droptoup.toup,
 .dropdown__menu--toup.login__droptoup.toup{
    position: absolute;
    top: -100px;
    right: 0;
    width: auto;
    height: auto;
 }

 .cta__buttons--mobile a{
    font-size: 1.35rem;
 }


/* HERO */



.hero__section{
    text-align: center;
    padding: 0 16px;
}

.hero__caption,
.hero__video,
.hero__subtitle,
.hero__list__features{ 
    max-width: 1240px;
    margin: 0 auto;
}

.hero__video{
    margin-top: 56px;
    position: relative;
}

.hero__description{
    margin-bottom: 24px;
    color: var(--primary-color);
    font-size: 1.4rem;
}

.play__btn{

    width: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

.hero__video img{
    box-shadow: var(--shadow);
    max-width: 850px;
    width: 100%;
    border-radius: 24px;
}

.hero__features{
    background-color: var(--light-color);
    border-radius: var(--small-block-radius);
    padding: 24px;
    margin: 24px auto;
}

.hero__cta__buttons {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.hero__cta__buttons button,
.hero__cta__buttons button a{
    font-size: 1.5rem;
}


.hero__list__features{
    margin: 24px auto;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero__feature__header {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}

.hero__feature__title{
    color: var(--primary-color);
}


.hero__feature__header .circle{
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--primary-color);
    border-radius: 50%;
}


/* About */

.about__section{
    
    position: relative;
}


.about__image img{
    border-radius: var( --block-radius) var( --block-radius) 0 0;
    width: 100%;
}

.about__caption{
    position: relative;
    z-index: 99;
   /*  left: 16px;
    right: 16px; */
    padding: 0 16px;
    bottom: 100px;
}

.about__content__text{
    
    background: #FFF;
    border-radius: var( --block-radius);
    box-shadow: var(--shadow);
    padding: 24px;
}


.about__caption h2{
    color: var(--dark-color);
    margin-bottom: 24px;
}

.about__caption span{
    font-size: 2.4rem;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.about__body p{
    margin-bottom: 32px;
}

.about__body .btn{
    min-width: 160px;
}

.about__body .btn a{
    color: #FFF;
}

.about__metrics{
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}
.metrics{
    display: flex;
    width: 100%;
    margin-left: 16px;
    justify-content: space-around;
}

.metric__item{
    text-align: center;
}

.metric__item h4{
    font-family: var(--heading-font);
    color: var(--primary-color);
    font-size: 3.2rem;
}


/* Benefits */

.benefits__caption{
    padding: 16px;
}

.benefits__image{
    display: none;
}

.benefit__item{
    display: flex;
    align-items: center;
    gap: 16px;
}


.benefits__caption h2{
    text-align: center;
    margin-bottom: 16px;
}

.benefits__header{
    margin-bottom: 24px;
}


.benefits__list{
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 450px;
    margin: 0 auto;
}

.benefits__list h3{
    font-weight: normal;
    font-family: var(--link-font);
    font-size: 2.1rem;
}

.benefit__text p{
    font-size: 1.4rem;
}

.benefits__section{
    margin-top: 0;
}




/* Nuestros Servicios */

.services__section{
    padding: 16px;
}




.services__container {
    margin-top: 80px;
}

.services__bg{
    background: url(../images/graphic.png);
    background-size: cover;
   /*  background-position: right 35% bottom 45%; */
}


.services__container h2{
    text-align: center;
}

.service__card{
    width: 100%;
    max-width: 450px;
    border-radius: var(--small-block-radius);
    background: #FFF;
    padding: 16px;
    transition: 350ms ease-in-out;
    border: 1px solid #ECECEC;
}

.service__card:hover{
    transform: translateY(-45px);
    transition: 350ms ease-in-out;
}

.renters__service:hover{
    box-shadow: -1px 3px 40px 0px rgba(42, 194, 194, 0.40);
}

.admins__service:hover{
    box-shadow: -1px 3px 40px rgba(186, 225, 59, 0.40);
}

.service__card h3{
    text-align: center;
    margin-bottom: 16px;
}

.services__header p{
    margin-bottom: 24px;
}

.services__header button{
    display: block;
    width: 200px;
    margin: 0 auto 32px;
    font-size: 1.6rem;
}

.services__content{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 1240px;
    margin: 30px auto 0;
    padding: 65px 0 80px;
}

.btn__terciary{
    background: var(--terciary-color);
}

.renters__service{
    box-shadow: -1px 3px 30px 0px rgba(42, 194, 194, 0.20);
}

.admins__service{
    box-shadow: -1px 3px 30px rgba(186, 225, 59, 0.20);
    margin-top: 40px;
}

.services__benefits{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
}

.services__benefits.renters{
    border-top: 1px solid rgba(42, 194, 194, 0.50);
    background: none;
}

.services__benefits.admins{
    border-top: 1px solid var(--terciary-color);
    background: none;
}

.services__benefits.admins{
    margin-top: 0;
}

.service__benefit{
    display: flex;
    align-items: flex-start;
    gap: 8px;
}


/* Reviews */

.reviews__container{
    max-width: 1360px;
    margin: 0 auto;
    background: var(--primary-color);
    border-radius: var(--block-radius);
    padding: 24px 16px;
    display: grid;
    grid-template-columns:1fr;
    gap: 40px;
}

.review__body{
    margin-top: 85px;
}

.swiper-scrollbar{
    margin-top: 16px;
}

.reviews__caption h2,
.reviews__caption p{
    color: #FFF;
}

.reviews__caption h2{
    text-align: center;
}

.reviews__caption p{
    margin-top: 48px;
}


.swiper {
    width: 100%;
    height: 450px;
}

.swiper-button-prev{
    left: auto;
    right: var(--swiper-navigation-sides-offset,80px);
}

.swiper-slide{
    margin-top: 50px;
    height: 250px;
  }

.review__card{
    width: 100%;
    max-width: 540px;
    border-radius: var(--small-block-radius);
    padding: 24px;
    position: relative;
    background: #FFF;
    
}

.swiper-scrollbar-drag{
    background-color: #FFF;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{
    background: rgba(199, 199, 199, 0.50);
    bottom: auto;
}

.swiper-wrapper{
    height: auto;
}

.arrow__styled{
    background-color: #FFF;
    color: var(--primary-color);
    padding: 24px;
    border-radius: 50%;
    top: var(--swiper-navigation-top-offset, 80%);
    z-index: 999;
}



.arrow__styled::after{
    font-size: 24px;
    font-weight: 700;
}

.review__header{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.review__header img{
    border-radius: 50%;
    width: 94px;
    margin-bottom: 8px;
}

.review__header h4{

    font-size: 1.8rem;
}

.role{
    font-size: 1.3rem;
    color: #4A5657;
}


/* FAQ QUESTION */

.faq__section__container{
    margin-top: 48px;
    display: flex;
    justify-content: space-between;
}

.faq__questions--mobile{
    width: 100%;
    max-width: 640px;
    background: #FFF;
    border-radius: var(--small-block-radius);
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.07);
}

.faq__questions{
    width: 100%;
    max-width: 640px;
    background: #FFF;
    border-radius: var(--small-block-radius);
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.05);
    position: relative;
    left: 56px;
    top: 32px;
}

.faq__questions__and__answers--mobile {
    position: relative;
}
.faq__questions__and__answers--mobile .answers__item--mobile{
    height: 0;
    padding: 0;
    overflow: hidden;
} 

.faq__questions__and__answers--mobile.active .answers__item--mobile{
    margin-top: 16px;
    padding: 24px 16px;
    border-top: 1px solid var(--primary-color);
    height: auto;
    overflow: auto;
    background: var(--light-color);
}



.answers__item--mobile p {
    margin-top: 16px;
}

.faq__questions__item{
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    padding: 24px 16px;
    cursor: pointer;
    border-radius: 0 ;
    position: relative;
}

.faq__questions__item::after{
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}


.faq__questions__and__answers--mobile::after{
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}


.faq__questions__item.active{
    background: var(--light-color);
}

.faq__questions__item.active svg path{
    stroke: var(--primary-color);
}

.faq__questions__item.active .selector{
    background: var(--primary-color);
    position: relative;
}

.faq__questions__item .active  .selector::after{
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 6px;
    top: 6px;
    background: #FFF;
    border-radius: 50%;
}

/* Mobile */

.faq__questions__and__answers--mobile.active .faq__questions__item{
    background: var(--light-color);
}

.faq__questions__and__answers--mobile.active .faq__questions__item svg path{
    stroke: var(--primary-color);
}

.faq__questions__and__answers--mobile.active .faq__questions__item .selector{
    background: var(--primary-color);
    position: relative;
}

.faq__questions__and__answers--mobile.active .faq__questions__item .selector::after{
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 6px;
    top: 6px;
    background: #FFF;
    border-radius: 50%;
}

.faq__questions .faq__questions__item:nth-last-child(1){
    border-radius: 0 0 28px 28px ;
}

.faq__questions .faq__questions__item:nth-child(1){
    border-radius: 28px 28px 0 0;
}

.faq__questions__item:hover{

    background: var(--light-color);
}

.faq__questions--mobile .faq__questions__item--mobile:nth-last-child(1) {
    border-radius: 0 0 28px 28px ;
}

.faq__questions--mobile .faq__questions__item--mobile:nth-child(1) {
    border-radius: 28px 28px 0 0;
}


.selector{
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E2E2E2;
}


.faq__answers{
    width: 100%;
    max-width: 650px;
    background: var(--light-color);
    border-radius: var(--small-block-radius);
    padding: 40px 32px 40px 80px;
    border: 1px solid rgba(41, 121, 126, 0.05);
}

.answers__item{
    
    display: none;
}

.faq__answers h4{
    font-size: 1.8rem;
    margin-bottom: 32px;
}


  .answers__item.active {
    display: block;
  }

  .faq__section__container--desktop{
    display: none;
  }


  .faq__questions__and__answers--mobile.active .faq__questions__item--mobile{
    transition: 200ms ease-in-out;
  }
  .faq__questions__and__answers--mobile.active .faq__questions__item--mobile svg{
    transform: rotate(90deg);
    transition: 200ms ease-in-out;
  }



/* Contact ---- template */

.contact__form {
    background: var(--primary-color);
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 16px;
    border-radius: var(--block-radius);
}



.caption__form h2{
    text-align: center;
}

.caption__form p {
    margin-top: 24px;
}

.contact__form h2,
.contact__form p{
    color: #FFFFFF;
}

.contact__item{
    display: grid;
    grid-template-columns: 40px 200px;
    justify-content: center;
    align-items: center;
    gap: 16px;

}

.contact__item p{
    font-size: 1.8rem;
}

.form__section {
    padding: 24px;
    background: #FFF;
    border-radius: var(--small-block-radius);
}

.fields__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.contacto {
    margin-top: 50px;
}

.field label{
    margin-bottom: 8px;
    font-family: var(--title-font);
    color: var(--text-color);
    font-size: 1.4rem;
    font-family: var(--link-font);
    color: var(--dark-color);
}

.field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.field input,
.field select,
.field textarea {
    background: #EDF2F2;
    border: none;
    padding: 10px 8px;
    outline: none;
    border-radius: var(--input-radius);
    font-size: 1.5rem;
    font-family: var(--link-font);
    color: var(--dark-color);
    width: 100%;
}

.field textarea{
    resize: none;
}

.field input:focus,
    .field textarea:focus{
    border: 1.05px solid var(--primary-color);
}

.elegir-servicio {
    margin-top: 50px;
}

.servicios-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.elegir-servicio label {
    font-family: var(--paragraph-font);
    margin: 0;
}

.elegir-servicio input {
    width: 16px;
    height: 16px;
}

.servicios-content {
    display: flex;
    justify-content: space-around;
}

.mensaje {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}

.mensaje textarea {
    font-family: var(--paragraph-font);
    resize: none;
    border: none;
    border-bottom: 1.5px solid #D6D6D6;
    padding: 0 0 5px 5px;
    outline: none;
    font-size: 17px;
}

.mensaje textarea:focus {
    border-bottom: 2px solid #FDDC2C;
}

.contact__list{
    margin-top: 0px;
}


.btn__contact{
    border: none;
    font-size: 1.8rem;
    color: #FFF;
    margin-top: 32px;
    width: 100%;
    max-width: 156px;
    display: block;
    margin-left: auto;
    border-radius: var(--button-radius);
}

.btn_enviar:active {
    transform: scale(.95);
}



/* Footer */

.footer{
    background: var(--dark-color);
    color: #FFF;
    border-radius: var(--block-radius) var(--block-radius) 0 0;
}

.footer p,
.footer a{
    color: #FFF;
    margin-top: 8px;
}


.footer__logo{
    display: flex;
    justify-content: center;
}

.footer h4{
    margin-bottom: 16px;
    font-weight: 400;
    font-family: var(--link-font);
}

.footer p{
    margin-top: 12px;
}

.footer__container{
    padding: 24px 16px;
}


.footer__columns{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}


.social__list{
    display: flex;
    align-items: center;
    gap: 16px;
}


.copyright__footer{
    background: #FFF;
    padding: 16px 0;
}


.copyright__footer p{
    color: var(--dark-color);
    text-align: center;
    margin: 0;
}


.copyright__footer .author{
    color: var(--primary-color);
    font-weight: 700;
}

/* 

!! MEDIA QUERYS 

*/



@media only screen and (min-width: 323px){
    .cta__buttons{
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .header__container{
        gap: 16px;
    }
}
@media only screen and (min-width: 767px){

    main, section{
        padding: 0 0;
    }
    .header{
        padding: 16px;
    }

    .header .logo img{
        width: 96px;
        max-width: 96px;
    }

    .header .logo{
        flex-grow: 1;
    }


    .cta__buttons--mobile{
        display: none;
    }

    .cta__buttons--mobile,
    .mobile-only{
        display: none;
    }

    .navigation.show{
        position: static;
        background-color: transparent;
        width: auto;
        min-height: auto;
        z-index: auto;
    }

    .navigation__link{
        font-size: 1.6rem;
    }


    .navigation.show .navigation__list.desktop-only{
        display: none;
    }

    .cta__buttons button{
        font-size: 1.6rem;
    }
    
    .desktop-only{
        display: block;
    }

    .navigation__list{
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .hero__subtitle{
        margin-top: 32px;
    }

    .play__btn{
        width: 88px;
        cursor: pointer;
    }

    .hero__video img{
        cursor: pointer;
    }

    .hero__cta__buttons button, .hero__cta__buttons button a {
        font-size: 1.8rem;

    }


    /* REVIEWS */



    /* FAQ section */

    .faq__section__container--desktop{
        display: flex;
    }

    .faq__section__container--mobile{
        display: none;
    }

    .faq__section{
        margin-bottom: 120px;
    }


    

    /* Contact form */
    .contact__form {
        padding: 24px;
    }


    /* Footer */

    .footer__container{
        padding: 56px 0;
    }

    .footter__column ul{
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .footer__columns{
        grid-template-columns: 300px 250px 250px 350px ;
        justify-content: space-between;
    }

    .footer__logo{
        justify-content: start;
    }
}


@media only screen and (min-width: 850px){


    .about__section__container{
        display: flex;
        width: 100%;
        position: relative;
    }

    .about__caption{
        position: relative;
        z-index: 99;
        left: -50px;
        top: 50px;
        max-width: 450px;
    }

    .about__image img{
        border-radius: var( --block-radius);
        width: 100%;
    }

    /* Benefits */

    .benefits__caption h2{
        text-align: start;
        margin-bottom: 16px;
    }

    .benefits__section{
        overflow-x: hidden;
        margin-top: 100px;
    }

    .benefits__image{
        display: block;
    }

    .benefits__image img{
        width: 100%;
        max-width: 650px;
        border-radius: var(--small-block-radius);
    }
    
    .benefits___container{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .benefits__list h3{
        font-size: 2.4rem;
    }


    .benefits__caption{
        max-width: 400px;
    }


    /* Reviews */

    .reviews__container{
        max-width: 1360px;
        background: var(--primary-color);
        padding: 80px 0 0 56px;
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 40px;
    }

    .review__card{
        width: 100%;
        max-width: 380px;
    }

    .reviews__caption h2{
        text-align: start;
    }
    
}


@media only screen and (min-width: 950px){

    .header .logo{
        flex-grow: initial;
    }
    .hero__list__features{
        display: grid;
        grid-template-columns: repeat(3, 290px);
        justify-content: space-between;
    }

    /* Benefits */

    .benefits__caption{
        max-width: 400px;
    }

    .admins__service{
        margin-top: 150px;
    }
    .service__card{
        padding: 32px 24px;
    }

    /* Contacto */

    .desktop-only__950{
        display: block;
    }
        
    .contact__form {
        background: var(--primary-color);
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 32px;
        padding: 56px 32px;
        border-radius: var(--block-radius);
    }

    .form__section {
        padding: 56px;
    }

    
    .caption__form h2{
        text-align: start;
    }

    .fields__group {
        display: flex;
        flex-direction: row;
        gap: 32px;
    }

    .contact__item{
        display: grid;
        grid-template-columns: 40px 1fr;
        justify-content: start;
        align-items: center;
        gap: 16px;
    
    }

    .navigation__list{
        margin-left: 64px;
    }

}


@media only screen and (min-width: 1100px){
    .contact__form{
        
        grid-template-columns: 400px 1fr;
    }

}


@media only screen and (min-width:1240px){

    

    .about__section{
        padding: 0;
    }
    .about__section__container{
        display: flex;
        width: 100%;
        position: relative;
    }
    
    .about__image img{
        border-radius: var( --block-radius);
        width: 100%;
    }
    
    .about__caption{
        position: relative;
        z-index: 99;
        left: -50px;
        top: 100px;
        max-width: 570px;
        max-height: 450px;
    }
    
    .about__caption h2{
        color: var(--dark-color);
        margin-bottom: 24px;
    }
    
    .about__caption span{
        font-size: 2.4rem;
        color: var(--primary-color);
        margin-bottom: 16px;
    }
    
    .about__body p{
        margin-bottom: 32px;
    }
    
    .about__body .btn{
        min-width: 160px;
    }
    
    .about__body .btn a{
        color: #FFF;
    }
    
    .about__metrics{
        margin-top: 50px;
    }

    .metric__item{
        text-align: center;
    }

    .metrics{
        margin-top: 32px;
    }
    
    .metric__item h4{
        font-family: var(--heading-font);
        color: var(--primary-color);
    }
}


@media (1110px <= width <= 1600px){
    .benefits__image{
        position: absolute;
        right: -15px;
    }

    .reviews__container{
        margin: 0;
        margin-left: auto;
        border-radius:  var(--block-radius) 0 0 var(--block-radius);
    }
}