/* =====================================================
   Dial Dynamic Ltd
   Enterprise Animation Library V5
====================================================== */

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

@keyframes float{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

.float{

animation:float 4s ease-in-out infinite;

}

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

@keyframes floatSlow{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

.float-slow{

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

}

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

@keyframes pulse{

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

50%{
transform:scale(1.08);
opacity:1;
}

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

}

.pulse{

animation:pulse 3s infinite;

}

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

@keyframes rotate360{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

.rotate{

animation:rotate360 25s linear infinite;

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .9s ease forwards;

}

/* ===========================
   FADE DOWN
=========================== */

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-60px);

}

100%{

opacity:1;

transform:none;

}

}

.fade-down{

animation:fadeDown .9s ease forwards;

}

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

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-70px);

}

100%{

opacity:1;

transform:none;

}

}

.fade-left{

animation:fadeLeft .9s ease forwards;

}

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

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(70px);

}

100%{

opacity:1;

transform:none;

}

}

.fade-right{

animation:fadeRight .9s ease forwards;

}

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

@keyframes zoom{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

.zoom{

animation:zoom .8s ease forwards;

}

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

@keyframes glow{

0%{

box-shadow:0 0 0 rgba(109,92,255,.15);

}

50%{

box-shadow:0 0 40px rgba(109,92,255,.45);

}

100%{

box-shadow:0 0 0 rgba(109,92,255,.15);

}

}

.glow{

animation:glow 3s infinite;

}

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

@keyframes gradient{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

.gradient{

background-size:250% 250%;

animation:gradient 12s ease infinite;

}

/* ===========================
   LOADER
=========================== */

#loader{

transition:.6s;

}

#loader.loaded{

opacity:0;

visibility:hidden;

pointer-events:none;

}

/* ===========================
   LOGO
=========================== */

#loader img{

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

}


/* =====================================================
   HERO ANIMATIONS
====================================================== */

/* ===========================
   HERO BLOB
=========================== */

@keyframes blob{

0%{

transform:translate(0,0) scale(1);

}

25%{

transform:translate(40px,-30px) scale(1.08);

}

50%{

transform:translate(0,-60px) scale(.95);

}

75%{

transform:translate(-35px,-20px) scale(1.06);

}

100%{

transform:translate(0,0) scale(1);

}

}

.hero-blob{

animation:blob 16s ease-in-out infinite;

}

/* ===========================
   ORBIT
=========================== */

.orbit{

animation:rotate360 linear infinite;

}

.orbit-1{

animation-duration:20s;

}

.orbit-2{

animation-duration:35s;

}

.orbit-3{

animation-duration:55s;

}

/* ===========================
   HERO GLOW
=========================== */

@keyframes heroGlow{

0%{

opacity:.35;

transform:scale(.9);

}

50%{

opacity:1;

transform:scale(1.08);

}

100%{

opacity:.35;

transform:scale(.9);

}

}

.hero-glow{

animation:heroGlow 5s ease infinite;

}

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

.floating-icon{

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

}

.floating-icon:nth-child(2){

animation-delay:1s;

}

.floating-icon:nth-child(3){

animation-delay:2s;

}

.floating-icon:nth-child(4){

animation-delay:3s;

}

/* ===========================
   SCROLL DOWN
=========================== */

@keyframes scrollDown{

0%{

transform:translateY(0);

opacity:1;

}

50%{

transform:translateY(10px);

opacity:.6;

}

100%{

transform:translateY(0);

opacity:1;

}

}

.scroll-down{

animation:scrollDown 2s infinite;

}

/* ===========================
   PARTICLES
=========================== */

.particle{

position:absolute;

width:6px;

height:6px;

border-radius:50%;

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

pointer-events:none;

animation:particleMove linear infinite;

}

@keyframes particleMove{

0%{

transform:translateY(0) scale(1);

opacity:0;

}

20%{

opacity:1;

}

80%{

opacity:1;

}

100%{

transform:translateY(-180px) scale(0);

opacity:0;

}

}

/* ===========================
   MOUSE GLOW
=========================== */

.mouse-glow{

transition:

left .08s linear,

top .08s linear;

}

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

