/* Mobile-specific styles */
@media screen and (max-width: 768px) {

    .body-black {



        background-color: #1f1f1f;
        color: #ffffff;
        line-height: 1.9;
        font-size: 16px;



        .menu-items {
            position: absolute;
            top: 60px;
            right: 0;
            background-color: #000000;
            padding: 10px;
            list-style: none;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            border: 1px solid #808080;
            ;
        }

        .menu-items.show {
            opacity: 1;
            pointer-events: auto;
        }

        .menu-items.show a:hover {
            color: #ffffff;
            border-bottom: 1px solid white;
        }

        .menu-items li {
            margin-bottom: 10px;
        }

        .menu-items li a {
            color: #ffffff;
            text-decoration: none;
        }

        /* .menu-items li a:hover {
            color: #ffffff;
            text-decoration: none;
        }
      */

        .portfolio-button {
            display: inline-block;
            padding: 10px 20px;

            background-color: #aa2419;
            color: #ffffff;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s ease;
            font-size: 14px;
            margin-top: 50px;

            text-transform: uppercase;
        }

        .portfolio-button:hover {
            background-color: #ffffff;
            color: #aa2419;
            border: none;
        }

        .portfolio-button:active {
            border: none;
        }


        .project-name {
            color: white;

        }


        #filter-buttons {
            display: inline-block;
            background-color: rgba(128, 128, 128, 0.195);
            margin-bottom: 20px;

        }

        .filter-button {
            margin: 0px;
            padding: 6px 12px;
            border: none;
            border-radius: 0px;
            background: none;
            color: #ffffff;
            cursor: pointer;
        }

        .filter-button:focus {
            outline: none;
            color: #ffffff;
            border: 1px solid #aa2419;
            background-color: #aa2419;
        }

        .filter-button:hover {
            background-color: #aa2419;
            color: #fff;
            text-decoration: none;
        }

        .project-title {
            position: sticky;
            top: 60px;
            /* Adjust the value to be equal to the height of your page header */
            background-color: #1f1f1f;
            /* Adjust the background color if needed */
            z-index: 999;
            /* Adjust the z-index as per your requirement */
            /* Other styles for the sticky element */
        }


        .project-list a {
            text-decoration: none;
            font-weight: bold;
        }

        .project-list a:hover {
            border-bottom: none;


        }

        .project-name:hover,
        focus {
            text-decoration: underline;


        }

        .project-image-cover:hover,
        focus,
        active {
            border: 5px solid gray;
        }


        .social-media__item {
            justify-content: space-between;
            margin: 10px;
            fill: white;
            text-decoration: none;
        }
        
        .social-media a:hover {
            border-bottom: none;
            text-decoration: none;
        }
        
        .social-media__item:hover,
        focus {
            fill: #aa2419;
        
        }

        .menu-items li a:hover {
            color: #ffffff;

        }

        .project-links a {
            color: #ffffff;
        }

        a {
            color: rgb(255, 255, 255);
            text-decoration: underline;
        }



    }




}



@media screen and (min-width: 769px) {
    .body-black {
        background-color: #1f1f1f;
        color: #ffffff;

        .navigation-list__item {
            font-size: 16px;
            color: #808080;
            text-decoration: none;

        }

        .project-name {
            color: white;

        }

        .project a {
            border: 0px;
        }

        .navigation-list__item:hover,
        .navigation-list__item:focus {

            color: rgb(255, 255, 255);
            text-decoration: none;
            border-bottom: 2px solid #aa2419;
        }

        .navigation-list__item--active {

            color: rgb(255, 255, 255);
        }


        .navigation-list {
            list-style-type: none;
            display: inline;

        }

        .navigation-list li {
            display: inline-block;
            margin-left: 15px;
        }

        #filter-buttons {
            display: inline-block;
            background-color: rgba(128, 128, 128, 0.195);
            margin-bottom: 20px;
        }

        .filter-button {
            margin: 0px;
            padding: 6px 12px;
            border: none;
            border-radius: 0px;
            background: none;
            color: #ffffff;
            cursor: pointer;
        }

        .filter-button:focus {
            outline: none;
            color: #ffffff;
            border: 1px solid #aa2419;
            background-color: #aa2419;
        }

        .filter-button:hover {
            text-decoration: underline;
            background-color: #aa2419;
            color: #fff;
            text-decoration: none;
        }

        .project-title {
            position: sticky;
            top: 82px;
            /* Adjust the value to be equal to the height of your page header */
            background-color: #1f1f1f;
            /* Adjust the background color if needed */
            z-index: 999;
            /* Adjust the z-index as per your requirement */
            /* Other styles for the sticky element */
        }

        .project-links h2,
        a {

            color: #fff;
        }


        .portfolio-button {
            display: inline-block;
            padding: 15px 20px;
            background-color: #ffffff;
            color: #aa2419;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s ease;
            font-size: 14px;
            margin-top: 50px;

            text-transform: uppercase;
        }

        .portfolio-button:hover {
            background-color: #aa2419;
            color: #ffffff;
            border: none;
        }

        .portfolio-button:active {
            border: none;
        }

        .page-header {
            background-color: #1f1f1f;
            display: flex;
            width: 100%;
            padding: 20px 50px 20px 50px;
            position: fixed;
            top: 0;
            z-index: 999;
            align-items: center;
            border-bottom: 1px solid #aa2419;;
    
        }

        .page-header a {
            text-decoration: none;

        }

        .page-header a:hover {
            text-decoration: none;
            border-bottom: none;

        }



        .social-media__item {
            justify-content: space-between;
            margin: 10px;
            fill: white;
            text-decoration: none;
        }

        .social-media__item:hover,
        focus {
            fill: #aa2419;

        }

        .social-media a {
            border-bottom: none;
            text-decoration: none;
        }

        .social-media a:hover {
            border-bottom: none;
            text-decoration: none;
        }

        .contact-us a {
            text-decoration: underline;
        }

        .contact-us a:hover,
        focus {
            text-decoration: underline;
            color: #aa2419;
        }


    }






    @media screen and (min-width: 769px) {
        .main {
            padding-left: 50px;
            padding-right: 50px;

        }

        .toggle-container__column {

            padding: 50px 50px 50px 50px;

        }

    }
}