@media (max-width: 800px) {

    /* ============================================
        Utility media query
    =============================================== */

    .section-heading-secondary {
        padding: 0 2rem;
    }

    .section-heading-small {
        padding: 0 2rem;
    }

    /* ============================================
        rootContainer and menuBar media query
    =============================================== */
    .rootContainer {
        height: 100%;
    }

    .menuBar {
        display: none;
    }

    .hamburgerIcon {
        display: block;
    }

    .hamburgerMenu {
        display: flex;
    }

    /* ============================================
        Projects view media query
    =============================================== */

    .projectSectionContainer {
        max-width: 90%;
    }

    /* ============================================
        Projects Details view media query
    =============================================== */

    .projectDetailsContainer.glass-card {
        height: 90%;
        gap: 2rem;
        max-width: 90%;
    }

    .projectDetailsContainer {
        gap: 0rem !important;
    }

    .projectDetailsWrapper {
        height: 80%;
        flex-direction: column;
        gap: 1rem;
    }

    .detailsTabsContainer {
        flex-direction: row;
        justify-content: flex-start;
        height: 70px;
        max-width: 100%;
        padding: 0rem 0.3rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .detailsTabWrapper {
        height: 40px;
        width: 40px;
    }

    .detailsTabsContainer.custom-scrollbar::-webkit-scrollbar {
        height: 5px;
        width: 100%;
    }


    .TabIconDisplay {
        display: block;
    }

    .detailsTabText {
        display: none;
    }

    .detailsContentContainer {
        height: 100%;
        width: 100%;
        max-width: auto;
        min-width: auto;
    }

    .detailsContentContainerWrapper {
        padding: 0;
    }

    .detailsTitle {
        display: flex;
    }

    .detailsContent {
        height: 100%;
    }

    /* ============================================
        Skill view media query
    =============================================== */

    .techSkillContent {
        height: 500px;
        overflow-y: auto;
    }

    .skillGroupWrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .skillPartition {
        display: none;
    }

    /* ============================================
        Skill view media query
    =============================================== */

    .techSkillContainer {
        height: 80%;
    }

    .techSkillContent {
        overflow-y: auto;
    }

    .skillGroupWrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .skillPartition {
        display: none;
    }

    /* ============================================
        Contact view media query
    =============================================== */

    .contactSectionContainer {
        gap: 0.5rem !important;
    }

    .contactContent {
        text-align: center;
    }

    .contactDetails {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem 0.5rem;
    }

    /* ============================================
        Credits view media query
    =============================================== */

    .creditDetailsContainer {
        height: 90%;
    }

    .creditDetailsContent {
        overflow-y: auto;
        justify-content: flex-start;
    }

}

@media (max-height: 780px) {

    /* ============================================
        Projects view media query
    =============================================== */

    .projectGrid {
        height: 330px;
    }

    .projectWrapperRow3 {
        display: none;
    }

    .projectWrapperRow4 {
        margin-top: var(--space-5);
    }

    /* ============================================
        Projects Details view media query
    =============================================== */

    .projectDetailsContainer.glass-card {
        height: 80%;
    }

    /* ============================================
        Skill view media query
    =============================================== */

    .techSkillContainer {
        height: 80%;
    }

    .techSkillContent {
        overflow-y: auto;
    }

    /* ============================================
        About section media query
    =============================================== */

    .aboutMeContainer {
        height: 80%;
    }

    .aboutContent {
        overflow-y: auto;
        justify-content: flex-start;
    }

    /* ============================================
        Credits view media query
    =============================================== */

    .creditDetailsContainer {
        height: 80%;
    }

    .creditDetailsContent {
        overflow-y: auto;
        justify-content: flex-start;
    }
}

@media (max-height: 660px) {
    /* ============================================
        Projects view media query
    =============================================== */

    .projectGrid {
        height: 260px;
    }

    .projectWrapperRow4 {
        margin-top: var(--space-4);
    }

    .slide-position-1,
    .slide-position-2,
    .slide-position-3 {
        width: 85%;
    }

    /* ============================================
        Projects Details view media query
    =============================================== */

    .projectDetailsWrapper {
        height: 315px;
    }
}