/*=========================================================
    ANIMATIONS.CSS
=========================================================*/

/* ==========================================
   Fade Up
========================================== */

@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

/* ==========================================
   Fade Down
========================================== */

@keyframes fadeDown{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

/* ==========================================
   Fade Left
========================================== */

@keyframes fadeLeft{

    from{

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

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

/* ==========================================
   Fade Right
========================================== */

@keyframes fadeRight{

    from{

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

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

/* ==========================================
   Scale
========================================== */

@keyframes scaleIn{

    from{

        opacity:0;
        transform:scale(.8);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

.scale{

    animation:scaleIn .7s ease forwards;

}

/* ==========================================
   Floating
========================================== */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

.float{

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

}

/* ==========================================
   Rotate
========================================== */

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.rotate{

    animation:rotate 18s linear infinite;

}

/* ==========================================
   Pulse
========================================== */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}

.pulse{

    animation:pulse 2.5s infinite;

}

/* ==========================================
   Glow
========================================== */

@keyframes glow{

    0%{

        box-shadow:0 0 15px rgba(79,124,255,.2);

    }

    50%{

        box-shadow:0 0 45px rgba(79,124,255,.6);

    }

    100%{

        box-shadow:0 0 15px rgba(79,124,255,.2);

    }

}

.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:300% 300%;

    animation:gradient 8s ease infinite;

}

/* ==========================================
   Aurora
========================================== */

@keyframes aurora{

    0%{

        transform:translateX(-5%) translateY(0);

    }

    50%{

        transform:translateX(5%) translateY(15px);

    }

    100%{

        transform:translateX(-5%) translateY(0);

    }

}

.aurora{

    animation:aurora 12s ease-in-out infinite;

}

/* ==========================================
   Blink
========================================== */

@keyframes blink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.35;

    }

}

.blink{

    animation:blink 1.2s infinite;

}

/* ==========================================
   Ripple
========================================== */

@keyframes ripple{

    from{

        transform:scale(.6);

        opacity:.7;

    }

    to{

        transform:scale(2);

        opacity:0;

    }

}

.ripple{

    position:relative;

}

.ripple::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:2px solid rgba(79,124,255,.4);

    animation:ripple 2.2s infinite;

}

/* ==========================================
   Shimmer
========================================== */

@keyframes shimmer{

    100%{

        transform:translateX(100%);

    }

}

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    animation:shimmer 2s infinite;

}

/* ==========================================
   Hover Lift
========================================== */

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-10px);

}

/* ==========================================
   Hover Zoom
========================================== */

.hover-zoom{

    overflow:hidden;

}

.hover-zoom img{

    transition:.45s;

}

.hover-zoom:hover img{

    transform:scale(1.08);

}

/* ==========================================
   Glass Hover
========================================== */

.glass-hover{

    transition:.35s;

}

.glass-hover:hover{

    backdrop-filter:blur(28px);

    transform:translateY(-8px);

}

/* ==========================================
   Rotate Hover
========================================== */

.rotate-hover{

    transition:.35s;

}

.rotate-hover:hover{

    transform:rotate(5deg);

}

/* ==========================================
   Reveal
========================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/*=========================================================
  BLOB ANIMATIONS
=========================================================*/

@keyframes blobOne {
    0% {
        transform: translate(0,0) scale(1);
    }
    25% {
        transform: translate(80px,-60px) scale(1.15);
    }
    50% {
        transform: translate(120px,40px) scale(.9);
    }
    75% {
        transform: translate(-40px,60px) scale(1.08);
    }
    100% {
        transform: translate(0,0) scale(1);
    }
}

@keyframes blobTwo {
    0% {
        transform: translate(0,0);
    }
    25% {
        transform: translate(-60px,50px);
    }
    50% {
        transform: translate(40px,120px);
    }
    75% {
        transform: translate(80px,-40px);
    }
    100% {
        transform: translate(0,0);
    }
}

