/* =========================================================
   INTEGRA TECH
   ANIMATIONS
   ========================================================= */


.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}


.fade-in {

    animation: fadeIn .8s ease both;

}


@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


.slide-up {

    animation: slideUp .9s ease both;

}


@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


.float {

    animation: floating 5s ease-in-out infinite;

}


@keyframes floating {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}

/* =====================================================
   CONTACT - RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .contact-info {
        max-width: 700px;
    }

    .contact-form-wrapper {
        max-width: 760px;
    }
}


@media (max-width: 700px) {

    .contact-section {
        padding: 85px 0;
    }

    .contact-info h2 {
        font-size: 40px;
    }

    .contact-form-wrapper {
        padding: 30px 24px;
        border-radius: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 19px;
    }
}


@media (max-width: 480px) {

    .contact-section {
        padding: 70px 0;
    }

    .contact-info h2 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .contact-intro {
        font-size: 15px;
    }

    .contact-form-wrapper {
        padding: 25px 20px;
    }

    .contact-form-header h3 {
        font-size: 23px;
    }
}