@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --primary-color: #292763;
  --secondary-color: #f06027;
  --secondary-light-color: #f9f6f3;
  --body-color: #27262e;
  --gray: #f5f5f5;
  --facebook: #4267B2;
  --twitter: #00acee;
  --linkedin: #0e76a8;
  --youtube: #FF0000;
  --whatsapp: #25D366;
  --instagram: #c92bb7;
  --serif: "Source Serif 4", serif;
}

html {
  font-size: 80%;
  scroll-behavior: smooth;
}

body {
  color: var(--body-color);
  font: 400 1rem "Maven Pro", sans-serif;
  overflow-x: hidden;
}

p {
  line-height: 1.5;
  font-size: 1.25rem;
}

p>a {
  color: inherit;
}

.padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

ul {
  padding-left: 0;
  margin-bottom: 0;
}

a,
a:hover {
  text-decoration: none;
}

img,
video,
iframe,
svg {
  width: 100%;
  height: 100%;
  display: block;
}

svg:not([fill]) {
  fill: currentColor;
}

.gap-row {
  row-gap: 30px;
}

.gap-form-row {
  row-gap: 10px;
}

.object-cover {
  object-fit: cover;
}

.container-fluid {
  padding-left: 2rem;
  padding-right: 2rem;
}

.filter-white {
  -webkit--filter: brightness(70);
  filter: brightness(70);
}

.filter-dark {
  -webkit--filter: grayscale(1) brightness(0.5);
  filter: grayscale(1) brightness(0.5);
}

.icon-circular {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255 255 255 / 35%);
  color: #fff;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
}

.icon-circular.light {
  border-color: rgb(255 255 255 / 30%);
  color: #fff;
}

.icon-circular.bg-white {
  border-color: transparent;
  color: var(--secondary-color);
}

.icon-circular:hover {
  border-color: transparent;
  color: #fff;
  background-color: var(--secondary-color) !important;
}

i svg {
  width: 16px;
}

/*header*/
.header {
  width: 100%;
  position: absolute;
  top: 0;
  padding: 1rem 0;
  z-index: 999;
  transition: all 300ms ease-in-out;
}

.header.fixed,
.header.notfixed {
  background-color: #000;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  padding: 5px 0;
}

.logo {
  position: relative;
  min-height: 1px;
  transition: all 300ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 150px;
  transition: all 300ms ease-in-out;
}

.fixed-header-strip .header .logo img,
.header.notfixed .logo img,
.header.fixed .logo img {
  width: 120px;
}

/* .header.fixed .logo {
  width: 52px;
  justify-content: flex-start;
  overflow: hidden;
}

.header.fixed .logo img{
  object-fit: cover;
  object-position: left center;
} */

.navigation {
  display: flex;
  align-items: center;
}

.navigation .main-menu {
  display: flex;
  align-items: center;
}

.navigation .main-menu a {
  color: #fff;
  font-size: 1.375rem;
  font-weight: 500;
  display: block;
  padding: 10px 24px;
  text-transform: uppercase;
}

.header-icons ul li {
  margin-left: 1.5rem;
}

.header-icons .icon-circular:not(.bg-white) {
  border-color: var(--secondary-color);
}

/* .fixed-header-strip .header .header-icons .icon-circular,
.header.fixed .header-icons .icon-circular,
.header.notfixed .header-icons .icon-circular{
  color: var(--secondary-color);
}

.fixed-header-strip .header .header-icons .icon-circular,
.header.fixed .header-icons .icon-circular,
.header.notfixed .header-icons .icon-circular{
  color: var(--body-color);
  border-color: var(--secondary-color);
}
.fixed-header-strip .header .header-icons .icon-circular:hover,
.header.fixed .header-icons .icon-circular:hover,
.header.notfixed .header-icons .icon-circular:hover{
  color: #fff;
  border-color: transparent;
} */

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

.fixed-header-strip .header .menuBtn,
.header.fixed .menuBtn, .header.notfixed .menuBtn {
  width: 40px;
  height: 40px;
}

.menuBtn .bar {
  width: 100%;
  height: 18px;
  position: relative;
  border-top: 1px solid #fff;
  transition: all 300ms ease-in-out;
}

.menuBtn .bar::before,
.menuBtn .bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  transform-origin: center center;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.menuBtn .bar::before{
  top: calc(50% - 1px);
}
.menuBtn .bar::after {
  bottom: -1px;
} */

/* .fixed-header-strip .header .menuBtn .bar,
.header.fixed .menuBtn .bar,
.header.notfixed .menuBtn .bar{
  border-top-color: var(--primary-color);
}

.fixed-header-strip .header .menuBtn .bar::before,
.fixed-header-strip .header .menuBtn .bar::after,
.header.fixed .menuBtn .bar::before,
.header.fixed .menuBtn .bar::after,
.header.notfixed .menuBtn .bar::before,
.header.notfixed .menuBtn .bar::after {
  background: var(--primary-color);
}

.menuBtn.closeMenuBtn .bar{
  border-top: 0;
}

.menuBtn.closeMenuBtn .bar::before {
  -webkit-transform: rotate(45deg) translate(3px, 2px);
  transform: rotate(45deg) translate(3px, 2px);
}

.menuBtn.closeMenuBtn .bar::after {
  -webkit-transform: rotate(-45deg) translate(4px, -4px);
  transform: rotate(-45deg) translate(4px, -4px);
} */

