/* Ye code webpage ko left-right hilne se rokega */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    section.galleries-section .gallery-details {
        width: 32%;
    }
}

@media (max-width: 980px) {
    section.galleries-section {
        padding-top: 115px;
    }
    section.galleries-section .gallery-details {
        width: 49%;
        margin-bottom: 30px; /* Tablet view ke liye neeche space */
    }
    section.galleries-section .head-sec {
        width: 100%;
    }
}

@media (max-width: 540px) {
    section.galleries-section {
        padding-top: 40px;
    }
    section.galleries-section .gallery-details {
        width: 100%;
        padding: 0;
        margin-bottom: 30px; /* gap ki jagah yahan margin-bottom use kiya hai space ke liye */
    }
    section.galleries-section h4 {
        font-size: var(--f18);
        margin-bottom: 0;
    }
    section.galleries-section img {
        height: 280px;
        width: 100%; /* Image ko column ke andar properly fit karne ke liye */
        object-fit: cover; /* Image stretced na dikhe */
    }
    
    /* Yahan se .row wala block poora hata diya gaya hai taaki extra width na badhe */

    section.galleries-section .head-sec {
        width: 100%;
        margin-bottom: 30px;
    }
    
    /* Bada text mobile pe screen ke bahar na nikle, isliye break-word lagaya hai */
    .opm-left-content h2 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 28px; /* Mobile par font size control me rakhein */
    }
}

/* ================= MOBILE RATING IMAGE FIX ================= */
@media (max-width: 768px) {
    .opulent-why-choose .rating-item img {
        width: 57px !important; /* Mobile par width 140px se kam karke 110px kar di */
        margin: 0 auto !important; /* Image ko center mein rakhne ke liye */
        display: block;
    }
}
/* ================= END FIX ================= */

/* ================= MOBILE FEATURE BOX ALIGNMENT FIX ================= */
@media (max-width: 768px) {
    .opulent-why-choose .feature-box {
        display: block !important; /* Flexbox hatakar block kiya taaki text free ho jaye */
        margin-bottom: 30px !important;
    }
    
    .opulent-why-choose .icon-side {
        display: inline-block !important; /* Icon ko inline kiya */
        vertical-align: middle !important;
        min-width: unset !important;
        width: 60px !important; 
        margin-right: 10px !important;
        text-align: left !important;
    }
    
    .opulent-why-choose .content-side {
        display: inline !important; 
        width: auto !important;
    }
    
    .opulent-why-choose .content-side h4 {
        display: inline-block !important; /* Heading ko icon ke saamne laya */
        vertical-align: middle !important;
        width: calc(100% - 75px) !important; /* Bachi hui jagah heading ko di */
        margin-bottom: 0 !important;
    }
    
    .opulent-why-choose .content-side p {
        display: block !important; /* Paragraph ko zabardasti nayi line (niche) bheja */
        width: 100% !important;
        margin-top: 15px !important; /* Heading aur paragraph ke beech ka gap */
        text-align: left !important;
    }
}
/* ================= END FIX ================= */