:root {
  --black-800: #111111;
  --gold-600: #dc6803;
  --orange-50: #fff6ed;
  --orange-700: #c4320a;
  --black-100: #bebebe;
  --black-400: #777777;
  --font-family-jost: 'Jost', sans-serif;
  --font-size-16: 16px;
  --font-size-60: 60px;
  --font-size-40: 40px;
  --font-size-14: 14px;
}



/*************PROECT FOCUS CSS****************/

.slide {margin-bottom:30px;}

.slide img {
  width: 370px; /* Set desired width */
  height: 200px; /* Set desired height */
  object-fit: cover; /* Cover the entire container, maintaining aspect ratio */
  object-position: center; /* Center the image */
  transition: transform 0.3s ease;
  border-radius: 10px;
}

.slide:hover img {
  transform: scale(1.1);
  /* Zoom effect on hover */
}

.view-btn {
  padding: 5px;
  border-radius: 8px;
  background-color: #dc6803;
  margin-top: -55px;
  margin-left: 170px;
  border: none;
  width: 85px;
  height: 28px;
  color: rgb(255, 255, 255);
}
.content {
  bottom: 10px;
  left: 10px;
  background-color: #f6f6f6;
  padding: 10px;
  color: white;
  transition: opacity 0.3s ease;
  opacity: 1;
  display: inline-flex;
  padding: 8px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 10px;
  margin-top: -70px;
  padding-bottom: 10px;
}

