.fade-in {

    opacity:0;

    transform:translateY(30px);

    animation:fadeIn .8s ease forwards;

}


@keyframes fadeIn {

    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* Slide From Left */

.slide-left {

    opacity:0;

    transform:translateX(-50px);

    animation:slideLeft .8s ease forwards;

}


@keyframes slideLeft {

    to {

        opacity:1;

        transform:translateX(0);

    }

}



/* Slide From Right */

.slide-right {

    opacity:0;

    transform:translateX(50px);

    animation:slideRight .8s ease forwards;

}


@keyframes slideRight {

    to {

        opacity:1;

        transform:translateX(0);

    }

}



/* Scale Entrance */

.scale-in {

    opacity:0;

    transform:scale(.85);

    animation:scaleIn .7s ease forwards;

}


@keyframes scaleIn {

    to {

        opacity:1;

        transform:scale(1);

    }

}



/* Hero Floating Animation */

.hero-card {

    animation:

    float 5s ease-in-out infinite;

}


@keyframes float {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-15px);

    }


    100% {

        transform:translateY(0);

    }


}



/* Gradient Background Animation */


.hero,
.page-hero {


    background-size:200% 200%;


    animation:

    gradientMove 10s ease infinite;


}



@keyframes gradientMove {


    0% {

        background-position:0% 50%;

    }


    50% {

        background-position:100% 50%;

    }


    100% {

        background-position:0% 50%;

    }


}



/* Card Hover Effects */


.card,
.service-card,
.project-card,
.plan {


    position:relative;

    overflow:hidden;


}


.card::before,
.service-card::before,
.project-card::before,
.plan::before {


    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;


    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
    );


    transition:.6s;


}



.card:hover::before,
.service-card:hover::before,
.project-card:hover::before,
.plan:hover::before {


    left:100%;


}



/* Button Shine */


.button {

    position:relative;

    overflow:hidden;


}


.button::after {


    content:"";

    position:absolute;


    top:0;

    left:-100%;


    width:60%;

    height:100%;


    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
    );


    transition:.6s;


}


.button:hover::after {


    left:120%;


}



/* Reveal Animation */

.reveal {


    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .8s ease,

    transform .8s ease;


}



.reveal.active {


    opacity:1;

    transform:translateY(0);


}



/* Stagger Cards */


.cards .card:nth-child(1),
.features div:nth-child(1),
.steps div:nth-child(1) {

    animation-delay:.1s;

}


.cards .card:nth-child(2),
.features div:nth-child(2),
.steps div:nth-child(2) {

    animation-delay:.2s;

}


.cards .card:nth-child(3),
.features div:nth-child(3),
.steps div:nth-child(3) {

    animation-delay:.3s;

}


.cards .card:nth-child(4),
.features div:nth-child(4),
.steps div:nth-child(4) {

    animation-delay:.4s;

}



/* FAQ Animation */


.faq-item p {

    max-height:0;

    overflow:hidden;

    transition:.4s ease;


}


.faq-item.active p {

    max-height:200px;

    margin-top:15px;


}



/* Loading Animation */


.loading {


    width:50px;

    height:50px;


    border-radius:50%;


    border:5px solid #334155;


    border-top-color:#38bdf8;


    animation:

    spin 1s linear infinite;


}


@keyframes spin {


    to {

        transform:rotate(360deg);

    }


}



/* Accessibility */

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


* {

    animation:none !important;

    transition:none !important;

}


}