@media screen and (min-width: 1921px) and (max-width: 2560px) {
    /* ===========================
   General Styles
   =========================== */

    html {
        -webkit-user-select: text;
        user-select: text;
        caret-color: transparent;
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #1a1a1a;
        color: #f5f5f5;
    }

    header {
        background-color: transparent;
        padding: 10px 0;
        position: absolute;
        width: 100%;
        top: 0;
        z-index: 10;
    }

    header nav ul {
        list-style: none;
        display: flex;
        font-size: 2em;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    header nav ul li {
        margin: 0 15px;
    }

    header nav ul li a {
        color: #f5f5f5;
        text-decoration: none;
        font-weight: 700;
    }

    header nav ul li a:hover {
        color: #924f4f;
    }

    /* #project-header {
        background-color: #1a1a1a;
        padding: 10px 0;
        position: absolute;
        width: 100%;
        top: 0;
        z-index: 10;
    }

    #project-header nav ul {
        list-style: none;
        display: flex;
        justify-content: left;
        padding: 0;
        margin: 0;
    }

    #project-header nav ul li a {
        color: #f5f5f5;
        text-decoration: none;
        font-weight: 700;
    } */

    .content-section {
        padding: 50px 20px;
        text-align: center;
    }

    .sect-box h3 {
        font-size: 4em;
    }

    .sect-box h4 {
        font-size: 3.5em;
    }
    
    .sect-box p {
        font-size: 2em;
    }

    .btn-red {
        background-color: #924f4f;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 2em;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }

    .btn-red:hover {
        background-color: #a85b5b;
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3),
            0 12px 24px rgba(146, 79, 79, 0.3),
            0 24px 48px rgba(26, 26, 26, 0.5);
    }

    #lightbox-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    #lightbox-overlay.hidden {
        display: none;
    }

    .lightbox-content {
        position: relative;
        padding: 20px;
        background-color: #1a1a1a;
        border-radius: 8px;
    }

    .lightbox-content img {
        max-width: 90vw;
        max-height: 90vh;
        border-radius: 8px;
        object-fit: cover;
        display: block;
    }

    footer {
        background-color: #1a1a1a;
        text-align: center;
        padding: 10px 0;
        color: #f5f5f5;
    }

    .hidden {
        display: none;
    }

    /* ===========================
Title & Background Image
=========================== */

    .bg-img-box {
        position: relative;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    .bg-img {
        position: absolute;
        top: 50%;
        left: 50%;
        height: auto;
        width: auto;
        min-height: 100%;
        min-width: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }

    .bg-img-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(26, 26, 26, 1) 100%);
        z-index: 1;
    }

    .bg-img-box img {
        position: relative;
        z-index: 0;
    }

    .bg-img-box .title {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
        z-index: 2;
    }

    .bg-img-box .title h2 {
        letter-spacing: .1em;
        font-size: 4em;
        margin: 0;
    }

    .bg-img-box .title h4 {
        font-size: 3em;
        margin: 0;
    }

    /* ===========================
Section Box
=========================== */

    .sect-box {
        background-color: #2c2c2c;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
            0 8px 16px rgba(146, 79, 79, 0.1),
            0 16px 32px rgba(26, 26, 26, 0.4);
    }

    .sect-box h3 {
        margin-top: 0;
        color: #924f4f;
    }

    /* ===========================
About Me Section
=========================== */

    #about p {
        text-align: left;
    }

    .resume-btn {
        background-color: #924f4f;
        color: #f5f5f5;
        border: none;
        border-radius: 50px;
        padding: 10px 20px;
        font-size: 0.9em;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;

        outline: none;
    }

    .resume-btn:hover {
        background-color: #a85b5b;
        transform: translateY(-5px);
    }

    /* ===========================
Skills Section
=========================== */

    .skills-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .skill {
        flex: 0 0 48%;
        margin: 20px 0;
        padding: 20px;
    }

    .skill p {
        margin: 0 0 10px;
        font-weight: 700;
        color: #f5f5f5;
    }

    .progress-bar {
        background-color: #333;
        border-radius: 25px;
        overflow: hidden;
        position: relative;
        height: 45%;
        width: 100%;
        margin: 0 auto;
    }

    .progress-bar::after {
        content: attr(data-progress);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #f5f5f5;
        font-weight: 700;
        z-index: 1;
    }

    .progress {
        background-color: #924f4f;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 25px 0 0 25px;
        transition: width 0.3s ease;
        z-index: 0;
        width: 0;
    }

    .progress-bp {
        --progress-width: 80%;
    }

    .progress-cpp {
        --progress-width: 40%;
    }

    .progress-con {
        --progress-width: 95%;
    }

    .progress-jir {
        --progress-width: 75%;
    }

    .progress-per {
        --progress-width: 95%;
    }

    .progress-tc {
        --progress-width: 100%;
    }


    /* ===========================
Projects Section
=========================== */

    .project-section {
        animation-duration: 0.5s;
        animation-fill-mode: both;
    }

    .fade-in {
        animation-name: fadeIn;
    }

    .fade-out {
        animation-name: fadeOut;
    }

    .projects-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .project-card {
        flex: 0 0 20%;
        margin: 20px 0;
        background-color: #1a1a1a;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
            0 8px 16px rgba(146, 79, 79, 0.2),
            0 16px 32px rgba(26, 26, 26, 0.4);
    }

    .project-card:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3),
                    0 12px 24px rgba(146, 79, 79, 0.3),
                    0 24px 48px rgba(26, 26, 26, 0.5);
    }

    .project-card img {
        width: 100%;
        height: 50vh;
        display: block;
        object-fit: cover;
    }

    .project-section img,
    .project-section video {
        opacity: 0;
        animation: fadeIn 0.5s forwards;
        animation-delay: 0.3s;
    }

    .project-description {
        margin-top: 20px;
        text-align: left;
        background-color: #2c2c2c;
        color: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
    }

    .project-card.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
        /* Prevent any interaction */
    }

    .project-description h4 {
        text-align: center;
    }

    .project-banner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        color: #f5f5f5;
        text-align: center;
        padding: 5px 0;
        border-radius: 5px;
    }

    .project-banner p {
        margin: 0;
        font-weight: 700;
        font-size: 2em;
    }

    /* ===========================
Connect Section
=========================== */

    .connect-buttons {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .connect-btn {
        background-color: #2f2f2f;
        /* Dark background color */
        color: #f5f5f5;
        /* Text color */
        border: none;
        border-radius: 50%;
        padding: 30px;
        font-size: 3em;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
            0 8px 16px rgba(146, 79, 79, 0.2),
            0 16px 32px rgba(26, 26, 26, 0.4);
        outline: none;
        /* Remove outline */
    }

    .connect-btn:hover {
        background-color: #555;
        /* Slightly lighter dark color */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3),
            0 12px 24px rgba(146, 79, 79, 0.3),
            0 24px 48px rgba(26, 26, 26, 0.5);
        transform: translateY(-5px);
        /* Lift the button on hover */
    }

    /* ===========================
Carousel Section
=========================== */

    .carousel {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 8px;
    }

    .carousel-inner {
        display: flex;
        transition: transform 0.5s ease;
    }

    .carousel-item {
        min-width: 100%;
        box-sizing: border-box;
    }

    .carousel-item img,
    .carousel-item video {
        width: 100%;
        height: 50vh;
        object-fit: cover;
        display: block;
    }

    .carousel-video {
        pointer-events: none;
        /* Disable interaction with the video controls */
    }

    .carousel-caption {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.7);
        color: #f5f5f5;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
    }

    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: #f5f5f5;
        padding: 10px;
        border-radius: 50%;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }

    .description-item {
        display: none;
    }

    .description-item.active {
        display: block;
    }

    @keyframes fillProgress {
        from {
            width: 0;
        }

        to {
            width: var(--progress-width);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Define the fade-out animation */
    @keyframes fadeOut {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(20px);
        }
    }
}