/*==================================================
    SAANVIKA STUDIOS
    ANIMATIONS.CSS
==================================================*/

/*==============================
        KEYFRAMES
==============================*/

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(60px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-60px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.85);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes float{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes shimmer{

    0%{
        background-position:-200% 0;
    }

    100%{
        background-position:200% 0;
    }

}

@keyframes rotateSlow{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

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

.hero-content h4{

    animation:fadeDown 1s ease;

}

.hero-content h1{

    animation:fadeUp 1.2s ease;

}

.hero-content p{

    animation:fadeUp 1.5s ease;

}

.hero-buttons{

    animation:fadeUp 1.8s ease;

}

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

.navbar-brand{

    animation:fadeLeft .8s ease;

}

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

.btn-primary-custom{

    transition:.35s;

}

.btn-primary-custom:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(201,162,39,.45);

}

.btn-outline-custom{

    transition:.35s;

}

.btn-outline-custom:hover{

    transform:translateY(-4px);

}

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

.card-box{

    transition:.4s;

}

.card-box:hover{

    transform:translateY(-10px);

}

/*==============================
        PORTFOLIO IMAGE
==============================*/

.portfolio-item{

    overflow:hidden;

}

.portfolio-item img{

    transition:.6s;

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

/*==============================
        SERVICE ICON
==============================*/

.service-icon{

    transition:.35s;

}

.card-box:hover .service-icon{

    transform:rotate(8deg) scale(1.1);

}

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

.whatsapp-btn{

    animation:pulse 2s infinite;

}

/*==============================
        SCROLL TO TOP
==============================*/

.scroll-top{

    transition:.4s;

}

.scroll-top:hover{

    transform:translateY(-5px);

}

/*==============================
        IMAGE OVERLAY
==============================*/

.image-overlay{

    opacity:0;

    transition:.4s;

}

.portfolio-item:hover .image-overlay{

    opacity:1;

}

/*==============================
        GALLERY HOVER
==============================*/

.gallery-item{

    overflow:hidden;

}

.gallery-item img{

    transition:.6s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

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

.testimonial{

    transition:.35s;

}

.testimonial:hover{

    transform:translateY(-8px);

}

/*==============================
        CTA
==============================*/

#cta{

    position:relative;

}

#cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    background-size:200% 100%;

    animation:shimmer 5s linear infinite;

}

/*==============================
        FLOATING ELEMENTS
==============================*/

.float{

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

}

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

.rotate-slow{

    animation:rotateSlow 25s linear infinite;

}

/*==============================
        FADE CLASSES
==============================*/

.fade-up{

    animation:fadeUp 1s ease both;

}

.fade-down{

    animation:fadeDown 1s ease both;

}

.fade-left{

    animation:fadeLeft 1s ease both;

}

.fade-right{

    animation:fadeRight 1s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}

.fade-in{

    animation:fadeIn 1s ease both;

}

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

.delay-1{

    animation-delay:.2s;

}

.delay-2{

    animation-delay:.4s;

}

.delay-3{

    animation-delay:.6s;

}

.delay-4{

    animation-delay:.8s;

}

.delay-5{

    animation-delay:1s;

}