.mainMap {
    height: 84vh;
    width: 100%;
}

.result-image {
    height: 250px;
    width: 100%;
}

.review-place-text {
    max-width: calc(100% - 2rem);
    overflow-y:auto; 
    max-height:80%; 
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.hero-logo-img {
    width: 450px;
}

.place-img-gallery {
    height: 250px;
}

.tiktok-embed {
    z-index: -99; /* Ensures the slide is clickable */
}

.opening-hours-list {
    padding: 0; /* Remove padding on the list */
    margin: 0; /* Remove margin on the list */
    list-style-type: none; /* Remove bullet points */
}

.opening-hour-item {
    margin: 0; /* Remove margin on list items */
    padding: 0; /* Remove padding on list items */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the icon and text */
}

.opening-hour-item i {
    margin: 0; /* Ensure no margin on the icon */
    padding: 0; /* Ensure no padding on the icon */
}

.instagram-btn {
    background: #f09433; 
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  color: white;
    }

/* .google-btn {
    background: #215f00;
  background: -webkit-linear-gradient(to right, #215f00, #e4e4d9);
  background: linear-gradient(to right, #215f00, #e4e4d9); 
  color: rgb(0, 0, 0);
} */

#filter-btn {

}

#cat-slider {

}

#cat-filt-collapse {
    display: none;
}

#navbar-details {
    display: none;
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .mainMap {
        height: 250px;
        width: 100%;
    }
    
    .section-map-list {
        height: 100%;
        margin-bottom: 50px;
    }
    
    .list-result-container {
        height: 470px;
        margin-bottom: 50px;
    }

    .result-image {
        height: 180px;
    }

    .hero-logo-img {
        width: 280px;
    }

    .msv, .msv * {
        font-size: 10px !important; /* Using !important to ensure it overrides other styles */
    }

    .msv-name, .msv-name * {
        font-size: 12px !important; /* Using !important to ensure it overrides other styles */
    }

    #filter-btn {
        display: none;
    }
    
    #cat-slider {
        display: none;
    }

    #cat-filt-collapse {
        display: block;
    }

    #places-list .col-6 {
        flex: 0 0 50%; /* Set width to 50% for two columns */
        max-width: 50%; /* Set max-width to 50% for two columns */
    }

    #categories-card .catcard {
        flex: 0 0 33%; /* Set width to 50% for two columns */
        max-width: 33%; /* Set max-width to 50% for two columns */
    }

    #navbar-details {
        display: block;
    }

    #navbar-details-btn .navbar-btn-section {
        flex: 0 0 33%; /* Set width to 50% for two columns */
        max-width: 33%; /* Set max-width to 50% for two columns */
    }

    #insta-social-links .insta-card {
        flex: 0 0 50%; /* Set width to 50% for two columns */
        max-width: 50%; /* Set max-width to 50% for two columns */
    }
    
}

/* Small devices (landscape phones, ≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .mainMap {
        height: 250px;
        width: 100%;
    }
    
    .section-map-list {
        height: 100%;
        margin-bottom: 50px;
    }
    
    .list-result-container {
        height: 500px;
    }

    .result-image {
        height: 180px;
    }

    .hero-logo-img {
        width: 280px;
    }

    .msv, .msv * {
        font-size: 10px !important; /* Using !important to ensure it overrides other styles */
    }

    .msv-name, .msv-name * {
        font-size: 12px !important; /* Using !important to ensure it overrides other styles */
    }

    #filter-btn {
        display: none;
    }
    
    #cat-slider {
        display: none;
    }

    #cat-filt-collapse {
        display: block;
    }

    #places-list .col-6 {
        flex: 0 0 50%; /* Set width to 50% for two columns */
        max-width: 50%; /* Set max-width to 50% for two columns */
    }

    #categories-card .catcard {
        flex: 0 0 33%; /* Set width to 50% for two columns */
        max-width: 33%; /* Set max-width to 50% for two columns */
    }

    #navbar-details-btn .navbar-btn-section {
        flex: 0 0 33%; /* Set width to 50% for two columns */
        max-width: 33%; /* Set max-width to 50% for two columns */
    }  

    #navbar-details {
        display: block;
    }

    #insta-social-links .insta-card {
        flex: 0 0 50%; /* Set width to 50% for two columns */
        max-width: 50%; /* Set max-width to 50% for two columns */
    }
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mainMap {
        height: 270px;
        width: 100%;
    }
    
    .section-map-list {
        height: 100%;
        margin-bottom: 50px;
    }
    
    .list-result-container {
        height: 500px;
    }

    .result-image {
        height: 180px;
    }

    .hero-logo-img {
        width: 280px;
    }

    .msv, .msv * {
        font-size: 10px !important; /* Using !important to ensure it overrides other styles */
    }

    .msv-name, .msv-name * {
        font-size: 12px !important; /* Using !important to ensure it overrides other styles */
    }

    #filter-btn {
        display: none;
    }
    
    #cat-slider {
        display: none;
    }

    #cat-filt-collapse {
        display: block;
    }

    #places-list .col-6 {
        flex: 0 0 50%; /* Set width to 50% for two columns */
        max-width: 50%; /* Set max-width to 50% for two columns */
    }

    #categories-card .catcard {
        flex: 0 0 33%; /* Set width to 50% for two columns */
        max-width: 33%; /* Set max-width to 50% for two columns */
    }

    #navbar-details-btn .navbar-btn-section {
        flex: 0 0 33%; /* Set width to 50% for two columns */
        max-width: 33%; /* Set max-width to 50% for two columns */
    }

    
    #navbar-details {
        display: block;
    }

    #insta-social-links .insta-card {
        flex: 0 0 50%; /* Set width to 50% for two columns */
        max-width: 50%; /* Set max-width to 50% for two columns */
    }
}