@media screen and (max-width: 1250px) {
    .project-lightbox .project-box button.project-box-prev,
    .project-lightbox .project-box button.project-box-next {
        display: none;
    }
}

@media screen and (max-width: 1081px) {
    :root {
        font-size: 18px;
    }

    /* hamburger menu */
    header nav {
        padding: 1.5rem 2rem !important;
    }

    header #menu.fixed {
        background-color: var(--background-color);
        display: grid;
        place-items: center;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 999;
        border-radius: 50%;
    }

    .sidenav {
        display: none;
    }

    .sidenav:hover {
        scale: 1.1;
    }

    #switchtosidenav {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        font-size: 0.65rem;
        padding: 15px 20px !important;
        border-top: 1px solid rgba(var(--white-color), 0.15);
        display: flex;
        justify-content: space-between;
        margin-top: auto;
    }

    header #menu {
        width: 50px;
        aspect-ratio: 1;
        display: grid !important;
        place-items: center;
        position: relative;
        z-index: 99;
    }
    
    header #menu.dragging {
        border: 1px solid rgba(var(--white-color), 0.1);
        padding: 1rem;
    }

    header #menu-toggle ~ ul {
        z-index: 9;
        background-color: var(--background-color);
        border-right: 1px solid rgba(var(--white-color), 0.1);
        position: fixed;
        top: 0;
        left: -100%;
        width: 70%;
        height: 100vh;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 2rem;
        text-align: start;
    }
    
    header #menu-toggle:checked ~ ul {
        left: 0;
    }

    header nav>ul li {
        display: flex;
        align-items: center;
        gap: 1rem;
        height: fit-content;
        padding: 0px !important;
    }

    header nav ul li i {
        display: initial;
    }

    header #menu i:last-child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    header #menu-toggle:checked+#menu i:first-child {
        opacity: 0;
    }
    
    header #menu-toggle:checked+#menu i:last-child {
        opacity: 1;
        transform: translate(-50%, -50%) rotateZ(45deg);
    }

    #bottomMenu.glow{
        box-shadow:0 0 20px rgba(255,255,0,0.8);
    }
    
    header .follower {
      display: none;
    }

    /* social links */

    .social-links ul {
        gap: 0.25rem !important;
        padding-right: 1rem !important;
        padding-left: 2rem !important;
    }

    /* Sections */
    section .container.grid-2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    section .container.grid-2.reversed .left-part {
        order: 2;
    }

    /* about me center-cross */
    #aboutme {
        flex-direction: column;
    }

    .center-cross {
        /* display: none; */
    }

    #aboutme .right-part {
        gap: 5px;
        padding-inline: 0px;
        align-items: stretch !important;
    }

    #aboutme .right-part .my-stats {
        border: 1px solid rgba(var(--white-color), 0.05);
        box-shadow: 
            inset 0 0 15px 0px rgba(var(--white-color), 0.025);
    }

    .stay-part {
        position: relative !important;
    }

    /* my_works */
    #my_works .bottom-part .portfolio-projects .project-card {
        --width: 300px;
        --height: 168px;
    }
    
    #my_works .bottom-part .filter-head {
        flex-direction: column-reverse;
    }

    #my_works .bottom-part .filter-text > p:last-child {
        width: 100%;
    }

    #my_works .bottom-part .filter-text {
        flex-direction: column;
        gap: 10px;
    }

    #my_works .bottom-part .filter-head .filter-tags-slider-wrapper,
    #my_works .bottom-part .filter-head .filter-search {
        width: 100%;
    }

    #my_works .bottom-part .filter-head input {
        width: fit-content;
    }

    #my_works .bottom-part .filter-head .filter-search {
        justify-content: center;
    }

    /* footer */
    footer .footer-content {
        background-color: var(--secondary-color);
    }
}

@media screen and (min-width: 600px) and (max-width: 1081px) {
    section .container.grid-2 .left-part,
    section .container.grid-2 .right-part {
        align-items: center !important;
        text-align: center;
    }
}