/* ===========================
SCROLL ANIMATION
=========================== */

section{

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

}

section.show{

opacity:1;
transform:translateY(0);

}


/* ===========================
FLOATING BLOBS
=========================== */

.one{

animation:blobOne 10s infinite alternate ease-in-out;

}

.two{

animation:blobTwo 12s infinite alternate ease-in-out;

}

.three{

animation:blobThree 14s infinite alternate ease-in-out;

}

@keyframes blobOne{

0%{

transform:translate(0,0);

}

100%{

transform:translate(120px,80px);

}

}

@keyframes blobTwo{

0%{

transform:translate(0,0);

}

100%{

transform:translate(-150px,-100px);

}

}

@keyframes blobThree{

0%{

transform:translate(0,0);

}

100%{

transform:translate(80px,-100px);

}

}


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

.primary-btn,
.nav-btn{

position:relative;
overflow:hidden;
transition:.4s;

}

.primary-btn:hover,
.nav-btn:hover{

box-shadow:0 0 30px rgba(0,170,255,.6);
transform:translateY(-5px);

}


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

.project-card{

position:relative;

}

.project-card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(135deg,
transparent,
rgba(0,170,255,.15),
transparent);

opacity:0;

transition:.5s;

}

.project-card:hover::before{

opacity:1;

}

.project-card:hover{

border-color:#00aaff;

}


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

.project-card{

overflow:hidden;

}

.project-card img{

transition:1s;

}

.project-card:hover img{

transform:scale(1.12);

}


/* ===========================
VIEW BUTTON
=========================== */

.view-btn{

transition:.4s;

}

.project-card:hover .view-btn{

padding-left:35px;

}


/* ===========================
CASE STUDY
=========================== */

#caseStudy{

transition:.8s;

}

#caseStudy.active{

animation:caseStudy .8s ease;

}

@keyframes caseStudy{

0%{

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

}

100%{

opacity:1;
transform:translateY(0);

}

}


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

.contact-box{

transition:.5s;

}

.contact-box:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,170,255,.35);

}


/* ===========================
NAV ACTIVE
=========================== */

.navbar .active{

color:#00aaff;

}


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

.hero-image img{

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

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}


/* ===========================
TEXT FADE
=========================== */

.hero-content h1{

animation:title 1.2s ease;

}

.hero-content p{

animation:para 1.8s ease;

}

@keyframes title{

from{

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

}

to{

opacity:1;
transform:translateY(0);

}

}

@keyframes para{

from{

opacity:0;

}

to{

opacity:1;

}

}