/*header*/
.header {
  position: fixed;
  inset: 0 0 auto 0;
  padding: 1.5rem 0;
  z-index: 99;
  transition:all 300ms ease-in-out;
}

.header.headerActive,
.header.fixed{
  padding: 5px 0;
	background-color: #fff;
	border-bottom: 1px solid rgba(0,0,0,0.15);
}

.logo {
	height:auto;
	position: relative;
	min-height: 1px;
	transition:all 300ms ease-in-out;
}

.logo img{
	width:180px;
  margin: 0 auto;
	transition:all 300ms ease-in-out;
  filter: brightness(60);
}

.header.headerActive .logo img,
.header.fixed .logo img{
	width: 120px;
  filter: none;
}

.menuBtn {
  --btn-color: var(--primary-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background-color: var(--light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease-in-out;
  position: relative;
  cursor: pointer;
}

.header.headerActive .menuBtn,
.header.fixed .menuBtn {
  --btn-color: var(--light);
  background-color: var(--primary-color);
}

.menuBtn .bar {
  width: 13px;
  height: 22px;
  border-left: 1px solid var(--btn-color);
  position: relative;
  transition: all 300ms ease-in-out;
  margin-top: 2px;
}

.menuBtn .bar::before,
.menuBtn .bar::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  bottom: 0;
  background: var(--btn-color);
  transform-origin: center center;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.menuBtn .bar::before {
  right: 50%;
  height: 125%;
}

.menuBtn.closeMenuBtn .bar{
  border-left: transparent;
  height: 30px;
  width: 20px;
}

.menuBtn.closeMenuBtn .bar::before {
  height: 100%;
  -webkit-transform: rotate(135deg) translate(0, 0);
  transform: rotate(135deg) translate(0, 0);
}

.menuBtn.closeMenuBtn .bar::after {
  height: 100%;
  -webkit-transform: rotate(-135deg) translate(7px, -7px);
  transform: rotate(-135deg) translate(7px, -7px);
}

.topHead-item{
  border: 0;
  background-color: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 1.3rem;
  border-radius: 50px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 50%) inset;
  transition: all 300ms ease-in-out;
}

.topHead-item.projectBtn:hover{
  color: #fff;
  box-shadow: 0 0 0 50px rgb(255 255 255 / 25%) inset;
}

.header.headerActive .topHead-item,
.header.fixed .topHead-item{
  padding: 10px 1rem;
  font-size: .875rem;
}

.header.headerActive .projectBtn,
.header.fixed .projectBtn{
  color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.header.headerActive .projectBtn:hover,
.header.fixed .projectBtn:hover{
  color: var(--light);
  box-shadow: 0 0 0 50px var(--primary-color) inset;
}

.topHead-item.projectBtn i{
  font-size: 75%;
}

.topHead .icon{
  display: block;
  width: 30px;
}

.topHead .icon svg{
  fill: none;
  stroke-width: 0.7px;
  stroke: #fff;
}

.header.headerActive .icon svg,
.header.fixed .icon svg{
  stroke: var(--primary-color);
}
/*header*/

/* Search */
.searchContainer{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: url(../images/texture.png) color-mix(in srgb, var(--body-color), transparent 20%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: none;
}

.searchClose{
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.searchContainer .searchForm{
  transform: scale(0,0);
  transition: all 300ms ease-in-out;
}

.searchContainer .searchForm.active{
  transform: scale(1,1);
}

.searchContainer .form-control{
  padding: 1.5rem 4rem 1.5rem 1.5rem;
  border-radius: 60px;
}

.searchForm .btn{
  position: absolute;
  inset: 0 0 0 auto;
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  border-radius: 50%;
  color: rgb(0 0 0 / 50%);
}

.searchForm .btn:hover{
  color: var(--primary-color);
}
/* Search */

/* left strip */
.enquiryWrapper{
  --width: 34px;
  position: fixed;
  isolation: isolate;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  background-color: #fff;
  padding: 10px;
  border-radius: 30px;
  box-shadow: 0px 10px 20px rgb(0 0 0 / 15%);
}
.enquiryWrapper a{
  margin-bottom: 10px;
  display: block;
  width: var(--width);
  height: var(--width);
}

.enquiryWrapper a i{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25em;
}

.mbMenuContainer {
  position: fixed;
  inset: 0;
  background-color: rgb(255 255 255 / 15%);
  -webkit-backdrop-filter: blur(5px) brightness(0.6);
  backdrop-filter: blur(5px) brightness(0.6);
  display: none;
  z-index: 98;
}

.mbMenuContainer .mbMenu {
  background-color: #fff;
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: 0;
  padding: calc(60px + 2rem) 2rem 2rem;
  overflow: auto;
  display: flex;
  gap: 2rem;
  flex-direction: column;
}

.mbMenuContainer .mbMenu ul {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.mbMenuContainer .mbMenu ul li{
  transition: all 300ms ease-in-out;
}

.mbMenuContainer .mbMenu > ul:hover > li{
  opacity: 0.3;
}

.mbMenuContainer  .mbMenu > ul > li:hover{
  opacity: 1;
}

.mbMenuContainer .mbMenu > ul > li a {
  font: 500 2rem var(--serif);
  padding: 10px 0;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--body-color);
  transition: all 300ms ease-in-out;
}

.mbMenuContainer .mbMenu li:hover > a,
.mbMenuContainer .mbMenu li a:focus {
  padding: 10px;
}

.mbMenuContainer .mbMenu > ul > li a i{
  font-size: 60%;
  color: var(--orange-color);
  transition: all 300ms ease-in-out;
}

.mbMenuContainer .mbMenu li:hover > a i,
.mbMenuContainer .mbMenu li a:focus i{
  transform: rotate(45deg);
}

.mbMenuContainer .mbMenu .dropdown{
  display: none;
}

.mbMenuContainer .mbMenu .dropdown ul{
  padding: 0 10px;
  margin-bottom: 1rem;
  border: 1px solid rgb(0 0 0 / 10%);
  background-color: var(--light);
}

.mbMenuContainer .mbMenu .dropdown li a{
  padding: 10px;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.mbMenuContainer .mbMenu .dropdown li:last-of-type a{
  border-bottom: 0;
}

.mbMenuContainer .mbMenu .dropdown li a:hover{
  color: var(--primary-color);
}
/* left strip */

/* Home Banner */
.banner {
  height: calc(100vh - 0px);
  position: relative;
  z-index: 3;
}
.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(rgb(0 0 0 / 50%), transparent 15%);
  pointer-events: none;
}

.banner .banner-video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}

.banner .carousel-inner .carousel-item {
  background: center no-repeat #5a6d8f;
  background-size: cover;
  background-blend-mode: overlay;
  z-index: 1;
}

.banner .carousel-inner .carousel-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.bannerText {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 9;
  color: #fff;
}

.bannerText .h6 {
  letter-spacing: 10px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 300;
  display: block;
}

.bannerText .h1 {
  font-weight: 100;
  font-size: 4rem;
  /* color: rgb(255 255 255 / 25%);
  -webkit-text-stroke: 1px #fff; */
}

/* @keyframes breathe{
  0%{
    transform: scale(1);
  }
  100%{
    filter: hue-rotate(135deg);
    transform: scale(1.2);
  }
} */

.scrollDown {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: 60px;
  opacity: 0.4;
  cursor: pointer;
  z-index: 9;
  transition: opacity 200ms ease-in-out;
}
.scrollDown:hover {
  opacity: 1;
}
/* Home Banner */


/* hm overview */
.line-plus {
  display: block;
  position: relative;
  isolation: isolate;
  height: 1px;
  background-color: #dedede;
  margin-bottom: 1.75rem;
}
.line-plus::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--body-color);
  font-weight: 100;
  font-size: 3.5rem;
}

.hm-overview-box .smallHeading {
  margin-bottom: 1.25rem;
}

.hm-overview-box p {
  color: var(--lightgray);
}

/* .building-sketch,
.building-sketch::before{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.building-sketch{
  transition: transform 500ms linear;
  background: url(../images/landing-bg.jpg) center bottom / cover no-repeat;
}

.building-sketch::before{
  content: '';
  background-color: rgb(255 255 255 / 70%);
} */

.statsContainer > .inner{
  border: solid rgb(0 0 0 / 20%);
  border-width: 1px 0;
  padding: 2rem 0;
  margin-top: 3rem;

}

.statsBox .inner {
  text-align: center;
  text-transform: uppercase;
}

.statsBox h2 {
  font-weight: 200;
  font-size: 1.5rem;
  color: var(--primary-color);
}

.statsBox p {
  font-size: 13px;
}
/* hm overview */

/* Search Bar */
#searchFormWrapper{
  display: none;
}
/* Search Bar */

