/* =====================================
THEthele ANIMATIONS
===================================== */


/* GLOBAL TRANSITIONS */

* {

transition:
color .3s ease,
background .3s ease,
transform .3s ease,
opacity .3s ease;

}




/* FADE IN */

.fade-in {

opacity:0;
animation:fadeIn 1s forwards;

}


@keyframes fadeIn {

from {

opacity:0;

}

to {

opacity:1;

}

}






/* SLIDE UP */


.slide-up {

opacity:0;
transform:translateY(40px);
animation:slideUp .8s forwards;

}



@keyframes slideUp {


from {

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

}


to {

opacity:1;
transform:translateY(0);

}


}






/* SLIDE LEFT */


.slide-left {


opacity:0;
transform:translateX(-50px);
animation:slideLeft .8s forwards;


}



@keyframes slideLeft {


from {

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

}


to {

opacity:1;
transform:translateX(0);

}


}







/* SLIDE RIGHT */


.slide-right {


opacity:0;
transform:translateX(50px);
animation:slideRight .8s forwards;


}



@keyframes slideRight {


from {

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

}


to {

opacity:1;
transform:translateX(0);

}


}








/* HERO ANIMATION */


.hero-content {

animation:heroReveal 1.2s ease forwards;

}



@keyframes heroReveal {


from {

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

}


to {

opacity:1;
transform:translateY(0);

}


}







/* FLOATING EFFECT */


.scroll-down span {


animation:scrollMove 2s infinite;


}


@keyframes scrollMove {


0% {

transform:translateY(0);

opacity:1;

}


50% {

transform:translateY(15px);

opacity:.5;

}


100% {

transform:translateY(0);

opacity:1;

}


}







/* CARD HOVER */


.service-card:hover,
.project-card:hover,
.value-card:hover,
.mission-card:hover {


box-shadow:
0 25px 60px rgba(0,0,0,.18);


}








/* BUTTON ANIMATION */


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


transform:translateY(-3px);

}






/* IMAGE ZOOM */


.project-card img,
.image-box img {


transition:
transform .6s ease;


}



.project-card:hover img,
.image-box:hover img {


transform:scale(1.05);


}








/* COUNTER POP */


.stat-card h2 {


animation:
counterPulse 3s infinite;


}



@keyframes counterPulse {


0% {

transform:scale(1);

}


50% {

transform:scale(1.08);

}


100% {

transform:scale(1);

}


}








/* NAV ACTIVE UNDERLINE */


.nav-links a {


position:relative;


}



.nav-links a::after {


content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:#63d471;

transition:.3s;


}



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


width:100%;


}








/* PAGE HERO */


.page-hero {


animation:
pageHero 1s ease;


}



@keyframes pageHero {


from {

opacity:0;

transform:translateY(-20px);

}


to {

opacity:1;

transform:translateY(0);

}


}







/* REVEAL CLASS FOR JAVASCRIPT */


.reveal {


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


}



.reveal.active {


opacity:1;
transform:translateY(0);


}





/* MOBILE MENU ANIMATION */


.hamburger.active span:nth-child(1) {


transform:
rotate(45deg)
translate(5px,5px);


}



.hamburger.active span:nth-child(2) {


opacity:0;


}



.hamburger.active span:nth-child(3) {


transform:
rotate(-45deg)
translate(7px,-7px);


}