.owl-carousel {
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1300px; /* Adjust based on your needs */
    padding: 20px;
}

/* Remove float property since we're using flexbox */
.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    width: calc(25% - 20px); /* 25% for 4 columns, minus gap */
    float: none; /* Remove float */
    flex-grow: 0;
    flex-shrink: 0;
}

.card-destination {
    margin: 0 auto; /* Adjust margin to work with flexbox */
    background: #F5F5F5;
    border-radius: 3%;
    display: inline-block;
    height: 450px;
    position: relative;
    width: 100%; /* Make card fill the owl-item width */
    max-width: 300px; /* Keep maximum width */
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    z-index: 5;
}

/* Add responsive breakpoints */
@media screen and (max-width: 1200px) {
    .owl-carousel .owl-item {
        width: calc(33.333% - 20px); /* 3 columns */
    }
}

@media screen and (max-width: 900px) {
    .owl-carousel .owl-item {
        width: calc(50% - 20px); /* 2 columns */
    }
}

@media screen and (max-width: 600px) {
    .owl-carousel .owl-item {
        width: 100%; /* 1 column */
    }
}

/* Rest of your existing CSS remains the same */
.destination-image img{
    object-fit: cover;
    height: 200px;
    width: 275px;
    border-radius: 3% 3% 0 0;
}
.flag-icon.flag-icon-squared {
     width: 1.17em; 
}
.country-flag{
    margin: -7% auto;
    text-align: center;
    background-color: #F5F5F5;
}

.country-flag-circle{
    border-color: #F5F5F5;
    border-width: 3px;
    border-style: solid;
    border-radius: 50%;
}
.country-flag-size-2x{font-size: 2.5em;}
.country-flag-size-3x{font-size: 3em;}
.country-flag-size-4x{font-size: 4em;}
.country-flag-size-5x{font-size: 5em;}

.destination-info{
    margin: 15% auto;
    text-align: center;
}

.place-name{
    font-family: 'Righteous', cursive;
    font-weight: bold;
    color: #424242;
}

.place-desc{
    font-family: 'Bubbler One', sans-serif;
    color: #424242;
}

.below-line{
    margin: 0 auto;
    width: 150px;
    height: 2px;
    background: #232323;
}

.destination-hastag{
    margin: 5% auto;
    font-weight: bold;
    font-family: 'Quicksand', sans-serif;
}