/* Property Card */
.hm-featured-slide.swiper-slide{
  height: auto;
}

.hm-featured-slide .inner{
  display: block;
  height: 100%;
  background-color: color-mix(in srgb,  var(--secondary-color), #fff 60%);
}

.hm-featured-slide-img img{
  aspect-ratio: 5/3;
  object-fit: cover;
  background-color: rgb(0 0 0 / 10%);
  transition: all 300ms ease-in-out;
}

.hm-featured-slide:hover img{
  transform: scale(1.05, 1.05);
}

/* .hm-featured-slide-text-container{
  display: flex;
  align-items: center;
} */

.hm-featured-slide-text {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding: 2rem;
}

.delivered-slide .hm-featured-slide-text {
  gap: 1.5rem;
}

.hm-featured-slide-text p{
  font-size: 0.875rem;
}

.project-icons{
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.delivered-slide .project-icons{
  padding-top: 1.5rem;
  border-top: 1px dashed rgb(0 0 0 / 10%);
}

/* .project-icons .icon-item + .icon-item {
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid rgb(0 0 0 / 10%);
} */

.icon-item .in{
  display: flex;
  gap: 10px;
}
.icon-item .icon{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-item .in p{
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--primary-color);
}


.icon-item .in p span{
  font-weight: 600;
}
/* Property Card */

/* Why Choose Us */
.section-whyChooseUs{
  height: 90vh;
}

.section-whyChooseUs .bgs{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #000;
}
.bgs .whyChoose-video:not(.active){
  display: none;
}
.bgs .whyChoose-video{
  opacity: 0.75;
}

.whyChoose-list{
  position: relative;
  border-left: 1px solid rgb(255 255 255 / 15%);
}

.whyChoose-list::before,
.whyChoose-list .whyChoose-list-item .inner::before{
  content: '';
  position: absolute;
  width: 4px;
  background-color: var(--secondary-color);
}

.whyChoose-list::before{
  bottom: 5rem;
  left: 100%;
  height: 10rem;
}

.whyChoose-list .whyChoose-list-item{
  width: 30%;
  transition: all 500ms linear;
  border-right: 1px solid rgb(255 255 255 / 15%);
  opacity: 0.5;
}
  
.whyChoose-list .whyChoose-list-item.active{
  width: 40%;
  opacity: 1;
}
.whyChoose-list .whyChoose-list-item.active .inner{
  background-color: rgb(0 0 0 / 50%);
}

@media (min-width: 768.1px) {
  .whyChoose-list .whyChoose-list-item.bg-image{
    background: none !important;
  }
  .whyChoose-list .whyChoose-list-item.bg-image::before{
    display: none;
  }
}

.whyChoose-list .whyChoose-list-item .inner{
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: #fff;
  position: relative;
  z-index: 1;
}

.whyChoose-list .whyChoose-list-item .inner::before{
  left: 0;
  top: 5rem;
  height: 0;
  transition: all 300ms linear 100ms;
}

.whyChoose-list .whyChoose-list-item.active .inner::before{
  height: 5rem;
}

.whyChoose-list .whyChoose-list-item .details{
  margin-bottom: 20vh;
  overflow: hidden;
  position: relative;
}

.whyChoose-list .whyChoose-list-item .details .hide{
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 500ms linear;
}

.whyChoose-list .whyChoose-list-item.active .details .hide{
  transform: translateX(0%);
  opacity: 1;
  visibility: visible;
}
/* Why Choose Us */

/* Client speak */
/* Masonry View */
.testimGrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px;
  aspect-ratio: 16 / 7;
}
    
.testimBox1 {
  grid-column: span 2 / span 2;
  grid-row: span 3 / span 3;
}

.testimBox2 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 3;
}