.menuBtn.closeMenuBtn i.fa-bars::before {
  content: '\f00d';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

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

.mbMenuContainer .mbMenu {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 500ms ease-in-out 200ms;
  background-color: rgb(0 0 0 / 75%);
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 500px;
  padding: calc(3rem + 73px) 2rem 2rem;
  margin: 0 0 0 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
}


.mbMenuContainer.active .mbMenu {
  transform: translateX(0%);
  opacity: 1;
  visibility: visible;
  transition-delay: 0ms;
}

.mbMenuContainer .mbMenu ul {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.mbMenuContainer .mbMenu ul li {
  transition: all 300ms ease-in-out;
  border-bottom: 1px solid rgb(255 255 255 / 15%);

  display: flex;
  width: 100%;
}


@media only screen and (max-width: 576px) {
  .mbMenuContainer .mbMenu ul {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    /* align-items: flex-start; */
  }

  .mbMenuContainer .mbMenu ul li {
    transition: all 300ms ease-in-out;
    border-bottom: 1px solid rgb(255 255 255 / 15%);

    display: flex;
    justify-content: center;
  }

}



.mbMenuContainer .mbMenu .header-bottom ul li {
  border-bottom: 0;
}

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

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

.mbMenuContainer .mbMenu ul li a {
  font-size: 1.5rem;
  font-weight: 400;
  padding: 10px 0;
  display: block;
  color: #fff;
  transition: all 300ms ease-in-out;
}

.mbMenuContainer .mbMenu ul li:hover>a,
.mbMenuContainer .mbMenu ul li a:focus {
  color: var(--secondary-color);
}

/*header*/

/* header-bottom-phone */
.mbMenuContainer .mbMenu .header-bottom-phone li {
  transition: all 300ms ease-in-out;
  border-bottom: 1px solid rgb(255 255 255 / 15%);

  display: flex;
  width: fit-content;
}



.fab-container {
  bottom: 3rem;
  position: absolute;
  right: 3rem;
  transform-origin: 0 0;
  z-index: 3;
}

.fab-container .shadow {
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, .12), 0 6px 6px rgba(0, 0, 0, .24), 0 0 12px rgba(0, 0, 0, .12), 0 12px 12px rgba(0, 0, 0, .238);
  content: "";
  height: 56px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
}

.fab-container .fab {
  cursor: pointer;
  height: 78px;
  position: relative;
  transform-origin: center center;
  width: 78px;
  transition: all 300ms ease-in-out;
}

.fab-container:hover .fab {
  transform: rotate(225deg);
}

.fab-container .icon-list {
  background: rgba(0, 0, 0, .35);
  border-radius: 4px;
  bottom: 80px;
  color: #fff;
  display: none;
  padding-bottom: 8px;
  padding-top: 8px;
  position: absolute;
  right: 8px;
  text-shadow: 0 0 6px #000;
  width: -moz-max-content;
  width: max-content;
}

.fab-container:hover .icon-list {
  display: flex;
}

.fab-container .icon-list a {
  padding: 12px 1.5rem;
  color: inherit;
}

.fab-container .icon-list a span {
  font-size: 1.375rem;
  font-weight: 500;
}

.fab-container .icon-list a span+div {
  height: 20px;
  width: 20px;
  flex: 0 0 20px;
}

.fab-container .icon-list a span+svg {
  fill: #fff;
}

.banner {
  /* height: 100vh; */
  position: relative;
  background-color: #000;
  z-index: 1;
}

.banner .carousel-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(0 0 0 / 20%);
  background: linear-gradient(rgb(0 0 0 / 70%), transparent 15%);
  z-index: 1;
}

.homeVideo {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.bannerText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 9;
}

.bannerText .inner {
  max-width: 600px;
}

.bannerText .h1 {
  font-size: 5.25rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding: 1px 0;
}

.bannerText h5 {
  font-weight: 400;
}

.bannerText .readmore {
  margin-top: 5rem;
}

.scrollDown {
  position: absolute;
  bottom: 30px;
  cursor: pointer;
  padding: 10px;
  width: 30px;
  z-index: 10;
  left: 50%;
  -webkit-animation: bounce 2s ease-in-out infinite alternate;
  animation: bounce 2s ease-in-out infinite alternate;
}

@keyframes bounce {
  0% {
    transform: translate(-50%, -10px);
  }

  100% {
    transform: translate(-50%, 10px);
  }
}

.carousel-control-next,
.carousel-control-prev {
  width: 70px;
  height: 70px;
  top: 50%;
  margin-top: -35px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 50%);
  transition: all 300ms ease-in-out;
  opacity: 1;
}

.carousel-control-next:hover,
.carousel-control-prev:hover {
  background-color: var(--secondary-color);
  border-color: transparent;
}

.carousel-control-prev {
  left: 1rem;
}

.carousel-control-next {
  right: 1rem;
}

/* values */
.values-we-preserve-section {
  background: linear-gradient(0deg, #fdfaef, #fdfcfb);
}

.valueBox figure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.valueBox figure::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent, rgb(0 0 0 / 75%));
  z-index: 1;
  pointer-events: none;
}

.valueBox figure figcaption {
  position: absolute;
  inset: auto 1rem 1rem;
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 20px rgb(0 0 0 / 100%);
  z-index: 1;
}

.valueBox figure figcaption b {
  text-transform: uppercase;
  font-size: 1.375rem;
}

/* ----3d box---- */
.cube-container {
  height: 350px;
  text-align: center;
}

.cube-container p {
  font-size: 1rem;
}