@keyframes blobThree {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    60% {
        transform: scale(.8);
    }

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

.blob-1{
    animation:blobOne 18s ease-in-out infinite;
}

.blob-2{
    animation:blobTwo 22s ease-in-out infinite;
}

.blob-3{
    animation:blobThree 14s ease-in-out infinite;
}

/*=========================================================
  BACKGROUND MOVEMENT
=========================================================*/

@keyframes backgroundMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:3000px 0;
    }

}

.bg-move{

    animation:backgroundMove 120s linear infinite;

}

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

@keyframes heroImage{

    0%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    25%{

        transform:
            translateY(-10px)
            rotate(1deg);

    }

    50%{

        transform:
            translateY(-20px)
            rotate(0deg);

    }

    75%{

        transform:
            translateY(-10px)
            rotate(-1deg);

    }

    100%{

        transform:
            translateY(0)
            rotate(0);

    }

}

.hero-animation{

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

}

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

.card-hover{

    transition:
        transform .45s,
        box-shadow .45s;

}

.card-hover:hover{

    transform:
        translateY(-14px)
        scale(1.02);

    box-shadow:
        0 40px 90px rgba(0,0,0,.35);

}

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

.card-rotate{

    transition:.45s;

}

.card-rotate:hover{

    transform:

        perspective(1200px)

        rotateX(8deg)

        rotateY(-8deg);

}

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

.image-scale{

    overflow:hidden;

}

.image-scale img{

    transition:transform .8s;

}

.image-scale:hover img{

    transform:scale(1.15);

}

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

@keyframes imagePan{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.15);

    }

}

.image-pan img{

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

}

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

.button-glow{

    position:relative;

    overflow:hidden;

}

.button-glow::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:

    linear-gradient(
        90deg,
        #4F7CFF,
        #8B5CF6,
        #4F7CFF
    );

    background-size:300%;

    z-index:-1;

    animation:gradient 4s linear infinite;

    filter:blur(20px);

    opacity:.4;

}

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

.button-press{

    transition:.15s;

}

.button-press:active{

    transform:scale(.96);

}

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

.button-float{

    transition:.35s;

}

.button-float:hover{

    transform:translateY(-6px);

}

/*=========================================================
  ICON SPIN
=========================================================*/

.icon-spin:hover{

    animation:rotate .8s linear;

}

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

@keyframes bounceIcon{

    0%{

        transform:translateY(0);

    }

    30%{

        transform:translateY(-12px);

    }

    60%{

        transform:translateY(4px);

    }

    100%{

        transform:translateY(0);

    }

}

.icon-bounce:hover{

    animation:bounceIcon .7s;

}

/*=========================================================
  ICON SHAKE
=========================================================*/

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-4px);

    }

    40%{

        transform:translateX(4px);

    }

    60%{

        transform:translateX(-4px);

    }

    80%{

        transform:translateX(4px);

    }

    100%{

        transform:translateX(0);

    }

}

.icon-shake:hover{

    animation:shake .45s;

}

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

.loading-screen{

    position:fixed;

    inset:0;

    background:#090B10;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    z-index:99999;

    transition:.6s;

}

.loading-logo{

    width:90px;

    height:90px;

    border-radius:28px;

    animation:loadingLogo 2.2s ease infinite;

}

@keyframes loadingLogo{

    0%{

        transform:scale(.9) rotate(0);

        opacity:.5;

    }

    50%{

        transform:scale(1.1) rotate(180deg);

        opacity:1;

    }

    100%{

        transform:scale(.9) rotate(360deg);

        opacity:.5;

    }

}

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

.loader-dots{

    display:flex;

    gap:10px;

    margin-top:30px;

}

.loader-dots span{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#4F7CFF;

    animation:dots 1.3s infinite;

}

.loader-dots span:nth-child(2){

    animation-delay:.15s;

}

.loader-dots span:nth-child(3){

    animation-delay:.3s;

}

@keyframes dots{

    0%,100%{

        transform:translateY(0);

        opacity:.3;

    }

    50%{

        transform:translateY(-12px);

        opacity:1;

    }

}

