.fade-up{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.fade-up.active{

opacity:1;

transform:translateY(0);

}

.zoom{

overflow:hidden;

}

.zoom img{

transition:.5s;

}

.zoom:hover img{

transform:scale(1.08);

}

.float{

animation:float 3s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}
.navbar a{

    transition:

    color .3s,

    transform .3s;

}

.navbar a:hover{

    transform:translateY(-2px);

}
/*======================================
        HERO TEXT ANIMATION
======================================*/

.hero-left{
    animation:heroFadeLeft 1s ease forwards;
}

.hero-right{
    animation:heroFadeRight 1s ease forwards;
}

@keyframes heroFadeLeft{

    from{

        opacity:0;
        transform:translateX(-60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes heroFadeRight{

    from{

        opacity:0;
        transform:translateX(60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

/*======================================
        EMERGENCY BADGE
======================================*/

.emergency-badge{

    animation:pulseBadge 2.5s infinite;

}

@keyframes pulseBadge{

    0%{

        box-shadow:0 0 0 rgba(227,30,36,.25);

    }

    50%{

        box-shadow:0 0 25px rgba(227,30,36,.25);

    }

    100%{

        box-shadow:0 0 0 rgba(227,30,36,.25);

    }

}

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

.hero-image{

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

}

@keyframes imageZoom{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

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

.btn-primary,
.btn-secondary{

    position:relative;
    overflow:hidden;

}

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

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.8s;

}

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

    left:130%;

}

/*======================================
        TRUST BADGES
======================================*/

.trust-badges div{

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

}

.trust-badges div:nth-child(2){

    animation-delay:.4s;

}

.trust-badges div:nth-child(3){

    animation-delay:.8s;

}

.trust-badges div:nth-child(4){

    animation-delay:1.2s;

}

@keyframes badgeFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

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

.scroll-indicator{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    font-size:28px;

    color:var(--primary);

    animation:scrollBounce 2s infinite;

}

@keyframes scrollBounce{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

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

    }

}
/*======================================
CTA ANIMATION
======================================*/

.cta-call{

animation:pulseCall 2s infinite;

}

@keyframes pulseCall{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}
/*======================================
ABOUT HERO ANIMATION
======================================*/

.about-hero-content{

animation:aboutFadeUp 1s ease;

}

@keyframes aboutFadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}