.photo-cube {
  width: 100%;
  height: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.photo-desc {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  opacity: 0;
  color: #fff;
  padding: 2rem 10px 2rem 2rem;
  background: var(--body-color);
  transition: all 500ms ease-in-out;
}

.cube-container:hover .photo-desc {
  opacity: 1;
  top: 0;
}

.photo-desc .scroller {
  height: calc(100% - (2rem * 2) + 19px);
  padding-right: 1.25rem;
}

.photo-desc h4 {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ----3d box---- */
/* values */

/* overview */
.statsWrapper .inside {
  height: 100%;
  padding: 2rem;
  background-color: #fff;
}

.statBox:not(:last-of-type) {
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  margin-bottom: 2rem;
  padding-bottom: 2rem;
}

.statBox .inner {
  text-align: center;
}

.statBox .inner .h4 {
  margin-bottom: 0;
}

.statBox .inner .counter {
  font-weight: 700;
}

.statBox .inner p {
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 13px;
}

/* overview */

/* featured projects */
.swiper-slide.featured-slide {
  width: 100%;
  height: 90vh;
}

.swiper-slide.featured-slide>img {
  position: absolute;
  height: 100%;
  inset: 0;
  object-fit: cover;
  z-index: -1;
}

.hm-projectBox {
  color: #fff;
  height: 100%;
  position: relative;
  z-index: 1;
}

.hm-projectBox::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background-color: rgb(0 0 0 / 80%); */
  /* background-image: radial-gradient(circle at 80% 0%, transparent, rgb(0 0 0 / 100%)); */
  z-index: -1;
}

.hm-projectBox section {
  position: absolute;
  height: 100%;
  left: 0;
  bottom: 3rem;
  width: 100%;
  max-width: calc(50% + 58px + 6rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hm-projectBox .featured-text {
  max-width: 500px;
  width: 100%;
  padding: 2rem;
  background-color: rgb(0 0 0 / 35%);
}

.hm-projectBox section .hm-projectLogo {
  width: 140px;
}

.hm-projectBox .featured-text address {
  gap: 1.5rem;
}

.hm-projectBox .featured-text .address-single {
  font-size: 1.25rem;
}

.hm-projectBox section .readmore .button {
  background-color: rgb(255 255 255 / 75%);
}

.hm-projectBox section .readmore .button:hover {
  background-color: var(--body-color);
}

/* featured projects */

/* awards */
.award-slide.swiper-slide {
  height: auto;
  padding-bottom: 1rem;
}

.award-slide .inner {
  background-color: #fff;
  border-radius: 2.5rem 2.5rem 0 2.5rem;
  box-shadow: 2px 4px 15px rgba(0, 0, 0, .06);
  height: 100%;
  padding: 2rem;
}

.award-slide .inner .img-fluid {
  width: 60px;
  height: 60px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  padding: 14px;
  background-color: var(--secondary-color);
}

.award-slide .inner .img-fluid img {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.award-slide .inner p {
  margin-bottom: .5rem;
  font-size: 1.25rem;
}

.award-slide .inner h5 {
  text-transform: uppercase;
  font-weight: 700;
}

/* awards */

/* hm projects */
.project-slide.swiper-slide {
  height: auto;
  width: 38%;
  transform: scale(.75, .75);
  transition: all .3s linear;
}

.project-slide.swiper-slide-active {
  transform: scale(1, 1);
}

.project-slide .inner {
  height: 100%;
  display: block;
  position: relative;
  color: var(--body-color);
  overflow: hidden;
  background-color: #fff;
}

.project-slide .inner .img-fluid {
  background-color: #000;
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

.project-slide .inner .img-fluid img {
  opacity: 0.75;
}

.project-slide .project-details-box {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* hm projects */


/* Team wrapper */
.our-team {
  height: 100%;
  padding: 2rem 0 3rem;
  background-color: #fff;
  border-bottom: 2px solid var(--secondary-color);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.our-team .picture {
  display: inline-block;
  height: 130px;
  width: 130px;
  margin-bottom: 2rem;
  z-index: 1;
  position: relative;
}

.our-team .picture::before {
  content: "";
  width: 100%;
  height: 0;
  border-radius: 50%;
  background-color: var(--secondary-color);
  position: absolute;
  bottom: 135%;
  right: 0;
  left: 0;
  opacity: 0.9;
  transform: scale(3);
  transition: all 0.3s linear 0s;
}

.our-team:hover .picture::before {
  height: 100%;
}

.our-team .picture::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--secondary-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.our-team .picture img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.9s ease 0s;
}

.our-team:hover .picture img {
  box-shadow: 0 0 0 14px #f7f5ec;
  transform: scale(0.7);
}

.our-team .title {
  display: block;
  text-transform: capitalize;
}

.our-team .name {
  font-weight: 400;
}

.our-team .knowmore {
  width: 100%;
  padding: 8px;
  margin: 0;
  color: #fff;
  background-color: var(--secondary-color);
  position: absolute;
  bottom: -100px;
  left: 0;
  transition: all 0.5s ease 0s;
}

.our-team:hover .knowmore {
  bottom: 0;
}

.our-team .knowmore:hover {
  background-color: var(--body-color);
}

/* team card */
.teamBtns a {
  gap: 1rem;
  color: var(--body-color);
  font-weight: 700;
}

.teamBtns a:hover {
  background-color: rgb(11 158 231 / 8%);
  color: var(--primary-color);
}

/* Team wrapper */

/* news */
.newsBox .inner {
  color: inherit;
  display: block;
}

.newsBox .img-fluid {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.newsBox .img-fluid .badge {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 8px 10px;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 0;
  font-weight: 500;
  text-transform: uppercase;
  z-index: 1;
}

.newsBox .img-fluid img {
  transition: all 1s linear;
}

.newsBox .inner:hover .img-fluid img {
  transform: scale(1.125, 1.125);
}

.newsBox .inner article h5 {
  font-size: 18px;
}

.newsBox .inner article h5:hover {
  text-decoration: underline;
}

.date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
  line-height: 1;
}

.date small:first-child {
  padding-right: 10px;
  border-right: 1px solid var(--primary-color);
}

/* news */

/* testimonials */
.testimBox {
  height: auto;
}

.testimBox .inner {
  height: 100%;
  padding: 3rem;
  /* border: 1px solid rgb(0 0 0 / 16%); */
  background-color: #fff;
}

.quotation-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--body-color);
  font-size: 3rem;
  line-height: 0;
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  padding: 1rem 0 0;
  border-radius: 50%;
  background-color: var(--gray);
}

.testim-name {
  display: block;
  margin-top: 1.25rem;
  color: var(--secondary-color);
}

/* testimonials */

/* pre-footer */
.iconBox .inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: 1.25rem;
}

.iconBox .ikon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  backdrop-filter: blur(3px) brightness(2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconBox .ikon img,
.iconBox .ikon svg {
  width: 45%;
  -webkit-filter: invert(1);
  filter: invert(1);
}

/* pre-footer */

/*Footer*/
.footer-area {
  background-color: var(--light);
  color: #000;
  letter-spacing: 1px;
  position: relative;
  font-size: 14px;
  z-index: 1;
}

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

.footer-area a {
  display: inline-block;
  color: #000;
  font-size: 14px;
  padding: 5px 0;
}

.footer-area a:hover {
  color: var(--secondary-color);
}

.smallHeading {
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.footer-logo {
  width: 120px;
}

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

.follow-us .insideBox span {
  display: block;
  color: #666;
  font-size: 17px;
  text-transform: uppercase;
  line-height: 1.53;
  margin-right: 1.25rem;
}

.follow-us ul {
  gap: 1.25rem;
}

.follow-us a {
  font-size: 1.75rem;
}

.footer-area .bottom {
  padding: 2rem 0;
  background-color: #fff;
}

.footer-area .bottom p {
  display: flex;
  font-size: 12px;
  align-items: center;
  letter-spacing: normal;
  text-transform: capitalize;
  margin-bottom: 0;
}

.footer-area .bottom p:not(:last-child) {
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid rgb(255 255 255 / 14%);
}

.footer-area .bottom p img {
  width: 20px;
}

.button-top {
  background: rgb(70 70 70 / 32%);
  position: fixed;
  right: 20px;
  bottom: -40px;
  color: #ffffff;
  font-size: 13px;
  opacity: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  z-index: 90;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.button-top:hover {
  background: var(--secondary-color);
}

/*Footer*/

/* Video and growth */
.videoth {
  translate: 0 15%;
  position: relative;
  z-index: 1;
}

.videoth::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 50%);
}

.videoth img {
  height: 440px;
  object-fit: cover;
}

.videoBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  transition: all 300ms ease-in-out;
  animation: breathe 800ms alternate infinite;
}

.videoBtn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 30%);
  z-index: -1;
  transition: all 300ms ease-in-out;
  transition-delay: 100ms;
  animation: breathe 800ms alternate infinite;
}

@keyframes breathe {
  100% {
    scale: 1.2;
  }
}

.videoBtn:hover {
  scale: 1.2;
}

.videoBtn:hover::before {
  scale: 1.2;
  border-color: #fff;
}

.viewmore {
  width: 100%;
  margin-top: 1.25rem;
}

.viewmore .button {
  text-transform: uppercase;
  color: var(--body-color);
  font-size: 67.5%;
  font-weight: 700;
}

.viewmore .button:hover {
  color: var(--secondary-color);
}

.viewmore .button.circular {
  width: 24px;
  height: 24px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
}

.viewmore .button.circular:hover {
  background-color: var(--secondary-color);
}

.newsBox section article h4 a:hover,
.viewmore a:hover {
  color: var(--primary-color);
}

.headingContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.heading {
  display: table;
  width: 100%;
  max-width: 1024px;
  position: relative;
  margin-bottom: 5rem;
  z-index: 1;
}

.heading.hasline span.h4 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
  line-height: 1.16;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 3.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 2.5rem;
}

