/* ===========================================================================
   lodhanew/home.css
   ---------------------------------------------------------------------------
   IMPORTANT — READ BEFORE DEPLOYING:
   This is a COPY of home-page CSS, NOT an extraction. Every rule in this
   file (except the ones explicitly marked reused-elsewhere below) is ALSO
   still present in main.css and has been verified to be shared with other
   pages/sections, including:
     - .ourPromiseSec / .ourPromiseImgDiv / .ourPromiseTextDiv
         -> also used on Our Story (.peopleSec), Contact Us (.contactUsSec),
            ESG (.esgSec), Brand video (.brandexvideosec),
            Education info section, Accelerator publication page
     - .ourPrideSliderDiv / .ourPrideImgDiv
         -> also used on Our Story/brand pages (.brandesdesign, .ourBrandsSec,
            .ourValuesSec), Press (.newsPressDiv), Experience (.expCardList)
     - .imgDiv
         -> generic, used in Blog thumbnails, Awards section, Education-info
     - .spotlightSliderDiv
         -> also used by Blog cards (.blogCard) and Commercial pages
     - .swiperBtnDiv / .swiper-button / .swiper-pagination
         -> generic slider controls used site-wide (secondary nav, amenities
            slider, tabs, image lightbox)

   >>> DO NOT REMOVE these rules from main.css. main.css has been left
   >>> UNCHANGED (see the version already delivered) — this file only ADDS
   >>> attach via 'lodhanew/home' on top of it. Deleting them from main.css
   >>> will break the pages listed above.

   Attach via: $variables['#attached']['library'][] = 'lodhanew/home';
   =========================================================================== */

/* ===== PART A  -  Home page body sections ===== */
/* =====================================================================
   home.css  -  Home page (node/1081) ke body sections
   Source: main.css se copy kiya gaya (grouped selectors alag kiye gaye)
   NOTE: main.css se ye rules delete mat karna - dusre pages bhi
         ourPromiseSec / ourPrideSliderDiv use karte hain.
   Mobile / tablet rules responsive.css me hain (yahan nahi).
   ===================================================================== */


