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

/* Loader Spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade Up */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Down */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* Scale In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Floating Hero */
@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Pulse */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Glow */
@keyframes glow {

    0% {
        box-shadow: 0 0 0 rgba(199,168,109,.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(199,168,109,.5);
    }

    100% {
        box-shadow: 0 0 0 rgba(199,168,109,.2);
    }

}

/* Rotate */

@keyframes rotateSlow{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* Shine */

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:120%;

    }

}

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

.hero-content{

    animation:fadeUp 1.2s ease;

}

.hero h1{

    animation:fadeDown 1.3s ease;

}

.hero p{

    animation:fadeIn 2s ease;

}

.hero-buttons{

    animation:fadeUp 1.8s ease;

}

.hero img{

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

}

/*==========================================
        BUTTON EFFECTS
==========================================*/

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        rgba(255,255,255,.3);

    transform:skewX(-25deg);

}

.btn-primary:hover::before{

    animation:shine .8s linear;

}

.btn-primary:hover{

    animation:pulse .5s;

}

.quote-btn:hover{

    animation:glow .8s;

}

/*==========================================
        IMAGE EFFECTS
==========================================*/

.gallery img{

    transition:.6s;

}

.gallery img:hover{

    transform:scale(1.08);

}

.about-image{

    overflow:hidden;

    border-radius:20px;

}

.about-image img{

    transition:.7s;

}

.about-image:hover img{

    transform:scale(1.1);

}

.left img{

    transition:.6s;

}

.left:hover img{

    transform:scale(1.05);

}

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

.service-card{

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-12px);

}

.service-card:hover i{

    transform:rotate(360deg);

}

.service-card i{

    transition:.6s;

}

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

.counter{

    transition:.35s;

}

.counter:hover{

    transform:translateY(-10px);

}

/*==========================================
        TESTIMONIALS
==========================================*/

.swiper-slide{

    transition:.4s;

}

.swiper-slide:hover{

    transform:scale(1.04);

}

/*==========================================
        SOCIAL ICONS
==========================================*/

.social-icons a{

    transition:.35s;

}

.social-icons a:hover{

    transform:translateY(-6px);

}

/*==========================================
        CONTACT FORM
==========================================*/

.contact input,
.contact textarea{

    transition:.35s;

}

.contact input:focus,
.contact textarea:focus{

    transform:scale(1.02);

}

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

footer a{

    transition:.35s;

}

footer a:hover{

    color:#C7A86D;

}

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

#topBtn{

    transition:.35s;

}

#topBtn:hover{

    transform:translateY(-8px);

}

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

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

.fade-right{

    animation:fadeRight .8s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}

.fade-in{

    animation:fadeIn .8s ease both;

}

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

.delay-1{

    animation-delay:.2s;

}

.delay-2{

    animation-delay:.4s;

}

.delay-3{

    animation-delay:.6s;

}

.delay-4{

    animation-delay:.8s;

}

/*==========================================
        SMOOTH IMAGE HOVER
==========================================*/

.project-card{

    overflow:hidden;

    border-radius:18px;

}

.project-card img{

    transition:transform .6s ease;

}

.project-card:hover img{

    transform:scale(1.12);

}

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

.glass:hover{

    backdrop-filter:blur(20px);

    transform:translateY(-8px);

    transition:.4s;

}