.heading.hasline span.h4::before,
.heading.hasline span.h4::after {
  content: '';
  max-width: 200px;
  width: 30%;
  height: 2px;
}

.heading.hasline span.h4::before {
  background: linear-gradient(90deg, transparent, rgb(71 71 71 / 20%));
}

.heading.hasline span.h4::after {
  background: linear-gradient(-90deg, transparent, rgb(71 71 71 / 20%));
}

.heading.hasline span.h4.text-white::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));

}

.heading.hasline span.h4.text-white::after {
  background: linear-gradient(-90deg, transparent, rgba(255, 255, 255, 0.5));
}

.heading .h1 {
  font-weight: 300;
}

.heading .h1 strong {
  font-weight: 800;
}

.heading h4,
.heading h5 {
  line-height: 1.16;
  font-weight: 600;
  text-transform: uppercase;
}

.heading>img {
  width: 250px;
  margin-bottom: 1.5rem;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-secondary-light {
  color: var(--secondary-light-color) !important;
}

.text-serif {
  font-family: var(--serif);
}

.bg-primary {
  background-color: var(--primary-color) !important;
  color: var(--light);
}

.bg-light {
  background-color: var(--light) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-secondary-light {
  background-color: var(--secondary-light-color) !important;
}

.bg-dark {
  background-color: var(--body-color) !important;
  color: #fff;
}

.bg-gray {
  background-color: var(--gray) !important;
}

.bg-image {
  background: center / cover no-repeat;
}

.bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 75%);
  z-index: -1;
}

.scroller {
  overflow: auto;
}

.scroller::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.scroller::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--light);
  border-radius: 10px;
}

/* Handle */
.scroller::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: 10px;
}

/* Handle on hover */
.scroller::-webkit-scrollbar-thumb:hover {
  background: #000;
}

.btn-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid var(--secondary-color);
  font-size: 3rem;
  font-weight: 100;
  transition: all 300ms ease-in-out;
}

.btn-plus:hover {
  background-color: var(--secondary-color);
  color: #fff;
  transform: rotate(180deg);
}

.readmore {
  width: 100%;
  margin-top: 2.5rem;
}

.readmore.d-flex {
  gap: 10px;
}

.readmore .button {
  position: relative;
  z-index: 1;
  display: table;
  padding: 1rem 1.5rem;
  min-width: 120px;
  text-transform: uppercase;
  color: var(--body-color);
  background-color: #fff;
  border: 1px solid var(--body-color);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  min-width: 220px;
  text-align: center;
  transition: all ease-in-out 0.3s;
}

.readmore button {
  width: max-content;
  background: none;
}

