/* public/css/project_group.css */



.project-summary-item {
    border-bottom: 1px solid #eee;
}
.project-summary-item:last-child {
    border-bottom: none;
}
/*.project-summary-item .winImgs {*/
    /*aspect-ratio: 16/9; !* Or your preferred aspect ratio for summaries *!*/
    /*background-color: #f0f0f0;*/
    /*overflow: hidden;*/
    /*position: relative;*/
/*}*/

/* This single rule targets the placeholder image specifically */
/*.project-summary-item .winImgs img.project-image-placeholder {*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*object-fit: contain; !* This scales the GIF down to fit, maintaining its 1:1 ratio *!*/
    /*object-position: center; !* This centers it within the 16:9 frame *!*/
    /* Optional: if the GIF is too large, you can scale it down further */
    /* transform: scale(0.5); */
/*}*/

/* This rule targets the FINAL image loaded by windowImgs */
/*.project-summary-item .winImgs img.loaded-by-windowimgs {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover; !* This makes the final image fill the container *!*/
/*}*/



.project-summary-item h3 a {
    color: var(--text-info-2, #1a7182);
}
.project-summary-item h3 a:hover {
    text-decoration: underline !important;
}

#carousel-track {
    transition: transform 2s ease;
    cursor: pointer;
}
.inner-div {
    text-align: center;
    overflow: hidden;
    font-size: 1.5em;
    color: white;
    border: 1px solid white;
    border-radius: 20px;
    transition: padding 1s ease;
    height: 330px;
    background-color: var(--delta-blue-darker);
    width: 100%; /* Ensure it fills the new fixed-width parent */
}

.inner-div:hover * {
    transform: translateY(-210px);
}

.inner-div p {
    line-height: 23px;
    margin-bottom: 20px;
    font-size: 20px;
}

.inner-div p a {
    color: white !important;
}

.inner-div img {
    width: 100%;
    height: 210px;
}

.inner-div * {
    transition: all 1s ease .3s;
}

.inner-div p {
    line-height: 26px !important;
    margin-bottom: 10px !important;
}

.custom-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: black;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 10px;
}

.custom-scroll {
    scrollbar-color: grey #d5d5d5;
    scrollbar-width: thin;
}
.oneLineSpase {
    margin-top: 35px;
}

#project-carousel-track{
    padding-bottom: 1rem;
    /* Center items by default, but allow scrolling when needed */
    justify-content: safe center;
}

.carousel-slide {
    flex-shrink: 0;
    width: 240px;
    margin: 0.5rem;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .carousel-slide {
        width: 240px; /* Slightly smaller width for mobile */
    }
}

/* The inner content div (already styled, but ensure it works with new parent) */
.carousel-slide .inner-div {
    width: 100%; /* Ensure it fills the new fixed-width parent */
    height: 330px; /* Your existing height */
    /* ... your other existing .inner-div styles ... */
}