/* Custom Theme CSS for Home Page */
.group-icon,
.icon,
.sp-icon,
.vector-icon {
  position: absolute;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.sp-icon {
  height: 43.33%;
  width: 67.97%;
  top: 33.75%;
  right: 32.03%;
  bottom: 22.92%;
  left: 0;
}
.group-icon,
.icon,
.vector-icon {
  top: 0;
}
.icon {
  height: calc(100% - 1.9px);
  width: 51.96%;
  right: 0;
  bottom: 1.9px;
  left: 48.04%;
  z-index: 1;
}
.group-icon,
.vector-icon {
  height: 100%;
  width: 81.82%;
  right: 18.18%;
  bottom: 0;
  left: 0;
}
.vector-icon {
  height: 9.26%;
  width: 13.59%;
  top: 42.59%;
  right: -0.1%;
  bottom: 48.15%;
  left: 86.51%;
}
.tag {
  position: absolute;
  height: 7.5%;
  width: 67.64%;
  top: 92.5%;
  right: 31.69%;
  bottom: 0;
  left: 0.68%;
  z-index: 2;
}
.sp-parent {
  height: 72px;
  flex: 1;
  position: relative;
}
.logo {
  width: 148px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.new-launch {
  text-decoration: none;
  position: relative;
  color: inherit;
  display: inline-block;
  min-width: 81px;
  white-space: nowrap;
}
.new-launch-wrapper {
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
}
.property-type {
  text-decoration: none;
  position: relative;
  color: inherit;
  display: inline-block;
  min-width: 90px;
  white-space: nowrap;
}
.new-launch-instance {
  width: 12px;
  height: 7.4px;
  position: relative;
}
.links-icon,
.property-type-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs-8) 0 0;
}
.property-type-parent {
  border-radius: var(--br-7xs);
  flex-direction: row;
  padding: var(--padding-3xs);
  gap: var(--gap-3xs);
}
.cities {
  text-decoration: none;
  position: relative;
  color: inherit;
  display: inline-block;
  min-width: 38px;
}
.vector-icon1 {
  width: 12px;
  height: 7.4px;
  position: relative;
}
.cities-parent,
.vector-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs-8) 0 0;
}
.cities-parent {
  border-radius: var(--br-7xs);
  flex-direction: row;
  padding: var(--padding-3xs);
  gap: var(--gap-3xs);
}
.services {
  text-decoration: none;
  position: relative;
  color: inherit;
  display: inline-block;
  min-width: 57px;
}
.vector-icon2 {
  width: 12px;
  height: 7.4px;
  position: relative;
}
.services-parent,
.vector-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs-8) 0 0;
}
.services-parent {
  border-radius: var(--br-7xs);
  flex-direction: row;
  padding: var(--padding-3xs);
  gap: var(--gap-3xs);
}
.about {
  text-decoration: none;
  position: relative;
  color: inherit;
  display: inline-block;
  min-width: 41px;
}
.about-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
}
.contact-us {
  text-decoration: none;
  position: relative;
  color: inherit;
  display: inline-block;
  min-width: 71px;
  white-space: nowrap;
}
.contact-us-wrapper {
  position: absolute;
  top: 0;
  left: 93px;
  border-radius: var(--br-7xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  color: var(--white);
}
.instance-group {
  height: 43px;
  flex: 1;
  position: relative;
  color: var(--gold-600);
}
.instance-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-13xl);
}
.luxurious-modern-cliffside-hou {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  margin-top: -336px;
}
.space-properties {
  position: relative;
  letter-spacing: 0.03em;
  line-height: 20px;
  font-weight: 500;
  display: inline-block;
  min-width: 112px;
}
.frame-child {
  height: 1px;
  width: 33px;
  position: relative;
  border-top: 1px solid rgba(17, 17, 17, 0.5);
  box-sizing: border-box;
}
.space-properties-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.us {
  color: var(--gold-600);
}
.our-services {
  margin: 0;
  position: relative;
  font-size: var(--jost-font-display-md-semibold-size);
  line-height: 44px;
  font-weight: 600;
  font-family: inherit;
  color: var(--black-800);
}
.titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-9xs);
}
.space-properties-offering {
  align-self: stretch;
  position: relative;
}
.text {
  position: relative;
  font-size: var(--jost-font-text-sm-regular-size);
  letter-spacing: 0.03em;
  line-height: 20px;
  font-weight: 500;
  font-family: var(--jost-font-text-md-regular);
  color: var(--white);
  text-align: left;
  display: inline-block;
  min-width: 71px;
}
.button,
.button-base {
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
}
.button-base {
  flex: 1;
  box-shadow: var(--shadow-xs);
  background-color: var(--gold-600);
  border: 1px solid var(--gold-600);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: var(--padding-5xs) 14px;
  white-space: nowrap;
}
.button {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  width: 102px;
  align-items: flex-start;
  justify-content: flex-start;
}
.space-properties-offering-a-fr-parent {
  align-self: stretch;
  gap: var(--gap-5xl);
  font-size: var(--jost-font-text-md-regular-size);
}
.button-instance,
.button-instance-wrapper,
.space-properties-offering-a-fr-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.button-instance {
  align-self: stretch;
  gap: var(--gap-5xl);
}
.button-instance-wrapper {
  width: 548px;
  border-radius: 16px;
  background-color: var(--white);
  overflow: hidden;
  padding: var(--padding-13xl);
  box-sizing: border-box;
  opacity: 0.76;
  max-width: 100%;
  z-index: 1;
}
.div {
  position: relative;
  line-height: 44px;
  font-weight: 600;
  display: inline-block;
  min-width: 41px;
}
.frame-item {
  height: 1px;
  flex: 1;
  position: relative;
  border-top: 1px solid var(--black-100);
  box-sizing: border-box;
}
.parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 104px 0 0;
  gap: var(--gap-base);
}
.mission {
  color: var(--black-800);
}
.it-was-popularised,
.our-mission {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.02em;
}
.our-mission {
  font-size: var(--jost-font-text-xl-medium-size);
  line-height: 30px;
  font-weight: 500;
  color: var(--gold-600);
}
.it-was-popularised {
  font-size: var(--jost-font-text-md-regular-size);
  line-height: 24px;
  color: var(--black-600);
}
.titles-2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-5xl) 0 0;
  gap: var(--gap-9xs);
}
.div1 {
  position: relative;
  line-height: 44px;
  font-weight: 600;
  display: inline-block;
  min-width: 46px;
}
.frame-inner {
  height: 1px;
  flex: 1;
  position: relative;
  border-top: 1px solid var(--black-100);
  box-sizing: border-box;
}
.group {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 99px 0 0;
  gap: var(--gap-base);
}
.vision {
  color: var(--black-800);
}
.it-was-popularised1,
.our-vision {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.02em;
}
.our-vision {
  font-size: var(--jost-font-text-xl-medium-size);
  line-height: 30px;
  font-weight: 500;
  color: var(--gold-600);
}
.it-was-popularised1 {
  font-size: var(--jost-font-text-md-regular-size);
  line-height: 24px;
  color: var(--black-600);
}
.titles-21 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-5xl) 0 0;
  gap: var(--gap-9xs);
}
.div2,
.line-div {
  position: relative;
}
.div2 {
  line-height: 44px;
  font-weight: 600;
  display: inline-block;
  min-width: 45px;
}
.line-div {
  height: 1px;
  flex: 1;
  border-top: 1px solid var(--black-100);
  box-sizing: border-box;
}
.values {
  color: var(--black-800);
}
.core-values,
.it-was-popularised2 {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.02em;
}
.core-values {
  font-size: var(--jost-font-text-xl-medium-size);
  line-height: 30px;
  font-weight: 500;
  color: var(--gold-600);
}
.it-was-popularised2 {
  font-size: var(--jost-font-text-md-regular-size);
  line-height: 24px;
  color: var(--black-600);
}
.titles-22 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-5xl) 0 0;
  gap: var(--gap-9xs);
}
.footer-logo-instance,
.titles-2-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}
.titles-2-parent {
  width: 100%;
  overflow-x: auto;
  flex-shrink: 0;
  justify-content: flex-start; /* Content alignment within the container */
  gap: var(--gap-5xl);
  padding-bottom: 50px !important;
  padding-top: 40px;
  position: relative; /* Ensure the element is positioned relative to apply transform */
  transform: translateX(400px); /* Moves content 200px to the left */
}

