/* ===========================================
   DISCOVER SPITI
   ANIMATIONS
===========================================*/

/* ------------------------------
Hero Background Zoom
------------------------------ */

@keyframes zoomHero{

0%{

transform:scale(1);

}

50%{

transform:scale(1.12);

}

100%{

transform:scale(1);

}

}

/* ------------------------------
Scroll Indicator
------------------------------ */

@keyframes scrollDown{

0%{

opacity:0;
transform:translateY(-15px);

}

50%{

opacity:1;

}

100%{

opacity:0;
transform:translateY(15px);

}

}

/* ------------------------------
Fade Up
------------------------------ */

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(60px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

/* ------------------------------
Fade Left
------------------------------ */

@keyframes fadeLeft{

0%{

opacity:0;
transform:translateX(-80px);

}

100%{

opacity:1;
transform:translateX(0);

}

}

/* ------------------------------
Fade Right
------------------------------ */

@keyframes fadeRight{

0%{

opacity:0;
transform:translateX(80px);

}

100%{

opacity:1;
transform:translateX(0);

}

}

/* ------------------------------
Fade In
------------------------------ */

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* ------------------------------
Floating Effect
------------------------------ */

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* ------------------------------
Button Glow
------------------------------ */

@keyframes glow{

0%{

box-shadow:0 0 0 rgba(214,181,109,.0);

}

50%{

box-shadow:0 0 40px rgba(214,181,109,.65);

}

100%{

box-shadow:0 0 0 rgba(214,181,109,.0);

}

}

/* ------------------------------
Gradient Move
------------------------------ */

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

/* ------------------------------
Rotate
------------------------------ */

@keyframes rotateSlow{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/* ------------------------------
Pulse
------------------------------ */

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

100%{

transform:scale(1);

}

}

/* ===========================================
ANIMATION CLASSES
===========================================*/

.fade-up{

animation:fadeUp 1.2s ease forwards;

}

.fade-left{

animation:fadeLeft 1.2s ease forwards;

}

.fade-right{

animation:fadeRight 1.2s ease forwards;

}

.fade{

animation:fadeIn 1.5s ease forwards;

}

.float{

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

}

.glow{

animation:glow 3s infinite;

}

.pulse{

animation:pulse 3s infinite;

}

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

img{

transition:1s;

}

button{

transition:.35s;

}

a{

transition:.35s;

}

.feature-card{

transition:.45s;

}

.experience-item{

transition:.45s;

}

.footer-button{

transition:.35s;

}

.btn-primary{

transition:.35s;

}

.btn-secondary{

transition:.35s;

}

/* ===========================================
HOVER EFFECTS
===========================================*/

.hero-image:hover{

transform:scale(1.05);

}

.intro-image img:hover{

transform:scale(1.08);

}

.quote-bg:hover{

transform:scale(1.04);

}

.feature-card:hover{

transform:translateY(-12px) scale(1.03);

}

.experience-item:hover{

transform:translateY(-10px);

}

.footer-button:hover{

transform:translateY(-5px);

}

.btn-primary:hover{

transform:translateY(-6px);

animation:glow 2s infinite;

}

.btn-secondary:hover{

transform:translateY(-6px);

}

.banner-button:hover{

transform:translateY(-8px);

animation:glow 2s infinite;

}

.whatsapp:hover{

transform:scale(1.12) rotate(5deg);

}

#topBtn:hover{

transform:translateY(-8px);

}

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

.reveal{

opacity:0;
transform:translateY(60px);
transition:1s ease;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}

/* ===========================================
GLASS EFFECT
===========================================*/

.glass{

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

}

/* ===========================================
TEXT SHADOWS
===========================================*/

.hero h1,
.banner-content h2,
.quote-content h2{

text-shadow:

0 5px 15px rgba(0,0,0,.4),

0 15px 40px rgba(0,0,0,.6);

}

.section-title h2{

text-shadow:0 4px 10px rgba(0,0,0,.25);

}