/*==================================================
 MJ Trading Lanka International (Pvt) Ltd.
 Corporate Website v2.0
 File : animations.css
==================================================*/

/* ==========================
   GLOBAL TRANSITIONS
========================== */

*{
    transition:all .35s ease;
}

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

@keyframes float{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

.float{
    animation:float 4s ease-in-out infinite;
}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

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

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{

    animation:zoomIn .7s ease;

}

/* ==========================
   HERO TEXT
========================== */

@keyframes heroTitle{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero h1{

    animation:heroTitle 1s ease;

}

.hero p{

    animation:heroTitle 1.2s ease;

}

.hero .btn{

    animation:heroTitle 1.4s ease;

}

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

.btn:hover{

    transform:translateY(-3px);

}

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

.service-card:hover,
.card-box:hover,
.news-card:hover,
.director-card:hover{

    transform:translateY(-8px);

}

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

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:transform .5s ease;

}

.image-hover:hover img{

    transform:scale(1.08);

}

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

.service-card:hover i{

    transform:rotateY(360deg);

}

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

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

.whatsapp-btn{

    animation:pulse 2s infinite;

}