@media (max-width: 767px) {
    /* --- Geral --- */
        body {
        text-align: left;
    }

    p, .text-muted, .card-text {
        text-align: justify;
    }

    /* --- Hero Section --- */
    .text-white, .hero-subtitle {
        text-align: center;
    }

    .location-title h2, .location-title p {
        text-align: left;
    }

    .hero-section .display-4 {
        font-size: 2.5rem;
    }

    .hero-section .lead {
        font-size: 1.2rem;
    }

    .hero-title {
        font-size: 36px;
        text-align: center;
        margin: 0 auto;
    }

    .highlight-box p:nth-child(1),
    .highlight-box p:nth-child(2),
    .cta-box .small-text {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        text-align: justify !important;
        margin-top: 0;
        font-size: 1.1rem;
    }

    .highlight-box p:nth-child(1)::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* --- Quem Somos --- */
    #quem-somos .row > div[class*="col-"] {
        text-align: center;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        width: 100%;
    }

    #quem-somos .img-fluid {
        margin: 0 auto 20px auto;
        width: auto;
        max-width: 100%;
        height: auto !important;
        display: block;
    }

    #quem-somos .story-title, #quem-somos .section-title {
        text-align: center !important;
    }

    #quem-somos .text-muted {
        text-align: justify !important;
    }

    /* --- Grade --- */
    .grade-section .col-12 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* --- Modal --- */
    #gradeModal .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    .links-column {
        text-align: left;
    }

    .hero-section .highlight-box {
        padding-top: 0 !important;
        padding-bottom: 0.5rem !important;
    }

    #quem-somos .card-title {
        text-align: left;
    }
}


/* --- Correções de Margem do Highlight Box --- */
@media (min-width: 320px) {
    .highlight-box {
        margin-top: -52px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    .highlight-box p:nth-child(2) {
        margin-top: 10px !important;
        margin-left: -38px !important;
        margin-bottom: 40px !important;
    }

    .cta-box h2 {
        text-align: left !important;
    }

    .location-title p {
        margin-left: 1% !important;
    }

    .hero-subtitle {
        margin-left: 1%;
    }
    

    .grade-buttons {
        transform: translateX(1%);
    }
    
    .fa-facebook-f {
        padding-top: 30px;
    }

    .copyright-text {
        margin-left: 20% !important;
    }
        .footer-bottom-text {
        margin-top: 10px !important;
    }

    .footer-menu {
        transform: translateX(5%);
    }
}
@media (min-width: 400px) { 
    .highlight-box {
        margin-top: -67px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    .highlight-box p:nth-child(2) {
        margin-top: 10px !important;
        margin-left: -75px !important;
        margin-bottom: 40px !important;
    }
        .location-title p {
        margin-left: 1% !important;
    }
        .hero-subtitle {
        margin-left: 1%;
    }
        .copyright-text {
        margin-left: 30% !important;
    }

    .footer-bottom-text {
        margin-top: 10px !important;
    }
        .footer-menu {
        transform: translateX(10%);
    }
}
@media (min-width: 432px) {
    .highlight-box {
        margin-top: -37px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    .highlight-box p:nth-child(2) {
        margin-top: 10px !important;
        margin-left: -75px !important;
        margin-bottom: 40px !important;
    }
        .location-title p {
        margin-left: 1% !important;
    }
            .footer-menu {
        transform: translateX(15%);
    }
}
@media (min-width: 480px) {
    .highlight-box {
        margin-top: -121px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    .highlight-box p:nth-child(2) {
        margin-top: 10px !important;
        margin-left: -125px !important;
        margin-bottom: 40px !important;
    }
        .hero-subtitle {
        margin-left: 1%;
    }
}
@media (min-width: 750px) {
	.highlight-box {
	    margin-top: -112.5px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
    .highlight-box p:nth-child(2) {
        margin-top: 10px !important;
        margin-left: -75px !important;
        margin-bottom: 40px !important;
    }
}
@media (min-width: 820px) {
    .highlight-box {
        margin-top: -189px !important;
    }
        .hero-subtitle {
        margin-left: -0.5%;
    }
}
@media (min-width: 1500px) {
    .highlight-box {
        margin-top: -112.5px !important;
    }

    .cta-box {
        margin-top: -160px !important;
    }

    .quem-somos {
        margin-top: -120px !important;
    }
        .hero-subtitle {
        margin-left: 13.5%;
    }

        .location-title p {
        margin-left: 1% !important;
    }

    .grade-buttons {
        transform: translateX(-4%);
    }
}





@media (min-width: 992px) {
    .footer-menu-container {
        white-space: nowrap;
        padding-top: 30px;
        margin-left: -140px;
        padding-left: 30px;
        margin-right: 80px;
    }
}

@media (min-width: 800px) and (max-width: 1000px) {
    body {
        text-align: left;
    }

    p, .text-muted, .card-text {
        text-align: justify;
    }

    .location-title h2, .location-title p {
        text-align: left;
    }

    #quem-somos .card-title {
        text-align: left;
    }

    .links-column {
        text-align: left;
    }

    #quem-somos .col-lg-6.mt-4 {
        margin-top: 20px !important;
    }
}

@media (max-width: 767px) {
    .footer-social-icons {
        text-align: left !important;
        width: 100% !important;
        display: block !important;
    }

    .footer-social-icons a {
        font-size: 1.8rem !important;
    }

    .footer-logo-text-container {
        margin-bottom: 20px !important;
    }

    .footer-menu {
        border-right: none !important;
        border-left: none !important;
        white-space: nowrap !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .d-block.d-md-none {
        text-align: left !important;
    }
}