/* ------------------------------------------------------------------
   custom-fixes.css
   Loaded last, after style.css / ud-custom-spacing.css / responsive.css.
   Holds UI corrections only - theme files are left untouched so these
   changes stay easy to review and revert.
   ------------------------------------------------------------------ */

/* 1. Horizontal page overflow -------------------------------------
   style.css sets .explore-apartment-slider .owl-stage-outer to
   display:inline-block. An inline-block shrink-wraps its child, so the
   clipping box grew to the full width of the Owl stage (~5500px) and the
   whole document scrolled sideways. Back to the Owl default so the stage
   is clipped to the container. */
.explore-apartment-slider .owl-stage-outer,
.testimonial-slider .owl-stage-outer {
    display: block;
    width: 100%;
}

/* 2. City thumbnails ----------------------------------------------
   City photos have mixed aspect ratios, so they rendered at different
   sizes and squashed (object-fit defaults to fill). Fixed square box +
   cover keeps every tile identical and properly circular. */
.feature-style3 .feature-img {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    border-radius: 50%;
}

.city-thumb {
    width: 160px;
    height: 160px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Static row used when there are 5 or fewer cities (no carousel). */
.city-static-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 40px;
}

.city-static-row .item {
    flex: 0 0 auto;
    width: 200px;
}

/* 3. "Your Guide to Finding the Perfect Property" -------------------
   .about-box2 .img-1 is absolutely positioned bottom-right, but the
   paragraph ran the full width of the box and disappeared behind the
   illustration. Reserve the image's width on desktop. */
@media (min-width: 992px) {
    .about-box2.p-process {
        padding-bottom: 190px !important;
    }

    .about-box2.p-process .img-1 {
        width: 250px;
        height: auto;
    }

    .about-box2.p-process .text {
        padding-right: 150px;
    }
}

/* 4. Property-type cards -------------------------------------------
   Replaces the old icon-in-a-circle card. Each type now shows its own
   photo from /images/property-type/<slug>.jpg. Mirrors the theme's
   .iconbox-style1 shape and brand hover tint. */
.type-card {
    background-color: #f7f7f7;
    border-radius: 12px;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    transition: background-color .4s ease;
}

.type-card-media {
    height: 170px;
    overflow: hidden;
    background-color: #ececec;
}

    .type-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transform: scale(1);
        transition: transform .5s ease;
    }

.type-card-body {
    padding: 22px 24px 24px;
}

    .type-card-body .title {
        margin-bottom: 5px;
        transition: color .4s ease;
    }

    .type-card-body .text {
        transition: color .4s ease;
    }

.type-card:hover {
    background-color: rgb(167 57 76 / 75%);
}

    .type-card:hover .type-card-media img {
        transform: scale(1.06);
    }

    .type-card:hover .title,
    .type-card:hover .text {
        color: #ffffff;
    }

@media (max-width: 575.98px) {
    .type-card-media {
        height: 150px;
    }
}

/* 5. "Why Choose Akash Next Gen Realty" ----------------------------
   Replaces the old row of five white icon boxes. Colours taken from the
   reference design: terracotta #df7055 and a warm dark gradient. */
.wc-section {
    padding: 70px 0;
}

.wc-photo {
    border-radius: 16px;
    overflow: hidden;
    height: 470px;
}

    .wc-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* source photo is landscape; favour the right so the family stays in frame */
        object-position: 68% center;
        display: block;
    }

.wc-heading {
    font-size: 34px;
    font-weight: 700;
    color: #181a20;
    margin-bottom: 18px;
    line-height: 1.25;
}

.wc-intro {
    font-size: 15.5px;
    line-height: 1.75;
    color: #5b6472;
    margin-bottom: 6px;
}

    .wc-intro b {
        color: #181a20;
        font-weight: 600;
    }

.wc-card {
    border-radius: 14px;
    padding: 26px 24px 24px;
    height: 100%;
    color: #ffffff;
    transition: transform .35s ease, box-shadow .35s ease;
}

    .wc-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(24, 26, 32, .18);
    }

.wc-dark {
    background-image: linear-gradient(120deg, rgba(0, 0, 0, .61) 0%, rgb(85, 71, 58) 100%);
}

.wc-terra {
    background-color: #df7055;
}

.wc-ico {
    font-size: 28px;
    display: block;
    margin-bottom: 16px;
    color: #ffffff;
}

.wc-title {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.wc-text {
    font-size: 13.5px;
    line-height: 1.65;
    font-style: italic;
    color: rgba(255, 255, 255, .92);
    margin: 0;
}

@media (max-width: 991.98px) {
    .wc-photo {
        height: 360px;
    }

    .wc-heading {
        font-size: 27px;
    }
}

/* 6. Circle icon centring (About page Mission / Vision) -------------
   style.css gives .list-icon height:70px with line-height:80px, so the
   glyph sat 5px below the middle of its circle. Flex centring makes it
   exact and stays correct whatever the glyph or font-size. */
.why-chose-list .list-one .list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ===================================================================
   7. Responsive corrections
   The theme ships a working responsive.css; these fix the places that
   bypassed it with hard-coded pixel sizes, which caused sideways
   scrolling at the widths noted against each rule.
   =================================================================== */

/* Property cards on PropertyList / AgentPropertyList.
   Markup had an inline width:350px;height:250px, so the thumb was wider
   than its own column from 1024px up. 7/5 keeps the original ratio. */
.listing-thumb {
    width: 100%;
    max-width: 350px;
    aspect-ratio: 7 / 5;
    overflow: hidden;
    border-radius: 8px;
}

    .listing-thumb > a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .listing-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Agent cards: style.css pinned .agent-card-box to width:310px, which
   overflowed col-lg-3 at 1024px. */
.agent-card-box {
    width: 100%;
    max-width: 310px;
}

/* Agent logo box on Agent/List (was an inline 168x168). */
.agent-logo-box {
    width: 100%;
    max-width: 168px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

    .agent-logo-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* City tiles shrink a little on phones so three still fit a row. */
@media (max-width: 575.98px) {
    .city-static-row {
        gap: 0 18px;
    }

        .city-static-row .item {
            width: 140px;
        }

    .feature-style3 .feature-img,
    .city-thumb {
        width: 120px;
        height: 120px;
    }
}

/* Owl carousels: the stage is wider than the page by design and is
   clipped by .owl-stage-outer, but a stray few px still escaped at
   768px on the home page. */
.owl-carousel,
.owl-carousel .owl-stage-outer {
    max-width: 100%;
}

/* Advanced-search dropdowns on the property list.
   style.css forces these panels to width:480px !important and anchors
   each one left:0 to its ~108px filter button. The right-hand filters
   therefore ran past the right edge of the page and made the whole
   document scroll sideways from 992px up - and because the panels are
   visibility:hidden rather than display:none, they did it while
   invisible. Anchoring the right-hand three to their button's right
   edge keeps every panel on screen at any desktop width. Left alone
   below 992px, where the filters live in an off-canvas drawer. */
.aditional-features {
    max-width: calc(100vw - 30px);
}

@media (min-width: 992px) {
    #city-check,
    #toplocalities-check,
    #propertytype-check {
        left: auto;
        right: 0;
    }
}

/* Carousel arrows on the testimonial slider hang 30px outside the
   slider by design, which is fine on desktop but pushed the page
   4px sideways at tablet width. Tuck them back in below 992px. */
@media (max-width: 991.98px) {
    .vam_nav_style.owl-theme .owl-nav button.owl-prev {
        left: 0;
    }

    .vam_nav_style.owl-theme .owl-nav button.owl-next {
        right: 0;
    }
}