/* =========================================================
   FORCEVA WORKFORCE SOLUTIONS
   Responsive Stylesheet
========================================================= */


/* ==============================
   TABLET & SMALL LAPTOP
   ============================== */

@media (max-width: 1024px) {

    .navbar-btn {
        display: none;
    }

    .nav-links {
        gap: 20px;
    }

    .about-container,
    .why-container {
        gap: 45px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .industries-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ==============================
   TABLET / MOBILE NAVIGATION
   ============================== */

@media (max-width: 768px) {

    .section {
        padding: 75px 0;
    }

    /* NAVBAR */

    .header {
        height: 70px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 1001;
    }

    .nav-links {
        position: fixed;

        top: 70px;
        right: -100%;

        width: 280px;
        height: calc(100vh - 70px);

        background: var(--navy);

        flex-direction: column;
        align-items: flex-start;

        padding: 40px 30px;

        gap: 25px;

        transition: right 0.35s ease;

        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-link {
        font-size: 1rem;
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }

    .logo-text h2 {
        font-size: 1.1rem;
    }


    /* HERO */

    .hero {
        min-height: 100vh;

        padding-top: 70px;

        background-position: center;

        background:
            linear-gradient(
                rgba(7, 20, 38, 0.88),
                rgba(7, 20, 38, 0.92)
            ),
            url("../images/hero/hero-workforce.jpg");

        background-size: cover;
        background-position: center;
    }

    .hero-content {
        max-width: 100%;
        padding: 80px 0 60px;
    }

    .hero h1 {
        font-size: clamp(2.7rem, 11vw, 4.5rem);
        letter-spacing: -1px;
    }

    .hero-content > p {
        font-size: 1rem;
    }

    .hero-features {
        gap: 15px;
    }


    /* ABOUT */

    .about-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-image {
        max-width: 600px;
        margin: auto;
    }

    .about-image img {
        height: 480px;
    }

    .experience-box {
        right: 15px;
        bottom: 20px;
    }


    /* SERVICES */

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* INDUSTRIES */

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* WHY US */

    .why-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .why-image {
        order: -1;
    }

    .why-image img {
        height: 450px;
    }


    /* CTA */

    .cta-container {
        flex-direction: column;
        align-items: flex-start;
    }


    /* CONTACT */

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


    /* FOOTER */

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

}


/* ==============================
   MOBILE DEVICES
   ============================== */

@media (max-width: 576px) {

    .container {
        width: 91%;
    }

    .section {
        padding: 65px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-heading {
        margin-bottom: 40px;
    }


    /* LOGO */

    .logo-text h2 {
        font-size: 1rem;
    }

    .logo-text p {
        font-size: 0.45rem;
    }


    /* HERO */

    .hero {
        min-height: auto;
    }

    .hero-content {
        padding: 90px 0 60px;
    }

    .hero h1 {
        font-size: 2.7rem;
        line-height: 1.05;
    }

    .hero-content > p {
        font-size: 0.95rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-features {
        flex-direction: column;
        gap: 12px;
    }


    /* ABOUT */

    .about-image img {
        height: 380px;
    }

    .about-image::before {
        display: none;
    }

    .experience-box {
        right: 10px;
        bottom: 10px;

        padding: 18px 20px;
    }

    .experience-box strong {
        font-size: 1.3rem;
    }


    /* SERVICES */

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 30px 25px;
    }


    /* INDUSTRIES */

    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .industry-card {
        padding: 25px 10px;
    }

    .industry-card i {
        font-size: 1.6rem;
    }

    .industry-card h3 {
        font-size: 0.82rem;
    }


    /* WHY US */

    .why-list {
        grid-template-columns: 1fr;
    }

    .why-image img {
        height: 350px;
    }


    /* CTA */

    .cta {
        padding: 55px 0;
    }

    .cta-content h2 {
        font-size: 2rem;
    }

    .cta-container .btn {
        width: 100%;
    }


    /* CONTACT FORM */

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

    .contact-form h3 {
        font-size: 1.3rem;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom-content {
        flex-direction: column;
        justify-content: center;

        text-align: center;

        padding: 20px 0;
    }


    /* WHATSAPP BUTTON */

    .whatsapp-btn {
        right: 18px;
        bottom: 18px;

        width: 52px;
        height: 52px;

        font-size: 1.6rem;
    }

}


/* ==============================
   VERY SMALL MOBILE
   ============================== */

@media (max-width: 380px) {

    .hero h1 {
        font-size: 2.3rem;
    }

    .industries-grid {
        grid-template-columns: 1fr;
    }

}