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

.whatsapp-float {

    position: fixed;

    right: 35px;
    bottom: 35px;

    width: 82px;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #c9a227;

    text-decoration: none;

    z-index: 9999;

    opacity: 0;

    transform: scale(0.7);

    animation: whatsappAppear 0.8s ease forwards;

}


.whatsapp-float i {

    font-size: 48px;

}

.whatsapp-float {

    box-shadow:
        0 0 0 2px rgba(201, 162, 39, 0.25),
        0 0 18px rgba(201, 162, 39, 0.35);

    animation:
        whatsappAppear 0.8s ease forwards,
        whatsappGlow 2.5s ease-in-out 1.2s infinite;

}


@keyframes whatsappGlow {

    0%,
    100% {

        box-shadow:
            0 0 0 2px rgba(201, 162, 39, 0.25),
            0 0 18px rgba(201, 162, 39, 0.35);

    }

    50% {

        box-shadow:
            0 0 0 3px rgba(201, 162, 39, 0.40),
            0 0 30px rgba(201, 162, 39, 0.65);

    }

}

.whatsapp-float::after {

    content: "";

    position: absolute;

    top: 0;
    left: -80%;

    width: 50%;
    height: 100%;

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

    transform: skewX(-20deg);

    animation: whatsappShine 4s ease-in-out 3s infinite;

}


@keyframes whatsappShine {

    0% {

        left: -80%;

    }

    25% {

        left: 130%;

    }

    100% {

        left: 130%;

    }

}

@keyframes whatsappAppear {

    from {

        opacity: 0;

        transform: scale(0.7);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* ======================================================
   ABOUT IMAGE - SCROLL ANIMATION
====================================================== */

.about-image {

    transform: translateX(-80px);

    opacity: 0;

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1s ease;

}

.about-image.about-image-visible {

    transform: translateX(0);

    opacity: 1;

}

/* ======================================================
   ABOUT CONTENT - SCROLL ANIMATION
====================================================== */

.about-content {

    transform: translateX(80px);

    opacity: 0;

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1s ease;

    transition-delay: 0.2s;

}

.about-content.about-content-visible {

    transform: translateX(0);

    opacity: 1;

}

/* ======================================================
   SERVICES CARDS - SCROLL ANIMATION
====================================================== */

.service-card {

    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

}

.service-card.service-card-visible {

    opacity: 1;

    transform: translateY(0);

}

.service-card:nth-child(1) {

    transition-delay: 0s;

}

.service-card:nth-child(2) {

    transition-delay: 0.18s;

}

.service-card:nth-child(3) {

    transition-delay: 0.36s;

}

/* ======================================================
   WHY THE PRESTIGE - IMAGE ANIMATION
====================================================== */

.why-us-image {

    opacity: 0;

    transform: translateX(-120px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);

}

.why-us-image.why-us-image-visible {

    opacity: 1;

    transform: translateX(0);

}

/* ======================================================
   WHY THE PRESTIGE - CONTENT ANIMATION
====================================================== */

.why-us-content {

    opacity: 0;

    transform: translateX(90px);

    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0.15s;

}

.why-us-content.why-us-content-visible {

    opacity: 1;

    transform: translateX(0);

}

/* ======================================================
   WHY THE PRESTIGE - POINTS ANIMATION
====================================================== */

.why-us-point {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);

}

.why-us-point.why-us-point-visible {

    opacity: 1;

    transform: translateY(0);

}

.why-us-point:nth-child(1) {

    transition-delay: 0s;

}

.why-us-point:nth-child(2) {

    transition-delay: 0.15s;

}

.why-us-point:nth-child(3) {

    transition-delay: 0.30s;

}

/* ======================================================
   GALLERY - IMAGE ANIMATION
====================================================== */

.gallery-item img {

    opacity: 0;

    transform: scale(0.92);

    transition:
        opacity 0.9s ease,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);

}

.gallery-item.gallery-item-visible img {

    opacity: 1;

    transform: scale(1);

}

.gallery-item:nth-child(1) img {
    transition-delay: 0s;
}

.gallery-item:nth-child(2) img {
    transition-delay: 0.12s;
}

.gallery-item:nth-child(3) img {
    transition-delay: 0.24s;
}

.gallery-item:nth-child(4) img {
    transition-delay: 0.36s;
}

.gallery-item:nth-child(5) img {
    transition-delay: 0.48s;
}

.gallery-item:nth-child(6) img {
    transition-delay: 0.60s;
}

/* ======================================================
   TESTIMONIALS — ENTRANCE ANIMATION
====================================================== */

.testimonial-card {

    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(0.22, 1, 0.36, 1);

}


.testimonial-card.testimonial-card-visible {

    opacity: 1;

    transform: translateY(0);

}


.testimonial-card:nth-child(1) {

    transition-delay: 0s;

}


.testimonial-card:nth-child(2) {

    transition-delay: .15s;

}


.testimonial-card:nth-child(3) {

    transition-delay: .30s;

}

/* ======================================================
   CONTACT — ENTRANCE ANIMATION
====================================================== */

.contact-info {

    opacity: 0;

    transform: translateX(-45px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(0.22, 1, 0.36, 1);

}


.contact-form {

    opacity: 0;

    transform: translateX(45px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(0.22, 1, 0.36, 1);

}


.contact-info.contact-info-visible,
.contact-form.contact-form-visible {

    opacity: 1;

    transform: translateX(0);

}