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

*{

transition:

all .4s ease;

}


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

.fade-in{

animation:

fadeIn 1.2s ease forwards;

}

@keyframes fadeIn{

from{

opacity:0;

transform:

translateY(40px);

}

to{

opacity:1;

transform:

translateY(0);

}

}


/* ==========================
FLOATING EFFECT
========================== */

.floating{

animation:

floating 4s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-15px);

}

100%{

transform:
translateY(0);

}

}


/* ==========================
BUTTON POP EFFECT
========================== */

.btn:hover{

transform:

translateY(-6px)
scale(1.03);

}


/* ==========================
PRODUCT CARD
========================== */

.product-card{

transform-style:

preserve-3d;

}

.product-card:hover{

transform:

translateY(-15px)
rotateX(5deg);

}


/* ==========================
IMAGE ZOOM
========================== */

.product-card img{

transition:

transform .6s ease;

}

.product-card:hover img{

transform:

scale(1.08);

}


/* ==========================
SERVICE ITEMS
========================== */

.service-item:hover{

transform:

translateY(-10px);

}








/* ==========================
HERO TEXT ANIMATION
========================== */

.hero-text h1{

animation:
heroTitle 1.2s ease;

}

.hero-text p{

animation:
heroText 1.8s ease;

}

@keyframes heroTitle{

from{

opacity:0;

transform:
translateY(80px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

@keyframes heroText{

from{

opacity:0;

transform:
translateY(50px);

}

to{

opacity:1;

transform:
translateY(0);

}

}


/* ==========================
NAVBAR ANIMATION
========================== */

.navbar{

animation:
navbarShow .8s ease;

}

@keyframes navbarShow{

from{

opacity:0;

transform:
translateY(-100px);

}

to{

opacity:1;

transform:
translateY(0);

}

}


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

.whatsapp{

animation:
pulse 2.5s infinite;

}

@keyframes pulse{

0%{

box-shadow:
0 0 0 0
rgba(37,211,102,.6);

}

70%{

box-shadow:
0 0 0 25px
rgba(37,211,102,0);

}

100%{

box-shadow:
0 0 0 0
rgba(37,211,102,0);

}

}


/* ==========================
APPLE BACKGROUND BLOBS
========================== */

.blur-circle-1{

position:absolute;

top:-150px;
right:-150px;

width:400px;
height:400px;

background:
rgba(0,113,227,.15);

border-radius:50%;

filter:blur(120px);

animation:
floating 8s infinite;

z-index:-1;

}

.blur-circle-2{

position:absolute;

bottom:-180px;
left:-180px;

width:450px;
height:450px;

background:
rgba(255,170,0,.12);

border-radius:50%;

filter:blur(140px);

animation:
floating 10s infinite;

z-index:-1;

}


/* ==========================
PRODUCT APPEAR EFFECT
========================== */

.product-card{

animation:
cardFade 1s ease;

}

@keyframes cardFade{

from{

opacity:0;

transform:
translateY(80px);

}

to{

opacity:1;

transform:
translateY(0);

}

}


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

footer{

animation:
fadeInFooter 1.5s ease;

}

@keyframes fadeInFooter{

from{

opacity:0;

}

to{

opacity:1;

}

}





/* ==========================
PAGE LOAD
========================== */

body{

animation:
pageLoad 1s ease;

}

@keyframes pageLoad{

from{

opacity:0;

}

to{

opacity:1;

}

}


/* ==========================
BUTTON SHINE EFFECT
========================== */

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:80%;
height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

transition:.8s;

}

.btn:hover::before{

left:130%;

}


/* ==========================
FLOATING PRODUCT IMAGE
========================== */

.product-card img{

animation:

productFloat 5s
ease-in-out infinite;

}

@keyframes productFloat{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-8px);

}

100%{

transform:
translateY(0);

}

}


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

.reveal{

opacity:0;

transform:
translateY(80px);

transition:
1s;

}

.reveal.active{

opacity:1;

transform:
translateY(0);

}


/* ==========================
HERO BACKGROUND MOVEMENT
========================== */

.hero{

animation:
heroZoom 18s linear infinite alternate;

}

@keyframes heroZoom{

from{

background-size:100%;

}

to{

background-size:110%;

}

}


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

.logo{

transition:.4s;

}

.logo:hover{

transform:
scale(1.05);

}


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

.footer-grid a:hover{

transform:
translateX(6px);

}


/* ==========================
CARD GLOW
========================== */

.product-card:hover{

box-shadow:

0 35px 80px
rgba(0,113,227,.18);

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

background:#bdbdbd;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#0071e3;

}

body{

opacity:1;

transition:1s;

}

body.loaded{

opacity:1;

}

/* PARTICLES */

.particle{

position:fixed;

width:10px;
height:10px;

background:

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

border-radius:50%;

pointer-events:none;

animation:

particleFloat 12s linear infinite;

z-index:-1;

}

@keyframes particleFloat{

0%{

transform:

translateY(100vh);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:

translateY(-100px);

opacity:0;

}

}