.navbar {
    position: static;
}

    .navbar .navbar-right {
        background: rgba(0, 0, 0, 0.30);
    }

    .navbar svg path {
        fill: black !important;
        fill-opacity: 1 !important;
    }

    .navbar .menu-toggle path {
        stroke: black !important;
    }





/*Project Info*/
#projectInfo {
    padding: 40px 0;
}

    #projectInfo .container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding-top: 40px;
    }

        #projectInfo .container .info-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

            #projectInfo .container .info-left h3 {
                font-size: 2.5em;
                line-height: 110%;
            }

            #projectInfo .container .info-left a {
                color: #000;
                line-height: 18px;
                font-size: 16px;
                text-decoration-line: underline;
                text-decoration-style: solid;
                text-decoration-skip-ink: auto;
                text-decoration-thickness: auto;
                text-underline-offset: auto;
            }

        #projectInfo .container .info-right {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex: 1;
        }

            #projectInfo .container .info-right h4 {
                font-size: 1.18em;
                font-weight: 500;
                line-height: 150%;
            }

            #projectInfo .container .info-right div {
                line-height: 150%;
                opacity: 0.7;
            }


@media (max-width: 768px) {
    #projectInfo .container {
        flex-direction: column;
        gap: 10px;
    }

        #projectInfo .container .info-right {
            gap: 16px;
        }

    #projectInfon h3, #projectInfo .info-right {
        flex: unset;
    }
}

@media(max-width:480px) {

    #projectInfo {
        padding: 16px 0;
    }

        #projectInfo .container {
            padding-top: 16px;
            padding-bottom: 16px;
        }

            #projectInfo .container h3 {
                font-size: 2.06em;
                line-height: 110%;
            }

            #projectInfo .container .info-right h4 {
                font-size: 1em;
                line-height: 18px;
                font-weight: 600;
            }

            #projectInfo .container .info-right p {
                font-size: 14px;
                line-height: 140%;
            }
}

#projects-images {
    max-width: 100%;
    overflow: hidden;
}

.detail-slider-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.detail-slider {
    display: flex;
    align-items: stretch;
    gap: 20px;
    transition: transform 0.3s ease-in-out;
    padding: 0;
    padding: 24px 0;
}

.detail-card {
    flex: 0 0 calc(100% / 2);
    width: 580px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out;
}

    .detail-card img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        border-radius: 12px;
    }

#projects-images .button-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

    #projects-images .button-container p {
        transform: translateX(+40px);
        font-weight: 700;
        font-size: 23px;
        line-height: 110%;
    }

    #projects-images .button-container div {
        display: flex;
        flex-direction: row;
        gap: 10px;
        transform: translateX(+40px);
    }

@media (max-width: 480px) {
    .detail-card {
        max-width: 100%;
    }


    .detail-card {
        width: 100%;
    }

        .detail-card img {
            width: 100%; /* Kart genişliğini tam kaplar */
            height: 250px; /* Orantılı yükseklik */
            aspect-ratio: 380 / 250; /* Genişlik ve yükseklik oranı */
        }
}