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

@media (max-width: 900px) {

    :root {
        --navbar-height: 110px;
    }

    body {
        scroll-behavior: auto;
        overflow-x: hidden;
    }

    /* ===============================
       NAVBAR
    =============================== */

    .navbar,
    .nav-top {
        height: var(--navbar-height);
    }

    .nav-top-container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 15px;
    }

    .logo img {
        height: 72px;
        width: auto;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3000;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;

        background:
            linear-gradient(
                180deg,
                rgba(0,79,163,0.98) 0%,
                rgba(0,45,92,0.98) 100%
            );

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

        padding:
            calc(var(--navbar-height) + 30px)
            30px
            40px;

        gap: 10px;

        transition: left 0.35s ease;
        z-index: 2500;

        overflow-y: auto;
    }

    .nav-menu.open {
        left: 0;
    }

    .nav-menu a,
    .nav-menu .dropdown > a {
        color: #ffffff;
        width: 100%;
        padding: 12px 0;
        font-size: 1rem;
    }

    .nav-menu a:hover,
    .nav-menu .dropdown > a:hover,
    .nav-menu a.active {
        color: #66b3ff;
    }

    .nav-menu .dropdown-menu {
        display: none;
        position: static;
        background: transparent;
        box-shadow: none;
        padding-left: 15px;
        margin-top: 5px;
    }

    .nav-menu .dropdown.open .dropdown-menu {
        display: block;
    }

    /* ===============================
       HERO
    =============================== */

    .hero,
	.internal-hero,
	.services-hero {
	    clip-path: none !important;
	
	    margin-bottom: 0;
	}
	
	.hero,
	.services-hero {
	    height: 420px !important;
	}
	
	.internal-hero {
	    height: 260px !important;
	    min-height: 260px !important;
	}

    .hero-content,
    .internal-hero-overlay,
    .services-hero-overlay {
        padding: 110px 25px 60px;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero h1,
    .internal-hero h1,
    .services-hero h1 {
        font-size: 2rem;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    .hero p,
    .internal-hero p,
    .services-hero p {
        font-size: 1rem;
        line-height: 1.5;

        max-width: 90%;
        margin: 0 auto 25px;
    }

    /* ===============================
       LAYOUTS
    =============================== */

    .service-layout,
    .service-block,
    .why-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .service-block {
        text-align: center;
    }

    .sticky-sidebar {
        position: static !important;
        width: 100% !important;
        margin: 40px 0 0;
        box-sizing: border-box;
    }

    /* ===============================
       CARDS
    =============================== */

    .capability-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        justify-items: center;
        align-items: start;

        gap: 40px;

        width: 100%;
    }

    .cap-card {
        width: 100%;
        max-width: 500px;

        aspect-ratio: 1.5 / 1;

        border-radius: 12px;
        overflow: hidden;
    }

    .cap-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cap-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cap-item h3 {
        font-size: 2rem;
        line-height: 1.15;
        min-height: 90px;
        margin-bottom: 20px;

        display: flex;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
    }

    .cap-text {
        width: 100%;
        padding: 0 20px 20px;
        box-sizing: border-box;
    }

    /* ===============================
       INTERNAL HERO
    =============================== */

    .internal-hero {
        height: 260px !important;
        min-height: 260px !important;

        padding: 0 20px;
    }

    .internal-hero::before {
        background-size: 85% auto !important;
        background-position: center center !important;

        opacity: 0.45;
    }

    .about-hero::before {
        background-size: 85% auto !important;
    }

    .contact-hero::before,
    .quote-hero::before {
        background-size: 72% auto !important;
    }

    .internal-hero-overlay {
        padding: 0 !important;
    }

    .internal-hero h1 {
        font-size: 2rem !important;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .internal-hero p {
        font-size: 1rem !important;
        line-height: 1.4;
    }

    .section-fade {
        height: 40px;
    }

    /* ===============================
       PAGE CONTENT
    =============================== */

    .page-content,
    .content-card,
    .about-card,
    .contact-card,
    .quote-card,
    .service-card,
    .policy-card,
    .faq-card,
    .form-card {
        width: calc(100% - 40px) !important;

        padding: 30px 24px !important;

        border-radius: 20px !important;

        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .page-content h1,
    .page-content h2,
    .content-card h1,
    .content-card h2 {
        font-size: 2rem !important;
        line-height: 1.1;
        margin-bottom: 20px !important;
    }

    .page-content p,
    .content-card p,
    .faq-card p,
    .policy-card p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .page-content ul,
    .page-content ol {
        padding-left: 20px;
    }

    .page-content li {
        margin-bottom: 10px;
        line-height: 1.5;
    }

    /* ===============================
       SERVICES HERO CONTENT
    =============================== */

    .services-hero-content {
        width: 100% !important;

        padding: 40px 25px 40px !important;

        display: flex;
        flex-direction: column;

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

        text-align: center;
    }

    .services-hero h1 {
        width: 100%;
        max-width: 320px !important;

        font-size: 1.7rem !important;
        line-height: 1.05 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .services-hero p {
        width: 100%;
        max-width: 320px;

        margin-left: auto;
        margin-right: auto;
    }

    /* ===============================
       WHY US
    =============================== */

    .swoop-background {
        height: 220px;
    }

    .why-us-wrapper {
        padding-bottom: 80px;
    }

    /* ===============================
       TOP INFO
    =============================== */

    .top-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* ===============================
       GENERAL
    =============================== */

    .container,
    .page-shell {
        padding-left: 20px;
        padding-right: 20px;
    }
}