/* 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;
    }

    .opulent-why-choose .main-title {
        font-size: 30px;

        text-align: center;
    }

    .opulent-why-choose .ratings-header {
        font-size: 18px;

        text-align: center;
    }

    .opulent-why-choose .ratings-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 18px;
    }

    .opulent-why-choose .rating-item {
        padding: 0;
        width: 100%;
    }

    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 */
    }

    .opulent-why-choose .icon-side {
        min-width: 100px;
        font-size: 46px;
        color: var(--btn-hover);
    }

    .legacy-luxury-section {

        text-align: center;
    }

    .legacy-luxury-section .legacy-title {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .legacy-luxury-section .legacy-content-wrapper {
        padding-left: 0px;
    }

    .income-analysis-section .main-header h2 {
        font-size: 30px;

        text-align: center;
    }

    .income-analysis-section .info-content h3 {
        font-size: 22px;
        font-weight: 400;
        line-height: 1.4;
        margin-bottom: 25px;
        text-align: center;
    }

    .income-analysis-section .btn-container {
        margin-top: 30px;
        text-align: center;
    }

    .custom-analysis-section .analysis-header h2 {
        font-size: 25px;
        font-weight: 700;
        color: #000;
        letter-spacing: 1px;
        /* padding-bottom: 10px; */
    }

    .custom-analysis-section .analysis-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .custom-analysis-section .analysis-visual-container {
        width: 100%;
        padding-bottom: 20px;
    }

    .market-insights-section .card-body h3 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 0px;
        color: #333;
        text-transform: uppercase;
        min-height: 75px;
    }

    .services-pricing-detail {
        padding: 50px 0;

    }

    .services-contact-cta {
        text-align: center;
        padding: 100px 0;

    }

    .services-contact-cta .cta-subtitle {

        margin: 30px 0;
    }
}

/* ================= 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;
        margin-bottom: 30px !important;
        background: #f8f8f8;
    }

    .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 ================= */