/*==================================================
        NEXA ELECTRICAL SOLUTIONS
        ANIMATIONS
==================================================*/


/*=================================
        HERO IMAGE FLOAT
=================================*/

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-image img{

    animation:floatImage 5s ease-in-out infinite;

}


/*=================================
        GOLD CIRCLE FLOAT
=================================*/

@keyframes floatCircle{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-10px,-15px);

    }

    100%{

        transform:translate(0,0);

    }

}

.gold-circle{

    animation:floatCircle 8s ease-in-out infinite;

}

.gold-circle.two{

    animation-delay:2s;

}


/*=================================
        BUTTON SHINE
=================================*/

.primary-btn,
.quote-btn{

    position:relative;

    overflow:hidden;

}

.primary-btn::before,
.quote-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

}

.primary-btn:hover::before,
.quote-btn:hover::before{

    left:120%;

    transition:.8s;

}


/*=================================
        CARD HOVER
=================================*/

.service-card,
.why-card,
.review-card,
.stat-card,
.process-card,
.info-card{

    transition:.35s ease;

}

.service-card:hover,
.why-card:hover,
.review-card:hover,
.stat-card:hover,
.process-card:hover,
.info-card:hover{

    transform:translateY(-10px);

}


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

.service-content i,
.why-card i,
.info-icon{

    transition:.4s;

}

.service-card:hover i,
.why-card:hover i,
.info-card:hover .info-icon{

    transform:rotate(360deg);

}


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

.service-card{

    overflow:hidden;

}

.service-card img{

    transition:.45s;

}

.service-card:hover img{

    transform:scale(1.08);

}


/*=================================
        SOCIAL ICON
=================================*/

.footer-social a{

    transition:.35s;

}

.footer-social a:hover{

    transform:translateY(-6px);

}


/*=================================
        PULSE
=================================*/

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(212,175,55,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(212,175,55,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(212,175,55,0);

    }

}

.primary-btn{

    animation:pulse 2.5s infinite;

}


/*=================================
        WHATSAPP
=================================*/

@keyframes whatsappPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

.floating-whatsapp{

    animation:whatsappPulse 2s infinite;

}


/*=================================
        CALL BUTTON
=================================*/

@keyframes callPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

.floating-call{

    animation:callPulse 2.5s infinite;

}


/*=================================
        BACK TO TOP
=================================*/

.back-to-top{

    transition:.35s;

}

.back-to-top:hover{

    transform:translateY(-6px);

}


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

.hidden{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}


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

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:1s;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}


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

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:1s;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}


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

.zoom{

    opacity:0;

    transform:scale(.85);

    transition:1s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}


/*=================================
        TITLE LINE
=================================*/

.section-heading span{

    position:relative;

}

.section-heading span::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:45px;

    height:2px;

    background:#D4AF37;

    transform:translateX(-50%);

}


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

.logo img{

    transition:.35s;

}

.logo img:hover{

    transform:scale(1.06);

}


/*=================================
        NAV LINK
=================================*/

nav ul li a{

    transition:.3s;

}

nav ul li a:hover{

    transform:translateY(-2px);

}


/*=================================
        STAT NUMBER
=================================*/

.stat-card h2{

    transition:.35s;

}

.stat-card:hover h2{

    color:#D4AF37;

}


/*=================================
        FAQ ICON
=================================*/

.faq-question i{

    transition:.35s;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}


/*=================================
        SCROLL BAR
=================================*/

.scroll-progress{

    transition:width .2s linear;

}


/*=================================
        MAP
=================================*/

.map-wrapper{

    transition:.35s;

}

.map-wrapper:hover{

    transform:translateY(-8px);

}


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

.hero-buttons a{

    transition:.35s;

}

.hero-buttons a:hover{

    transform:translateY(-6px);

}


/*=================================
        FEATURE TAGS
=================================*/

.hero-features div{

    transition:.35s;

}

.hero-features div:hover{

    background:#111;

    color:#fff;

}


/*=================================
        BRAND LOGOS
=================================*/

.brand-wrapper img{

    transition:.4s;

}

.brand-wrapper img:hover{

    transform:scale(1.1);

    filter:none;

}


/*=================================
        EXPERIENCE CARD
=================================*/

.experience-card{

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

}