/*=========================================================
    SKELETON
=========================================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#171C26;

}

.skeleton::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:120%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.15),

        transparent

    );

    animation:skeleton 1.4s infinite;

}

@keyframes skeleton{

    from{

        left:-150%;

    }

    to{

        left:120%;

    }

}

/*=========================================================
    PROGRESS BAR
=========================================================*/

.progress-line{

    position:relative;

    overflow:hidden;

}

.progress-line span{

    display:block;

    height:100%;

    animation:progressFill 2s ease forwards;

}

@keyframes progressFill{

    from{

        width:0;

    }

}

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

@keyframes counterPop{

    0%{

        transform:scale(.6);

        opacity:0;

    }

    60%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

.counter{

    animation:counterPop .8s ease;

}

/*=========================================================
    MARQUEE
=========================================================*/

.marquee{

    display:flex;

    gap:80px;

    white-space:nowrap;

    width:max-content;

    animation:marquee 35s linear infinite;

}

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

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

.logo-slider{

    overflow:hidden;

    position:relative;

}

.logo-track{

    display:flex;

    gap:80px;

    width:max-content;

    animation:logoSlider 40s linear infinite;

}

@keyframes logoSlider{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*=========================================================
    TIMELINE
=========================================================*/

.timeline-item{

    opacity:0;

    transform:translateY(60px);

    transition:.8s;

}

.timeline-item.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
    PARALLAX
=========================================================*/

.parallax-slow{

    transition:transform .1s linear;

}

.parallax-medium{

    transition:transform .08s linear;

}

.parallax-fast{

    transition:transform .05s linear;

}

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

.nav-scroll{

    transition:

        background .35s,

        backdrop-filter .35s,

        padding .35s;

}

.nav-scroll.active{

    background:rgba(9,11,16,.82);

    backdrop-filter:blur(30px);

    padding:12px 0;

}

/*=========================================================
    MODAL
=========================================================*/

.modal-enter{

    animation:modalIn .35s ease;

}

.modal-leave{

    animation:modalOut .35s ease forwards;

}

@keyframes modalIn{

    from{

        transform:translateY(40px) scale(.95);

        opacity:0;

    }

    to{

        transform:translateY(0) scale(1);

        opacity:1;

    }

}

@keyframes modalOut{

    to{

        transform:translateY(40px) scale(.95);

        opacity:0;

    }

}

/*=========================================================
    DRAWER
=========================================================*/

.drawer-enter{

    animation:drawerIn .35s ease forwards;

}

.drawer-leave{

    animation:drawerOut .35s ease forwards;

}

@keyframes drawerIn{

    from{

        transform:translateX(100%);

    }

    to{

        transform:translateX(0);

    }

}

@keyframes drawerOut{

    to{

        transform:translateX(100%);

    }

}

/*=========================================================
    TOAST
=========================================================*/

.toast-show{

    animation:toastShow .45s;

}

.toast-hide{

    animation:toastHide .35s forwards;

}

@keyframes toastShow{

    from{

        transform:translateX(100%);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

@keyframes toastHide{

    to{

        transform:translateX(120%);

        opacity:0;

    }

}

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

.mouse-glow{

    position:fixed;

    width:500px;

    height:500px;

    border-radius:50%;

    pointer-events:none;

    background:radial-gradient(

        circle,

        rgba(79,124,255,.18) 0%,

        rgba(79,124,255,.08) 35%,

        transparent 75%

    );

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

    filter:blur(60px);

    z-index:-1;

    transition:

        left .08s linear,

        top .08s linear,

        opacity .3s;

}

/*=========================================================
    CURSOR FOLLOW
=========================================================*/

.cursor-dot{

    position:fixed;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#4F7CFF;

    pointer-events:none;

    z-index:99999;

    transition:

        transform .15s,

        left .08s,

        top .08s;

}

.cursor-ring{

    position:fixed;

    width:40px;

    height:40px;

    border:2px solid rgba(79,124,255,.5);

    border-radius:50%;

    pointer-events:none;

    transition:

        .18s;

    z-index:99998;

}

.cursor-hover{

    transform:scale(2);

}

/*=========================================================
    SPOTLIGHT
=========================================================*/

@keyframes spotlight{

    0%{

        transform:translateX(-10%) translateY(0);

    }

    50%{

        transform:translateX(10%) translateY(-20px);

    }

    100%{

        transform:translateX(-10%) translateY(0);

    }

}

.spotlight{

    animation:spotlight 12s ease-in-out infinite;

}

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

.text-reveal{

    overflow:hidden;

}

.text-reveal span{

    display:block;

    transform:translateY(120%);

    animation:textReveal .8s forwards;

}

@keyframes textReveal{

    to{

        transform:translateY(0);

    }

}

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

.letter{

    display:inline-block;

    opacity:0;

    transform:translateY(25px);

    animation:letterReveal .45s forwards;

}

@keyframes letterReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
    TYPEWRITER
=========================================================*/

.typewriter{

    overflow:hidden;

    white-space:nowrap;

    border-right:2px solid #4F7CFF;

    animation:

        typing 4s steps(40,end),

        blinkCaret .8s infinite;

}

@keyframes typing{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes blinkCaret{

    50%{

        border-color:transparent;

    }

}

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

.magnetic{

    transition:

        transform .15s ease;

}

/*=========================================================
    SCROLL PROGRESS
=========================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    height:3px;

    width:0;

    background:

    linear-gradient(

        90deg,

        #4F7CFF,

        #8B5CF6

    );

    z-index:999999;

}

/*=========================================================
    APPLE HERO
=========================================================*/

.hero-title{

    animation:

        fadeUp .8s ease,

        glow 6s infinite;

}

.hero-subtitle{

    animation:

        fadeUp 1s ease;

}

.hero-buttons{

    animation:

        fadeUp 1.2s ease;

}

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

.video-reveal{

    overflow:hidden;

}

.video-reveal video{

    transform:scale(1.15);

    transition:1.2s;

}

.video-reveal:hover video{

    transform:scale(1);

}

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

.parallax{

    will-change:transform;

}

/*=========================================================
    FLOATING SHADOW
=========================================================*/

@keyframes shadowFloat{

    0%{

        box-shadow:

        0 20px 40px rgba(0,0,0,.25);

    }

    50%{

        box-shadow:

        0 40px 70px rgba(0,0,0,.35);

    }

    100%{

        box-shadow:

        0 20px 40px rgba(0,0,0,.25);

    }

}

.shadow-float{

    animation:shadowFloat 5s infinite;

}

/*=========================================================
    SCALE LOOP
=========================================================*/

@keyframes scaleLoop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.scale-loop{

    animation:scaleLoop 5s infinite;

}

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

.rotate-loop{

    animation:rotate 30s linear infinite;

}

/*=========================================================
    WAVE
=========================================================*/

@keyframes wave{

    0%{

        transform:rotate(0);

    }

    15%{

        transform:rotate(15deg);

    }

    30%{

        transform:rotate(-12deg);

    }

    45%{

        transform:rotate(10deg);

    }

    60%{

        transform:rotate(-6deg);

    }

    100%{

        transform:rotate(0);

    }

}

.wave{

    transform-origin:bottom center;

    animation:wave 2s infinite;

}

/*=========================================================
    STAGGER DELAYS
=========================================================*/

.delay-100{animation-delay:.1s;}
.delay-200{animation-delay:.2s;}
.delay-300{animation-delay:.3s;}
.delay-400{animation-delay:.4s;}
.delay-500{animation-delay:.5s;}
.delay-600{animation-delay:.6s;}
.delay-700{animation-delay:.7s;}
.delay-800{animation-delay:.8s;}
.delay-900{animation-delay:.9s;}
.delay-1000{animation-delay:1s;}

/*=========================================================
    DURATION
=========================================================*/

.duration-fast{

    animation-duration:.35s;

}

.duration-normal{

    animation-duration:.7s;

}

.duration-slow{

    animation-duration:1.5s;

}

.duration-xslow{

    animation-duration:3s;

}

/*=========================================================
    REDUCED MOTION
=========================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*=========================================================
    3D CARD EFFECT
=========================================================*/

.card-3d{

    transform-style:preserve-3d;

    perspective:1200px;

    transition:
        transform .45s,
        box-shadow .45s;

}

.card-3d:hover{

    transform:
        rotateX(8deg)
        rotateY(-8deg)
        translateY(-12px);

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

}

/*=========================================================
    APPLE GLASS
=========================================================*/

.apple-glass{

    backdrop-filter:blur(30px) saturate(180%);

    -webkit-backdrop-filter:blur(30px) saturate(180%);

    transition:.4s;

}

.apple-glass:hover{

    backdrop-filter:blur(45px) saturate(220%);

}

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

.gradient-border{

    position:relative;

}

.gradient-border::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(

        130deg,

        #4F7CFF,

        #7A5FFF,

        #00D4FF,

        #4F7CFF

    );

    background-size:300%;

    animation:gradient 8s linear infinite;

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

/*=========================================================
    IMAGE BLUR REVEAL
=========================================================*/

.blur-reveal img{

    filter:blur(10px);

    transform:scale(1.08);

    transition:1s;

}

.blur-reveal:hover img{

    filter:blur(0);

    transform:scale(1);

}

/*=========================================================
    OPACITY FADE
=========================================================*/

.opacity-hover{

    transition:.35s;

}

.opacity-hover:hover{

    opacity:.7;

}

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

.image-tilt{

    transition:

        transform .45s,

        box-shadow .45s;

}

.image-tilt:hover{

    transform:

        perspective(1000px)

        rotateX(5deg)

        rotateY(5deg)

        scale(1.02);

}

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

.section-hidden{

    opacity:0;

    transform:translateY(80px);

}

.section-visible{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

/*=========================================================
    HERO BACKGROUND SCALE
=========================================================*/

@keyframes heroBackground{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

.hero-background{

    animation:heroBackground 20s ease-in-out infinite;

}

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

@keyframes floatX{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(25px);

    }

    100%{

        transform:translateX(0);

    }

}

.float-x{

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

}

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

@keyframes floatY{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0);

    }

}

.float-y{

    animation:floatY 7s ease-in-out infinite;

}

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

@keyframes floatRotate{

    0%{

        transform:translateY(0) rotate(0);

    }

    50%{

        transform:translateY(-20px) rotate(8deg);

    }

    100%{

        transform:translateY(0) rotate(0);

    }

}

.float-rotate{

    animation:floatRotate 9s ease infinite;

}

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

.icon-glow{

    transition:.35s;

}

.icon-glow:hover{

    color:#4F7CFF;

    filter:

        drop-shadow(0 0 15px rgba(79,124,255,.7));

}

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

.text-glow{

    animation:textGlow 5s ease infinite;

}

@keyframes textGlow{

    0%{

        text-shadow:0 0 0 transparent;

    }

    50%{

        text-shadow:

            0 0 18px rgba(79,124,255,.7);

    }

    100%{

        text-shadow:0 0 0 transparent;

    }

}

/*=========================================================
    SCALE HOVER
=========================================================*/

.scale-hover{

    transition:.35s;

}

.scale-hover:hover{

    transform:scale(1.05);

}

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

.rotate-hover{

    transition:.35s;

}

.rotate-hover:hover{

    transform:rotate(2deg);

}

/*=========================================================
    LIFT HOVER
=========================================================*/

.lift-hover{

    transition:.35s;

}

.lift-hover:hover{

    transform:translateY(-15px);

}

/*=========================================================
    APPLE DOCK
=========================================================*/

.apple-dock>*{

    transition:

        transform .25s,

        filter .25s;

}

.apple-dock>*:hover{

    transform:scale(1.3);

    filter:brightness(1.2);

}

.apple-dock:hover>*:not(:hover){

    transform:scale(.92);

}

/*=========================================================
    END OF FILE
=========================================================*/