.testimBox3 {
  grid-column: span 3 / span 3;
  grid-row: span 2 / span 2;
  grid-column-start: 5;
}

.testimBox4 {
  grid-column: span 3 / span 3;
  grid-row: span 3 / span 3;
  grid-column-start: 8;
}

.testimBox5 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 4;
}

.testimBox6 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 4;
  grid-row-start: 4;
}

.testimBox7 {
  grid-column: span 3 / span 3;
  grid-row: span 2 / span 2;
  grid-column-start: 6;
  grid-row-start: 4;
}

.testimBox8 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-column-start: 9;
  grid-row-start: 4;
}

.testimBox9 {
  grid-column: span 5 / span 5;
  grid-column-start: 3;
  grid-row-start: 3;
}

.testimBox {
  position: relative;
  overflow: hidden;
}

.testimBox .testim-image{
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  transition: all 300ms ease-in-out;
}
/* Masonry View */

/* mobile slides */

.client-speak-slide .inner {
  max-width: 800px;
  width: 90%;
  margin: 0 auto 1rem;
  text-align: center;
}

.client-img{
  margin: 1px auto 8rem;
  padding: 10px;
  max-width: 120px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--primary-color);
  position: relative;
}

.client-img::after{
  content: '';
  position: absolute;
  width: 1px;
  height: 5rem;
  top: 100%;
  background-color: var(--primary-color);
  margin: 1rem auto 0;
}

.client-img img{
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
}

.client-speak-box {
  margin-bottom: 2rem;
}

.client-speak-slide .inner p:last-child {
  margin-bottom: 0;
}

.client-speak-info {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.client-speak-info span {
  border-right: 1px solid rgb(0 0 0 / 25%);
  padding-right: 10px;
  line-height: 1;
  color: var(--primary-color);
}
/* mobile slides */


#testimonials button[class^='carousel-control'] {
  top: 30%;
}

