/* Layout Shift Prevention */
.navbar-brand img {
    width: 100px !important;
    height: 59px !important;
    object-fit: contain;
    display: block;
}

/* Reserve space for Font Awesome icons */
.fa {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Prevent layout shift for social icons */
.fa-whatsapp,
.fa-facebook-square,
.fa-instagram {
    width: 1.2em;
    height: 1.2em;
    text-align: center
}

/* Ensure consistent navbar height */
.navbar {
    min-height: 80px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    height: 59px;
}

/* Prevent content jumping during font loading */
body {
    font-display: swap;
}

/* Reserve space for images */
img {
    max-width: 100%;
    height: auto;
}

/* TripAdvisor widget layout shift prevention */
.TA_rated, .TA_cdsratingsonlynarrow, .TA_excellent {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card image aspect ratio preservation */
.card-img-top {
    aspect-ratio: 304/203;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Hero image aspect ratio */
.mainimg {
    aspect-ratio: 1725/631;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Content image layout shift prevention */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Safari content image specific */
img[src*="safari.jpg"] {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    height: auto;
    min-height: 200px;
}

/* Prevent layout shift for all images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Font Awesome icon space reservation */
.fa-2xl {
    width: 2em;
    height: 2em;
    display: inline-block;
    text-align: center;
    line-height: 2em;
}

/* Existing styles */
.over-img{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}.shadow-text{text-shadow:2px 2px #000}.nav-link{padding:15px;color:#000!important;font-size:13px;font-weight:600}.bg-thm{background-color:#347433}.thm{color:#347433!important}.float,a{color:#fff}.nav-pills>.active,.nav-pills>.active>a{background-color:#347433!important}.contact-field{background-color:#2f4f4f}a{text-decoration:none}.float{position:fixed;width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;border-radius:50px;text-align:center;font-size:30px;box-shadow:2px 2px 3px #999;z-index:100}.cardimg,.mainimg{width:auto;height:auto}.my-float{margin-top:16px}.bg-gray{border:1px solid #000;border-radius:10px}.mainimg{max-width:1725;max-height:631}.cardimg{display:block}

/* Modern UI Components for Why Book With Us Section */
.feature-card {
    cursor: pointer;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(52, 116, 51, 0.15) !important;
}

.feature-card:hover .feature-hover-overlay {
    opacity: 1;
}

.feature-card:hover .feature-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(52, 116, 51, 0.4);
}

.feature-icon-wrapper {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.migration-highlight {
    transition: all 0.4s ease;
}

.migration-highlight:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(255, 193, 7, 0.2) !important;
}

.migration-highlight:hover .migration-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(255, 193, 7, 0.5);
}

.migration-icon-wrapper {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.satisfaction-section {
    transition: all 0.4s ease;
}

.satisfaction-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(52, 116, 51, 0.15) !important;
}

.satisfaction-section:hover .satisfaction-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(52, 116, 51, 0.5);
}

.satisfaction-icon-wrapper {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Responsive adjustments for modern UI */
@media (max-width: 767.98px) {
    .feature-card {
        margin-bottom: 1.5rem;
    }
    
    .feature-card:hover {
        transform: translateY(-5px);
    }
    
    .migration-highlight:hover,
    .satisfaction-section:hover {
        transform: translateY(-3px);
    }
}