/* MEDIA QUERIES */
/* On smaller Screens | Mobile phone devices */
@media screen and (max-width: 700px) {

    /* BASE & UTILITIES */

    section {
        flex-direction: column;
        gap: 3em;
    }

    section .text-container {
        align-items: center;
    }

    section .text-container .btn-primary,
    section .text-container .btn-secondary {
        align-self: flex-start;
    }

    .section-heading {
        margin-bottom: 1em;
    }

    #about .section-heading {
        margin-bottom: 3em;
    }

    .text-container {
        gap: 2em;
    }

    .carousel {
        max-width: 320px;
    }

    .card-img {
        height: 150px;
    }

    /* NAVBAR */

    nav {
        position: fixed;
        right: -100vh;
        top: 10%;
        height: fit-content;
        width: min(15rem, 100%);
        z-index: 100;
        border: 1px solid var(--color-secondary);
        border-radius: 8px;
        transition: right 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
    }

    nav.show {
        right: 0;
    }

    nav.show~#overlay {
        display: block;
        z-index: 40;
    }

    nav ul {
        width: 100%;
        flex-direction: column;
    }

    nav a {
        width: 100%;
        padding-left: 2.5em;
        border-top: 1px solid var(--color-secondary);
    }

    nav a.active-link {
        border-bottom: none;
    }

    nav .logo-li {
        margin-right: unset;
    }

    #toggle-sidebar-button {
        display: block;
        position: fixed;
        top: 0.5em;
        right: 0.5em;
        z-index: 50;
        border-radius: 8px;
        color: var(--color-primary);
        background-color: var(--color-secondary);
        box-shadow: 0 4px 10px var(--glass-tertiary);
    }

    /* HEADER | HERO-SECTION */

    header {
        flex-direction: column;
        margin-top: 4em;
        height: fit-content;
    }

    /* PROJECTS SECTION */

    /* ABOUT SECTION */

    .gallery-container {
        gap: .1em;
    }

    #about .image {
        width: 25px;
    }

    #about .image.active {
        width: 240px;
    }

    .academic-container details {
        width: 100%;
    }

    /* SERVICES SECTION */

    #services {
        margin-top: 0;
    }

    #services .text-container {
        order: 0;
    }

    /* SOCIALS SECTION */

    .socials-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .span-col-2 {
        grid-column: span 1;
    }

    .span-row-2 {
        grid-row: span 1;
    }

    .span-row-2 .bg-text,
    .span-col-2 .bg-text,
    .social-card .bg-text {
        font-size: 3em;
    }

    .social-content .platform-name {
        font-size: 1.5em;
    }

    .social-content .platform-handle {
        font-size: 0.85em;
    }

    /* CONTACT SECTION */

    #contact-form {
        gap: 3em;
    }

    .input-row {
        flex-direction: column;
        gap: 2em;
    }

    .form-actions {
        flex-direction: column;
    }

    #contact-form {
        padding: 3em;
    }

    /* DOWNLOADS DEGRADATION */

    .downloads-container {
        grid-template-columns: 1fr;
    }

    .download-card {
        padding: 1.5em;
    }

    /* PRICING & ENGAGEMENT SECTION */

    .pricing-container {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    /* FOOTER DEGRADATION */

}