/*=========================================
        NMR CONSULTORES
        ANIMATIONS.CSS
=========================================*/

/*==============================
        VARIABLES
==============================*/

:root{

    --speed:.6s;
    --slow:1.2s;
    --fast:.3s;

}

/*==============================
        TRANSICIONES
==============================*/

*{

    transition:
        background .35s ease,
        color .35s ease,
        border .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}

/*==============================
        FADE UP
==============================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/*==============================
        FADE DOWN
==============================*/

.fade-down{

    opacity:0;

    transform:translateY(-60px);

    transition:.8s;

}

.fade-down.show{

    opacity:1;

    transform:translateY(0);

}

/*==============================
        FADE LEFT
==============================*/

.fade-left{

    opacity:0;

    transform:translateX(-70px);

    transition:.8s;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

/*==============================
        FADE RIGHT
==============================*/

.fade-right{

    opacity:0;

    transform:translateX(70px);

    transition:.8s;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/*==============================
        ZOOM
==============================*/

.zoom{

    opacity:0;

    transform:scale(.80);

    transition:.8s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

/*==============================
        ROTATE
==============================*/

.rotate{

    opacity:0;

    transform:rotate(-12deg);

    transition:1s;

}

.rotate.show{

    opacity:1;

    transform:rotate(0);

}

/*==============================
        HERO
==============================*/

.hero-text h1{

    animation:heroTitle 1s ease;

}

.hero-text p{

    animation:heroText 1.4s ease;

}

.hero-buttons{

    animation:heroButtons 1.7s ease;

}

.hero-image{

    animation:heroImage 2s ease;

}

@keyframes heroTitle{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroText{

    from{

        opacity:0;

        transform:translateY(90px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroButtons{

    from{

        opacity:0;

        transform:translateY(110px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroImage{

    from{

        opacity:0;

        transform:translateX(120px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==============================
        BOTONES
==============================*/

.btn-primary:hover{

    transform:translateY(-6px) scale(1.03);

}

.btn-secondary:hover{

    transform:translateY(-6px);

}

.btn-header:hover{

    transform:translateY(-4px);

}

/*==============================
        NAVBAR
==============================*/

.nav-links li{

    position:relative;

}

.nav-links li::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.35s;

}

.nav-links li:hover::after{

    width:100%;

}

/*==============================
        LOGO
==============================*/

.logo img{

    transition:.35s;

}

.logo img:hover{

    transform:scale(1.05);

}

/*==============================
        CARDS
==============================*/

.service-card:hover{

    transform:translateY(-15px);

}

.value-card:hover{

    transform:translateY(-15px);

}

.why-card:hover{

    transform:translateY(-15px);

}

.testimonial-card:hover{

    transform:translateY(-15px);

}

.client-card:hover{

    transform:translateY(-10px);

}

/*==============================
        ICONOS
==============================*/

.service-icon{

    transition:.4s;

}

.service-card:hover .service-icon{

    transform:rotate(12deg) scale(1.08);

    background:var(--primary);

}

.service-card:hover .service-icon i{

    color:#ffffff;

}
/*=========================================
        CONTADORES
=========================================*/

.counter-item{

    transition:.4s ease;

}

.counter-item:hover{

    transform:translateY(-12px);

}

.counter-item h2{

    transition:.35s;

}

.counter-item:hover h2{

    color:#9cc7ff;

}

/*=========================================
        ABOUT IMAGE
=========================================*/

.about-image{

    overflow:hidden;

    border-radius:20px;

}

.about-image img{

    transition:1s;

}

.about-image:hover img{

    transform:scale(1.08);

}

/*=========================================
        CLIENTES
=========================================*/

.client-card{

    overflow:hidden;

}

.client-card img{

    transition:.45s;

}

.client-card:hover img{

    transform:scale(1.08);

}

/*=========================================
        TESTIMONIOS
=========================================*/

.testimonial-card{

    position:relative;

    overflow:hidden;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    width:6px;

    height:0;

    left:0;

    top:0;

    background:var(--primary);

    transition:.45s;

}

.testimonial-card:hover::before{

    height:100%;

}

/*=========================================
        FORMULARIO
=========================================*/

.contact-form input,

.contact-form textarea,

.contact-form select{

    transition:.35s;

}

.contact-form input:hover,

.contact-form textarea:hover,

.contact-form select:hover{

    border-color:var(--primary);

}

.contact-form input:focus,

.contact-form textarea:focus,

.contact-form select:focus{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(11,46,89,.12);

}

.contact-form button{

    overflow:hidden;

    position:relative;

}

.contact-form button::before{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    top:0;

    left:0;

    background:rgba(255,255,255,.15);

    transition:.4s;

}

.contact-form button:hover::before{

    width:100%;

}

/*=========================================
        FOOTER
=========================================*/

footer ul li{

    transition:.3s;

}

footer ul li:hover{

    transform:translateX(8px);

}

.social a{

    position:relative;

    overflow:hidden;

}

.social a::after{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    left:-100%;

    top:0;

    background:rgba(255,255,255,.18);

    transition:.35s;

}

.social a:hover::after{

    left:100%;

}

/*=========================================
        BOTÓN WHATSAPP
=========================================*/

.whatsapp{

    animation:whatsappPulse 2s infinite;

}

@keyframes whatsappPulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.5);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

/*=========================================
        BOTÓN ARRIBA
=========================================*/

#topBtn{

    transition:.35s;

}

#topBtn:hover{

    transform:translateY(-8px) rotate(360deg);

}

/*=========================================
        PRELOADER
=========================================*/

.loader{

    animation:

        spin 1s linear infinite,

        loaderScale 2s ease infinite;

}

@keyframes loaderScale{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

/*=========================================
        SCROLL INDICATOR
=========================================*/

.scroll-down{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,15px);

    }

    100%{

        transform:translate(-50%,0);

    }

}

/*=========================================
        FLOATING ICONS
=========================================*/

.floating{

    animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================
        TITLES
=========================================*/

.section-title h2{

    transition:.35s;

}

.section-title:hover h2{

    letter-spacing:1px;

}

/*=========================================
        IMÁGENES
=========================================*/

img{

    transition:.5s;

}

/*=========================================
        EFECTO GLASS
=========================================*/

.glass{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}

/*=========================================
        SOMBRA PREMIUM
=========================================*/

.shadow-hover{

    transition:.35s;

}

.shadow-hover:hover{

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

/*=========================================
        DELAY CLASSES
=========================================*/

.delay-1{

    transition-delay:.1s;

}

.delay-2{

    transition-delay:.2s;

}

.delay-3{

    transition-delay:.3s;

}

.delay-4{

    transition-delay:.4s;

}

.delay-5{

    transition-delay:.5s;

}

/*=========================================
        ANIMACIÓN GENERAL
=========================================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:all .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}