.testimonials-indicators.carousel-indicators{
  position: static;
  margin: 3.5rem auto 0;
  gap: 1rem;
}

.testimonials-indicators.carousel-indicators [data-bs-target]{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 0;
  margin: 0;
  transform: scale(0.8, 0.8);
  transition: all 600ms linear;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  box-shadow: 0 0 0 4px var(--primary-color);
}

.testimonials-indicators.carousel-indicators [data-bs-target]:hover{
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.testimonials-indicators.carousel-indicators [data-bs-target].active{
  transform: scale(1, 1);
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.testimonials-indicators img{
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
}

.client-speak-slide{
  display: none;
}

.testimonial-slide {
  transition: all 1s linear;
  font-size: .75rem;
}

.testimonial-box {
  position: absolute;
  inset: 0;
  padding: 1.25rem;
  background-color: var(--secondary-color);
  transition: all 300ms ease-in-out;
  transform: translateX(100%);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.testimBox:hover .testimonial-box {
  transform: translateX(0%);
}

.testimonial-slide .inner p:last-child {
  margin-bottom: 0;
}

.testimonial-info {
  display: flex;
  gap: 10px;
  flex-direction: column;
  margin-top: 1rem;
}

.testimonial-info span {
  /* border-right: 1px solid rgb(0 0 0 / 25%);
  padding-right: 10px;
  line-height: 1; */
  color: var(--primary-color);
}

/* Client speak */

/* Blogs */
.blogs-slider .swiper-button-prev{
  left: 5%;
}
.blogs-slider .swiper-button-next{
  right: 5%;
}
.blog-image img{
  aspect-ratio: 16/9;
  object-fit: cover;
}

.gallery-card .blog-image img{
  transition: all 300ms ease-in-out;
}

.gallery-card .blog-image:hover img{
  transform: scale(1.125, 1.125);
}

.news-card .blog-image{
  background-color: var(--secondary-color);
}

.news-card .blog-image img{
  object-fit: contain;
  mix-blend-mode: multiply;
}

.blog-card .card-body{
  padding: 1.75rem;
  background-color: var(--light);
}

.by img{
  width: 25px;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
}

.by:hover img{
  border-radius: 0;
}
/* Blogs */

/* Events */
.gallery-card .blog-image{
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.gallery-card .blog-image::before{
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #fff;
  background-color: rgb(0 0 0 / 20%);
  z-index: 1;
  pointer-events: none;
}
/* Events */


/*Footer*/
.footer-area {
  padding: 2rem 0;
  border-top: 1px;
  position: relative;
  z-index: 1;
}
.footer-area::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    var(--primary-color) 35%,
    var(--primary-color) 70%
  );
}

.footer-area a {
  display: inline-block;
  color: inherit;
  font-size: 14px;
  padding: 5px 0;
  transition: all 300ms ease-in-out;
}
.footer-area a:hover {
  color: var(--primary-color);
}

.footer-logo {
  width: 180px;
}

.foot-About p{
  font-size: 14px;
}

.footer-area .smallHeading{
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.footer-links {
  margin: 2rem 0;
  position: relative;
  z-index: 1;
}

.foot-menu.socialBox a {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.toggleFooterBtn i{
  background-color: var(--secondary-color-light);
}

.toggleFooterBtn.active i{
  transform: rotate(180deg);
  background-color: var(--primary-color);
  color: #fff;
}

.toggleFooterBtn::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: .5px;
  background-image: linear-gradient(to left, transparent, var(--primary-color), transparent);
  z-index: -1;
}

#more-footer{
  padding-bottom: 2rem;
  display: none;
}

#more-footer::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--secondary-color);
  z-index: -1;
}

#more-footer ul li a{
  padding: 0.5rem 0.875rem;
  border-radius: 50px;
  border: 1px solid rgb(0 0 0 / 10%);
  font-size: 12px;
}

#more-footer ul li a:hover{
  background-color: var(--primary-color);
  color: #fff;
}

.footer-bottom {
}

.footer-bottom > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom .d-flex {
  gap: 10px;
}

.footer-bottom a{
  font-size: 12px;
}

.copyrights {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.copyrights p {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-size: 12px;
}

.copyrights p img {
  width: 20px;
  margin-left: 5px;
}

.button-top {
  background: var(--secondary-color);
  position: fixed;
  cursor: pointer;
  left: 1rem;
  bottom: -50px;
  color: #000;
  font-size: 13px;
  border-radius: 50%;
  opacity: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 500ms ease;
  z-index: 99;
}

.button-top.fixed {
  opacity: 1;
  bottom: 1rem;
}

.button-top:hover {
  color: var(--secondary-color);
  background: var(--primary-color);
}
/*Footer*/

/* Inside page */
.emptyBox {
  background-color: var(--primary-color);
  padding-top: var(--header-height);
}

.emptyBox+.header {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

.inside-hero {
  /* margin-top: var(--header-height); */
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #0003;
}

.inside-hero.project-hero {
  height: calc(100vh - var(--header-height));
}

.inside-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.75));
  z-index: -1;
  pointer-events: none;
}

