/*==============================
TRANSITION
==============================*/
a,
button,
img,
.theme-btn,
.outline-btn,
.card{
    transition:all .4s ease;
}
/*==============================
FLOATING LEAVES
==============================*/
.leaf-left{
    animation:leafLeft 8s ease-in-out infinite;
}
.leaf-right{
    animation:leafRight 10s ease-in-out infinite;
}
@keyframes leafLeft{
    0%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(-18px) rotate(4deg);
    }
    100%{
        transform:translateY(0) rotate(0deg);
    }
}
@keyframes leafRight{
    0%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(20px) rotate(-5deg);
    }
    100%{
        transform:translateY(0) rotate(0deg);
    }
}
/*==============================
BUTTON RIPPLE
==============================*/
.theme-btn,
.outline-btn{
    position:relative;
    overflow:hidden;
}
.theme-btn::before,
.outline-btn::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    transform:translate(-50%,-50%);
    transition:.7s;
}
.theme-btn:hover::before,
.outline-btn:hover::before{
    width:320px;
    height:320px;
}
/*==============================
BUTTON LIFT
==============================*/
.theme-btn:hover,
.outline-btn:hover{
    transform:translateY(-5px);
}
/*==============================
NAV LINK
==============================*/
.navbar-nav li a{
    transition:.35s;
}
.navbar-nav li a:hover{
    color:var(--secondary);
}

/*==============================
LOGO
==============================*/
.navbar-brand img{
    transition:.5s;
}
.navbar-brand:hover img{
    transform:scale(1.05);
}

/*==============================
SCROLL ICON
==============================*/
.scroll-down{
    animation:fadeIn 1.5s;
}
.scroll-down i{
    animation:scrollBounce 2s infinite;
}
@keyframes scrollBounce{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(10px);
    }
    100%{
        transform:translateY(0);
    }
}
/*==============================
FADE IN
==============================*/
@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
/*==============================
ZOOM HOVER
==============================*/
.hero-btns a:hover{
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}
/*==============================
HERO CONTENT
==============================*/
.hero-content h1{
    animation:titleReveal 1s ease;
}
.hero-content p{
    animation:textReveal 1.3s ease;
}
@keyframes titleReveal{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
@keyframes textReveal{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/*=============================
IMAGE ZOOM
==============================*/
.hero-slide{
    animation:heroZoom 10s linear infinite;
}
@keyframes heroZoom{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.08);
    }
}
/*==============================
SOFT GLOW
==============================*/
.theme-btn{
    box-shadow:0 10px 30px rgba(201,166,107,.30);
}
.theme-btn:hover{
    box-shadow:0 20px 40px rgba(201,166,107,.45);
}
/*==============================
SECTION FADE
==============================*/
.fade-up{
    opacity:0;
    transform:translateY(40px);
}
.fade-left{
    opacity:0;
    transform:translateX(-40px);
}
.fade-right{
    opacity:0;
    transform:translateX(40px);
}

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

img{
    transition:.6s;
}

/*==============================
SELECTION
==============================*/
::selection{
    background:var(--secondary);
    color:#fff;
}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{
    width:10px;
}
::-webkit-scrollbar-track{
    background:#f3f3f3;
}
::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{
    background:var(--primary-dark);
}