.ripple-effect{

position:absolute;

width:12px;

height:12px;

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

border-radius:50%;

transform:translate(-50%,-50%);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

0%{

width:0;

height:0;

opacity:.7;

}

100%{

width:320px;

height:320px;

opacity:0;

}

}

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

.hero-logo img{

animation:

float 4s ease-in-out infinite,

pulse 5s infinite;

}

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

.hero-buttons .btn-primary{

position:relative;

overflow:hidden;

}

.hero-buttons .btn-primary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transform:skewX(-20deg);

transition:.8s;

}

.hero-buttons .btn-primary:hover::before{

left:130%;

}


/* =====================================================
   Dial Dynamic Ltd
   Enterprise Animation Library V5
   Part 3 (Final)
====================================================== */

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

.glass,
.glass-card,
.service-card,
.ecosystem-card,
.industry-card,
.stat-card,
.brand-item{

transition:
transform .45s ease,
box-shadow .45s ease,
border-color .45s ease,
background .45s ease;

}

.glass:hover,
.glass-card:hover,
.service-card:hover,
.ecosystem-card:hover,
.industry-card:hover,
.stat-card:hover,
.brand-item:hover{

transform:translateY(-10px);

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

}

/* ==========================================
   SERVICE ICON
========================================== */

.service-icon{

transition:.4s;

}

.service-card:hover .service-icon{

transform:

rotate(10deg)

scale(1.15);

}

/* ==========================================
   ECOSYSTEM ICON
========================================== */

.ecosystem-icon{

transition:.4s;

}

.ecosystem-card:hover .ecosystem-icon{

transform:

rotate(-8deg)

scale(1.1);

}

/* ==========================================
   INDUSTRY ICON
========================================== */

.industry-icon{

transition:.45s;

}

.industry-card:hover .industry-icon{

transform:

scale(1.15)

rotate(8deg);

}

/* ==========================================
   BRAND LOGO
========================================== */

.brand-item img{

transition:.45s;

}

.brand-item:hover img{

transform:

scale(1.08);

}

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

.header{

transition:

background .35s,

padding .35s,

box-shadow .35s,

transform .35s;

}

/* ==========================================
   NAV MENU
========================================== */

.nav-menu a{

transition:

color .35s;

}

.nav-menu a::after{

transition:.35s;

}

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

.btn-primary,
.btn-secondary,
.btn-login{

transition:

all .35s ease;

}

.btn-primary:hover{

transform:

translateY(-4px);

}

.btn-secondary:hover{

transform:

translateY(-4px);

}

.btn-login:hover{

transform:

translateY(-4px);

}

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

img{

transition:

transform .45s ease;

}

img:hover{

transform:scale(1.02);

}

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

.reveal{

opacity:0;

transform:translateY(60px);

transition:

all .8s ease;

}

.reveal.active{

opacity:1;

transform:none;

}

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

.back-top{

transition:

all .35s ease;

}

.back-top:hover{

transform:

translateY(-6px)

scale(1.08);

}

/* ==========================================
   SECTION TITLE
========================================== */

.section-title{

animation:

fadeUp

1s both;

}

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

.hero-title{

animation:

fadeLeft

1s both;

}

.hero-description{

animation:

fadeLeft

1.2s both;

}

.hero-buttons{

animation:

fadeUp

1.4s both;

}

/* ==========================================
   HERO STATS
========================================== */

.hero-stats{

animation:

fadeUp

1.6s both;

}

/* ==========================================
   ABOUT IMAGE
========================================== */

.about-image img{

transition:.45s;

}

.about-image:hover img{

transform:

scale(1.03)

rotate(.5deg);

}

/* ==========================================
   FOOTER SOCIAL
========================================== */

.footer-social a{

transition:.35s;

}

.footer-social a:hover{

transform:

translateY(-5px)

rotate(360deg);

}

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

.footer a{

transition:.35s;

}

.footer a:hover{

padding-left:5px;

}

/* ==========================================
   PAGE LOADED
========================================== */

.page-loaded{

animation:

fadeUp

.8s ease;

}

/* ==========================================
   REDUCE MOTION
========================================== */

@media (prefers-reduced-motion: reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}