.carousel-container { 
    overflow: hidden;
    width: 100%; 
    max-width: 900px;
    margin: auto; 
    position: relative; 
}
.carousel { 
    display: flex;
    transition: transform 0.8s ease-in-out;
}
.carousel-group { 
    display: flex;
    width: 100%;
    flex: 0 0 100%;
    justify-content: space-between;
}
.carousel img {
    width: calc(95% / 3); 
    cursor: pointer; 
    flex-shrink: 0; 
    display: flex;
    gap: 5px;
    border-radius: 8px;
}

button{
    background: #f1f1f1;
    border-radius: 8px;
    margin: 5px 0;
    border: 0;
}
button:hover{
    cursor: pointer;
    background: #ededed;
}
.popup { 
    display: none; 
    position: fixed; 
    top: 0;
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px); 
    align-items: center; 
    justify-content: center; 
    z-index: 100;
}
.popup img { 
    max-width: 90%; 
    max-height: 80%; 
}
.popup .close, .popup .next { 
    position: absolute; 
    top: 10px; 
    background: white; 
    padding: 10px; 
    cursor: pointer; 
    border: none; 
}
.popup .close { 
    right: 10px; 
}
.popup .next { 
    left: 10px; 
}
    @media (max-width: 768px) {
        .carousel { flex-wrap: nowrap; }
        .carousel-group { display: flex; flex-direction: column; align-items: center; }
        .carousel img { width: 100%; }
    }
.carousel-control{
    width: 100%;
    text-align: center;
}