.inside-hero video,
.inside-hero img {
  mix-blend-mode: multiply;
}

.inside-hero .container-lg.position-absolute {
  top: 0;
  bottom: 0;
  z-index: 1;
}

.heroText {
  height: 100%;
  padding: calc(var(--header-height) + 2rem) 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.heroText .title {
  font-size: clamp(1.75rem, 6vw, 3.5rem);
  font-weight: 100;
  text-align: left;
}

.heroText-top {
  display: flex;
  justify-content: space-between;
}

.breadcrumb {
  background-color: transparent;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
  font-size: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inside-hero .breadcrumb {
  color: rgb(255 255 255 / 50%);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inside-hero .breadcrumb li a {
  color: rgb(255 255 255 / 50%);
  font-weight: 600;
}

.inside-hero .breadcrumb li a:hover {
  color: #fff;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: '';
  height: .125rem;
  width: .125rem;
  padding-right: 0;
  background-color: var(--primary-color);
}

.inside-hero .breadcrumb-item+.breadcrumb-item::before {
  background-color: #bfbfbd;
}

.inside-hero .breadcrumb li.active {
  color: #fff;
}

.breadcrumbWrapper .breadcrumb {
  padding: 1rem 0;
}

.breadcrumbWrapper .breadcrumb li.active {
  color: var(--primary-color);
}

.heroText-top ul {
  font-size: .875rem;
  display: flex;
  gap: 10px;
}

.heroText-top ul li:not(:last-child) {
  padding-right: 10px;
  border-right: 1px solid rgb(255 255 255 / 50%);
}

.heroText-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
}

.heroText-footer .hero-tagline {
  max-width: 700px;
}

.heroText-footer .hero-tagline .h2 {
  font-weight: 200;
  letter-spacing: 1px;
}

.project-logo{
  width: 180px;
  margin-bottom: 2rem;
}


.projects-pointers li + li{
  margin-top: 2rem;
}

.projects-pointers li {
  width: 100%;
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 1px;
}

.projects-pointers li small{
  font-size: .75rem;
}
.projects-pointers li p{
  font-size: 1.5rem;
}

.overview-text{
  height: 160px;
}

.hidden-title{
  margin-bottom: 0;
  font-weight: 100;
  font-size: 4rem;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1rem;
  margin-block: 0;
  opacity: 0.1;
}

[data-position="left"].hidden-title{
  writing-mode: sideways-lr;
  left: 0;
}

[data-position="right"].hidden-title{
  writing-mode: vertical-lr;
  right: 0;
}

/* Gallery */
.gallery-logo{
  z-index: 10 !important;
}

.gallery-slide .galBox .inner{
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.gallery-slide .galBox .inner::before{
  content: '';
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 50px;
  height: 50px;
  background: url(../images/icons/plus-icon.svg) center / 40px no-repeat;
  transform: scale(0);
  transition: all 300ms ease-in-out;
  z-index: 1;
}

.gallery-slide .galBox:hover .inner::before{
  transform: scale(1);
}

.gallery-slide .galBox img{
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: all 300ms ease-in-out;
}

.gallery-slide .galBox:hover img{
  transform: scale(1.05, 1.05);
  -webkit-filter: contrast(1.25);
  filter: contrast(1.25);
}
/* Gallery */

/* Amenties */
.iconsContainer{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.amenBox figure{
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  margin-bottom: 0;
  background-color: #fff;
  transition: all 300ms ease-in-out;
  position: relative;
  z-index: 1;
}

.amenBox figure::before{
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--primary-color);
  transition: all 300ms ease-in-out;
}

.amenBox figure:hover::before{
  border-style: solid;
}

.amenBox figure .img-fluid{
  max-width: 55px;
  flex: 0 0 55px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transition: all 300ms ease-in-out;
}

.amenBox figure:hover .img-fluid{
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

.amenBox figure figcaption{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Amenities */

/* floor plans */
.fp-slider .fpBox .inner {
  padding: 1rem;
  border: 1px solid rgb(0 0 0 / 10%);
  transition: all 300ms ease-in-out;
  isolation: isolate;
}

.fp-slider .fpBox .inner:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 24%);
}

.planBase{padding-top: 10px;}

.fpDetails {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  padding-bottom: 6px;
}
.fpDetails:last-of-type{
  border-bottom: 0;
  padding-bottom: 0;
}

.planBase .fpDetails small{
  font-size: .75rem;
}

.planBase .fpDetails h6 {
  margin-bottom: 0;
  font-weight: 400;
  color: var(--primary-color);
}

.fp-slider .fpBox .img-fluid {
  overflow: hidden;
  margin-bottom: 1rem;
}
.fp-slider .fpBox .img-fluid img{
  aspect-ratio: 4/3;
  object-fit: contain;
}

.fp-slider .fpBox span {
  display: block;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #e4e4e4;
}
/* floor plans */

/* Sitemap */
.bigframe .inner{
  aspect-ratio: 16/7;
  display: block;
  overflow: hidden;
  position: relative;
}

.bigframe .inner img{
  transition: all 300ms ease-in-out;
}

.bigframe .inner:hover img{
  transform: scale(1.05, 1.05);
  -webkit-filter: brightness(1.2);
  filter: brightness(1.2);
}
/* Sitemap */

/* Location */
.location-section::before {
  content: '';
  position: absolute;
  inset: 60% 0 0;
  background: url(../images/map-vector.png) bottom center / cover;
  opacity: 0.075;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  z-index: -1;
}
.connectivity-slider{
  --map-size: 28vw;
  padding: calc(var(--map-size) / 3) 0;
}

@media (min-width:1400px){
  .connectivity-slider{
  padding: calc(var(--map-size) / 2.5) 0;
  }
}

.swiper-slide.location-icon{
  height: auto;
}

.connectivity .location-icon{
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.connectivity::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% + 0px);
  border-bottom: 1px dashed var(--primary-color);
  z-index: -1;
}

.connectivity .location-icon .img-fluid{
  width: 50px;
  margin: 0 auto;
  overflow: hidden;
}

.connectivity .location-icon .in {
  max-width: 200px;
  width: 100%;
  padding: 0 1.25rem;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  text-transform: uppercase;
  text-align: center;
}

.connectivity .location-icon .location-text{
  margin-top: 1rem;
  text-transform: uppercase;
}

.connectivity .location-icon .location-text .h4{
  font-weight: 400;
  font-size: 1.75rem;
  margin-bottom: 0;
}

.connectivity .location-icon .location-text small{
  font-size: .75rem;
  text-align: left;
}
.connectivity .location-icon .location-text p:first-of-type{
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
}
.connectivity .location-icon .location-text p:last-of-type{
  font-size: 12px;
}

.mapBox{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}

.mapBox .mapIcon{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: calc(var(--map-size) - 20px);
  height: calc(var(--map-size) - 20px);
  border: 1px solid var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 20%);
  backdrop-filter: blur(2px);
  border-radius: 50%;
  transition: all 300ms ease-in-out;
  z-index: 1;
}

.mapBox:hover .mapIcon{
  opacity: 0;
  transform: scale(0,0);
  pointer-events: none;
}

.mapBox .mapIcon img{
  max-width: 170px;
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.mapBox iframe{
  width: var(--map-size);
  height: var(--map-size);
  margin: 0 auto;
  box-shadow: 0 0 0 5px #87aac2;
  background-color: #87aac2;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
  -webkit-filter: invert(1);
  filter: invert(1);
}
.mapBox:hover iframe{
  border-radius: 0;
  -webkit-filter: invert(0);
  filter: invert(0);
  box-shadow: 0 0 0 5px var(--primary-color);
  background-color: var(--primary-color);
}
/* Location */

/* Pre footer */
.enquiry-box .inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background-color: var(--light);
  border: 8px double var(--primary-color);
  text-transform: uppercase;
  font-size: .875rem;
  letter-spacing: 1px;
  gap: 1rem;
  transition: all 300ms ease-in-out;
}

.enquiry-box .icon {
  max-width: 30px;
}

.enquiry-box .inner:hover{
  background-color: var(--secondary-color);
  color: var(--primary-color);
}
/* Pre footer */

.logo-icon{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  max-width: 400px;
  width: 90%;
  opacity: 0.1;
}

/* philosophy */
.text-area > article + article{
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--primary-color);
}
/* philosophy */

