/*
 * Layout polish found by real-browser review of redesign.css. Loaded after it; redesign.css itself is left exactly as delivered.
 * Only alignment and equal-height fixes. No colours, text, links or scripts.
 */

/* hero label: aligned with the heading below it (it had 25px of left padding) */
body.rd-site .slider__content .sub-title{padding-left:0!important;margin-left:0!important}

/* Vision / Mission: two cards side by side, same top edge and same height (each was centred in its own column) */
body.rd-site .choose-area .row{align-items:stretch!important}
body.rd-site .choose-area .row>[class*=col-]{display:flex}
body.rd-site .choose-area .choose-list{display:flex;width:100%}
body.rd-site .choose-area .choose-list .list-wrap{display:flex;width:100%;margin:0}
body.rd-site .choose-area .choose-list .list-wrap>li{display:flex;align-items:center;width:100%;margin:0}

/* blog cards (homepage + listing): same image height, cards the same height, bottoms aligned */
body.rd-site .blog__area .row>[class*=col-]{display:flex}
body.rd-site .blog__area .blog__post-two{display:flex;flex-direction:column;width:100%}
body.rd-site .blog__area .blog__post-thumb-two{flex:none}
/* show each thumbnail whole (some have their title baked into the image, so cropping would cut text) in an equal-size box */
body.rd-site .blog__area .blog__post-thumb-two{background:#eef1f4}
body.rd-site .blog__area .blog__post-thumb-two img{width:100%;height:300px;object-fit:contain}
body.rd-site .blog__area .blog__post-content-two{flex:1}

/* equal-height cards: service cards (categories, top services, career) fill their column, so every card in a row ends together */
body.rd-site .services-item-wrap .row>[class*=col-]{display:flex}
body.rd-site .services-item-wrap .services-item{width:100%}

/* team grid (About): the row centred each card vertically, which staggered them. Stretch instead, so rows line up */
body.rd-site .row.align-items-center:has(.team-card){align-items:stretch!important}
body.rd-site [class*=col-]:has(> .team-card){display:flex}
body.rd-site .team-card{width:100%}

/* "why choose" cards (About): same idea, two columns of cards that line up */
body.rd-site .choose__area-four .list-wrap{align-items:stretch!important}
body.rd-site .choose__area-four .list-wrap>li{display:flex}
body.rd-site .choose__list-box-two{width:100%}

/* banner zigzag decoration: keep it below the breadcrumb even when the title wraps to two lines */
body.rd-site .breadcrumb__shape img.rightToLeft{top:auto!important;bottom:20px!important}

/* service sidebar phone button: the label was navy on navy */
body.rd-site .sidebar__contact .btn,
body.rd-site .sidebar__widget-two .btn{color:#fff!important}

/* banner decorations sit behind the title text, never over it */
body.rd-site .breadcrumb__area .breadcrumb__content{position:relative;z-index:2}
body.rd-site .breadcrumb__shape img{z-index:0}

/* article featured image that is narrower than the column: centred instead of hugging the left edge (larger images are unaffected) */
body.rd-site .blog__details-thumb img{margin-left:auto;margin-right:auto}

/* tablet (below 992px): columns that only carry a large-screen width class (col-lg-*) had no width at all, so they grew to their content
   and ran past the window edge, where the page clips them (text cut off on About, Contact, Career, FAQs). Let them fill the row. */
@media (max-width:991.98px){
  body.rd-site main .row>[class*=col-lg-]:not([class*=col-md-]):not([class*=col-sm-]):not([class*=col-xl-]):not([class~=col-12]):not([class~=col-6]):not([class~=col-4]):not([class~=col-3]):not([class~=col-auto]):not([class*=col-lg-auto]):not([class~=col]){flex:0 0 100%;max-width:100%}
  /* homepage enquiry form: the name field was half width and the others full width in the tablet range */
  body.rd-site .my-form-row>[class*=col-]{flex:0 0 100%;max-width:100%}
}

/* same form on small laptops (992-1199px): the name field was wider than the rest and the service box wrapped alone; a tidy 2 x 2 grid instead */
@media (min-width:992px) and (max-width:1199.98px){
  body.rd-site .my-form-row>[class*=col-]{flex:0 0 50%;max-width:50%}
}

/* top bar: a phone number never breaks over two lines ("+91-70200 / 45454" at ~1024px) */
body.rd-site .tg-header__top-info a[href^="tel:"],
body.rd-site .tg-header__top-info a[href^="mailto:"]{white-space:nowrap}

/* M&A hero: the theme shifts the hero text 30px down without moving the block below, so the buttons touched the badge box and each other
   when they stack. Give the badges room and the buttons a gap. */
body.rd-site #sparsh-trust-badges{margin-top:56px}
body.rd-site .slider__content:has(+ .text-center #sparsh-trust-badges) .btn{margin:0 12px 12px 0}

/* desktop menus: the designer's panel was stretched across the whole container and detached from the item hovered (even a 2-link menu
   was 1250px wide). Each panel now sits directly under its own menu item and is only as wide as it needs to be. */
@media (min-width:992px){
  body.rd-site .tgmenu__navbar-wrap ul.navigation>li.menu-item-has-children{position:relative}
  body.rd-site .tgmenu__navbar-wrap ul.navigation>li>.sub-menu{left:0;right:auto;width:max-content;min-width:250px;max-width:340px;column-count:1;padding:10px 6px;max-height:min(75vh,650px)}
  body.rd-site .tgmenu__navbar-wrap ul.navigation>li>.sub-menu:is(:has(>li:nth-child(7)),:has(.sparsh-child-menu)){width:600px;max-width:none;column-count:2;column-gap:10px}
  /* the last menus open towards the left so they can never run past the window edge */
  body.rd-site .tgmenu__navbar-wrap ul.navigation>li.menu-item-has-children:nth-child(n+4)>.sub-menu{left:auto;right:0}
}

/* homepage hero: full-width image like the design (it was boxed inside the 1250px container, leaving white bands on both sides on a laptop).
   The slide text stays on the content grid and the enquiry form keeps its box. */
body.rd-site .slider__area>.container{max-width:none;width:100%;padding-left:0;padding-right:0}
body.rd-site .slider__area>.container>.row{margin-left:0;margin-right:0}
body.rd-site .slider__area>.container>.row>.col-lg-12:first-child{padding-left:0;padding-right:0}
body.rd-site .slider__area>.container>.row>.col-lg-12:not(:first-child){width:100%;max-width:none;padding-left:0;padding-right:0}
body.rd-site .slider__area .home__form-wrap{border-radius:0;border-left:0;border-right:0;padding-left:max(15px,calc((100% - 1220px)/2));padding-right:max(15px,calc((100% - 1220px)/2))}

/* WhatsApp chat button (third-party widget, set to sit on the left): on phones it covered page text and buttons ("Connect With...", the
   "Book An Appointment" button). Smaller, and on the right where the pages have no buttons or headings. */
@media (max-width:767.98px){
  /* its left position is fixed inline, so it is moved with a margin instead */
  body.rd-site [id^="gb-widget-"]{margin-left:calc(100vw - 84px);bottom:12px!important;width:58px!important;transform:scale(.82);transform-origin:bottom right}
}

/* footer social icons: pale icon on a pale box (contrast ~1.1:1) so they looked faded. Navy icons; bronze box with white icon on hover. */
body.rd-site footer a:has(> i.fab){color:#132b40!important}
body.rd-site footer a:has(> i.fab) i{color:inherit!important}
body.rd-site footer a:has(> i.fab):hover{background-color:#785527!important;color:#fff!important}
/* footer link arrows: dark bronze on navy was hard to see; a lighter tone of the same colour */
body.rd-site footer .fa-angle-double-right{color:#d9bd8a!important}

/* hero slider dots (added by the small script in redesign.php, because the slider no longer changes slides by itself) */
body.rd-site .slider__active{position:relative}
body.rd-site .rd-hero-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:2px;z-index:5;pointer-events:none}
body.rd-site .rd-hero-dots button{pointer-events:auto;width:28px;height:28px;padding:8px;border:0;background:transparent;cursor:pointer;line-height:0}
body.rd-site .rd-hero-dots button::before{content:"";display:block;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:rgba(19,43,64,.35);box-sizing:border-box;transition:background .2s,border-color .2s}
body.rd-site .rd-hero-dots button[aria-current="true"]::before{background:#e0c393;border-color:#e0c393}
body.rd-site .rd-hero-dots button:focus-visible{outline:2px solid #e0c393;outline-offset:-2px;border-radius:50%}