/* ======================================================
   MindMedia Professional Animations
   Version 1.0
====================================================== */

/* ========= Fade In ========= */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ========= Slide Up ========= */

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ========= Hero ========= */

.hero-content{

    animation:slideUp 1s ease;

}

/* ========= Banner ========= */

.page-banner h1{

    animation:fadeIn 1s ease;

}

.page-banner p{

    animation:fadeIn 1.5s ease;

}

/* ========= Cards ========= */

.service-card,
.why-card,
.stats-card,
.gallery-card{

    animation:zoomIn .8s ease;

}

/* ========= About ========= */

.about-image{

    animation:slideUp 1s ease;

}

.about-content{

    animation:fadeIn 1.2s ease;

}

/* ========= CTA ========= */

.cta-section h2{

    animation:slideUp .9s ease;

}

.cta-section p{

    animation:fadeIn 1.3s ease;

}

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

.service-card,
.why-card,
.gallery-card,
.stats-card{

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.service-card:hover,
.why-card:hover,
.gallery-card:hover,
.stats-card:hover{

    transform:translateY(-12px);

}

/* ========= Buttons ========= */

.btn-primary,
.btn-secondary{

    transition:all .35s ease;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary:hover{

    transform:translateY(-3px);

}

/* ========= Navigation ========= */

nav ul li a{

    position:relative;

    transition:.3s;

}

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#00AEEF;

    transition:.3s;

}

nav ul li a:hover::after{

    width:100%;

}

/* ========= Images ========= */

img{

    transition:.4s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}