.readmore .button:hover {
  color: #fff;
  background: var(--body-color);
  border-color: transparent;
}

.readmore .button.text-white {
  border-color: var(--secondary-color);
}

.readmore .button.text-white:hover {
  background-color: var(--secondary-color);
  border-color: transparent;
}

.readmore .button.solid.white:hover,
.readmore .button.solid {
  background-color: var(--body-color);
  color: #fff;
  border: none;
}

.readmore .button.solid.white,
.readmore .button.solid:hover {
  background-color: var(--secondary-color);
  color: #fff;
  border: none;
}

.controls {
  position: absolute;
  width: 110px;
  height: 40px;
  right: 10px;
  bottom: 10px;
  z-index: 9;
}

.controls a {
  position: static;
  display: table;
  width: 100%;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  text-align: center;
  color: var(--primary-color);
  font-size: 13px;
  border-bottom: 1px solid rgb(0 0 0 / 20%);
  opacity: 1;
}

.controls a:last-child {
  border-bottom: none;
}

.controls a:focus,
.controls a:hover {
  color: var(--primary-color) !important;
  opacity: 1;
}

.multiply {
  mix-blend-mode: multiply;
}

.bg-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: radial-gradient(circle at 50% -50%, var(--primary-color), var(--body-color)); */
  background-color: var(--primary-color);
  opacity: 0.1;
  clip-path: circle(60% at 90% -20%);
  z-index: -1;
  pointer-events: none;
}

.position-relative {
  z-index: 1;
}

/* custom swiper controls */
.swiper-button-next,
.swiper-button-prev {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: all 300ms ease-in-out;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--body-color);
  scale: 0.8;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 80%);
}

.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {
  color: var(--secondary-color) !important;
}

.swiper-button-next.lg,
.swiper-button-prev.lg {
  width: 70px;
  height: 70px;
  margin-top: -50px;
}

.swiper-button-next.lg:hover,
.swiper-button-prev.lg:hover {
  backdrop-filter: blur(5px) brightness(2);
  border-color: transparent;
}

.swiper-button-prev.lg:after,
.swiper-button-next.lg:after {
  font-size: 1.5rem;
  font-weight: 100;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: var(--body-color);
  font-size: 13px;
}

.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {
  color: var(--secondary-color);
}

.bottomControls {
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.bottomControls.position-absolute {
  bottom: 2rem;
  width: 100%;
}

.bottomControls div[class^="swiper-"] {
  position: static;
  margin: 0 !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--body-color);
  width: 20px;
  border-radius: 10px;
}

.bar-controls {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.bar-controls .bar-arrows {
  position: relative;
  width: 100px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-controls .bar-arrows>div {
  position: static !important;
  margin-top: 0 !important;
  width: 40px;
  height: 40px;
  background-size: 22px;
}

.bar-controls .swiper-horizontal>.swiper-pagination-progressbar,
.bar-controls .swiper-pagination-progressbar.swiper-pagination-horizontal {
  position: static;
  width: calc(100% - 120px);
}

.bar-controls .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: linear-gradient(45deg, var(--secondary-color), var(--primary-color), var(--secondary-color));
}

/* custom swiper controls */

/* Inside page */
.insideBanner {
  height: 80vh;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.insideBanner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  z-index: 1;
}

.pageHead {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s linear;
  z-index: 1;
  text-align: center;
}

.page-title {
  font-size: 5vw;
  font-weight: 700;
}

.breadcrumb {
  background-color: transparent;
  margin-bottom: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 12px;
}

.breadcrumb li a,
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--body-color);
  font-weight: 600;
}

.breadcrumb li a:hover {
  color: var(--primary-color);
}

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

.project-logo {
  width: 220px;
  margin: -9rem auto 2rem;
  background-color: #fff;
  padding: 10px;
  border: 10px solid;
  border-color: var(--secondary-color) var(--gray);
  box-shadow: 0 10px 2rem rgb(0 0 0 / 15%);
}

.configuration {
  display: flex;
  border-top: 1px solid var(--secondary-color);
  border-bottom: 1px solid var(--secondary-color);
}

.configuration-box {
  border-right: 1px solid var(--secondary-color);
  padding: 1em 0;
  flex: auto;
  text-align: center;
  margin: 10px 0;
}

.configuration-box:nth-last-child(1) {
  border-right: none;
}

.configuration-box p {
  text-align: center;
}

/* amenities */
.amenities-img {
  width: 44px;
  margin: auto;
  /* filter: invert(1); */
}

.amenitiesBox .inner {
  height: 100%;
  padding: 2rem;
  align-items: center;
  background: #ffffff;
  color: #000;
  min-height: 78px;
  border: 1px solid rgb(0 0 0 / 10%);
}

.amenitiesBox .img-fluid {
  width: 44px;
  margin: auto;
  /* filter: invert(1); */
}

.amenitiesBox .d-flex .img-fluid {
  height: 100%;
  width: 60px;
  padding-right: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgb(0 0 0 / 10%);
}

