/*==============================================
    Image Cover Fix - Remove Empty Spaces
    Ensures all images fill their containers properly
===============================================*/

/* Global image fix for all images - exclude banner carousel and logos */
img:not(.carousel-image):not([src*="logo"]):not([src*="nav-logo"]):not([src*="footer-logo"]):not([src*="border"]):not([src*="leaf"]) {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Special handling for carousel images */
.carousel-image {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    /* Let carousel control its own height */
}

/* Specific fixes for different sections */

/* Banner/Carousel Images - Keep original height */
.carousel-image {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    /* Don't override height for carousel images */
}

.banner-home {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    /* Keep original banner height */
}

.banner-another {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 300px !important; /* Fixed height for banner-another */
}

/* Section 4 Images */
.section-4 figure img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 250px !important;
}

/* Services Section Images */
.services figure img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

/* Blog Images */
.blog figure img,
.blog-page figure img,
.blog-page-another figure img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 250px !important;
}

/* Tabbed Section Images */
.tabbed-section img,
.tab-content img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 250px !important;
    border-radius: 8px !important;
}

/* About Section Circle Images */
.circle:after,
.circle_1:after,
.circle_2:after,
.circle_3:after {
    object-fit: cover !important;
    object-position: center !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Accommodation Images */
.accommodation-card img,
#accommodation-tab img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 300px !important;
}

/* Gallery and Product Images */
#services img,
#products img,
#rates img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 250px !important;
}

/* About Us Page Images */
#about-us .image,
#about-us .thumbnail {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 300px !important;
}

/* Blog Single Page Images */
#blog_single .image,
#blog_single .thumbnail {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 350px !important;
}

/* Contact Background */
.contact {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Header Background */
.header {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Logo Images - Keep aspect ratio */
.logo img,
.nav-brand img,
header .logo img,
.sidenav-logo,
.copyright img,
footer img,
img[src*="logo"],
img[src*="footer-logo"] {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Small decorative images - Keep aspect ratio */
.leaf img,
img[src*="leaf"],
img[src*="border"],
.border-img img {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
}

/* Footer specific logo fixes */
.copyright .col-lg-3 img,
footer .col-lg-3 img,
.copyright a img,
img[src*="footer-logo-bg"],
.footer-logo img {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 80px !important;
}

/* Ensure footer logos don't get stretched */
.copyright img[src*="footer-logo-bg.png"] {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: 70px !important;
}

/* Banner carousel - Don't override height */
.banner-carousel,
.banner-carousel .carousel-image {
    /* Let the banner control its own height */
}

.carousel-image {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    /* Height controlled by banner carousel styles */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-4 figure img {
        height: 200px !important;
    }
    
    .services figure img {
        height: 300px !important;
    }
    
    .tabbed-section img,
    .tab-content img {
        height: 200px !important;
    }
    
    .accommodation-card img,
    #accommodation-tab img {
        height: 250px !important;
    }
    
    #services img,
    #products img,
    #rates img {
        height: 200px !important;
    }
    
    #about-us .image,
    #about-us .thumbnail {
        height: 250px !important;
    }
    
    #blog_single .image,
    #blog_single .thumbnail {
        height: 280px !important;
    }
}

@media (max-width: 576px) {
    .section-4 figure img {
        height: 180px !important;
    }
    
    .services figure img {
        height: 250px !important;
    }
    
    .tabbed-section img,
    .tab-content img {
        height: 180px !important;
    }
    
    .accommodation-card img,
    #accommodation-tab img {
        height: 220px !important;
    }
    
    #services img,
    #products img,
    #rates img {
        height: 180px !important;
    }
    
    #about-us .image,
    #about-us .thumbnail {
        height: 200px !important;
    }
    
    #blog_single .image,
    #blog_single .thumbnail {
        height: 250px !important;
    }
}

/* Fix for any remaining empty spaces */
figure {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.image-container,
.img-container {
    overflow: hidden !important;
    position: relative !important;
}

/* Ensure containers have proper dimensions */
.col-md-6 figure,
.col-md-3 figure,
.col-lg-6 figure {
    height: 250px !important;
    overflow: hidden !important;
}

/* Fix for specific image classes */
.img-fluid {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
}

.img-16-9 {
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
}

.rounded {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Remove any default margins/padding that create empty spaces */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.col-md-6,
.col-md-3,
.col-lg-6,
.col-12 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Ensure images in grid layouts fill completely */
.row .col-md-6 img,
.row .col-md-3 img,
.row .col-lg-6 img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 250px !important;
    margin-bottom: 10px !important;
}