@import url("./base/variables.css");
@import url("./base/reset.css");
@import url("./base/utilities.css");

@import url("./layout/header.css");
@import url("./layout/footer.css");

@import url("./components/buttons.css");
@import url("./components/services.css");
@import url("./components/forms.css");
@import url("./components/loader.css");

@import url("./pages/home.css");
@import url("./pages/about.css");
@import url("./pages/contact.css");
@import url("./pages/renewals.css");
@import url("./pages/portfolio.css");
@import url("./pages/enforcement.css");
@import url("./pages/thanks.css");


@media only screen and (max-width: 1200px) {

    .navbar .navbar-brand {
        font-size: 28px;
    }

    .menu .nav-link,
    .contact .nav-link {
        font-size: 16px;
    }

    .footer {
        padding: 30px;
    }

    .footer h2 {
        font-size: 48px;
    }
}

@media only screen and (max-width: 993px) {

    .btn-orange,
    .btn-blue {
        font-size: 18px;
        max-width: 215px;
    }

    .contact-section .form {
        margin: 0px;
        padding: 36px;
    }

    .contact-section .form label {
        font-size: 20px;
    }

    .footer h2 {
        font-size: 36px;
    }

    .footer h3 {
        font-size: 26px;
    }

    .footer-contact a {
        font-size: 16px;
        padding-left: 8px;
    }

}

@media only screen and (max-width: 769px) {

    .navbar .navbar-brand {
        font-size: 30px;
    }

    .navbar .menu {
        flex-direction: row;
        margin: 0em auto;
    }

    .navbar .contact {
        width: 160px;
        margin: 1rem auto;
    }

    .navbar-nav .dropdown-menu {
        left: -100%;
        width: 100%;
    }

    .navbar .menu,
    .navbar-nav .dropdown-menu {
        width: 280px;
    }

    .btn-orange,
    .btn-blue {
        max-width: 255px;
    }

    .map-section h2 {
        font-size: 32px;
        margin-top: 32px;
    }

    .custodian-avatar {
        width: 120px;
        height: 120px;
        right: 0px;
    }

    .avatar-speech {
        min-width: 160px;
        bottom: 100px;
    }

}

@media only screen and (max-width: 575px) {

    section {
        padding: var(--section-padding-sm);
    }


    #map {
        width: 100%;
        height: 420px;
    }

     .mapboxgl-popup {
        width: min(300px, calc(100vw - 28px));
    }

    .ip-map-popup .mapboxgl-popup-content {
        border-radius: 24px;
    }

    .map-popup-title {
        font-size: 28px;
        padding: 20px 20px 22px;
    }

    .map-popup-image {
        min-height: 120px;
        padding: 20px;
    }

    .map-popup-location {
        font-size: 24px;
    }

}

@media only screen and (max-width: 420px) {

    .map-section h2 {
        font-size: 28px;
        text-align: center;
    }

    .contact-section .form {
        width: 100%;
        padding: 30px;
        margin: 24px auto;
    }

    .contact-section .form .btn-blue {
        width: 215px;
    }

    .footer {
        padding: 20px
    }

    .footer h2 {
        font-size: 38px;
    }

    .footer-contact a {
        font-size: 16px;
    }

    .footer-copyright a,
    .footer-copyright p {
        padding: 12px;
        font-size: 16px;
    }


}

@media only screen and (max-width: 380px) {

    .navbar .contact {
        width: 130px;
    }

    .btn-orange,
    .btn-blue {
        max-width: 200px;
    }

    .contact-section .form .btn-blue {
        font-size: 16px;
        width: 180px;
    }

    .footer-contact a {
        font-size: 14px;
    }

}