/* =========================
   GLOBAL ANIMATIONS
========================= */

@keyframes fadeIn {
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes fadeUp {
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeDown {
    from{
        opacity:0;
        transform:translateY(-50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft {
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRight {
    from{
        opacity:0;
        transform:translateX(50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn {
    from{
        opacity:0;
        transform:scale(.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes pulse {
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.05);
    }
    100%{
        transform:scale(1);
    }
}

@keyframes rotate360 {
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes floatY {
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-15px);
    }
    100%{
        transform:translateY(0px);
    }
}

@keyframes floatX {
    0%{
        transform:translateX(0px);
    }
    50%{
        transform:translateX(10px);
    }
    100%{
        transform:translateX(0px);
    }
}

@keyframes glow {
    0%{
        box-shadow:0 0 0 rgba(20,87,255,0);
    }
    50%{
        box-shadow:0 0 35px rgba(20,87,255,.45);
    }
    100%{
        box-shadow:0 0 0 rgba(20,87,255,0);
    }
}

@keyframes gradientMove {
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

@keyframes marquee {
    0%{
        transform:translateX(100%);
    }
    100%{
        transform:translateX(-100%);
    }
}

@keyframes bounce {
    0%,20%,50%,80%,100%{
        transform:translateY(0);
    }
    40%{
        transform:translateY(-12px);
    }
    60%{
        transform:translateY(-6px);
    }
}

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

.hero-content{
    animation:fadeLeft 1s ease;
}

.hero-image{
    animation:fadeRight 1s ease;
}

.hero-image img{
    animation:zoomIn 1.2s ease;
}

.badge{
    animation:pulse 3s infinite;
}

.card-one{
    animation:floatY 4s ease-in-out infinite;
}

.card-two{
    animation:floatX 4s ease-in-out infinite;
}

/* =========================
   HEADER
========================= */

.header{
    animation:fadeDown .7s ease;
}

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

.btn{
    transition:.35s ease;
}

.btn:hover{
    transform:translateY(-4px);
}

.btn-primary:hover{
    animation:glow 1.5s infinite;
}

/* =========================
   SERVICE CARDS
========================= */

.service-card{
    transition:.4s ease;
}

.service-card:hover{
    transform:translateY(-12px);
}

.service-card:hover .icon{
    animation:rotate360 .8s linear;
}

/* =========================
   WHY US BOXES
========================= */

.why-box{
    transition:.4s ease;
}

.why-box:hover{
    transform:translateY(-10px);
}

/* =========================
   INDUSTRY BOXES
========================= */

.industry-grid div{
    transition:.4s ease;
}

.industry-grid div:hover{
    transform:translateY(-8px) scale(1.03);
}

/* =========================
   PROCESS BOXES
========================= */

.process-grid div:hover span{
    animation:bounce .8s ease;
}

/* =========================
   PRICING CARDS
========================= */

.price-card{
    transition:.4s ease;
}

.price-card:hover{
    transform:translateY(-12px);
}

.price-card.featured{
    animation:pulse 4s infinite;
}

/* =========================
   TESTIMONIAL
========================= */

.testimonial-card{
    animation:fadeUp 1s ease;
}

/* =========================
   FAQ
========================= */

.faq-item{
    transition:.3s ease;
}

.faq-item:hover{
    transform:translateY(-3px);
}

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

.cta-box{
    background-size:300% 300%;
    animation:gradientMove 8s ease infinite;
}

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

.footer a{
    transition:.3s ease;
}

.footer a:hover{
    padding-left:8px;
}

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

.whatsapp{
    animation:pulse 2s infinite;
}

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

.back-top:hover{
    animation:bounce .8s ease;
}

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

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:all 1s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   TEAM CARDS
========================= */

.team-card{
    transition:.4s ease;
}

.team-card:hover{
    transform:translateY(-12px);
}

.team-card img{
    transition:.5s ease;
}

.team-card:hover img{
    transform:scale(1.08);
}

/* =========================
   BLOG CARDS
========================= */

.blog-card{
    transition:.4s ease;
}

.blog-card:hover{
    transform:translateY(-10px);
}

/* =========================
   CASE STUDIES
========================= */

.case-card{
    transition:.4s ease;
}

.case-card:hover{
    transform:translateY(-10px);
}

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

.logo-strip{
    overflow:hidden;
}

.logo-strip span{
    display:inline-block;
    animation:marquee 18s linear infinite;
}

/* =========================
   IMAGE HOVER EFFECTS
========================= */

img{
    transition:.5s ease;
}

.service-card:hover img,
.blog-card:hover img,
.case-card:hover img{
    transform:scale(1.08);
}

/* =========================
   PAGE HERO
========================= */

.page-hero h1{
    animation:fadeUp 1s ease;
}

.page-hero p{
    animation:fadeUp 1.2s ease;
}

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

.loader{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
}

.loader-circle{
    width:70px;
    height:70px;
    border:6px solid #ddd;
    border-top:6px solid #1457ff;
    border-radius:50%;
    animation:rotate360 1s linear infinite;
}

/* =========================
   DARK MODE TRANSITION
========================= */

body,
.header,
.footer,
.service-card,
.price-card,
.why-box,
.industry-grid div{
    transition:.4s ease;
}