.footer-logo-instance {
  align-self: stretch;
  justify-content: flex-end;
  font-size: var(--jost-font-display-md-semibold-size);
  color: var(--black-50);
}
.frame-group,
.frame-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.frame-group {
  flex: 1;
  flex-direction: column;
  gap: 56px;
}
.frame-wrapper {
  width: 1129.5px;
  flex-direction: row;
  padding: 0 var(--padding-5xl);
  box-sizing: border-box;
}
.group-icon1,
.icon1,
.sp-icon1,
.vector-icon3 {
  position: absolute;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.sp-icon1 {
  height: 43.33%;
  width: 67.96%;
  top: 33.83%;
  right: 32.04%;
  bottom: 22.84%;
  left: 0;
}
.group-icon1,
.icon1,
.vector-icon3 {
  top: 0;
}
.icon1 {
  height: calc(100% - 2.1px);
  width: 51.98%;
  right: 0;
  bottom: 2.1px;
  left: 48.02%;
  z-index: 1;
}
.group-icon1,
.vector-icon3 {
  height: 100%;
  width: 81.84%;
  right: 18.16%;
  bottom: 0;
  left: 0;
}
.vector-icon3 {
  height: 8.2%;
  width: 13.55%;
  top: 42.62%;
  right: 0;
  bottom: 49.18%;
  left: 86.45%;
}
.tag1 {
  position: absolute;
  height: 7.53%;
  width: 67.6%;
  top: 92.47%;
  right: 31.68%;
  bottom: 0;
  left: 0.72%;
  z-index: 2;
}
.sp-group {
  height: 81px;
  flex: 1;
  position: relative;
}
.logo1 {
  width: 167px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.it-was-popularised3 {
  width: 293px;
  position: relative;
  letter-spacing: 0.03em;
  line-height: 20px;
  display: inline-block;
}
.logo-parent {
  width: 437px;
  background-color: var(--gray-100);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-xl) 97px var(--padding-61xl);
  box-sizing: border-box;
  gap: var(--gap-13xl);
  min-width: 437px;
  max-width: 100%;
}
.home {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
  min-width: 44px;
}
.frame-child1 {
  width: 1px;
  height: 14px;
  position: relative;
  border-right: 1px solid var(--black-700);
  box-sizing: border-box;
}
.line-wrapper {
  height: 18.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs-5) 0 0;
  box-sizing: border-box;
}
.about-me {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
  min-width: 72px;
}
.frame-child2 {
  width: 1px;
  height: 14px;
  position: relative;
  border-right: 1px solid var(--black-700);
  box-sizing: border-box;
}
.line-container {
  height: 18.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs-5) 0 0;
  box-sizing: border-box;
}
.portfolio {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
  min-width: 63px;
}
.frame-child3 {
  width: 1px;
  height: 14px;
  position: relative;
  border-right: 1px solid var(--black-700);
  box-sizing: border-box;
}
.line-frame {
  height: 18.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs-5) 0 0;
  box-sizing: border-box;
}
.pricing {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
  min-width: 52px;
}
.frame-child4 {
  width: 1px;
  height: 14px;
  position: relative;
  border-right: 1px solid var(--black-700);
  box-sizing: border-box;
}
.line-wrapper1 {
  height: 18.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs-5) 0 0;
  box-sizing: border-box;
}
.faqs {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
  min-width: 43px;
}
.frame-child5 {
  width: 1px;
  height: 14px;
  position: relative;
  border-right: 1px solid var(--black-700);
  box-sizing: border-box;
}
.line-wrapper2 {
  height: 18.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs-5) 0 0;
  box-sizing: border-box;
}
.contact-me {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
  min-width: 84px;
}
.home-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.facebook-icon,
.instagram-icon,
.whatsapp-icon,
.youtube-icon {
  height: 40px;
  width: 40px;
  position: relative;
  min-height: 40px;
}
.social-media {
  flex-direction: row;
  gap: var(--gap-base);
}
.frame-div,
.frame-parent1,
.social-media,
.social-media-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.social-media-wrapper {
  flex-direction: row;
  padding: 0 1px;
}
.frame-div,
.frame-parent1 {
  max-width: 100%;
}
.frame-parent1 {
  flex: 1;
  flex-direction: column;
  gap: var(--gap-13xl);
}
.frame-div {
  width: 643px;
  flex-direction: row;
  padding: 0 var(--padding-4xl);
  box-sizing: border-box;
}
.frame-child6 {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid var(--black-700);
  box-sizing: border-box;
}
.space-properties1 {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
}
.frame-child7 {
  width: 1px;
  height: 14px;
  position: relative;
  border-right: 1px solid var(--black-700);
  box-sizing: border-box;
}
.line-wrapper3 {
  height: 18.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-7xs-5) 0 0;
  box-sizing: border-box;
}
.all-right-reserved {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 24px;
  display: inline-block;
  min-width: 123px;
}
.frame-wrapper1,
.space-properties-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.space-properties-group {
  gap: var(--gap-4xl);
}
.frame-wrapper1 {
  padding: 0 var(--padding-4xl);
  box-sizing: border-box;
}
.frame-container,
.line-parent {
  flex-direction: column;
  max-width: 100%;
}
.line-parent {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-4xl);
  color: var(--black-100);
}
.frame-container {
  flex: 1;
  background-color: var(--black-800);
  overflow: hidden;
  padding: var(--padding-13xl) 0 var(--padding-5xl);
  box-sizing: border-box;
  gap: 74px;
  min-width: 548px;
  text-align: left;
  font-size: var(--jost-font-text-md-regular-size);
  color: var(--black-25);
  font-family: var(--jost-font-text-md-regular);
}
.about-us,
.footer,
.frame-container,
.frame-parent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.footer {
  align-self: stretch;
  box-shadow: 0-4px 12px rgba(0, 0, 0, 0.16);
  flex-direction: row;
  row-gap: 20px;
  max-width: 100%;
}
.about-us,
.frame-parent {
  flex-direction: column;
}
.frame-parent {
  align-self: stretch;
  gap: var(--gap-13xl);
  max-width: 100%;
  margin-top: -336px;
  text-align: left;
  font-size: var(--jost-font-text-sm-regular-size);
  color: var(--black-600);
  font-family: var(--jost-font-text-md-regular);
}
.about-us {
  width: 100%;
  position: relative;
  background-color: var(--white);
  overflow: hidden;
  padding: 0 0 var(--padding-5xs);
  box-sizing: border-box;
  line-height: normal;
  letter-spacing: normal;
}
@media screen and (max-width: 1025px) {
  .frame-parent1,
  .logo-parent {
    flex: 1;
  }
  .footer {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 975px) {
  .instance-parent {
    display: none;
    gap: var(--gap-base);
  }
  .header-inner {
    width: 0;
  }
  .div,
  .div1,
  .div2,
  .our-services {
    font-size: var(--font-size-10xl);
    line-height: 35px;
  }
  .frame-container {
    gap: 37px;
  }
}
@media screen and (max-width: 725px) {
  .header {
    padding-left: var(--padding-21xl);
    padding-right: var(--padding-21xl);
    box-sizing: border-box;
  }
  .frame-group {
    gap: 28px;
  }
  .logo-parent {
    min-width: 100%;
  }
  .home-parent {
    flex-wrap: wrap;
  }
  .frame-parent1 {
    gap: var(--gap-base);
  }
  .frame-container {
    min-width: 100%;
  }
  .frame-parent {
    gap: var(--gap-base);
  }
}
@media screen and (max-width: 450px) {
  .header-wrapper {
    padding-bottom: 218px;
    box-sizing: border-box;
  }
  .div,
  .our-services {
    font-size: var(--font-size-3xl);
    line-height: 26px;
  }
  .parent {
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
  .our-mission {
    font-size: var(--jost-font-text-md-regular-size);
    line-height: 24px;
  }
  .div1 {
    font-size: var(--font-size-3xl);
    line-height: 26px;
  }
  .group {
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
  .our-vision {
    font-size: var(--jost-font-text-md-regular-size);
    line-height: 24px;
  }
  .div2 {
    font-size: var(--font-size-3xl);
    line-height: 26px;
  }
  .core-values {
    font-size: var(--jost-font-text-md-regular-size);
    line-height: 24px;
  }
  
  .space-properties-group {
    flex-wrap: wrap;
  }
  .frame-container {
    gap: 18px;
  }
}

.shuffling-component,
.shuffling-component-wrapper {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  max-width: 100%;
}
.shuffling-component {
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--padding-5xl);
  gap: var(--gap-xl);
}
.shuffling-component-wrapper {
  align-self: stretch;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 69px 0 var(--padding-49xl);
  text-align: center;
  font-size: var(--jost-font-text-xl-medium-size);
  color: var(--black-800);
}
.shuffling-component,
.shuffling-component-wrapper {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  max-width: 100%;
}
.shuffling-component {
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--padding-5xl);
  gap: var(--gap-xl);
}
.shuffling-component-wrapper {
  align-self: stretch;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 69px 0 var(--padding-49xl);
  text-align: center;
  font-size: var(--jost-font-text-xl-medium-size);
  color: var(--black-800);
}
.data-hub {
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.data-hub-parent {
  width: 500px;
  border-radius: var(--br-base);
  background-color: var(--color-whitesmoke-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
  gap: var(--gap-base);
  max-width: 100%;
}

.conditional-split1,
.frame-parent113,
.logic-gate {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-parent113 {
  align-self: stretch;
  flex-direction: column;
  gap: 37px;
  font-size: var(--font-size-5xl);
  color: var(--color-deepskyblue-100);
}
.conditional-split1,
.logic-gate {
  flex: 1;
}
.conditional-split1 {
  flex-direction: column;
  gap: var(--gap-13xl);
  max-width: 100%;
}

/* CUSTOM CSS HOME PAGE */

/* General Styles */
.home_main_search .search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.home_main_search .search-box {
  position: relative;
  width: 700px; /* Fixed width */
}

.home_main_search .home_main_search {
  position: relative; /* Position relative to contain the absolutely positioned child */
  width: 100%; /* Full width of the parent */
  padding: 0 15px; /* Adjust padding as needed */
}

.home_main_search .search-section__content {
  position: absolute; 
  width: 50%; 
  border-radius: 15px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  background: rgba(255, 255, 255, 1); 
  padding: 20px 0px; 
  bottom: -100px; 
  left: 25%; 
  z-index: 1;
}

.home_main_search .search-section__content {
  text-align: center;
}

.home_main_search .search-section__title {
  color: var(--black-800);
  font-size: var(--font-size-40);
  font-weight: 600;
  line-height: 1.2; /* Adjust line height */
  margin-bottom: 20px;
}

.home_main_search .search-section__title .highlight {
  color: var(--gold-600);
}

.home_main_search .search-section__subtitle {
  color: var(--black-800);
  font-size: var(--font-size-16);
  font-weight: 500;
  line-height: 1.4; /* Adjust line height */
}

.home_main_search .tags {
  display: flex; /* Flexbox container */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between each tag link */
  margin-top: -5px; /* Space above the tags container */
  flex-wrap: wrap; /* Allow wrapping if needed */
}

/* Tag links text and icon */
.home_main_search .tag_links a {
  color: #bd4422; /* Text color */
  background: #fff6ed; /* Background color for the tags */
  text-decoration: none; /* Remove underline from links */
  display: flex; /* Flex container for text and icon */
  align-items: center; /* Center the icon with the text vertically */
  font-size: 10pt !important; /* Font size */
  transition: color 0.3s ease; /* Smooth color transition */
  border-radius: 40px; /* Rounded corners for each tag */
  padding: 3px 15px; /* Padding inside each tag */
  transition: background 0.3s ease, transform 0.3s ease; /* Smooth background and transform transitions */
}

/* Text color change on hover */
.home_main_search .tag_links:hover a {
  color: #a53e2f; /* New text color on hover */
  background: #f9d8c1; /* New background color on hover */
  transform: scale(1.05); /* Slightly scale up the tag */
}

.home_main_search .tag_links img {
  margin-left: 5px; /* Space between text and icon */
}

/* property_categories */
.home_main_search .property_categories {
  display: flex; /* Flexbox container */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  gap: 10px; /* Space between each tag link */
  margin-top: 0px; /* Space above the tags container */
  flex-wrap: wrap; /* Allow wrapping if needed */
}

/* Tag links text and icon */
.home_main_search .property_categories a {
  color: #bd4422; /* Text color */
  background: #fff6ed; /* Background color for the tags */
  text-decoration: none; /* Remove underline from links */
  display: flex; /* Flex container for text and icon */
  align-items: center; /* Center the icon with the text vertically */
  font-size: 10pt !important; /* Font size */
  transition: color 0.3s ease; /* Smooth color transition */
  border-radius: 80px; /* Rounded corners for each tag */
  padding: 10px 14px 10px 10px; /* Padding inside each tag */
  transition: background 0.3s ease, transform 0.3s ease; /* Smooth background and transform transitions */
}

/* Text color change on hover */
.home_main_search .property_categories:hover a {
  color: #a53e2f; /* New text color on hover */
  background: #f9d8c1; /* New background color on hover */
  transform: scale(1.04); /* Slightly scale up the tag */
}

.home_main_search .property_categories img {
  margin-left: 5px; /* Space between text and icon */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .home_main_search .search-section__content {
      width: 90%; /* Increase width on smaller screens */
      left: 5%; /* Adjust horizontal positioning */
      bottom: -20px; /* Reduce overlap */
  }

  .home_main_search .search-box {
      width: 100%;
      max-width: none; /* Remove max-width constraint */
  }

  .home_main_search .search-icon {
      right: 15px; /* Adjust icon placement */
  }

  .home_main_search .dropdown {
      width: auto; /* Adjust dropdown width */
      padding-left: 5px; /* Reduce padding */
      padding-right: 10px; /* Reduce padding */
  }

  .home_main_search .tags {
      flex-wrap: wrap; /* Allow tags to wrap to the next line */
      gap: 5px; /* Reduce gap between tags */
      justify-content: center; /* Center align tags */
  }

  .home_main_search .tag_links {
      padding: 8px 12px; /* Reduce padding inside tags */
  }

  .home_main_search .search-input {
      padding: 10px 40px 10px 10px; /* Adjust padding for input box */
  }

  .home_main_search .search-section__subtitle {
      font-size: 14px; /* Reduce font size for smaller screens */
      line-height: 1.3; /* Adjust line height */
  }

  .home_main_search .search-section__title {
      font-size: 29px; /* Reduce font size for smaller screens */
      line-height: 1.4; /* Adjust line height */
  }
}

/* Mobile Styles for Full-Width Search */
@media (max-width: 480px) {
  .home_main_search {
    background-color: #8B4513; /* Brown background color */
    padding: 10px 10px 50px 10px !important; /* Add padding */
    margin-top:0px !important;
  }

  .home_main_search .search-section__content {
    position: relative !important; /* Absolutely positioned relative to .home_main_search */
    width: 90%; /* 50% width of the parent */
    border-radius: 10px; /* 25px border radius */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0); /* Light shadow effect */
    padding: 10px; /* Adjust padding as needed */
    z-index: 1; /* Ensure it appears above other content */
  }

  /* Adjust the search container to full width */
  .home_main_search .search-box {
    width: 100%; /* Full width */
    max-width: none;
  }

  /* Make the search input box full width */
  .home_main_search .search-input {
    width: 100%;
    padding: 10px; /* Padding for the input box */
  }

  /* Move the dropdown below the search input */
  .home_main_search .dropdown {
    position: relative; /* Change position to relative */
    width: 100%; /* Full width for the dropdown */
    height: auto; /* Adjust the height */
    margin-top: 10px; /* Add some spacing above */
    padding-left: 0; /* Remove extra padding */
    padding-right: 0; /* Remove extra padding */
    border-radius: 0px 0px 10px 10px; /* Add rounded corners to match */
  }

  /* Make sure the select is also full width */
  .home_main_search .dropdown select {
    width: 100%; /* Full width select */
    height: 40px; /* Adjust the height */
    padding: 5px 10px; /* Add padding */
    background-color: #344054; /* Maintain background color */
  }

  /* Place the search icon below the dropdown */
  .home_main_search .search-icon {
    position: relative; /* Position relative */
    width: 100%; /* Full width button */
    text-align: center; /* Center the icon */
    margin-top: 10px; /* Add space above the button */
    padding: 10px;
    background-color: #555; /* Darker background for the button */
    border-radius: 10px; /* Rounded corners */
  }

  .home_main_search .search-icon img {
    width: 20px;
    height: 20px;
  }
}
/* End Search */

.heading_separator {
  position: relative;
  display: inline-block; /* Ensure the pseudo-element aligns to the text */
  padding-right: 50px; /* Add more space on the right for the line */
}

.heading_separator::after {
  content: '';
  display: block;
  width: 30px; /* Set width to 30px */
  height: 1px; /* Thickness of the line */
  background-color: black; /* Change color as needed */
  position: absolute;
  right: 10px; /* Gap on the left side of the line (distance from the text) */
  bottom: 50%; /* Move the line slightly upwards */
  transform: translateY(50%); /* Center the line vertically relative to its height */
}

/* SCROLLING IMAGES CSS */
.featured_projects {
  padding: 30px;
  margin-bottom: 50px;
  background: #f9f9f9;
}

/* Heading styles */
.featured_items {
  text-align: center;
  margin-bottom: 20px;
}

.heading_separator {
  font-weight: 500;
  font-size: 14px;
  line-height: 143%;
}

.featured-text span {
  color: rgba(220, 104, 3, 1);
}

/* Featured items styles */
.featured_items {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Scrolling images styles */
.featured_items-wrapper {
  display: flex;
  gap: 20px; /* Gap between items */
  animation: scroll 6s linear infinite; /* Adjust duration for speed */
}

.featured_item {
  min-width: 300px; /* Adjust width to fit 3 items */
  flex: 0 0 auto; /* Prevent flex items from shrinking */
  transition: transform 0.5s ease;
}

.featured_item img {
  width: 100%;
  border-radius: 30px; /* Border radius for rounded corners */
  display: block;
}

.item-title {
  margin: 10px 0;
  font-size: 18px;
  color: #333;
  text-align: center;
}

/* Link styles */
.featured_item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Pause scrolling on hover */
.featured_items:hover .featured_items-wrapper {
  animation-play-state: paused; /* Pause scrolling on hover */
}

/* Horizontal scroll animation */
@keyframes scroll {
  0% {
      transform: translateX(0%);
  }
  100% {
      transform: translateX(-50%);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .featured_item {
      min-width: 100%; /* Adjust width for smaller screens */
  }
}

/* Services */
.services {
  margin: 50px auto;
  padding: 20px;
  text-align: center;
}

.header .highlight {
  color: #ff7f50;
}

.service-cards {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.card {
  background-color: #f0f0f0;
  border-radius: 15px;
  padding: 30px;
  margin: 0 0px 10px 0px;
  text-align: center;
  border:0px solid #fff;
}

.card img {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  background: #c1d2ce;
  border-radius:100px; 
  padding:10px;
}

.card p {
  text-align: left !important;
}


.algo-component,
.matrix-cell,
.titles-22 {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.titles-22 {
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-5xl);
  min-width: 268px;
}
.algo-component,
.matrix-cell {
  align-self: stretch;
  align-items: flex-start;
}
.algo-component {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-5xl);
}
.matrix-cell {
  background-color: var(--black-800);
  overflow: hidden;
  flex-direction: column;
  padding: var(--padding-69xl) var(--padding-61xl);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--jost-font-display-md-semibold-size);
  color: var(--black-50);
  font-family: var(--jost-font-text-md-regular);
}

.matrix-cell {
  padding-left: var(--padding-21xl);
  padding-right: var(--padding-21xl);
  box-sizing: border-box;
}
.queue-element,
.titles-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.queue-element {
  align-self: stretch;
  gap: var(--gap-9xs);
}
.titles-2 {
  flex: 1;
  gap: var(--gap-5xl);
  min-width: 268px;
  max-width: 100%;
}
.our-projects-icons {
  width: 72px;
  height: 72px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}


/* Ensure that the column has the full height of the row for vertical centering */
.iconbox-home9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* Make sure images are centered */
.our-projects-icons {
  max-width: 100%; /* Ensure the image does not overflow */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 20px; /* Space between image and text */
}

/* Adjustments for text styling */
.iconbox-title {
  margin: 0; /* Remove default margins */
}

/* Ensure responsive design */
@media (max-width: 767px) {
  .iconbox-home9 {
      padding: 15px; /* Add padding for better spacing on small screens */
  }
}


/* Home Page Custom CSS */

.featured-title .featured-text{font-size:20pt !important;}        

        /* Features Section */
        .features-section {
            display: flex;
            justify-content: space-between;
            padding: 50px;
            margin: auto;
            gap: 20px;
            flex-wrap: wrap;
        }
        .feature {
            flex: 1;
            min-width: 220px;
            margin: 20px 10px;
            text-align: left;
        }
        .number {
            font-size: 36px;
            color: #E0E0E0;
            font-weight: bold;
            margin-bottom: 30px;
            position: relative;
        }
        .number::after {
            content: "";
            display: block;
            width: 70px;
            height: 1px;
            background-color: #E0E0E0;
            margin: -10px 0px 0px 70px;
        }
        .feature-content h3 {
            font-size: 20px;
            color: #FF8C00;
            margin: 15px 0 10px;
        }
        .feature-content p {
            font-size: 16px;
            color: #B0B0B0;
            line-height: 1.5;
        }

        /* Responsive Design */
        @media screen and (max-width: 768px) {
            .features-section {
                flex-direction: column;
                align-items: center;
            }

            .feature {
                max-width: 400px;
            }
        }

        /* Top Cities Icons */
        .top-cities {
            width: 100%;
            padding-top: 100%; /* This creates a square aspect ratio */
            position: relative;            
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s;
        }

        .top-cities img {
            max-width: 90%;
            max-height: 90%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #edf0f2;
            border-radius: 50%;
            padding:20px;
        }
        .top-cities:hover {
            transform: scale(1.1);
            
        }
        .top-cities a h6 { margin-top:30px; clear: both; }
        .top-cities a h6:hover { color: #FF8C00; }

        /* Responsive Design */
        @media screen and (max-width: 768px) {
            .col {
                flex: 0 0 33.3333%; /* 3 columns on tablet */
                max-width: 33.3333%;
            }
        }
        @media screen and (max-width: 576px) {
            .col {
                flex: 0 0 50%; /* 2 columns on mobile */
                max-width: 50%;
            }
        }

        /* Builder Logos */
        .builder-logos {
            width: 100%;
            padding-top: 95%; /* This creates a square aspect ratio */
            position: relative;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #181e29;
            transition: transform 0.3s;
        }

        .builder-logos img {
            max-width: 70%;
            max-height: 70%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding:8px;
        }

        .builder-logos:hover {
            transform: scale(0.9);
        }


        /* Spotlight Section Styling */
        .spotlight-section {
            background-color: #fff;
        }

        .section-title {
            font-size: 2em;
            color: #000;
            font-weight: bold;
        }

        .highlight {
            color: #dc6803;
        }

        /* Property Card Styling */
        .spotlight-section {
            padding: 50px 0;
        }

        /* Carousel Container */
        .spotlight-carousel {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        /* Spotlight Container (Carousel Items) */
        .spotlight-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            overflow: hidden;
            transition: transform 0.5s ease; /* Smooth transition for sliding */
        }

        /* Spotlight Card */
        .spotlight-card {
            position: relative;
            width: 19%;
            height: 300px;
            transition: width 0.5s ease;
            overflow: hidden;
            cursor: pointer;
        }

        /* Spotlight Card Image */
        .spotlight-card img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 150%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        /* Overlay for non-active cards */
        .spotlight-card:not(.expanded) .spotlight-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6); /* Dark overlay */
            transition: background 0.5s ease;
        }

        /* Expanded image has no overlay */
        .spotlight-card.expanded .spotlight-overlay {
            background: transparent;
        }

        /* Initial Info before hover */
        .spotlight-info.initial-info {
            position: absolute;
            top: 10px;
            left: 20px;
            color: white;
        }

        .initial-info h3, .initial-info p, .initial-info span {
            color: white;
            font-size: 14px;
            margin: 5px 0;
        }

        /* View Details button before expand (Center aligned) */
        .initial-view-details {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #ff6600;
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .initial-view-details:hover {
            background-color: #ff4500;
        }

        /* Hover info is hidden initially */
        .hover-info {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            width: calc(100% - 40px);
            padding: 10px;
            color: black;
            background-color: #f2f2f2;
            box-sizing: border-box;
        }

        /* View Details button after expand */
        .hover-view-details {
            display: none; /* Initially hidden */
            position: absolute;
            bottom: 20px;
            right: 20px; /* Positioned to the right corner */
            background-color: #ff6600;
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hover-view-details:hover {
            background-color: #ff4500;
        }

        /* Hide initial info on hover */
        .spotlight-card:hover .initial-info, .spotlight-card.expanded .initial-info {
            display: none;
        }

        /* Show hover info and button */
        .spotlight-card:hover .hover-info, .spotlight-card.expanded .hover-info {
            display: block;
            bottom: 0;
        }

        /* Expanded state */
        .spotlight-card.expanded {
            width: 40%;
        }

        /* Hover state expands the image */
        .spotlight-card:hover {
            width: 40%;
        }

        /* Remove overlay when expanded or on hover */
        .spotlight-card:hover .spotlight-overlay {
            background: transparent;
        }

        /* Align hover info at the bottom */
        .spotlight-card:hover .hover-info, .spotlight-card.expanded .hover-info {
            display: block;
            background-color: #f2f2f2;
            padding: 10px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        /* Button at the right corner after expand */
        .spotlight-card:hover .hover-view-details, .spotlight-card.expanded .hover-view-details {
            display: block; /* Shown only on hover or when expanded */
            bottom: 20px;
            right: 20px;
        }

        /* Hide the initial "View Details" button when expanded or on hover */
        .spotlight-card:hover .initial-view-details, .spotlight-card.expanded .initial-view-details {
            display: none;
        }

        /* Carousel Controls Styling */
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            cursor: pointer;
            z-index: 1;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }

        .carousel-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .left-btn {
            left: 0;
        }

        .right-btn {
            right: 0;
        }

        /* Prevent arrows from being clicked rapidly */
        .carousel-btn:disabled {
            opacity: 0.5;
            pointer-events: none;
        }