/*==================================================
OXY DIVECENTER PREMIUM WEBSITE
animation.css
Version : 1.0
==================================================*/


/*======================================
GLOBAL TRANSITION
======================================*/

*{

transition:

background .35s ease,

color .35s ease,

transform .35s ease,

box-shadow .35s ease;

}


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

.fade-up{

opacity:0;

transform:translateY(60px);

transition:1s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}


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

.fade-left{

opacity:0;

transform:translateX(-60px);

transition:1s;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}


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

.fade-right{

opacity:0;

transform:translateX(60px);

transition:1s;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}


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

.zoom{

opacity:0;

transform:scale(.85);

transition:1s;

}

.zoom.show{

opacity:1;

transform:scale(1);

}


/*======================================
HERO TITLE
======================================*/

.hero-content h1{

animation:

heroTitle

1.2s ease;

}

@keyframes heroTitle{

0%{

opacity:0;

transform:

translateY(60px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


/*======================================
HERO PARAGRAPH
======================================*/

.hero-content p{

animation:

heroText

1.5s ease;

}

@keyframes heroText{

0%{

opacity:0;

transform:

translateY(80px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


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

.hero-buttons{

animation:

heroButton

2s;

}

@keyframes heroButton{

0%{

opacity:0;

transform:

translateY(80px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


/*======================================
BOUNCE
======================================*/

.bounce{

animation:

bounce

2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}


/*======================================
FLOAT
======================================*/

.float{

animation:

floating

4s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:

translateY(0);

}

50%{

transform:

translateY(-12px);

}

100%{

transform:

translateY(0);

}

}

/*==================================================
OXY DIVECENTER PREMIUM WEBSITE
animation.css
Part 2
==================================================*/


/*======================================
KEN BURNS HERO
======================================*/

.hero-bg img{

animation:heroZoom 22s ease-in-out infinite alternate;

}

@keyframes heroZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.12);

}

}


/*======================================
BUBBLE ANIMATION
======================================*/

.bubble{

position:absolute;

bottom:-120px;

border-radius:50%;

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

animation:bubbleUp linear infinite;

filter:blur(1px);

}

.bubble1{

left:8%;

width:18px;

height:18px;

animation-duration:18s;

}

.bubble2{

left:20%;

width:30px;

height:30px;

animation-duration:14s;

}

.bubble3{

left:38%;

width:12px;

height:12px;

animation-duration:20s;

}

.bubble4{

left:62%;

width:24px;

height:24px;

animation-duration:16s;

}

.bubble5{

left:82%;

width:36px;

height:36px;

animation-duration:19s;

}

.bubble6{

left:94%;

width:15px;

height:15px;

animation-duration:22s;

}

@keyframes bubbleUp{

0%{

transform:translateY(0);

opacity:0;

}

15%{

opacity:1;

}

100%{

transform:translateY(-120vh);

opacity:0;

}

}


/*======================================
CARD HOVER
======================================*/

.service-card,
.package-card,
.why-card,
.testimonial-card{

transition:

transform .4s,

box-shadow .4s;

}

.service-card:hover,
.package-card:hover,
.why-card:hover,
.testimonial-card:hover{

transform:translateY(-12px);

box-shadow:

0 30px 60px rgba(0,0,0,.18);

}


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

.service-image img,
.gallery-item img{

transition:transform 1s ease;

}

.service-card:hover img,
.gallery-item:hover img{

transform:scale(1.08);

}


/*======================================
COUNTER
======================================*/

.counter{

animation:counterFade .8s ease;

}

@keyframes counterFade{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*======================================
PULSE BUTTON
======================================*/

.btn-primary{

animation:pulseGlow 3s infinite;

}

@keyframes pulseGlow{

0%{

box-shadow:

0 0 0 rgba(0,194,255,.45);

}

50%{

box-shadow:

0 0 25px rgba(0,194,255,.55);

}

100%{

box-shadow:

0 0 0 rgba(0,194,255,.45);

}

}


/*======================================
RIPPLE EFFECT
======================================*/

.btn-primary::after{

content:"";

position:absolute;

inset:0;

border-radius:inherit;

border:2px solid rgba(255,255,255,.35);

opacity:0;

}

.btn-primary:hover::after{

animation:ripple .8s ease;

}

@keyframes ripple{

0%{

transform:scale(1);

opacity:.8;

}

100%{

transform:scale(1.35);

opacity:0;

}

}


/*======================================
ROTATE ICON
======================================*/

.service-icon i{

transition:transform .5s;

}

.service-card:hover .service-icon i{

transform:rotate(360deg);

}


/*======================================
SOCIAL ICON
======================================*/

.social a{

transition:

transform .35s,

background .35s;

}

.social a:hover{

transform:

translateY(-6px)

scale(1.1);

}


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

.scroll-down{

animation:scrollBounce 2s infinite;

}

@keyframes scrollBounce{

0%{

transform:

translate(-50%,0);

}

50%{

transform:

translate(-50%,12px);

}

100%{

transform:

translate(-50%,0);

}

}


/*======================================
BACK TO TOP
======================================*/

.back-to-top{

transition:

opacity .3s,

transform .3s;

}

.back-to-top:hover{

transform:

translateY(-6px);

}


/*======================================
FLOATING WHATSAPP
======================================*/

.floating-whatsapp{

animation:whatsappFloat 3s ease-in-out infinite;

}

@keyframes whatsappFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*======================================
LOADING
======================================*/

.loader{

position:fixed;

inset:0;

background:#031926;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

animation:fadeLoader .8s forwards;

animation-delay:1.5s;

}

.loader .circle{

width:70px;

height:70px;

border-radius:50%;

border:6px solid rgba(255,255,255,.2);

border-top-color:#00d4ff;

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

@keyframes fadeLoader{

to{

opacity:0;

visibility:hidden;

}

}


/*======================================
SECTION REVEAL
======================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:

opacity .9s ease,

transform .9s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}