/*=========================================================
    Samuel J. Sarullo Insurance
    Animation Styles
=========================================================*/

/*=========================================================
    GLOBAL TRANSITIONS
=========================================================*/

*{

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

}

/*=========================================================
    FADE IN
=========================================================*/

.fade-in{

    opacity:0;

    animation:fadeIn 1s forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

.fade-up{

    opacity:0;

    transform:translateY(60px);

    animation:fadeUp .9s forwards;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.fade-down{

    opacity:0;

    transform:translateY(-50px);

    animation:fadeDown .8s forwards;

}

@keyframes fadeDown{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.fade-left{

    opacity:0;

    transform:translateX(-70px);

    animation:fadeLeft .9s forwards;

}

@keyframes fadeLeft{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.fade-right{

    opacity:0;

    transform:translateX(70px);

    animation:fadeRight .9s forwards;

}

@keyframes fadeRight{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.zoom-in{

    opacity:0;

    transform:scale(.85);

    animation:zoomIn .8s forwards;

}

@keyframes zoomIn{

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

.zoom-hover{

    overflow:hidden;

}

.zoom-hover img{

    transition:.45s;

}

.zoom-hover:hover img{

    transform:scale(1.08);

}

/*=========================================================
    FLOAT
=========================================================*/

.float{

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

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

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

.rotate:hover{

    transform:rotate(8deg);

}

/*=========================================================
    BUTTON HOVER
=========================================================*/

.btn{

    transition:.30s;

}

.btn:hover{

    transform:translateY(-4px);

}

/*=========================================================
    ICON HOVER
=========================================================*/

i{

    transition:.30s;

}

.service-card:hover i,

.why-card:hover i,

.trust-item:hover i{

    transform:scale(1.18);

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

.hero-image{

    animation:heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.service-card,
.why-card,
.trust-item,
.blog-card,
.testimonial{

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

}

.service-card:hover,
.why-card:hover,
.trust-item:hover,
.blog-card:hover,
.testimonial:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

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

.logo-slider{

    overflow:hidden;

    white-space:nowrap;

}

.logo-slider-track{

    display:flex;

    gap:60px;

    width:max-content;

    animation:logoScroll 35s linear infinite;

}

.logo-slider:hover .logo-slider-track{

    animation-play-state:paused;

}

@keyframes logoScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*=========================================================
    TESTIMONIAL
=========================================================*/

.testimonial{

    position:relative;

}

.testimonial::before{

    content:"❝";

    position:absolute;

    top:20px;

    right:25px;

    font-size:60px;

    opacity:.08;

    color:var(--primary);

}

/*=========================================================
    COUNTERS
=========================================================*/

.counter{

    transition:.4s;

}

.counter.complete{

    color:var(--accent);

}

/*=========================================================
    UNDERLINE
=========================================================*/

.desktop-navigation a{

    position:relative;

}

.desktop-navigation a::after{

    content:"";

    position:absolute;

    left:18px;

    bottom:18px;

    width:0;

    height:3px;

    background:var(--accent);

    transition:.30s;

}

.desktop-navigation a:hover::after,

.desktop-navigation a.active::after{

    width:calc(100% - 36px);

}

/*=========================================================
    SEARCH
=========================================================*/

.search-overlay{

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.search-overlay.show{

    opacity:1;

    visibility:visible;

}

/*=========================================================
    MOBILE MENU
=========================================================*/

.mobile-navigation{

    transition:right .35s ease;

}

.mobile-navigation.open{

    right:0;

}

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

#backToTop{

    opacity:0;

    transform:translateY(30px);

    transition:.35s;

}

#backToTop.show{

    opacity:1;

    transform:translateY(0);

    display:flex;

    justify-content:center;

    align-items:center;

}

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

#preloader.fade-out{

    opacity:0;

    visibility:hidden;

    transition:.6s;

}

/*=========================================================
    SCROLL REVEAL
=========================================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/*=========================================================
    DELAYS
=========================================================*/

.delay-1{

    animation-delay:.1s;

}

.delay-2{

    animation-delay:.2s;

}

.delay-3{

    animation-delay:.3s;

}

.delay-4{

    animation-delay:.4s;

}

.delay-5{

    animation-delay:.5s;

}

.delay-6{

    animation-delay:.6s;

}

/*=========================================================
    SHAKE
=========================================================*/

.shake:hover{

    animation:shake .5s;

}

@keyframes shake{

    0%{transform:translateX(0);}

    20%{transform:translateX(-4px);}

    40%{transform:translateX(4px);}

    60%{transform:translateX(-4px);}

    80%{transform:translateX(4px);}

    100%{transform:translateX(0);}

}

/*=========================================================
    SPIN
=========================================================*/

.spin:hover{

    transform:rotate(360deg);

}

/*=========================================================
    BOUNCE
=========================================================*/

.bounce:hover{

    animation:bounce .8s;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    25%{

        transform:translateY(-8px);

    }

    50%{

        transform:translateY(0);

    }

    75%{

        transform:translateY(-4px);

    }

}

/*=========================================================
    FADE ON LOAD
=========================================================*/

.page-loaded{

    animation:fadeIn .8s;

}

/*=========================================================
    PERFORMANCE
=========================================================*/

.reveal,
.hero-image,
.service-card,
.blog-card,
.testimonial,
.why-card{

    will-change:transform,opacity;

}

/*=========================================================
    REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

}

}

/*=========================================================
    END OF ANIMATIONS.CSS
=========================================================*/