/* ---------- 0. Critical (inline <style> se) ---------- */
body { margin: 0; background: #fff; }
.main-banner-slider { min-height: 100vh; display: block; }


/* ---------- 1. HERO / SPOTLIGHT BANNER ---------- */
.spotlightBanner {
  min-height: 350px;
}
.spotlightBanner .placeholderBannerImg {
  position: absolute;
  z-index: -99;
  visibility: hidden;
  opacity: 0;
}
.spotlightSliderDiv {}
.spotlightSliderActive {}
.spotlightSliderDiv .swiper-slide {
  position: relative;
}
.bannerImgDiv {}
.spotlightSliderDiv .swiper-slide .bannerImgDiv {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e8e1df;
}
.spotlightSliderDiv .swiper-slide .bannerImgDiv .bannerImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.iframeDiv {}
.iframeDiv-mob {}
.spotlightSliderDiv .swiper-slide .iframeDiv {
  overflow: hidden;
  aspect-ratio: 16/9;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  max-width: 100%;
}
.spotlightSliderDiv .swiper-slide .iframeDiv .bannerImg {
  object-fit: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#hero-video-container {}
.bannerImg {}


/* ---------- 2. OUR PROMISE  +  OUR SIGNATURE SERVICES (same classes) ---------- */
.ourPromiseSec {
  padding: 80px 0;
}
.ourPromiseSec .ourPromiseImgDiv {
  width: 50%;
}
.ourPromiseSec .ourPromiseImgDiv img {
  width: 100%;
}
.ourPromiseSec .ourPromiseTextDiv {
  width: 50%;
  padding: 0 20px;
  max-width: 550px;
}
.flex-row-reverse1 {}


/* ---------- 3. OUR PURPOSE ---------- */
.ourPurposeSec {
  min-height: 100vh;
  background: #fff;
  position: relative;
}
.ourPurposeSec .container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
}
.ourPurposeTextDiv {}
.ourPurposeSec .ourPurposeImgDiv {
  width: 55%;
  height: 100vh;
}
.ourPurposeSec .ourPurposeImgDiv .imgDiv {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.ourPurposeSec .ourPurposeImgDiv .imgDiv img {
  width: 100%;
  height: 100%;
  transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ourPurposeSec .ourPurposeImgDiv .imgDiv:hover img {
  transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1.1);
}
.ourPurposeSec .ourPurposeImgDiv .imgDiv .underlineArrowBtn {
  position: absolute;
  bottom: 40px;
  left: 50px;
}
.imgDiv {}
.underlineArrowBtn {}


/* ---------- 4. OUR PRESENCE / ICONIC DEVELOPMENTS ---------- */
.ourPrideSec {
  padding: 80px 0 0;
}
.ourPrideTextDiv {}

.ourPrideSliderDiv {
  padding-bottom: 80px;
  margin-top: 30px;
}
.ourPrideSliderActive {}
.deskCenterLimitedSlides {}

.ourPrideSec .ourPrideSliderDiv .swiper-wrapper {
  padding-bottom: 30px;
}
.ourPrideSliderDiv .swiper-slide {
  width: 250px;
  margin: 0 30px;
  overflow: hidden;
}
.ourPrideSliderDiv .swiper-slide:first-child {
  margin-left: 90px;
}
.ourPrideSliderDiv .swiper-slide:last-child {
  margin-right: 90px;
}
.ourPrideSliderDiv .swiper-slide a {
  display: block;
}
.ourPrideSliderDiv .swiper-slide .ourPrideImgDiv {
  overflow: hidden;
}
.ourPrideSliderDiv .swiper-slide img {
  width: 100%;
  transition: 3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ourPrideSliderDiv .swiper-slide:hover img {
  transition: 3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(1.1);
}
.ourPrideSliderDiv .swiper-slide p {
  color: #6d6e70;
  font-family: Jost, sans-serif;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3rem;
  margin-top: 10px;
  text-align: left;
}
.ourPrideSliderDiv .container {
  margin-top: 40px;
}
.ourPrideSliderDiv .container a {
  margin: 34px auto 0;
}
.ourPrideImgDiv {}

/* slider controls (style swiper-bundle.min.css se aata hai) */
.swiperBtnDiv {}
.swiper-button {}
.swiper-button-prev {}
.swiper-button-next {}
.swiper-button-static-bottom {}
.swiper-pagination {}



/* =====================================================================
   PART B  -  Site-wide rules jo main.css se aate the aur HOME page par
   bhi chahiye (cookie banner, enquiry popup + form, header search).
   Inke bina home.css akela use karne par popup/cookie banner toot jayega.
   ===================================================================== */


/* ---------- B1. Global helpers ---------- */
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: top;
}
form {
  margin: 0 -20px;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.justify-content-center {
  justify-content: center !important;
}
.capitalize {
  text-transform: capitalize;
}
.errorclass {
  font-size: 12px;
  color: red;
  position: absolute;
  bottom: -16px;
  font-family: Jost, sans-serif;
}
.mobile_error.errorclass {
  left: 0px;
  bottom: -23px;
}
/* NOTE: ye rule header ka Call button hide karta hai (main.css me yahi tha) */
.call-cta {
  display: none !important;
}


/* ---------- B2. Header search / menu ---------- */
.linksListWithSearch .innerSearchDiv .serachAutofillDiv ul li {
  color: #fff;
}
.white .goldenLineBtn.hoverWhite:hover {
  color: #000 !important;
}
header.white .mainHeader .linksDiv > ul > li .innerMenuDiv .innerSearchDiv ul li,
header.white .mainHeader .linksDiv > ul > li .innerMenuDiv .innerSearchDiv ul li a {
  color: #000;
}


/* ---------- B3. Enquiry popup ("Request a call back") ---------- */
.getInTouchForm {
  padding: 65px 100px;
  margin: 80px 0 0;
}
.getInTouchForm .formControls label {
  font-size: 14px;
}
.getInTouchForm .ContentText p {
  color: #313131;
}
.enquirePopupWrapper .getInTouchForm {
  padding: 40px 55px;
  min-width: 450px;
}
.enquirePopupWrapper.active .popupContent .getInTouchForm {
  transform: translateX(-450px);
}
.enquirePopupWrapper .getInTouchForm,
.enquirePopupWrapper .nextSlide,
.enquirePopupWrapper.active .popupContent .getInTouchForm,
.formControls label,
.formControls small,
.formControlsCheck input:checked ~ label:after,
.formControlsCheck label:after {
  transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.enquirePopupWrapper .popupContent {
  display: flex;
  width: 450px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.enquirePopupWrapper .formControls {
  width: 100%;
  margin: 0;
}
.enquirePopupWrapper .formControlsCheck {
  width: 100%;
}
.enquirePopupWrapper .headingH1 a {
  color: #313131;
  font-size: 14px;
  font-family: Jost, sans-serif;
  line-height: 20px;
  padding-left: 22px;
  background: url(../media/svg/call.svg) center left/13% no-repeat;
  filter: brightness(0) saturate(100%) invert(18%) sepia(0%) saturate(1%)
    hue-rotate(194deg) brightness(93%) contrast(92%);
}
.enquirePopupWrapper .nextSlide {
  position: relative;
  z-index: 1;
}
.enquirePopupWrapper .nextSlide .formControls {
  background: url(../media/svg/otpbg.png) center bottom no-repeat;
}
.enquirePopupWrapper .nextSlide .formControls input {
  font-size: 2rem;
  letter-spacing: 55px;
  padding: 0 26px;
}
.enquirePopupWrapper .nextSlide .prevArrowBtn {
  width: 30px;
  height: 30px;
  transform: rotate(90deg);
  cursor: pointer;
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 7px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(6%) saturate(1349%)
    hue-rotate(332deg) brightness(92%) contrast(90%);
}
.popupContent .formControls,
.otptext {
  padding-top: 20px;
}
.pop-mobile-number {
  padding-right: 10px;
}
.sentotp-btn {
  background: #fff;
  min-height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #ac8d80;
  text-align: center;
  font-size: 0.875rem;
  font-family: Jost, sans-serif;
  line-height: 1.25rem;
  font-style: normal;
  font-weight: 400;
  padding: 0 10px;
  border: 1px solid #ac8d80;
  text-transform: capitalize;
  cursor: pointer;
  margin-bottom: -6px;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.sentotp-btn:hover {
  color: #fff;
  background: #ac8d80;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}


/* ---------- B4. Form fields ---------- */
.formControls {
  position: relative;
  border-bottom: 0.5px solid #000;
  padding: 28px 8px 8px;
  width: calc((100% / 3) - 40px);
  display: flex;
  align-items: center;
  margin: 0 20px 10px;
}
.formControls.cityselect,
.formControls.countrysel {
  padding-top: 40px !important;
}
.formControls label,
.formControls small {
  font-family: Jost, sans-serif;
  font-size: 12px;
  text-align: left;
  color: #6d6e70;
  position: absolute;
  left: 8px;
  bottom: 11px;
  display: flex;
  align-items: center;
}
.formControls input:focus ~ label,
.formControls.active label {
  bottom: 35px;
  transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  left: 8px;
}
.formControls .dropDownDiv .dropList label,
.formControls small {
  position: static;
}
.formControls .dropDownDiv {
  width: 100%;
}
.formControls .dropDownDiv span,
.formControls input {
  position: relative;
  z-index: 1;
  color: #313131;
  width: 100%;
}
.formControls .dropDownDiv span {
  min-height: 18px;
  max-width: 100%;
}
.formControls .dropDownDiv .dropList {
  width: 100%;
  z-index: 2;
}
.formControls small ~ label {
  left: 40px;
}
.formControls small ~ input {
  padding-left: 10px;
}
.formControls input {
  border: 0;
  outline: 0;
  font-family: Jost, sans-serif;
  font-size: 14px;
  text-align: left;
  background: 0 0;
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
}

/* consent checkbox */
.formControlsCheck {
  align-items: center;
  display: flex;
  position: relative;
}
.formControlsCheck label {
  color: #6d6e70;
  display: flex;
  font-family: Jost, sans-serif;
  position: relative;
  cursor: pointer;
  padding-left: 25px;
  font-size: 12px;
  text-align: left;
  align-items: center;
  margin-top: 15px;
}
.formControlsCheck label:before {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #ac8d80;
}
.formControlsCheck label:after {
  content: "";
  position: absolute;
  left: 3px;
  width: 9px;
  height: 9px;
  background: #ac8d80;
  opacity: 0;
}
.formControlsCheck input:checked ~ label:after {
  opacity: 1;
}
.formControlsCheck input {
  position: absolute;
  display: none;
}

/* submit + captcha */
li.request-btn-wrapper {
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}
li.request-btn-wrapper label {
  font-family: Jost, sans-serif;
  font-size: 12px;
  text-align: left;
  color: #6d6e70;
}
li .captcha__element {
  position: relative;
  margin-bottom: 30px;
}
#edit-captcha-response {
  padding: 5px;
  border-radius: 0;
  outline: 0;
  border: 0.5px solid #000;
}
#edit-captcha-response:hover {
  outline: 0;
}
.captcha_error {
  position: absolute !important;
  left: 0;
}


/* ---------- B5. Cookie banner (cookiesjsr) ---------- */
#cookiesjsr {
  font-family: Jost, sans-serif !important;
}
.cookiesjsr-banner {
  background: #f8f8f8;
  display: block;
  padding: 1em 1em 0;
  color: #313131;
}
.cookiesjsr-banner--text {
  text-align: justify;
  line-height: 25px;
  font-family: Jost, sans-serif;
  width: 68%;
  margin-right: 6%;
  float: left;
  font-size: 0.9rem;
}
.cookiesjsr-btn,
.cookiesjsr-btn.important,
.cookiesjsr-settings {
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  text-transform: capitalize;
  min-width: 100px;
  font-style: normal;
  cursor: pointer;
}
.cookiesjsr-btn,
.cookiesjsr-settings {
  min-height: 28px;
  padding: 4px 28px !important;
  line-height: 1.25rem !important;
  font-family: Jost, sans-serif;
  text-align: center;
  font-weight: 400;
}
.cookiesjsr-btn.important {
  background: #ac8d80;
  font-size: 14px;
  min-height: 32px;
  padding: 4px 28px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  font-family: Jost, sans-serif;
  font-weight: 400;
  line-height: 1.25rem;
  border: 1px solid #fff;
  display: inline-flex;
}
.cookiesjsr-links.links--row li {
  padding-left: 0;
}
.cookiesjsr-links.links--row li:before {
  content: none;
}
.cookiesjsr-settings {
  background: #fff;
  font-size: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  color: #ac8d80 !important;
  border: 1px solid #ac8d80;
  display: inline-flex !important;
}
.cookiesjsr-btn {
  background: #ac8d80;
  font-size: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  border: 1px solid #fff !important;
  display: inline-flex !important;
}
.cookiesjsr-layer {
  background: #f8f8f8;
}
.cookiesjsr-layer--label-all,
.cookiesjsr-layer--title,
.cookiesjsr-service-group--tab {
  color: #313131;
  font-family: Jost, sans-serif;
}
.cookiesjsr-layer--title {
  text-transform: capitalize;
}
.cookiesjsr-service-group.active .cookiesjsr-service-group--tab {
  background: 0 0;
  color: #313131;
  font-weight: 500 !important;
  border-left: 6px solid #ac8d80;
  border-bottom: 1px solid var(--layer-border-color, #e4e5e6);
  font-family: Jost, sans-serif;
}
.cookiesjsr-service-group.active .cookiesjsr-service-group--content {
  background: #fff;
  color: #313131;
  border-left: 1px solid var(--layer-border-color, #e4e5e6);
}
.cookiesjsr-btn.important.invert,
.cookiesjsr-layer button.denyAll {
  color: #ac8d80 !important;
  border: 1px solid #ac8d80 !important;
}
.cookiesjsr-btn.important.invert {
  background: #fff;
  margin-left: 1%;
}
.cookiesjsr-service--description h3 {
  color: #313131;
  font-size: 0.9em;
}
.cookiesjsr-switch {
  border: 2px solid #cfcfcf;
  box-shadow: inset -2px 2px 1px rgba(0, 0, 0, 0.25);
}
.cookiesjsr-switch:after {
  background-color: #ac8d80;
  top: -2px;
}
.cookiesjsr-switch.active {
  background-color: #fff;
  border: 2px solid #ac8d80;
}
.cookiesjsr-banner--action .denyAll {
  position: relative;
  top: -58px;
  left: 21%;
  display: none !important;
}
.cookiesjsr-banner--action .allowAll {
  position: relative;
  top: -58px;
  left: 20%;
}
.cookiesjsr-btn button.save,
.cookiesjsr-layer button.allowAll {
  background: #ac8d80 !important;
  color: #fff !important;
  border: 1px solid #ac8d80 !important;
}

@media (min-width: 768px) {
  .cookiesjsr-service-group--tab {
    border-bottom: 1px solid var(--layer-border-color, #e4e5e6);
    font-weight: 500;
  }
  .cookiesjsr-layer--actions .cookiesjsr-btn {
    width: calc(35% - 2.5em);
  }
  .cookiesjsr-banner--info {
    width: 100% !important;
  }
  .cookiesjsr-banner--action .cookiesjsr-btn {
    width: calc(13% - 3em);
  }
  .cookiesjsr-banner--action .denyAll {
    position: relative;
    top: -58px;
    left: 22.5%;
  }
  .cookiesjsr-banner--action .allowAll {
    position: absolute;
    top: 12px;
    left: 85%;
  }
  .cookiesjsr-banner--action {
    height: 0;
  }
  .cookiesjsr-btn:hover {
    opacity: inherit;
    transform: inherit;
  }
  .cookiesjsr-layer {
    width: 650px;
    height: 79vh;
    font-family: Jost, sans-serif;
  }
}
@media (max-width: 1280px) and (min-width: 980px) {
  .cookiesjsr-banner--action .denyAll {
    position: relative;
    top: -58px;
    left: 28%;
  }
  .cookiesjsr-banner--action .allowAll {
    position: absolute;
    top: 15%;
    left: 85%;
  }
  .cookiesjsr-btn.important {
    min-width: 143px;
  }
}
@media (max-width: 768px) {
  .cookiesjsr-layer--actions .cookiesjsr-btn {
    width: calc(35% - 2.5em);
  }
  .cookiesjsr-links.links--row li a {
    width: 98%;
  }
  .cookiesjsr-banner--action .allowAll,
  .cookiesjsr-banner--action .denyAll {
    position: relative;
    top: 0;
    left: 0;
  }
  .cookiesjsr-banner--text {
    width: 100%;
    margin-right: 0;
  }
}
@media screen and (max-width: 980px) and (orientation: landscape) {
  .cookiesjsr-settings {
    padding: 4px 7px !important;
  }
  .cookiesjsr-links.links--row li {
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .cookiesjsr-links.links--row li a {
    width: 98%;
  }
}
.call-cta {
  display: none !important;
}