.amenitiesBox p {
  color: #000000;
  line-height: 1.1;
  margin-top: 8px;
  width: 100%;
  text-align: center;
  min-height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.amenitiesBox .d-flex p {
  width: calc(100% - 61px);
  text-align: left;
  padding-left: 1rem;
  margin-top: 0;
  line-height: 1.4;
}

/* amenities */

/* specifications */

.specSlide {
  position: relative;
}

.specSlide .specDetails {
  height: 100%;
  background-color: #fff;
  padding: 20px;
  z-index: 1;
}

.specSlide .specDetails .img-fluid {
  max-width: 40px;
  margin: 0 0 30px auto;
}

.specSlide .specDetails h6 {
  font-family: var(--serif);
  font-size: 1.5rem;
  padding-bottom: 10px;
  margin-bottom: 1rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

.specSlide .specDetails .list-inline li {
  display: flex;
  font-size: 1.25rem;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.specSlide .specDetails .list-inline li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.specSlide .specDetails .list-inline li strong {
  flex: 0 0 25%;
  max-width: 25%;
  color: var(--orange);
  font-weight: 400;
  text-transform: uppercase;
}

.specSlide .specDetails .list-inline li span {
  flex: 0 0 75%;
  max-width: 75%;
  padding-left: 10px;
}

/* specifications */

.location-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../images/location-bg.png) center bottom / 100% no-repeat;
  opacity: 0.075;
  z-index: -1;
}

.whyUsBox.locationBox section {
  padding: 0 2rem 2rem;
}

.whyUsBox.locationBox:first-of-type section,
.whyUsBox.locationBox:last-of-type section {
  padding: 2rem;
}

.emptyBox {
  height: 51px;
}

/* Inside page */


/* --------Project Page Starts-------- */
.section-text {
  width: 100%;
  max-width: 600px;
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

.section-text section {
  transition: all 500ms ease-in-out;
}

.section-text section h1 {
  font-weight: 700;
  font-size: 3.5rem;
}

.section-imgs {
  background: center no-repeat #000;
  background-size: cover;
  height: 100%;
  width: 100%;
  transition: all 300ms ease-in-out;
}

.section-imgs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* background-color: rgb(0 0 0 / 30%); */
  z-index: 1;
}

.lifestyle-text section {
  transition: all 500ms ease-in-out;
}

#lifestyle-text2 section {
  margin-top: 70px;
}

.villa-img {
  margin-top: 100px;
  transition: all 500ms ease-in-out;
}

#villa-img2 {
  margin-top: -300px;
}

.section-text-h6 {
  font-size: 1.5rem;
  font-weight: 300;
  margin-top: 30px;
}

.viewmore .button {
  margin-top: 40px;
  border: 1px solid var(--body-color);
  background-color: transparent;
  outline: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  transition: all 500ms ease-in-out;
}

.viewmore .button:hover {
  background-color: var(--secondary-color);
  color: #fff;
}

.showtext {
  background-color: #fff;
  display: none;
}

.stats {
  display: flex;
  justify-content: center;
}

.stats h2 {
  text-align: center;
  margin: 0 30px;
  color: #fff;
}

.stats h2 span {
  font-size: 4rem;
  font-weight: 300;
}

.stats h2 small {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

/* USP */
.uspCollage {
  margin-top: 3rem;
}

.uspCollage .row {
  margin-left: -5px;
  margin-right: -5px;
}

.uspCollage .row div[class^="col"] {
  padding: 5px;
}

.uspCollage .uspBox {
  height: 100%;
  background: center no-repeat;
  background-size: cover;
}

.uspCollage .uspBox#uspBox1 {
  height: 327px;
}

.uspCollage .uspBox#uspBox2 {
  height: 186px;
}

.uspCollage .uspBox#uspBox3,
.uspCollage .uspBox#uspBox4 {
  height: 224px;
}

.uspCollage .uspBox#uspBox5 {
  height: 200px;
}

.uspCollage .uspSlider,
.uspCollage .uspSlider .swiper-wrapper,
.uspSlider .swiper-slide,
.uspSlider .swiper-slide img {
  height: 100%;
}

.uspSlider .swiper-slide img {
  object-fit: cover;
}

.uspSlider .usp-title {
  background: var(--darkgray);
  padding: 5px 15px;
  height: 25px;
  font-size: 12px;
  font-weight: 400;
}

.uspSlider .usp-title::after {
  right: -10px;
  border-top-width: 26px;
  border-left-width: 10px;
  border-left-color: var(--darkgray);
}

.uspSlider .swiper-cube-shadow {
  display: none;
}

/* -------- */
.inner-uspBox {
  padding: 2rem;
  background-color: #fff;
}

.inner-uspBox article {
  text-align: justify;
  position: relative;
}

.inner-uspBox article:not(:last-child) {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgb(0 0 0 / 6%);
}

.inner-uspBox article h4 {
  font-size: 28px;
  font-weight: 200;
  color: var(--brown);
  text-align: left;
  margin-bottom: 20px;
}

.inner-uspBox article p {
  margin-bottom: 0;
}

.inner-uspBox .clubhouse-stats h2 {
  letter-spacing: 5px;
}

.inner-uspBox .clubhouse-stats h2 span {
  font-size: 4rem;
  font-weight: 300;
  color: var(--secondary-color);
}

.inner-uspBox .clubhouse-stats h5 {
  margin-bottom: 0;
  font-weight: 300;
  letter-spacing: 10px;
}

/* USP */

/* Gallery */
.gallery-slide {
  width: 70%;
}

.gallery-slide span,
.uspSlider .usp-title {
  position: absolute;
  left: 0;
  bottom: 15px;
  padding: 10px 20px;
  height: 38px;
  background-color: var(--secondary-light-color);
  z-index: 1;
  color: var(--body-color);
  ;
  font-weight: 700;
}

.gallery-slide span::after,
.uspSlider .usp-title::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -1px;
  border-top: 39px solid transparent;
  border-left: 19px solid var(--secondary-light-color);
}

/* Gallery */

.playBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  border: 0;
  background-color: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 25%);
  color: var(--body-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease-in-out;
}

.playBtn:hover {
  transform: translate(-50%, -50%) scale(.95, .95);
  color: #fff;
  background-color: var(--secondary-color);
}

.fpWrapper:not(.show) {
  display: none;
}

