/*=========================================
PREMIUM WEBSITE ANIMATIONS
Manas Global Ventures
=========================================*/

/* Smooth Scroll */

html{
scroll-behavior:smooth;
}

/* Smooth Transition */

*{
transition:0.35s ease;
}


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

.fade-up{

opacity:0;

transform:translateY(50px);

animation:fadeUp .9s forwards;

}

.delay-1{
animation-delay:.2s;
}

.delay-2{
animation-delay:.4s;
}

.delay-3{
animation-delay:.6s;
}

@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}

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

.btn-primary,
.btn-secondary,
.enquiry-btn{

position:relative;

overflow:hidden;

}

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

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

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

transform:skewX(-30deg);

transition:.7s;

}

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

left:150%;

}
/*=========================
PRODUCT CARD ANIMATION
=========================*/

.product-card{

position:relative;

overflow:hidden;

border-radius:20px;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.product-card img{

transition:transform .6s ease;

}

.product-card:hover img{

transform:scale(1.08);

}

/*=========================
WHY CARD
=========================*/

.why-card{

transition:.4s;

}

.why-card:hover{

transform:translateY(-10px);

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

}

.why-card i{

transition:.4s;

}

.why-card:hover i{

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

color:#d4af37;

}

/*=========================
GLOBAL IMAGE
=========================*/

.global-right img{

animation:worldFloat 7s ease-in-out infinite;

}

@keyframes worldFloat{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

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

.contact-box{

transition:.4s;

}

.contact-box:hover{

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

}

.contact input,
.contact textarea{

transition:.3s;

}

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

border-color:#d4af37;

box-shadow:0 0 12px rgba(212,175,55,.35);

outline:none;

}

/*=========================
SECTION TITLE
=========================*/

.section-title h2{

position:relative;

display:block;

width:fit-content;

margin:15px auto;

}

.section-title h2::after{

content:"";

position:absolute;

left:50%;

bottom:-12px;

transform:translateX(-50%);

width:70px;

height:4px;

background:#d4af37;

border-radius:10px;

}

/*=========================
NAVBAR LINKS
=========================*/

.nav-menu a{

position:relative;

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:#d4af37;

transition:.3s;

}

.nav-menu a:hover::after,
.nav-menu a.active::after{

width:100%;

}

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

img{

transition:transform .5s ease;

}

img:hover{

transform:scale(1.02);

}

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

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*=========================
HOVER GLOW
=========================*/

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

box-shadow:0 12px 30px rgba(212,175,55,.35);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

background:#d4af37;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#b8941f;

}
/*=========================
RIPPLE EFFECT
=========================*/

.btn-primary,
.btn-secondary,
.enquiry-btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

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

.top-btn{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#d4af37;

color:#fff;

font-size:18px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9999;

box-shadow:0 10px 25px rgba(0,0,0,.2);

}

.top-btn.show{

opacity:1;

visibility:visible;

}

.top-btn:hover{

transform:translateY(-5px);

background:#0b3d91;

}