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

*{
    transition:all .35s ease;
}

html{
    scroll-behavior:smooth;
}

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

.fade-in{
    animation:fadeIn 1s ease forwards;
}

@keyframes fadeIn{

from{
    opacity:0;
}

to{
    opacity:1;
}

}

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

.fade-up{
    animation:fadeUp .8s ease forwards;
}

@keyframes fadeUp{

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

100%{
    opacity:1;
    transform:translateY(0);
}

}

/* ==========================================
   FADE LEFT
========================================== */

.fade-left{
    animation:fadeLeft .8s ease forwards;
}

@keyframes fadeLeft{

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

100%{
    opacity:1;
    transform:translateX(0);
}

}

/* ==========================================
   FADE RIGHT
========================================== */

.fade-right{
    animation:fadeRight .8s ease forwards;
}

@keyframes fadeRight{

0%{
    opacity:0;
    transform:translateX(40px);
}

100%{
    opacity:1;
    transform:translateX(0);
}

}

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

.zoom-in{
    animation:zoomIn .8s ease;
}

@keyframes zoomIn{

0%{
    opacity:0;
    transform:scale(.8);
}

100%{
    opacity:1;
    transform:scale(1);
}

}

/* ==========================================
   FLOATING HERO CARD
========================================== */

.glass-card{

animation:floatCard 6s ease-in-out infinite;

}

@keyframes floatCard{

0%{
    transform:translateY(0);
}

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

100%{
    transform:translateY(0);
}

}

/* ==========================================
   HERO IMAGE
========================================== */

.hero-image{

animation:heroImage 8s ease-in-out infinite;

}

@keyframes heroImage{

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

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

100%{
    transform:translateY(0);
}

}

/* ==========================================
   BUTTONS
========================================== */

.btn-primary{

position:relative;
overflow:hidden;

}

.btn-primary::before{

content:"";
position:absolute;
top:0;
left:-120%;
width:100%;
height:100%;
background:rgba(255,255,255,.25);
transform:skewX(-25deg);

}

.btn-primary:hover::before{

left:130%;
transition:.8s;

}

.btn-primary:hover{

transform:translateY(-5px);

}

.btn-secondary:hover{

transform:translateY(-5px);

}

/* ==========================================
   CARDS
========================================== */

.card,
.value-card,
.pillar-card,
.project-card,
.stat,
.contact-info,
.contact-form{

transition:.35s ease;

}

.card:hover,
.value-card:hover,
.pillar-card:hover,
.project-card:hover,
.stat:hover,
.contact-info:hover,
.contact-form:hover{

transform:translateY(-10px);

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

}

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

.card i,
.value-card i,
.pillar-card i,
.info-box i,
.card-item i{

transition:.35s;

}

.card:hover i,
.value-card:hover i,
.pillar-card:hover i,
.info-box:hover i,
.card-item:hover i{

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

color:#14b8a6;

}

/* ==========================================
   PROJECT CARD BORDER
========================================== */

.project-card{

position:relative;
overflow:hidden;

}

.project-card::before{

content:"";
position:absolute;
top:0;
left:0;
height:5px;
width:0;
background:#14b8a6;

transition:.45s;

}

.project-card:hover::before{

width:100%;

}

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

.nav-links a{

position:relative;

}

.nav-links a::after{

content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#14b8a6;
transition:.35s;

}

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

width:100%;

}

/* ==========================================
   IMAGES
========================================== */

.about-image img{

transition:.45s;

}

.about-image:hover img{

transform:scale(1.05);

}

/* ==========================================
   INPUTS
========================================== */

input,
textarea{

transition:.3s;

}

input:focus,
textarea:focus{

box-shadow:0 0 0 4px rgba(20,184,166,.15);

}

/* ==========================================
   SCROLL INDICATOR
========================================== */

.scroll-down{

text-align:center;
margin-top:60px;
font-size:32px;
color:#14b8a6;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translateY(0);

}

40%{

transform:translateY(-15px);

}

60%{

transform:translateY(-8px);

}

}

/* ==========================================
   SECTION TITLES
========================================== */

.section-title h2{

position:relative;
display:inline-block;

}

.section-title h2::after{

content:"";
position:absolute;
left:50%;
bottom:-12px;
transform:translateX(-50%);
width:80px;
height:4px;
background:#14b8a6;
border-radius:10px;

}

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

footer i{

transition:.3s;

}

footer i:hover{

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

color:#14b8a6;

}

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

body{

animation:pageLoad .8s ease;

}

@keyframes pageLoad{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* ==========================================
   GRADIENT BACKGROUND
========================================== */

.hero{

background-size:300% 300%;

animation:gradientMove 10s ease infinite;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}