/*=========================================
        GLOBAL ANIMATIONS
=========================================*/

html{
    scroll-behavior:smooth;
}

*{
    transition:0.35s ease;
}

/*=========================================
        FLOATING CRYSTAL IMAGE
=========================================*/

.floating-img{
    animation:floating 4s ease-in-out infinite;
}

@keyframes floating{

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

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

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

}

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

.hero-content h5{
    animation:fadeDown 1s ease;
}

.hero-content h1{
    animation:fadeLeft 1.2s ease;
}

.hero-content p{
    animation:fadeRight 1.5s ease;
}

.hero-btn{
    animation:fadeUp 2s ease;
}

/*=========================================
        FADE ANIMATIONS
=========================================*/

@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-50px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(50px);
}

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);
}

}

/*=========================================
        HERO BUTTON GLOW
=========================================*/

.hero-btn{

    box-shadow:0 0 0 rgba(255,255,255,.6);

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(255,255,255,.7);

}

70%{

box-shadow:0 0 0 18px rgba(255,255,255,0);

}

100%{

box-shadow:0 0 0 0 rgba(255,255,255,0);

}

}

/*=========================================
        FEATURE CARD
=========================================*/

.feature-box{

    position:relative;

    overflow:hidden;

}

.feature-box::before{

content:"";

position:absolute;

width:120%;

height:100%;

left:-120%;

top:0;

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

transition:.8s;

}

.feature-box:hover::before{

left:120%;

}

/*=========================================
        CRYSTAL CARD
=========================================*/

.crystal-card{

position:relative;

overflow:hidden;

}

.crystal-card::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:80%;

height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transform:skewX(-25deg);

transition:1s;

z-index:10;

}

.crystal-card:hover::before{

left:140%;

}

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

.crystal-card img{

transition:1s;

}

.crystal-card:hover img{

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

}

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

.social-icons i:hover{

animation:rotateIcon .5s linear;

}

@keyframes rotateIcon{

0%{
transform:rotate(0deg);
}

50%{
transform:rotate(180deg);
}

100%{
transform:rotate(360deg);
}

}

/*=========================================
        NEWSLETTER
=========================================*/

.newsletter{

position:relative;

overflow:hidden;

}

.newsletter::before{

content:"";

position:absolute;

width:250px;

height:250px;

border-radius:50%;

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

left:-80px;

top:-80px;

animation:moveCircle 10s linear infinite;

}

.newsletter::after{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

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

right:-50px;

bottom:-50px;

animation:moveCircle2 8s linear infinite;

}

@keyframes moveCircle{

0%{
transform:translateY(0);
}

50%{
transform:translateY(40px);
}

100%{
transform:translateY(0);
}

}

@keyframes moveCircle2{

0%{
transform:translateX(0);
}

50%{
transform:translateX(-40px);
}

100%{
transform:translateX(0);
}

}

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

section h2{

animation:titleGlow 3s infinite;

}

@keyframes titleGlow{

0%{

text-shadow:0 0 0 transparent;

}

50%{

text-shadow:0 0 18px rgba(180,80,255,.45);

}

100%{

text-shadow:0 0 0 transparent;

}

}

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

footer i{

transition:.4s;

}

footer i:hover{

transform:translateY(-8px) scale(1.2);

}

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

#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#9b4dca;

color:white;

font-size:22px;

display:none;

cursor:pointer;

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

z-index:999;

}

#topBtn:hover{

background:#ff9bdd;

transform:translateY(-5px);

}

/*=========================================
        LOADER
=========================================*/

.loader{

position:fixed;

width:100%;

height:100%;

background:#ffffff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader::before{

content:"";

width:70px;

height:70px;

border-radius:50%;

border:6px solid #e8d7ff;

border-top:6px solid #9b4dca;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}