/* =========================================================
   Sajhbati
   Responsive Styles
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .container {
        width: min(
            calc(100% - 32px),
            var(--container-width)
        );
    }


    /* Header */

    .main-nav {
        gap: 18px;
    }

    .main-nav a {
        font-size: 13px;
    }


    /* Hero */

    .hero-grid {
        grid-template-columns:
            minmax(0, 1.7fr)
            minmax(260px, 1fr);

        gap: 32px;
    }

    .hero-main {
        min-height: 560px;
    }

    .hero-content {
        left: 38px;
        right: 38px;
        bottom: 38px;
    }

    .hero-content h1 {
        font-size: clamp(36px, 4.5vw, 52px);
    }

    .hero-sectors-heading h2 {
        font-size: 27px;
    }

    .sector-item {
        grid-template-columns: 36px 1fr 18px;

        gap: 12px;

        padding: 20px 0;
    }

    .sector-icon {
        width: 34px;
        height: 34px;
    }

    .sector-icon svg {
        width: 22px;
        height: 22px;
    }

}


/* =========================================================
   MOBILE / LARGE PHONE
========================================================= */

@media (max-width: 768px) {

    /* Header */

    .site-header .container {
        min-height: 72px;
    }

    .main-nav,
    .header-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }


    /* Hero */

    .hero-section {
        padding: 20px 0 50px;
    }

    .hero-grid {
        display: flex;

        flex-direction: column;

        gap: 36px;
    }

    .hero-main {
        min-height: 560px;
    }

    .hero-content {
        left: 28px;
        right: 28px;
        bottom: 30px;
    }

    .hero-content h1 {
        font-size: clamp(34px, 9vw, 46px);

        line-height: 1.35;
    }

    .hero-content p {
        font-size: 14px;

        line-height: 1.75;
    }


    /* Sectors */

    .hero-sectors {
        padding: 0;
    }

    .hero-sectors-heading {
        padding-bottom: 20px;
    }

    .hero-sectors-heading h2 {
        font-size: 26px;
    }

}


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

@media (max-width: 480px) {

    .container {
        width: calc(100% - 28px);
    }


    /* Hero */

    .hero-main {
        min-height: 500px;
    }

    .hero-content {
        left: 22px;
        right: 22px;
        bottom: 24px;
    }

    .hero-content h1 {
        font-size: 32px;

        letter-spacing: -0.015em;
    }

    .hero-content p {
        font-size: 13px;

        margin-bottom: 22px;
    }


    /* Sector */

    .sector-item {
        grid-template-columns: 34px 1fr 16px;

        gap: 10px;

        padding: 18px 0;
    }

    .sector-content h3 {
        font-size: 16px;
    }

    .sector-content p {
        font-size: 12px;
    }

}


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

@media (max-width: 900px) {

    .footer-main {
        grid-template-columns:
            1.5fr
            1fr
            1fr;

        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;

        max-width: 500px;
    }

}


@media (max-width: 600px) {

    .site-footer {
        padding-top: 60px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 40px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        min-height: auto;

        flex-direction: column;

        align-items: flex-start;

        padding: 20px 0;

        gap: 12px;
    }

}