@media screen and (max-width: 1200px) {
    #desktop-nav {
        display: none;
    }
    #hamburger-nav {
        display: flex;
    }
}

@media screen and (max-width: 850px) {
    /* 1. Navigation */
    #desktop-nav {
        display: none; /* Hides the standard desktop menu */
    }

    #hamburger-nav {
        display: flex; /* Shows the mobile hamburger menu */
        justify-content: space-around;
        align-items: center;
        height: 12vh;
        background-color: #0c1c33;
    }

    /* 2. Global Adjustments */
    section {
        margin: 0 5%; /* Reduces the massive side margins on mobile */
        height: auto; /* Allows sections to stretch vertically */
        padding-top: 10vh;
    }

    .tittle {
        font-size: 2.2rem; /* Shrinks large headings */
    }

    /* 3. Profile Section (Hero) */
    #profile {
        height: auto;
        padding-top: 8vh;
        padding-bottom: 5vh;
    }

    .profile-content-wrapper {
        flex-direction: column; /* Stacks the logo ON TOP of the text */
        gap: 2rem; /* Reduces the space between them */
    }

    .section__pic-container {
        width: 250px; /* Shrinks the logo so it fits on a phone */
        height: 250px;
    }

    .section__text {
        text-align: center; /* Centers the text on mobile */
    }

    .section__text__p1 {
        text-align: center;
    }

    .btn-container {
        justify-content: center; /* Centers the buttons */
    }

    #profile .arrow {
        display: none; /* Hides the down arrow on mobile to save space */
    }

    /* 4. Practice Areas */
    .about-containers {
        flex-direction: column; /* Stacks the 3 service boxes vertically */
        gap: 1.5rem;
    }

    .details-container {
        padding: 1.5rem;
    }

    /* 5. Contact Section */

    #contact_us {
        padding-bottom: 4rem;
    }
    .contact-details {
        display: flex;
        flex-direction: column; /* Stacks the contact boxes vertically */
        gap: 1rem;
    }

    /* 6. Footer */

    footer {
        padding: 1.5rem 0 1rem 0;
        gap: 1rem;
    }

    footer .logo {
        font-size: 2.2rem; /* Shrinks the footer logo */
    }

    .footer-nav a {
        font-size: 1rem; /* Shrinks the footer links */
    }

    .footer-nav {
        flex-direction: column; /* Stacks footer links vertically */
        gap: 0.8rem;
    }
}

@media screen and (max-width: 450px) {
    .profile-title {
        font-size: 2.2rem;
    }
    
    .section__text__p2 {
        font-size: 1.2rem;
    }

    .hero-btns {
        flex-direction: column; /* Stacks the buttons on top of each other on tiny screens */
    }
}