.fpDetailBox ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  font-size: 1.25rem;
  color: var(--secondary-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.fpDetailBox ul li:last-child {
  border-bottom: none;
}

.fpDetailBox ul li .fpNumb {
  color: var(--body-color)
}

.fpDownloadBtns .readmore {
  display: flex;
  align-items: center;
}

.fpTypeBtnContainer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.fpTypeBtnContainer button {
  background: none;
  border: none;
  outline: none;
  font-weight: 600;
  font-size: 1.25rem;
  padding: 0 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 300ms ease-in-out;
}

.fpTypeBtnContainer button:hover {
  color: rgba(0, 0, 0, 0.7);
}

.fpTypeBtnContainer button.active {
  color: var(--secondary-color);
}

.fpDownloadBtns .readmore .button {
  min-width: 1px;
}

.elem {
  position: absolute;
  width: 200px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
}

.elem.elem-bl {
  left: 0;
  bottom: 0;
}

.elem.elem-bl img {
  object-position: -80px 80px;
}

.elem.elem-br {
  right: 0;
  bottom: 0;
}

.elem.elem-br img {
  object-position: 80px 80px;
}

/* Hm Location */
.location-imgs {
  position: relative;
  z-index: 1;
}

.location-imgs .map-pointer {
  width: 80px;
  position: absolute;
  right: 45%;
  top: 35%;
  transform: translateY(-200px);
  opacity: 0;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.02, 0.25, 0, 1.18);
}

.location-imgs .map-pointer:hover {
  filter: hue-rotate(90deg);
}

.location-advantages {
  padding: 4rem;
  z-index: 2;
}

.connectivityWrapper {
  margin-top: 10px;
}

.connectivityWrapper .connectivitySlider {
  padding-bottom: 4rem;
}

.connectivityWrapper .connectivitySlider .connect-next,
.connectivityWrapper .connectivitySlider .connect-prev {
  top: auto;
  bottom: 0;
  margin-top: auto;
  width: auto;
  background: none;
  color: inherit;
  font-size: 34px;
}

.connectivityWrapper .connectivitySlider .connect-next:hover,
.connectivityWrapper .connectivitySlider .connect-prev:hover {
  color: var(--brown);
}

.connectivityWrapper .connectivitySlider .connect-next {
  right: 50%;
  margin-right: -45px;
}

.connectivityWrapper .connectivitySlider .connect-prev {
  left: 50%;
  margin-left: -45px;
}

.connectivityWrapper .connectivitySlider .connect-next::after,
.connectivityWrapper .connectivitySlider .connect-prev::after {
  display: none;
}

.connectivityBox {
  padding: 0 5px;
}

.connectivityBox section {
  padding: 20px 10px;
  display: flex;
  align-items: center;
  border: 1px solid rgb(0 0 0 / 12%);
  position: relative;
  overflow: hidden;
}

.connectivityBox section h2 {
  font: 400 3rem/1 "Source Serif Pro", serif;
  margin-bottom: 0;
  padding-right: 10px;
  margin-right: 10px;
  width: 45%;
  text-align: center;
  border-right: 1px solid rgb(0 0 0 / 12%);
}

.connectivityBox section h2 span {
  font-size: 14px;
  display: block;
}

.connectivityBox section .img-fluid {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 30px;
}

.connectivityBox section aside {
  text-align: left;
  padding-left: 10px;
}

.listContainer ul li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #626262;
}

.listContainer ul li:not(:last-child) {
  margin-bottom: 12px;
}

.listContainer ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: url(../images/favicon.png) center no-repeat;
  background-size: contain;
}

.listContainer ul li a {
  color: inherit;
}

.listContainer.text-white ul li a {
  color: #fff;
}

.listContainer ul li a:hover {
  color: var(--primary-color);
}

.listContainer.sm ul li {
  padding-left: 20px;
  font-size: 13px;
  margin: 10px 0;
}

.listContainer.sm ul li::before {
  width: 10px;
  height: 10px;
  top: 4px;
}

/* Hm Location */
/* //EMI Calculator// */
.emiresult .result {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.emiresult i {
  opacity: 0.4;
}

canvas {
  font-weight: 600;
  font-size: 16px;
}

/* //EMI Calculator// */
/* --------Project Page Ends-------- */

/* about us */
.overview-area p,
.vm-textarea p {
  font-size: 1.5rem;
}

/* about us */

/* careers */
.table,
.anotherForm {
  font-size: 1.25rem;
}

/* careers */

/* contact page */
.form-details .inner {
  background-color: var(--secondary-light-color);
  padding: 2rem;
}

.address-details .inner {
  padding: 2rem;
  border: solid var(--secondary-light-color);
  border-width: 1px 1px 1px 0;
  height: 100%;
}

.address-details .contact-details li a,
.address-details .inner p {
  color: rgb(0 0 0 / 50%);
}

.address-details .contact-details li {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.address-details .contact-details li:not(:last-of-type) {
  margin-bottom: 10px;
}

.address-details .contact-details li i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--secondary-light-color);
}

.address-details .contact-details li a:hover {
  color: var(--secondary-color);
}

/* contact page */

.form-group {
  margin-bottom: 20px;
}

.form-group>label {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
}

label {
  cursor: pointer;
}

.form-control {
  font-size: 1.25rem;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgb(0 0 0 / 16%);
  background: none;
  outline: none;
  padding-left: 0;
  padding-top: 0;
}

.form-control[readonly] {
  background: none;
}

.form-control.form-control-dark {
  border-bottom-color: rgb(255 255 255 / 15%);
  color: #fff;
}

select.form-control.form-control-dark {
  background-color: var(--primary-color);
}

.form-control.form-control-dark::placeholder {
  color: #8f8f8f;
}

.form-control:focus {
  box-shadow: none;
  border-bottom-color: var(--primary-color);
  background: none;
}

/* Contact */
.contact-wrapper {
  background: url(../images/contactMap.jpg) center / cover;
}

.contactBigBox .bg-white {
  padding: 3rem;
}

.contactBox,
.careersText {
  border-right: 1px solid rgb(0 0 0 / 10%);
}

.careers-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../images/career-bg.png) center / cover;
  z-index: -1;
  opacity: .075;
}

/* customize modal */
.modal-backdrop.show {
  opacity: 1;
  background: rgb(0 0 0 / 90%);
  backdrop-filter: blur(5px);
}