/* leadership */
.teamBox .inner .img-fluid{
  overflow: hidden;
  position: relative;
  z-index: 1;
  aspect-ratio: 3/4;
}
.teamBox .inner .img-fluid::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 60%, rgb(0 0 0 / 85%));
  z-index: 1;
  pointer-events: none;
}

.teamBox .inner .img-fluid img{
  transition: all 300ms ease-in-out;
}

.teamBox .inner:hover .img-fluid img{
  transform: scale(1.05,1.05);
}

.teamBox .team-content{
  position: absolute;
  inset: auto 0 0;
  padding: 1rem;
  z-index: 1;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.teamBox .team-content .name small{
  letter-spacing: 1px;
}

.teamBox .team-content i{
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  transition: all 300ms ease-in-out;
}

.teamBox .inner:hover .team-content i{
  transform: rotate(180deg);
}
/* leadership */

/* Leadership detail page */
.teamContainer, .team-image img{
  height: 100vh;
}

.teamTextContainer .inner{
  --px: 2rem;
  --py: 1.5rem;
  padding: var(--py) var(--px);
  position: relative;
}

.teamTextContainer .closeBtn{
  position: absolute;
  top: var(--py);
  right: var(--px);
  font-size: 0.75rem;
  text-transform: uppercase;
  z-index: 9;
}

.teamTextContainer .scroller{
  height: calc(100vh - var(--py) * 2);
  margin-right: calc(var(--px) * -1 + 5px);
  padding-right: calc(var(--px) - 5px);
}

.team-title{
  margin-bottom: 2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.team-quote::first-letter{
  padding-left: 1rem;
}

.team-quote i{
  font-size: 4rem;
  color: rgb(0 0 0 / 10%);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  line-height: 1;
}

.team-details{margin-top: 5rem;}
.team-details section + section{
  margin-top: 5rem;
}
.team-details section{
  padding-top: 2rem;
  border-top: 1px solid rgb(0 0 0 / 10%);
}
/* Leadership detail page */

/* Contact */
.contactFormBox .inner{
  max-width: 640px;
  margin-left: auto;
  margin-right: 0;
  padding-left: 4rem;
  padding-right: 4rem;
}

.contactFormBox .form-group > i{
  border: 0;
  background-color: #fff;
}

.contactBox .inner{
  height: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  background-color: var(--light);
}

.contactBox:not(:last-child) .inner{
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  margin-bottom: 2rem;
}

.address:not(:last-of-type){
  margin-bottom: 2rem;
}

.address li{
  display: flex;
  align-items: center;
  gap: 10px;
}
.address li:not(:last-child){
  margin-bottom: 10px;
}

.address i {
  color: var(--primary-color);
}

.address span {
  flex-basis: var(100% - 50px);
}

.iframeBox iframe {
  background-color: var(--light);
  width: 100%;
  height: 300px;
  display: block;
  border: 1px solid rgb(0 0 0 / 10%);
  background-color: var(--secondary-light-color);
}
/* Contact */

/* Careers */
.btns .inner{
  height: 100%;
  border: 1px solid rgb(0 0 0 / 8%);
}

.btns .inner.active{
  border-color: var(--primary-color);
}

.btns .inner.active i{
  color: var(--primary-color);
}

.people-slide .inner{
  padding: 2rem;
  aspect-ratio: 1/1;
  background-color: var(--primary-color);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
  text-align-last: center;
}

.people-slide .inner::before{
  background: linear-gradient(transparent, rgb(0 0 0 / 85%));
}

.logo-slider .swiper-wrapper{
  aspect-ratio: 16 / 7;
  height: 270px;
}

.logo-slider .swiper-slide{
  height: calc(50% - 10px);
}

.logo-item{
  height: 100%;
  padding: 1.5rem;
  background-color: var(--light);
  font-size: 0.875rem;
}

.award-slide .inner{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  border: 1px solid rgb(0 0 0 / 10%);
  position: relative;
}

.award-slide .inner .icon{
  max-width: 50px;
  flex: 0 0 50px;
}

/* Current openings */
.career-card .inside {
  border-radius: 0px;
  height: 100%;
  padding: 1.5rem;
  border: 0;
  background-color: var(--light);
  border: 1px solid var(--primary-color);
  transition: all 300ms ease-in-out;
}

.career-card .inside:hover {
  transform: translateY(-5px);
  box-shadow: 0 50px 30px -40px rgb(0 0 0 / 10%);
}

.career-card .card-header {
  background-color: var(--secondary-color);
  padding: 1rem 1.5rem;
  text-align: left;
  margin: -1.5rem -1.5rem 1.5rem;
}

.career-card .card-header .job-role {
  color: var(--primary-color);
  font-weight: 300;
  margin-bottom: 0;
}

.career-card p {
  line-height: normal;
}

.career-card .list-group .list-group-item {
  font-size: 0.875rem;
  line-height: normal;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
}

.career-card .list-group .list-group-item strong {
  max-width: 100px;
  flex: 0 0 100px;
}

.career-card .list-group .list-group-item span {
  max-width: calc(100% - 100px);
  flex: 0 0 calc(100% - 100px);
}
/* Current openings */

/* Life @ Suncity */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: repeat(4, 1fr); */
  gap: 1.125rem;
}

.grid-item1 { grid-area: 1 / 1 / 2 / 2; }
.grid-item2 { grid-area: 1 / 2 / 3 / 3; }
.grid-item3 { grid-area: 1 / 3 / 2 / 4; }
.grid-item4 { grid-area: 2 / 1 / 3 / 2; }
.grid-item5 { grid-area: 2 / 3 / 3 / 4; }
.grid-item6 { grid-area: 3 / 1 / 4 / 2; }
.grid-item7 { grid-area: 3 / 2 / 4 / 4; }
.grid-item8 { grid-area: 4 / 1 / 5 / 3; }
.grid-item9 { grid-area: 4 / 3 / 5 / 4; }
/* Life @ Suncity */
/* Careers */

/* Blogs Page */
.blog-content-body img {
    margin-bottom: 1rem;
    box-shadow: 0 .125rem .25rem rgb(0,0,0,.075)
}

.blog-content-body :is(h1,h2,h3,h4,h5,h6) {
    font-weight: 300;
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}

.blog-content-body h1 {
    font-size: 2.25rem
}

.blog-content-body h2 {
    font-size: 1.625rem
}

.blog-content-body h3 {
    font-size: 1.25rem
}

.blog-content-body h4 {
    font-size: 1.125rem
}

.blog-content-body h5,.blog-content-body h6 {
    font-size: 1rem
}

.blog-content-body :is(ul,ol) {
  padding-left: 1.5rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  list-style: auto;
}

.blog-content-body :is(ul,ol) li:not(:last-child) {
  margin-bottom: 8px
}

.blog-content-body :is(ul,ol) li::marker {
  color: var(--primary-color)
}

.blog-content-body img {
    margin: 1rem 0;
}

.inside-blogs-aside .inner {
  position: sticky;
  top: calc(var(--header-height) - 1rem);
}

.inside-blogs-aside .inner .blog-asideBox{
  padding: 1.5rem;
  background-color: var(--secondary-color);
}

.inside-blogs-aside .inner .blog-asideBox + .blog-asideBox{
  margin-top: 1.5rem;
}

.inside-blogs-aside .recentBlogs-box:not(:last-child) {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.inside-blogs-aside .recentBlogs-box a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  line-height: 1.2;
  font-size: 0.875rem;
}

.inside-blogs-aside .recentBlogs-box a:hover {
  text-decoration: 1px underline;
}

.inside-blogs-aside a .img-fluid {
    aspect-ratio: 3/2;
    max-width: 70px;
    flex: 0 0 70px;
    overflow: hidden;
}
/* Blogs Page */


/* NRI */
ul.accordion-list > li {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #FFF;
  padding: 20px;
  margin: 0 auto 15px auto;
  border: 1px solid #eee;
  cursor: pointer;
}
ul.accordion-list > li.active h3:after {
  transform: rotate(45deg);
}
ul.accordion-list li h5 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 0 1.75rem 0 0;
  margin: 0;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-weight: 300;
  color: var(--primary-color);
}
ul.accordion-list > li h5:after {
  content: "\f067";
  font-family: "fontawesome";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--primary-color);
  transition: all 0.3s ease-in-out;
  font-size: 0.875rem;
}
ul.accordion-list > li div.answer {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
ul.accordion-list > li div.answer p {
  position: relative;
  display: block;
  padding: 10px 0 0 0;
  cursor: pointer;
  margin-bottom: 0;
}
.accordion-list ul.list {
  padding-left: 1rem;
}
.accordion-list ul.list li {
  line-height: 1.5;
}
.accordion-list ul.list li::marker {
  color: var(--primary-color);
}
/* NRI */

/* Channel Partner */
.cp-img{
  background-image: linear-gradient(#fff 50%, var(--secondary-color) 50%);
}

.cpFormBox{
  padding: 3rem 2rem 0;
  transform: translateY(-15%);
  border-top: 4px solid var(--primary-color);
}
/* Channel Partner */

/* Testimonails Page */
.speakersBox > .row + .row{
  margin-top: 2rem;
}

.speaker-image{
  position: relative;
}

.speaker-image::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.speaker-image img{
  aspect-ratio: 4/3;
}

.speaker-box .inner{
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
/* Testimonails Page */

/* Construction Updates */
.logoBox .inner{
  background-color: #fff;
  border: 1px solid var(--secondary-color);
  height: 100%;
  aspect-ratio: 5/6;
  padding: 2rem;
  display: block;
  color: inherit;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 300ms ease-in-out;
}

.logoBox .inner:hover{
  background-color: #fff;
  color: var(--primary-color);
  box-shadow: 0 10px 2rem rgb(0 0 0 / 15%);
}

.logoBox .img-fluid{
  background-color: #fff;
}

.logoBox .img-fluid img{
  aspect-ratio: 3/2;
  height: 80px;
  object-fit: contain;
}

.logoBox .inner .facade-image{
  flex-grow: 1;
  overflow: hidden;
}
.logoBox .inner .d-flex{
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--secondary-color);
}
/* Construction Updates */