.modal-content {
  border-radius: 0;
  padding: 1rem;
  background-color: #fff;
}

.modal-body {
  padding: 1rem;
  border: 4px double rgb(0 0 0 / 50%);
}

.modal-logo {
  width: 180px;
  margin: 0 auto 2rem;
}

button.close {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  line-height: 1;
}

.modal-title {
  margin-bottom: 1.5rem;
  padding-bottom: 10px;
  font-weight: 500;
  border-bottom: 1px dashed rgb(0 0 0 / 30%);
}

/* customize modal */

/*transformation Animation*/
.leftTranslate {
  -webkit-transform: translate(-200px, 0);
  transform: translate(-200px, 0);
  opacity: 0;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.rightTranslate {
  -webkit-transform: translate(200px, 0);
  transform: translate(200px, 0);
  opacity: 0;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.topTranslate {
  -webkit-transform: translate(0, -200px);
  transform: translate(0, -200px);
  opacity: 0;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.bottomTranslate {
  -webkit-transform: translate(0, 200px);
  transform: translate(0, 200px);
  opacity: 0;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.doneTranslate {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}

.fadeOut {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: all 1.5s linear;
  transition: all 1.5s linear;
}

.fadeIn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.zoomOut {
  transform: scale(0);
  transition: all .8s ease-in-out;
}

.zoomIn {
  transform: scale(1);
}

/*transformation Animation*/

.list li {
  margin-bottom: 10px;
}

.list li::marker {
  color: var(--primary-color);
}

.list,
.list {
  padding-left: 20px;
}

/* Connectivity */
.iconsContainer::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  top: 4px;
  background-color: var(--primary-color);
  z-index: -1;
}

.iconsContainer1::before {
  top: calc(100% - 5px);
}

.connectivity .in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  height: 100%;
  padding: 0 1rem;
  gap: 1.5rem;
  transition: all 300ms ease-in-out;
}

.connectivity.swiper-slide:nth-child(odd) .in {
  flex-direction: column-reverse;
}

.connectivity .in:hover {
  color: var(--primary-color);
}

.connectivity .in .connectivity-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--primary-color);
}

.connectivity .in .img-fluid {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 15%);
}

.connectivity .in:hover .img-fluid {
  border-color: var(--primary-color);
}

.connectivity .in h6 {
  font-weight: 700;
  font-size: 14px;
}

.connectivityarrow {
  padding: 20px 0;
  display: flex;
  position: relative;
}

.connectivityarrow1 {
  justify-content: end;

}

.connectivity {
  width: 50%;
}

.connectivity.swiper-slide:nth-child(odd) .in h6 {
  display: flex;
  align-items: flex-end;
}

/* Connectivity */
/* amenities */
.amenitiesContainer .iconBox {
  height: auto;
  padding: 10px;
}

.amenitiesContainer .iconBox .in {
  height: 100%;
  padding: 2rem;
  transition: all 300ms ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  position: relative;
}

.amenitiesContainer .iconBox .in::before {
  border-color: rgb(0 0 0 / 40%);
}

.iconBox .in i {
  width: 30px;
}

.iconBox .in img {
  width: 68px;
  filter: brightness(0.5);
}

.iconBox .in h6 {
  font-weight: 700;
  color: #080808;
}

/* amenities */
.locationmap iframe {
  height: 400px;
  border: 1px solid #ccc;
}

/* Gallery */
.reflection {
  -webkit-box-reflect: below -76px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4));
}

.charSlide {
  width: 70%;
}

.charSlide .imgBox {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.charSlide img {
  object-fit: cover;
}

.charSlide .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;

  font-size: 1.75rem;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
  z-index: 1;
  text-align: center;
  -webkit-box-reflect: below -1rem linear-gradient(to bottom, transparent 25%, rgba(0, 0, 0, 0.4));
  display: none;
}

/* Gallery */

/* Testimonails */
.testimonials .swiper-slide {
  height: auto;
}

.testimonials-box {
  height: 100%;
  background-color: #fff;
  padding: 2rem;
  border-bottom: 2px solid var(--primary-color);
  position: relative;
  isolation: isolate;
}

.testimonials-box::before {
  content: '\275D';
  position: absolute;
  left: 10px;
  top: 0;
  font-size: 6rem;
  line-height: 1;
  pointer-events: none;
  opacity: 0.06;
  z-index: -1;
}

.name-testi {
  display: flex;
  align-items: center;
  gap: 10px;
}

.name-testi .img-fluid {
  max-width: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.name-testi p {
  font-weight: 700;
  margin-bottom: 0px;
}

.name-testi span {
  font-size: 12px;
}

/* Testimonails */
.loact {
  padding: 26px 0;
  border-bottom: 1px solid rgb(0 0 0 / 16%);
}

.loact:last-child {
  border-bottom: none;
}

.loact li {
  list-style-type: none;
}

.loact a {
  display: block;
  color: #000;
  font-size: 18px;
  margin-bottom: 15px;
  -webkit-transition: all ease-in-out .5s;
  transition: all ease-in-out .5s;
}

.touch {
  background: #edeae6;
  padding: 40px;
}

.left_col ul li {
  margin: 10px 0;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.3px;
  margin: 10px 1px;
  list-style-type: none;
  position: relative;
  color: #fff;
  background: var(--primary-color);
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

.left_col li .count {
  background: var(--secondary-color);
  align-items: center;
  padding: 5px;
  width: 26px;
  position: absolute;
  top: -13px;
  text-align: center;
  font-size: 12px;
  height: 20px;
  line-height: 10px;
  bottom: auto;
  min-height: 21px;
  color: #ffffff;
  font-weight: 600;
}

.left_col ul li span {
  padding: 8px 5px;
  min-height: 67px;
  display: flex;
  align-items: center;
  width: 100%;
}

.blogs li {
  font-size: 1.5rem;
}

.iconSlider {
  display: flex;
}

.Walkthroughmain {
  min-height: 50vh;
}