@font-face {
  font-family: "Pinyon Script";
  src: url("../../../fonts/PinyonScript-Regular.eot");
  src: url("../../assets/fonts/PinyonScript-Regular.eot?#iefix") format("embedded-opentype"),
    url("../../assets/fonts/PinyonScript-Regular.woff2") format("woff2"),
    url("../../assets/fonts/PinyonScript-Regular.woff") format("woff"),
    url("../../assets/fonts/PinyonScript-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../../assets/fonts/Figtree-Regular.ttf");
  src: url("../../assets/fonts/Figtree-Regular.ttf?#iefix") format("embedded-opentype"),
    url("../../assets/fonts/Figtree-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Figtree light";
  src: url("../../assets/fonts/Figtree-Light.ttf");
  src: url("../../assets/fonts/Figtree-Light.ttf?#iefix") format("embedded-opentype"),
    url("../../assets/fonts/Figtree-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Playfair Display";
  src: url("../../assets/fonts/PlayfairDisplay-Regular.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display Italic";
  src: url("../../assets/fonts/PlayfairDisplay-Italic.ttf");
  src: url("../../assets/fonts/PlayfairDisplay-Italic.ttf?#iefix") format("embedded-opentype"),
    url("../../assets/fonts/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "bon_vivant_family_scriptRg";
  src: url("../../assets/fonts/bon-vivant-webfont.woff2") format("woff2"), url("../../assets/fonts/bon-vivant-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


:root {
  --primary-color: #ffffff;
  --gold-color: #d4ad68;

  --primary-font: 'Figtree';
  --primary-font-light: 'Figtree light';
  --secondary-font: 'Playfair Display';
  --secondary-font-italic: 'Playfair Display Italic';
  --cursive-font: 'Pinyon Script', cursive;

  --primary-heading-size: clamp(28px, calc(1.75rem + (40 - 28) * ((100vw - 992px) / (1920 - 992))), 40px);
  --primary-heading-md-size: clamp(20px, calc(1.25rem + (28 - 20) * ((100vw - 468px) / (768 - 468))), 28px);

  --primary-heading-sub-size: clamp(16px, calc(1rem + (20 - 16) * ((100vw - 768px) / (1920 - 768))), 20px);
  --primary-heading-sub-md-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 468px) / (768 - 468))), 16px);

  --primary-discription-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 766px) / (1920 - 766))), 16px);
  --primary-discription-md-size: clamp(12px, calc(0.75rem + (14 - 12) * ((100vw - 468px) / (768 - 468))), 14px);

  --cursive-heading-size: clamp(32px, calc(2rem + (60 - 32) * ((100vw - 768px) / (1920 - 768))), 60px);
  --cursive-heading-md-size: clamp(30px, calc(1.875rem + (32 - 30) * ((100vw - 468px) / (768 - 468))), 32px);

  --cursive-gold-white-gradient: linear-gradient(180deg, #AD8D5F 0%, #ECDA9A 50%, #AD8D5F 100%);
  --cursive-gold-gradient: linear-gradient(180deg, #BDA371 0%, #B77A15 100%);
  
  --bs-tooltip-max-width: 300px;

  --section-space: 80px clamp(16px, calc(1rem + (40 - 16) * ((100vw - 768px) / (1920 - 768))), 40px) clamp(16px, calc(1rem + (40 - 16) * ((100vw - 768px) / (1920 - 768))), 40px) clamp(16px, calc(1rem + (40 - 16) * ((100vw - 768px) / (1920 - 768))), 40px);
  --section-md-space: clamp(40px, calc(2.5rem + (80 - 40) * ((100vw - 768px) / (1992 - 768))), 80px) clamp(16px, calc(1rem + (40 - 16) * ((100vw - 768px) / (1920 - 768))), 40px) clamp(40px, calc(2.5rem + (80 - 40) * ((100vw - 768px) / (1992 - 768))), 80px) clamp(16px, calc(1rem + (40 - 16) * ((100vw - 768px) / (1920 - 768))), 40px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  font-family: var(--primary-font);
  color: var(--primary-color);
  background-color: #000;
  font-size: 1rem;
  line-height: 1;
  height: 100vh;
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar {
  width: 2px;
  height: 100%;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #78787899;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: #78787866;
}

.primary-font {
  font-family: var(--primary-font);
}

.primary-font-light 
{
  font-family: var(--primary-font-light);
}

.secondary-font {
  font-family: var(--secondary-font);
}

.secondary-font-italic {
  font-family: var(--secondary-font-italic)
}

.cursive-font {
  font-family: var(--cursive-font);
}

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

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pinyon-script-font {
  font-weight: 400;
  font-style: normal;
  font-family: var(--cursive-font);
  font-size: var(--cursive-heading-size);
  color: var(--primary-color);
  line-height: 1;
  letter-spacing: normal;

  @media(width <= 768px)
  {
    font-size: var(--cursive-heading-md-size);
  }
}

.gold-white-gradient {
  background: var(--cursive-gold-white-gradient);
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gold-gradient {
  background: var(--cursive-gold-gradient);
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-gold 
{
    color: #D8B270;
}

.lines
{
  display: block;
}

.heading-text {
  font-size: var(--primary-heading-size);
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0px;
  letter-spacing: 2px;

  @media(width <= 768px)
  {
    font-size: var(--primary-heading-md-size);
  }
}

.heading-sub-text {
  font-size: var(--primary-heading-sub-size);
  line-height: 1;
  padding-left: 0px;
  margin-bottom: 0px;
  /* text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); */

  @media(width <= 768px)
  {
    font-size: var(--primary-heading-sub-md-size);
  }
}

.heading-disc-text
{
  font-size: var(--primary-discription-size);
  line-height: 1;
  margin-bottom: 0px;

   @media(width <= 768px)
  {
    font-size: var(--primary-discription-md-size);
  }
}

.heading-text-shadow {
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.sec-center {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.cursor-pointer {
  cursor: pointer;
}

.br-sm 
{
  display: none;

  @media(width <= 468px)
  {
    display: block;
  }
}

.glass-btn {
  position: relative;
  padding: 13px 30px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition:
    background-color 400ms cubic-bezier(1, 0.0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(1 * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, #fff calc(1 * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, #fff calc(1 * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(1 * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, #000 calc(1 * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 calc(1 * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, #000 calc(1 * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(1 * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, #000 calc(1 * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, #000 calc(1 * 8%), transparent);
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  text-wrap: nowrap;

  @media(width <= 768px)
  {
   font-size: 9px;
   padding: 7px 12px;
  }

  &:hover {
    transform: scale(1.05) translateZ(0);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    i {
      transform: translate(5px, 0);
    }
  }


  i {
    transition: 0.3s ease-in-out;
  }
}

/*GLobal BS Modal css start */
.modal {
  .modal-dialog.modal-xl {
    max-width: 80% !important;

    @media(width <=992px) {
      max-width: 90% !important;
    }

    @media(width <=468px) {
      max-width: 100% !important;
    }
  }

  .modal-dialog-scrollable {
    .modal-content {
      overflow: visible;
    }
  }

  .modal-header {
    border-bottom: 0px;
  }

  .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    filter: invert(1);
  }

  .modal-content {
    border: 1px solid #C5984A;
    border-radius: 20px;
    background: #0000007a;
  }

  .modal-body {
    padding: 0.6rem 2rem 2rem 2rem;

    @media(width <=768px) {
      padding: 0.6rem 1rem 1rem 1rem;
    }
  }

  &#thankyou
  {
    .modal-body {
      padding: 4rem;
      backdrop-filter: blur(5px);
      border-radius: 25px;
      overflow: hidden;

    }
  }
}

/* GLobal BS Modal css end */

/* Global fancy box css start */
.f-caption {
  font-size: clamp(18px, calc(1.125rem + (28 - 18) * ((100vw - 768px) / (1920 - 768))), 28px);
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(50%, 50px);
  height: auto;
  width: 100%;
  z-index: 90;
  text-align: center;
  line-height: 1.1;
  z-index: 99;

  @media(width <=1920px) {
    transform: translate(50%, 0px);
  }

  @media(width <=1024px) {
    transform: translate(50%, 68%);
  }

  @media(width <=992px) {
    position: unset;
    transform: unset;
  }

  @media(width <=468px) {
    position: unset;
    transform: unset;
  }
}

.fancybox__slide {
  position: relative;
  justify-content: center;
}

.fancybox__container {
  --fancybox-transition-duration: 0ms !important;
  --fancybox-slide-transition-duration: 0ms !important;
}

.fancybox__viewport:has(.f-caption) .fancybox__slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.57) 0%, rgb(0 0 0 / 36%) 11%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 23%);
  z-index: 90;
  pointer-events: none;

  @media(width <=992px) {
    height: unset;
    position: initial;
    background: unset;
    display: none;
  }
}

.f-panzoom:not(.has-controls):before,
.f-zoomable:not(.has-controls):before {
  margin-bottom: unset;
}

.fancybox__slide:after {
  margin-top: unset;
}

.caption-sm {
  font-size: 16px;
}

/* Global fancy box css end */

/* Global Border animation start */
.animation-box {
  position: relative;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;

  &::before {
    content: "";
    z-index: 30;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(#bda371, #bda371) top left, linear-gradient(#bda371, #bda371) top left, linear-gradient(#bda371, #bda371) bottom right, linear-gradient(#bda371, #bda371) bottom right;
    background-repeat: no-repeat;
    background-size: 0% 10px, 10px 0%, 0% 10px, 10px 0%;
    transition: background-size 1s ease;
    transform-origin: center center;
    opacity: .8;
  }

  &:hover {
    &::before {
      background-size: 100% 10px, 10px 100%, 100% 10px, 10px 100%;
    }

    img {
      transform: scale(1.1);
    }

    .transform-none {
      transform: scale(1);
    }
  }

  img {
    transform: translateZ(0);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
    transform-origin: center center;
  }
}

/* Global Border animation end */

.township-container {
  width: 1440px;
  position: relative;
  padding: 0px 15px;
  margin: 0 auto;

  @media (width <=1440px) {
    width: 1340px;
    position: relative;
    padding: 0px 15px;
    margin: 0 auto;
  }

  @media (width <=1365px) {
    width: 1240px;
    position: relative;
    padding: 0px 15px;
    margin: 0 auto;
  }

  @media (width <=1280px) {
    width: 1140px;
    position: relative;
    padding: 0px 15px;
    margin: 0 auto;
  }

  @media (width <=1120px) {
    width: 100%;
    position: relative;
    padding: 0px 15px;
    margin: 0 auto;
  }
}

/*Grid main factfile start */
.main-factfile-grid {
  .box-content {
    position: relative;
    height: 100%;
    border: 1px solid #b18f50;
    z-index: 1;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.56) 15%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0) 23%);
      z-index: 10;
    }

    .fact-collab-img 
    {
      margin: 0px auto;
      display: flex;
      justify-content: center;
      img 
      {
        max-width: 180px;
        margin-bottom: 5px;
        text-align: center;
        filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));

        @media(width <=992px) {
          max-width: 140px;
        }

        @media(width <= 468px) {
          max-width: 80px;
        }
      }
    }

    .inner-details {
      position: absolute;
      bottom: auto;
      left: 0;
      right: 0;
      top: 0;
      text-align: center;
      z-index: 14;
      margin: 0 auto;
      cursor: pointer;
      padding: 5px;
      line-height: 16px;
      margin-top: 16px;


      .count {
        display: flex;
        color: #ffffff;
        font-weight: bold;
        font-family: "Noto Sans Display", sans-serif;
        font-size: clamp(22px, calc(1.375rem + (28 - 22) * ((100vw - 768px) / (1920 - 768))), 28px);
        line-height: 1;
        justify-content: center;
        align-items: baseline;
        gap: 5px;
        margin-bottom: 6px;

        @media(width <= 468px)
        {
          font-size: 16px;
        }
      }

      .title {
        text-transform: uppercase;
        font-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 768px) / (1920 - 768))), 16px);
        line-height: 1.1;

        @media(width <= 468px)
        {
          font-size: 12px;
          line-height: 1;
        }
      }

      small {
        font-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 768px) / (1920 - 768))), 16px);
      }

      span {
        font-weight: 400;
        font-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 768px) / (1920 - 768))), 16px);
      }

      .sub-title {
        font-size: 14px;
        text-transform: uppercase;
      }
    }

    .inner-details-2 {
      position: absolute;
      bottom: 0px;
      z-index: 10;
      text-align: center;
      width: 100%;
      line-height: clamp(12px, calc(0.75rem + (20 - 12) * ((100vw - 992px) / (1920 - 992))), 20px);
      margin-bottom: 10px;
      font-size: clamp(10px, calc(0.625rem + (14 - 10) * ((100vw - 992px) / (1920 - 992))), 14px);
      padding: 0px 10px;

      &::after {
        content: "";
        position: absolute;
        top: -30px;
        left: 0;
        height: 150px;
        width: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.662), transparent);
        z-index: -1;
      }
    }
  }

  .desktop-video
  {
    display: block;

    @media(width <=992px) {
      display: none;
    }
  }

  .mobile-image {
    display: none;

    @media(width <=992px) {
      display: block;
    }
  }

  .grid-wrapper {
    display: grid;
    gap: 10px;
    grid-template-columns: auto;
    grid-template-rows: auto;

    .grid-content-1 {
      grid-area: 1 / 1 / 4 / 3;
    }

    .grid-content-2 {
      grid-area: 1 / 3 / 2 / 7;
    }

    .grid-content-3 {
      grid-area: 2 / 3 / 3 / 7;
    }

    .grid-content-4 {
      grid-area: 3 / 3 / 4 / 7;
    }

    @media(width <=992px) {
      gap: 5px;
      .grid-content-1 {
        grid-area: 1 / 1 / 2 / 7;
      }

      .grid-content-2 {
        grid-area: 2 / 1 / 3 / 7;
      }

      .grid-content-3 {
        grid-area: 3 / 1 / 4 / 7;
      }

      .grid-content-4 {
        grid-area: 4 / 1 / 5 / 7;
      }

      .grid-content-2,
      .grid-content-3,
      .grid-content-4 {
        .box-content {
          min-height: 140px;
        }

        .inner-details {
          margin-top: 8px;
        }
      }
    }

    .grid-content-5 {
      grid-area: 1 / 1 / 2 / 7;

      .box-content {
        .inner-details {
          bottom: 10px;
          left: 0;
          right: 0;
          top: inherit;
          width: 100%;

          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.724), transparent);

            @media(width <=468px) {
              top: 0px;
            }
          }
        }
      }
    }

    .grid-col-1 {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: auto;
      column-gap: 10px;

      @media(width <=992px) {
        gap: 5px;
      }
    }

    .grid-col-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      column-gap: 10px;

      @media(width <=992px) {
        gap: 5px;
      }
    }

    .grid-col-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      column-gap: 10px;

      @media(width <=992px) {
        gap: 5px;
      }
    }

    .grid-col-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      column-gap: 10px;

      @media(width <=992px) {
        gap: 5px;
      }
    }

    .grid-col-5 {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: auto;
      column-gap: 10px;

      @media(width <=992px) {
        gap: 5px;
      }
    }

    .grid-col-1-2 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      column-gap: 10px;

      @media(width <=992px) {
        gap: 5px;
      }

      .grid-col-1-2-1 {
        grid-area: 1 / 1 / 2 / 2;
      }

      .grid-col-1-2-2 {
        grid-area: 1 / 2 / 2 / 4;
      }
    }

    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      position: relative;
      z-index: 10;
    }
  }

  .mobile-grid {
    @media(width <=468px) {
      .swiper-wrapper {
        padding-bottom: 60px;
      }
    }
  }

  .mobile-grid-slider {
    .swiper-slide {

      img,
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

  }
}
/*Grid main factfile end */


/* SECTION */
section {
  height: 100%;
  width: 100%;
  top: 0;
  position: fixed;
  visibility: hidden;

  @media (width <= 768px) {
      position: relative;
      top: auto;
      height: 100dvh;
      visibility: visible;
    
  }
}

/* Show first section */
section:first-child {
  visibility: visible;
}

/* WRAPPERS */
.outer,
.inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* BACKGROUND */
.bg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
}

.bs-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: var(--section-space);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .bs-content-top {
    display: flex;
    flex-direction: column;
  }

  .bs-content-bottom {
    display: flex;
    flex-direction: column;
  }
}

.bs-banner-bottom {
  padding: 80px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  height: 100dvh;
}

.blink-text {
  animation: blink-gold 1s infinite !important;
}

@keyframes blink-gold {
  0% {
    color: #D8B270;
  }

  50% {
    color: #ffffff;
  }

  100% {
    color: #D8B270;
  }
}

.flex-end-bottom 
{
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  background-color: #2a1f15;
  background-image: url('./../images/della-townships-naya-raipur-main-banner.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  will-change: clip-path;

  .loader-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45));
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .loader-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    opacity: 1;
  }
}

body.is-loading {
  overflow: hidden;
  background-color: #2a1f15;
}

body.is-loading .page-content,
body.is-loading > .section-indicator,
body.is-loading > .scroll-hint,
body.is-loading > .download-brochure {
  opacity: 0;
  visibility: hidden;
}

.page-content {
  transition: opacity 0.6s ease-out;
}

#smooth-wrapper {
  overflow: hidden;
}

#smooth-content {
  will-change: transform;
}

/* .section {
  height: 100dvh;
  position: relative;
  background-attachment: fixed;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
} */

.tab-menus {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 6px;
  border-radius: 50px;
  border: 0px;
  background-color: transparent;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(1 * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, #fff calc(1 * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, #fff calc(1 * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(1 * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, #000 calc(1 * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 calc(1 * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, #000 calc(1 * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(1 * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, #000 calc(1 * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, #000 calc(1 * 8%), transparent);
  transition:
    background-color 400ms cubic-bezier(1, 0.0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);

  .tab-overlay-pill {
    position: absolute;
    top: 6px;
    left: 0;
    height: calc(100% - 12px);
    z-index: 1;
    border: 0px;
    border-radius: 50px;
    background-color: transparent;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, #fff calc(1 * 10%), transparent),
      inset 1.8px 3px 0px -2px color-mix(in srgb, #fff calc(1 * 90%), transparent),
      inset -2px -2px 0px -2px color-mix(in srgb, #fff calc(1 * 80%), transparent),
      inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(1 * 60%), transparent),
      inset -0.3px -1px 4px 0px color-mix(in srgb, #000 calc(1 * 12%), transparent),
      inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 calc(1 * 20%), transparent),
      inset 0px 3px 4px -2px color-mix(in srgb, #000 calc(1 * 20%), transparent),
      inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(1 * 10%), transparent),
      0px 1px 5px 0px color-mix(in srgb, #000 calc(1 * 10%), transparent),
      0px 6px 16px 0px color-mix(in srgb, #000 calc(1 * 8%), transparent);
    transition:
      background-color 400ms cubic-bezier(1, 0.0, 0.4, 1),
      box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
  }

  .tab-items {
    position: relative;
    flex: 1;
    padding: clamp(10px, calc(0.625rem + (12 - 10) * ((100vw - 768px) / (1920 - 768))), 12px) clamp(14px, calc(0.875rem + (20 - 14) * ((100vw - 768px) / (1920 - 768))), 20px);
    border: none;
    background: transparent;
    color: #fff;
    font-size: clamp(12px, calc(0.75rem + (16 - 12) * ((100vw - 768px) / (1992 - 768))), 16px);
    cursor: pointer;
    z-index: 2;
    border-radius: 50px;
    text-align: center;
    white-space: nowrap;
  }
}

.raipur-banner-sec .bg{
  background-image: url('./../images/della-townships-naya-raipur-main-banner.webp');

  .banner-heading 
  {
    line-height: 1.2;
  }

.banner-video-wrapper {
   width: 100%;
   height: 100%;
}

.banner-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}
}

.raipur-banner-sec .banner-video-wrapper {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.raipur-banner-sec.video-ready .banner-video-wrapper {
  opacity: 1;
}

.raipur-banner-sec.video-ready .bg {
  background-image: none;
}

.raipur-banner-sec.video-ready .banner-image-show,
.raipur-banner-sec .view-film-btn {
  display: none;
}

.raipur-banner-sec.video-ready .view-film-btn {
  display: block;
}

.luxury-living-sec {
  
  .bg 
  {
    background-image: url('./../images/luxury-living-raipur-hero.webp');
  }

 @media(width <= 768px)
 {
   .bs-content 
  {
    padding: var(--section-md-space);
  }
 }

  .luxury-living-title {
    font-size: clamp(26px, calc(1.625rem + (30 - 26) * ((100vw - 768px) / (1920 - 768))), 30px);
    font-family: var(--secondary-font-italic);
  }

  .luxury-living-city {
    font-size: clamp(35px, calc(2.188rem + (70 - 35) * ((100vw - 768px) / (1920 - 768))), 70px);
  }

  .luxury-living-disc {
    font-size: clamp(16px, calc(1rem + (30 - 16) * ((100vw - 768px) / (1920 - 768))), 30px);
  }

  .bottom-desc,
  .bottom-sub-desc {
    font-size: var(--primary-heading-sub-size);
    margin-bottom: 5px;
  }

  .gold-white-gradient {
    font-size: clamp(26px, calc(1.625rem + (30 - 26) * ((100vw - 768px) / (1920 - 768))), 30px);
   font-family: var(--secondary-font-italic);
  }
}

.grid-racecourse-raipur {
  @media(width <= 768px)
  {
    min-height: 0px;
    height: auto;

    .outer,
    .inner {
      height: auto;
      overflow: visible;
    }
  }
  .bg
  {
    background-image: url('./../images/grid/grid-banner-bg.webp'), linear-gradient(180deg, #BDB7AF 0%, #C9BDA6 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: var(--section-space);

    @media(width <= 768px) 
    {
      padding: var(--section-md-space);
    }
  }

  @media(width <= 768px)
  {
    .bg
    {
      position: relative;
      height: auto;
      max-height: none;
    }

    .container
    {
      padding: 0px;
    }

  }
}

.thematic-living-sec {

  .bg
  {
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.18);
      z-index: 4;
    }
  }

  .bs-content
  {
    z-index: 5;
  }

  .tab-content {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: none;

    &.active {
      display: block;
    }
  }

  .thematic-video-wrapper {
    width: 100%;
    height: 100%;

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

  .gallery-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .gallery {
      position: relative;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;

      .gallery-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-clip-path: inset(0% 0% 0% 100%);
        clip-path: inset(0% 0% 0% 100%);
        will-change: clip-path, transform, filter;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }
    }
  }

  .images {
    .thumbnails {
      position: fixed;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 1000;
      

      @media(width <= 768px)
      {
        right: 16px;
        gap: 10px;
      }

      .thumbnail-img {
        width: 150px;
        height: 100px;
        object-fit: cover;
        cursor: pointer;
        transition: 0.4s ease;
        position: relative;
        border: transparent;

        @media(height <= 700px) {
          width: 100px;
          height: 70px;
        }

        @media(width <= 992px){
          width: 100px;
          height: 80px;
        }

         @media (width <= 768px) {
            width: 80px;
            height: 60px;
        }

        &::after {
          content: "";
          width: 100%;
          height: 100px;
          position: absolute;
          bottom: 0;
          right: 0;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.523) 0%, rgb(0 0 0 / 54%) 20%, rgba(0, 0, 0, 0) 100%);

          @media(height <= 700px) {
            height: 70px;
          }
           @media(width <= 992px){
            height: 70px;
          }
           @media (width <= 768px) {
            height: 60px;
        }
        }

        &:hover {
          border: 2px solid #BDA371;
          transform: scale(1.02);
        }

        &.active {
          border: 2px solid #BDA371;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }

        .thumbnail-title {
          position: absolute;
          bottom: 0;
          margin-bottom: 10px;
          text-align: center;
          width: 100%;
          font-size: 10px;
          z-index: 2;
          padding: 0px 5px;
        }
      }
    }
  }

  .bottom-disc {
    font-size: var(--primary-heading-sub-size);
    line-height: 1.1;
    font-weight: 400;

    @media(width <= 768px)
    {
      font-size: var(--primary-heading-sub-md-size);
    }
  }

  .tab-width
  {
    max-width: 300px;
    margin: 0 auto;

    .tab-menus {
      padding: 0.9rem 0.4rem;

      @media(width <= 992px) {
        padding: 0.6rem 0.3rem;
      }

      .tab-items {
        padding: 6px;
        min-width: 120px;

        @media(width <= 468px) {
          min-width: 80px;
        }
      }
    }
  }
}

.international-polo-section {

  .polo-wrap {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .polo-sec-tab-content {
    position: relative;
    width: 100%;
    height: 100%;

    .content-img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      top: 0;
      left: 0;
    }
  }

  .bs-content-top {
    display: flex;
    justify-content: end;

    .collab-sec {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: end;

      .collab-name {
        font-size: clamp(14px, calc(14px + (16px - 14px) * ((100vw - 768px) / (1992 - 768))), 16px);
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 10px;
        letter-spacing: 2px;
      }

    }
  }

  .bs-content-bottom {
    .content-title-sec {
      margin-bottom: 16px;

      .content-disc {
        font-size: clamp(14px, calc(0.875rem + (16px - 14px) * ((100vw - 768px) / (1992 - 768))), 16px);
      }
    }
  }

  @media(width <= 992px)
  {
    .flex-end-bottom 
    {
      justify-content: flex-start;
      align-items: flex-start;
    }
  }

  .polo-sec-thumbnails {
    display: flex;
    gap: 10px;
    position: relative;

    @media(width <= 1024px) {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      gap: 5px;
      justify-content: flex-start;
      scrollbar-width: none;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .polo-sec-thumb {
      position: relative;
      height: auto;
      width: 176px;
      flex-shrink: 0;
      background-color: transparent;
      border-radius: 0px;
      padding: 0px;
      overflow: hidden;
      border: 2px solid transparent;
      transition: 0.4s ease;
      cursor: pointer;

      @media(width <= 1024px) {
        scroll-snap-align: start;
        width: 166px;
      }

      @media(width <= 468px) {
        width: 146px;
      }

      &::after {
        content: "";
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.523) 0%, rgb(0 0 0 / 54%) 20%, rgba(0, 0, 0, 0) 100%);
      }

      &:hover {
        border: 2px solid #BDA371;

        .thumb-img {
          transform: scale(1.02);
        }
      }

      &.active {
        background-color: unset;
        border: 2px solid #BDA371;
        opacity: 1;
      }

      .img-caption {
        position: absolute;
        bottom: 10px;
        color: #fff;
        font-size: 0.75rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-shadow: 0 4px 4px rgba(0, 0, 0, 0.087);
        z-index: 1;
        text-align: center;
        width: 100%;
        margin-bottom: 0px;
        padding: 0 5px;
      }
    }
  }
}

.community-lifestyle-sec {
 @media(width <= 768px) {
    height: auto;
  }
  .bg
  {
    background-image: url('./../images/community-lifestyle/polo-grid-background.webp');
    background-position: center;
    padding: var(--section-space);

    @media(width <= 768px) {
      position: relative;
      height: auto;
      max-height: none;
      padding: var(--section-md-space);
    }
  }

  @media(width <=1440px) {
    /* height: 100%; */
    overflow: visible;
  }

  @media(width > 768px) {
    .township-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    .text-center {
      flex-shrink: 0;
    }
  }

  @media(width <= 768px) {
    .township-container {
     padding: 0px;
    }
  }

  .lifestyle-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;

    @media(height <= 700px) and (width > 1024px) {
      grid-template-rows: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, 1.25fr);
    }

    @media(width <=1440px) {
      gap: 10px;
    }

    @media(width > 768px) {
      /* flex: 1 1 auto; */
      min-height: 0;
    }

    .lifestyle-grid-1 {
      grid-area: 1 / 1 / 3 / 2;
    }

    .lifestyle-grid-2 {
      grid-area: 1 / 2 / 2 / 3;
    }

    .lifestyle-grid-3 {
      grid-area: 2 / 2 / 3 / 3;
    }

    .lifestyle-grid-4 {
      grid-area: 1 / 3 / 3 / 4;
    }

    .lifestyle-grid-5 {
      grid-area: 1 / 4 / 2 / 5;
    }

    .lifestyle-grid-6 {
      grid-area: 2 / 4 / 3 / 5;
    }

    .lifestyle-grid-7 {
      grid-area: 3 / 1 / 5 / 2;
    }

    .lifestyle-grid-8 {
      grid-area: 3 / 2 / 4 / 3;
    }

    .lifestyle-grid-9 {
      grid-area: 3 / 3 / 4 / 4;
    }

    .lifestyle-grid-10 {
      grid-area: 4 / 2 / 5 / 4;
    }

    .lifestyle-grid-11 {
      grid-area: 3 / 4 / 5 / 5;
    }

    .lifestyle-grid-12 {
      grid-area: 1 / 5 / 3 / 6;
    }

    .block-desk-grid
    {
      display: grid; 

      @media(width <= 1024px)
      {
        display: none !important;
      }
    }

    .block-1024-grid
    {
      display: none; 

      @media(width <= 1024px)
      {
        display: grid;
      }
    }

    @media(width <= 1024px)
    {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(5, minmax(0, 1fr));

      @media(width <= 992px)
      {
         grid-template-rows: minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 0.9fr);
      }

      .lifestyle-grid-1 { grid-area: 1 / 1 / 3 / 2; }
      .lifestyle-grid-2 { grid-area: 1 / 2 / 2 / 3; }
      .lifestyle-grid-3 { grid-area: 2 / 2 / 3 / 3; }
      .lifestyle-grid-4 { grid-area: 1 / 3 / 3 / 4; }
      .lifestyle-grid-5 { grid-area: 3 / 1 / 4 / 2; }
      .lifestyle-grid-6 { grid-area: 4 / 1 / 5 / 2; }
      .lifestyle-grid-7 { grid-area: 3 / 2 / 4 / 3; }
      .lifestyle-grid-8 { grid-area: 4 / 2 / 5 / 3; }
      .lifestyle-grid-9 { grid-area: 3 / 3 / 4 / 4; }
      .lifestyle-grid-12 { grid-area: 4 / 3 / 5 / 4; }
      .lifestyle-grid-11 { 
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        display: grid;
        gap: 10px;
        grid-area: 5 / 1 / 6 / 4; 

        @media(width <= 992px)
        {
          grid-template-rows: minmax(0, 0.9fr);
        }

        @media(width <= 768px)
        {
          grid-template-rows: minmax(0, 1fr);
        }
      }
    }

    @media(width <=468px) {
     grid-template-columns: repeat(2, 1fr);
    grid-template-rows: minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 0.5fr) auto;

      .lifestyle-grid-1 { grid-area: 1 / 1 / 3 / 2; }
      .lifestyle-grid-2 { grid-area: 1 / 2 / 2 / 3; }
      .lifestyle-grid-3 { grid-area: 2 / 2 / 3 / 3; }
      .lifestyle-grid-4 { grid-area: 3 / 1 / 4 / 2; }
      .lifestyle-grid-5 { grid-area: 3 / 2 / 4 / 3; }
      .lifestyle-grid-6 { grid-area: 4 / 1 / 5 / 2; }
      .lifestyle-grid-7 { grid-area: 4 / 2 / 5 / 3; }
      .lifestyle-grid-8 { grid-area: 5 / 1 / 7 / 2; }
      .lifestyle-grid-9 { grid-area: 5 / 2 / 6 / 3; }
      .lifestyle-grid-10 { grid-area: 6 / 2 / 7 / 3; }
      .lifestyle-grid-12 { grid-area: 6 / 2 / 7 / 3; }
      .lifestyle-grid-11 {
        grid-column: span 2;
        grid-area: 7 / 1 / 8 / 3; }

    }
  }

  .custom-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .custom-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    height: 100%;
    box-shadow: 0 3px 6px 0 #0000001A;

    &:hover {
      transform: scale(1.02);
    }

    &::after {
      content: "";
      width: 100%;
      height: 100px;
      position: absolute;
      bottom: 0;
      right: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.523) 0%, rgb(0 0 0 / 54%) 20%, rgba(0, 0, 0, 0) 100%);
    }

    .card-label {
      position: absolute;
      bottom: 15px;
      color: #fff;
      font-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 468px) / (1920 - 468))), 16px);
      letter-spacing: 1px;
      text-transform: uppercase;
      text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      z-index: 1;
      padding: 0px 10px;
    }
  }

  .text-box-card {
    background: rgba(255, 255, 255, 0.500);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 15px;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 3px 6px 0 #0000001A;
    overflow: hidden;
    padding: clamp(0.3rem, 2vh, 1.5rem) !important;

    h5 {
      font-size: clamp(0.8rem, 1.8vh, 1rem);
      font-weight: bold;
      color: #333;
      margin-bottom: clamp(2px, 1vh, 8px);
    }

    p {
      font-size: clamp(0.65rem, 1.7vh, 0.9rem);
      line-height: 1.2;
      margin-bottom: clamp(2px, 1vh, 8px);
    }

    .glass-btn {
      padding: clamp(6px, 1.5vh, 13px) clamp(16px, 3vh, 30px);

      @media(width <= 468px)
      {
         font-size: 9px;
      padding: 7px 12px;
      }
    }
  }

  .bg-light-taupe {
    background-color: #d7d1c6;
  }

}

.stables-sec {
  @media(width <= 768px) {
    height: auto;

   
  }
  .bg
  {
    background: url("./../images/stables/stable-bg.webp"), linear-gradient(to bottom, #c9bda6, #635d52);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;

    @media(width <= 768px) {
      position: relative;
      height: auto;
      max-height: none;
      padding: var(--section-md-space);
    }
  }

  @media(width <= 468px) {
    .container-fluid
    {
      padding: 0px;
    }
  }

  img {
    height: auto;
    transition: 0.4s ease;

    &:hover {
      transform: scale(1.02);
    }
  }

  .heading-sec {
    margin-bottom: 16px;
  }

  .left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;

    .stable-disc-para {
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 26px;
      color: #000000;

      @media(width <= 468px) {
        line-height: 22px;
        font-size: 14px;
      }
    }

    .stable-disc-extra {
      overflow: hidden;

      @media(width <= 768px) {
        max-height: 0;
        transition: max-height 0.4s ease;

        &.show {
          max-height: 500px;
        }
      }
    }

    .stable-read-more-btn {
      display: none;
      margin-top: 8px;
      padding: 0;
      border: none;
      background: none;
      color: #000000;
      font-size: 14px;
      font-weight: 600;
      text-decoration: underline;
      cursor: pointer;

      @media(width <= 768px) {
        display: inline-block;
        margin-bottom: 20px;
      }
    }
  }

}

.real-residences-sec {

  @media(width <= 992px)
  {
     .container-fluid
    {
      padding: 0px;
    }
  }

  .outer,.inner, .bg 
  {
    background-color: #000000;
  }

  .bg-img {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 5;
    max-width: 1024px;
    height: 308px;
    margin: 0 auto;
    background-color: #000000;

    @media(width <= 992px)
    {
      height: 216px;
    }
    @media(width <= 468px)
    {
      height: 116px;
      background-color: #000000;
    }
  }

  .full-text-overlay
  {
    position: absolute;
    inset: 0;
    width: 100%;
    text-align: center;
    z-index: 5;

    .text-overlay-inner
    {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      gap: 100px;
      height: 100%;

      @media(width <= 768px)
      {
        gap: 70px;
      }
      @media(width <= 468px)
      {
        gap: 50px;
      }

      .text-1
      {
        font-size: var(--primary-heading-sub-size);
        font-weight: 600;
        line-height: 1;

        @media(width <= 768px)
        {
          font-size: 12px;
        }
      }
    }
  }

  .overlay-wrapper {
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #000000;

    figure 
    {
      margin: 0px;
      padding: 0px;
    }

    .overlay-svg
    {
      background: #ffffff; 


      @media(width <= 992px)
      {
        transform: translate3d(0px, 0px, 0px) scale(8, 8) !important;
      }
       @media(width <= 468px)
      {
        transform: translate3d(0px, 0px, 0px) scale(5, 5) !important;
      }
    }
  }

  .real-residences-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .real-residebces-grid {
    background-color: #000000;
    z-index: 1;

    @media(width <= 1024px)
    {
      .row 
      {
        height: 100dvh;
      }
    }
  }

  @media(width <= 768px)
  {
    height: auto;

    .outer, .inner {
      height: auto;
      overflow: visible;
    }

    .bg {
      position: static;
      height: auto;
      overflow: visible;
    }

    .postion-relative {
      position: relative;
    }

    .real-residences-panel {
      position: relative;
      top: auto;
      left: auto;
      overflow: hidden;
    }

    .real-residebces-grid {
      height: auto;
      overflow: visible;

      /* &:before {
        content: "";
        z-index: 1;
        background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 29%);
        width: 100%;
        height: 167px;
        position: absolute;
        top: 0;
        right: 0;
    } */
    }
  }

  .card-details {
    position: relative;
    height: 100dvh;

    @media(width <= 992px)
    {
      height: 100%;
    }

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.071);
      z-index: 1;
      transition: 0.4s ease;

      @media(width <= 768px)
      {
        content: "";
        background: linear-gradient(#0000 0%, #000001 100%, #000000ad 100%);
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }

    &:hover::after 
     {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.445);
        z-index: 1;
      }

    .card-inner-details {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      padding: 16px;
      z-index: 2;
      transform: translate(0px, 0%);
      transition: 0.4s ease;

      @media(width <= 768px)
      {
        justify-content: end;
        transform: none;
      }

      .visible-content {
        .card-title {
          font-size: clamp(16px, calc(1rem + (20 - 16) * ((100vw - 1440px) / (1920 - 768))), 20px);
          font-weight: 700;
          text-transform: uppercase;
          margin-bottom: 0px;
          letter-spacing: 2px;
          text-align: center;
        }
      }

      .hide-content {
        opacity: 0;
        display: none;
        visibility: hidden;
        transition: 0.4s ease;

        @media(width <= 768px)
        {
          display: none;
        }

        .card-disc {
          font-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 768px) / (1920 - 768))), 16px);
          line-height: 1.2;
          text-align: center;
          letter-spacing: 1px;
        }
      }
    }

    &:hover .card-inner-details {
      transform: translate(0px, -2%);

      @media(width <= 768px)
        {
          transform: none;
        }
    }

    &:hover .card-inner-details .hide-content {
      opacity: 1;
      display: block;
      visibility: visible;

       @media(width <= 768px)
        {
          display: none;
          opacity: 0;
          visibility: hidden;
        }
    }
  }

}

.masterplan-sec {

  .bg {


    svg {
      display: block;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      object-fit: cover;
      object-position: center;
    }
  }
}

.branded-residences-sec {

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

  .br-part {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .br-part-1 {
    background-image: url('./../images/luxury-living-raipur-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    padding: 80px 40px 40px 40px;
  }

  .br-part-2 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: stretch;
    pointer-events: none;

    @media(width <= 992px)
    {
      flex-wrap: wrap;
    }
  }

  .br-part-2-left {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(0deg, #6180B6 0%, #24321B 100%);
    color: #fff;
    overflow: hidden;
    padding: var(--section-space);
    transform: translateX(-100%);
    will-change: transform;
    pointer-events: auto;
    

    @media(width <= 768px)
    {
      padding: 30px 16px;
    }

    .br-heading-text
    {
      font-size: clamp(22px, calc(1.375rem + (30 - 22) * ((100vw - 468px) / (1920 - 468))), 30px);
      font-weight: 300 !important;
    }

    .pinyon-script-font
    {
      font-size:clamp(34px, calc(2.125rem + (40 - 34) * ((100vw - 468px) / (1920 - 468))), 40px);
    }

    .heading-disc-text
    {
      font-weight: 300 !important;
    }

    .left-inner-content {
      max-width: 750px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 30px;
      height: 100%;
      transform: translateY(60px);
      opacity: 0;
      will-change: transform, opacity;

      @media(width <= 468px)
      {
        gap: 16px;
      }

      > p {
        line-height: 1.3;
      }

      .icon {
        height: auto;
        width: auto;
      }
    }
  }

  .br-part-2-right {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: clip-path;
    pointer-events: auto;

    .amenities-img-gallery {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      -webkit-clip-path: inset(100% 0 0 0);
      clip-path: inset(100% 0 0 0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      will-change: clip-path, transform;

      &:nth-child(1) {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1);
      }
    }
  }

  .br-part-3 {
    z-index: 4;
    background-image: url('./../images/city-facing.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 40px 40px 40px;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: clip-path;
  }

  @media (width <= 768px) {

    height: auto;

    .outer,
    .inner {
      height: auto;
      overflow: visible;
    }

    .bg {
      position: static;
      height: auto;
      overflow: visible;
    }

    .br-part {
      position: relative;
      inset: auto;
      height: 100dvh;
    }

    .br-part-2 {
      position: relative;
      height: auto;
      flex-direction: column;
      pointer-events: auto;
    }

    .br-part-2-left {
      flex: 0 0 auto;
      width: 100%;
      height: auto;
      transform: none;

      .left-inner-content {
        height: auto;
        transform: none;
        opacity: 1;
      }
    }

    .br-part-2-right {
      flex: 0 0 auto;
      display: flex;
      width: 100%;
      height: 100%;
      -webkit-clip-path: none;
      clip-path: none;

      .amenities-img-gallery {
        -webkit-clip-path: none !important;
        clip-path: none !important;
        position: unset;
        inset: unset;

      }
    }

    .br-part-3 {
      -webkit-clip-path: none;
      clip-path: none;
    }
  }
}

.scale-animation{
    transform-box: fill-box;
    transform-origin: center;
    animation: scale-pulse 1.6s ease-in-out infinite;
    outline: 0px;
}

@keyframes scale-pulse{
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

.custom-tooltip{
    --bs-tooltip-max-width: 650px;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-zindex: 99;
    z-index: var(--bs-tooltip-zindex);
}
.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}
 .custom-tooltip .tooltip-inner{
    background: transparent !important;
    padding: 0 !important;
    border: 0px !important;
    max-width: var(--bs-tooltip-max-width) !important;
    /* width: auto !important; */
    border-radius: 20px;
    overflow: hidden;
    opacity: 1;
}


.tooltip-card{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}
.tooltip-card img{
    width: auto;
    height: auto;
    /* min-height: 462px; */
    display: block;
}
.tooltip-position{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
.tooltop-content{
  color: #fff;
  background: #d9d9d916;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 10px 16px;
}
.tooltip-title{
  font-family: 'Figtree';
  font-size: var(--primary-heading-sub-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-align: left;
}
.tooltip-disc{
  font-family: 'Figtree';
  font-size: var(--primary-discription-size);
  line-height: 1.5;
  margin-bottom: 0;
  text-align: left;
}

.residences-scroll-sec {
  
  .bg 
  {
    background: top/100% 100% no-repeat, url('./../../assets/images/residences/residences-scroll-sketch.webp') top center/cover no-repeat;
    position: relative;
    padding: 80px 0px;

    @media(width <= 768px)
    {
      height: 100dvh;
    }

    @media(height <= 700px) {
     padding: 30px 0px;
    }
  }

  .sub-heading-text {
    font-size: clamp(18px, calc(1.125rem + (26 - 18) * ((100vw - 768px) / (1920 - 768))), 26px);
    text-transform: uppercase;
    margin-bottom: 16px;
  }

  .residences-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    height: 100%;

    @media(width <= 768px)
    {
      justify-content: center !important;
    }

    @media(height <= 700px) {
      justify-content: end;
  }

  .residences-slider-container {
    width: 100%;
    padding-left: 10%;
    margin: clamp(15px, calc(15px + 15 * ((100vw - 1440px) / (1920 - 1440))), 30px) 0px;

     @media(width <= 768px)
    {
      padding-left: 2%;
    }

    .slider-track {
      display: flex;
      gap: 15px;
      will-change: transform;
      padding-right: 10px;

      @media(width <= 768px)
      {
        overflow-x: scroll;
         scrollbar-width: none; 

         &::-webkit-scrollbar {
          display: none; 
        }
      }
    }
  }


  .residences-slide-card {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;

    @media(width <= 768px)
    {
        flex: 0 0 55%;
        height: auto;
    }

     @media(width <= 468px)
    {
        flex: 0 0 85%;
    }

    img {
      height: 50vh;

      @media(width <= 992px)
      {
        height: 30vh;
      }

      @media (width <= 768px) {
        height: 44vh;
      }

      @media (width <= 468px) {
        height: 32vh;
      }
    }

    .residences-label {
      position: absolute;
      bottom: 20px;
      width: 100%;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 3px;
      text-align: center;
      font-size: clamp(20px, calc(1.25rem + (28 - 20) * ((100vw - 768px) / (1920 - 768))), 28px);
    }
  }

  @media (width <= 768px) {
    .residences-slide-card {
      flex: 0 0 85%;
    }
  }
  }
}

.iconic-villas-sec {

  .iconic-hero,
  .iconic-zones,
  .iconic-showcase {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: clip-path;
  }
  .iconic-hero    > .fold-inner,
  .iconic-zones   > .fold-inner,
  .iconic-showcase > .fold-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
  }
  .iconic-hero     { z-index: 1; }
  .iconic-zones    {
    z-index: 2;
    background: linear-gradient(360deg,#1A2E3B 0%,#162D24 100%);
   
    .fold-inner
    {
       padding: 5vh 0vw 0vh 0vw;

       @media(width <= 2240px) { padding: 6vh 0vw 0vh 0vw; }
      @media(width <= 1920px) { padding: 9vh 0vw 0vh 0vw; }
    }
    
  }
  .iconic-showcase {
    z-index: 3;

    .fold-inner
    {
      &::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(180deg, #00000038 16.44%, rgb(0 0 0 / 0%) 25.21%);
        z-index: 2;
      }
    }
  }

  /* HERO ------------------------------------------------------------- */
  .iconic-hero {
    @media(width <= 992px)
    {
      .column-reverse 
      {
        flex-direction: column-reverse;
      }
    }
    .iconic-villas-wrap {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    .iconic-villas-tab-content {
      position: relative;
      width: 100%;
      height: 100%;

      .villas-img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        left: 0;
      }
    }

    .bs-content-bottom {
      z-index: 1;

      .content-title-sec {
        margin-bottom: 16px;

        .content-disc {
          font-size: clamp(14px, calc(0.875rem + (16px - 14px) * ((100vw - 768px) / (1992 - 768))), 16px);
        }
      }

      &::after {
        content: "";
        width: 100%;
        height: 250px;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.642) 0%, rgba(0, 0, 0, 0.705) 20%, rgba(0, 0, 0, 0) 100%);
      }
    }

    .iconic-villas-thumbnails {
      display: flex;
      gap: 10px;
      position: relative;

      @media (width <= 468px) {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        &::-webkit-scrollbar { display: none; }
      }

      .iconic-villas-thumb {
        position: relative;
        height: auto;
        width: 220px;
        background-color: transparent;
        border-radius: 0px;
        padding: 0px;
        overflow: hidden;
        border: 2px solid transparent;
        transition: 0.4s ease;
        cursor: pointer;

        @media (width <= 468px) {
          flex: 0 0 auto;
          width: 150px;
        }

        .thumb-img {
          transition: 0.4s ease;
        }

        &::after {
          content: "";
          width: 100%;
          height: 50px;
          position: absolute;
          bottom: 0;
          right: 0;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.523) 0%, rgb(0 0 0 / 54%) 20%, rgba(0, 0, 0, 0) 100%);
        }

        &:hover {
          border: 2px solid #BDA371;

          .thumb-img {
            transform: scale(1.02);
          }
        }

        &.active {
          background-color: unset;
          border: 2px solid #BDA371;
        }

        .img-caption {
          position: absolute;
          bottom: 10px;
          color: #fff;
          font-size: 0.75rem;
          letter-spacing: 1px;
          text-transform: uppercase;
          text-shadow: 0 4px 4px rgba(0, 0, 0, 0.087);
          z-index: 1;
          text-align: center;
          width: 100%;
          margin-bottom: 0px;
        }
      }
    }
  }

  /* ZONES ------------------------------------------------------------ */
  .iconic-zones {
    .stage {
      position: relative;
      height: 100%;
      width: 100%;
    }

    .sticky-map {
      position: relative;
      top: 0;
      height: 100%;
      width: 100%;
      display: flex;
      overflow: hidden;
    }

    .map-pane {
      flex: 1 1 98%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 0;
      position: relative;

      @media(width <= 2240px) { flex: 1 1 19%; }
      @media(width <= 1920px) { flex: 1 1 45%; }
    }

    .info-pane {
      flex: 1 1 65%;
      padding: 7vh 6vw;
      min-width: 0;
      min-height: 0;

      @media(width <= 2240px) { flex: 1 1 10%; }
      @media(width <= 1920px) {
        flex: 1 1 40%;
        padding: 1vh 3vw;
      }

      .info-panel-inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        .info-top {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;

          .villa-title-wrapper {
            display: flex;
            gap: 25px;
            align-items: center;

            .number {
              font-size: clamp(70px, calc(4.375rem + (148 - 70) * ((100vw - 768px) / (1920 - 768))), 148px);
            }
            .zone-villa-title {
              font-size: 30px;
              font-weight: 600;
            }
            .measurements {
              font-size: 20px;
              line-height: 1.5;
            }
          }
          .info-bottom {
            .zone-villa-desc {
              font-family: var(--primary-discription-size);
              line-height: 20px;
              max-width: 500px;
            }
          }
        }
      }
    }

    .map-svg {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      position: relative;
      z-index: 1;

      & .zone-outline {
        fill: none;
        stroke: var(--gold-color);
        stroke-width: 1.5;
        stroke-linejoin: round;
        pointer-events: none;
      }

      & .boundary {
        fill: none;
        stroke: rgba(212,173,104,0.18);
        stroke-width: 1;
        stroke-dasharray: 4 6;
      }

      & .zone-preview {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        clip-path: inset(0 round 20px);
      }
      & .zone-preview.is-hover {
        opacity: 1;
      }

      & .zone-hit {
        fill: transparent;
        stroke: transparent;
        pointer-events: all;
      }
      & .zone-hit.is-active {
        cursor: pointer;
      }
    }

    .label-overlay {
      position: relative;
      z-index: 2;
      max-width: 480px;
      pointer-events: none;

      & .zone-num {
        font-family: 'Pinyon Script', cursive;
        color: var(--gold-color);
        font-size: 1.6rem;
        letter-spacing: 0.04em;
      }

      & .zone-title {
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        color: var(--white);
        font-size: clamp(1.5rem, 2.6vw, 2.2rem);
        letter-spacing: -0.01em;
        line-height: 1.15;
        margin: 0.2rem 0 0.6rem;
      }

      & .zone-sub {
        color: var(--gold-color);
        font-size: 16px;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        margin-bottom: 1rem;
      }

      & .zone-blurb {
        color: #c8c8c8;
        font-size: 0.95rem;
        line-height: 1.6;
      }
    }

    .zone-indicator {
      position: absolute;
      z-index: 2;
      align-self: flex-end;
      font-weight: 500;
      font-size: var(--primary-heading-size);
      color: #ffffff3d;
      letter-spacing: 0.04em;
      line-height: 1;
      pointer-events: none;
      text-align: right;
      text-transform: uppercase;
      width: 100%;
      margin-right: 60px;
      margin-bottom: 20px;
    }

    @media (width <= 900px) {
      .sticky-map { flex-direction: column; }
      .map-pane {
        flex: 1 1 55%;
        min-height: 0;
        padding: 3vh 4vw 1vh;
      }
      .info-pane {
        flex: 1 1 45%;
        min-height: 0;
        padding: 2vh 6vw 4vh;
      }
      .label-overlay { max-width: none; }
      .map-svg {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

  /* SHOWCASE --------------------------------------------------------- */
  .iconic-showcase {
    .bg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      z-index: 1;
    }
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(360deg, #00000028 10.44%, rgb(0 0 0 / 0%) 24.21%);
      z-index: 2;
    }

    .bs-content {
      z-index: unset;

      .bs-content-bottom {
        z-index: 5;
      }
    }

    .villa-showcase-vertical {
      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100%;
      z-index: 3;
      padding: 0px 40px;

      &::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(90deg, #00000028 10.44%, rgb(0 0 0 / 0%) 24.21%);
        z-index: 2;
      }

      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(270deg, #00000028 10.44%, rgb(0 0 0 / 0%) 24.21%);
        z-index: 2;
      }

      .vertical-left,
      .vertical-right {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        z-index: 3;
      }
      .vertical-left {
        align-items: flex-start;
        max-width: 250px;
        gap: 16px;

        .key-feature-disc {
          font-size: 14px;
          line-height: 1.1;
          margin-bottom: 0px;
        }
        .feature-icon {
          width: 70px;
          height: 70px;
        }
      }
      .vertical-right {
        align-items: flex-end;
        max-width: 400px;
        padding-right: 30px;
        gap: 30px;
      }
    }

    .villa-zone-nav {
      position: absolute;
      top: 100px;
      width: 100%;
      z-index: 5;
    }
    .villa-sub-tabs {
      margin-bottom: 16px;
    }
    .villas-thumbnail-grid {
      .villas-thumb-item {
        border: 2px solid transparent;
        cursor: pointer;
        overflow: hidden;
        width: 150px;
        height: 100px;

        &.active {
          border-color: var(--gold-color);
        }

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

  @media (max-width: 768px) {
    height: auto;

    .outer,
    .inner {
      height: auto;
      overflow: visible;
    }
    .bg {
      position: static;
      height: auto;
      overflow: visible;
    }

    .iconic-hero,
    .iconic-zones,
    .iconic-showcase {
      position: relative !important;
      clip-path: none !important;
      pointer-events: auto !important;
      width: 100%;
      height: 100vh;
      height: 100dvh;
    }
    .iconic-hero    > .fold-inner,
    .iconic-zones   > .fold-inner,
    .iconic-showcase > .fold-inner {
      position: relative !important;
      transform: none !important;
      width: 100%;
      height: 100%;
    }
  }
}

.work-place-sec {

  .work-space-hero,
  .private-office-sec {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: clip-path;
  }
  .work-space-hero    > .fold-inner,
  .private-office-sec > .fold-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
  }

  /* HERO ------------------------------------------------------------- */
  .work-space-hero {
    z-index: 1;
    background: top/100% 100% no-repeat, url('./../../assets/images/work-space/raipur-privaate-offices.webp') top center/cover no-repeat;

    .fold-inner 
    {
      z-index: 4;
    }

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      right: 0;
      background: linear-gradient(360deg, #000000 2.44%, rgb(0 0 0 / 0%) 25.21%);
      z-index: 2;
    }

    .work-place-wrap {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    .work-place-tab-content {
      position: relative;
      width: 100%;
      height: 100%;

      .work-img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        left: 0;
      }
    }

    .bs-banner-bottom {
      z-index: 3;
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }

  /* PRIVATE OFFICE --------------------------------------------------- */
  .private-office-sec {
    z-index: 2;
    background: linear-gradient(360deg, #756D60 0%,#686256 100%);
    
    overflow: auto;

    .fold-inner 
    {
      padding: 80px 40px 40px 40px;
      height: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
    }

    .office-heading {
      display: flex;
      flex-direction: column;
      gap: clamp(20px, calc(1.25rem + (40 - 20) * ((100vw - 768px) / (1920 - 768))), 40px);

      .heading-disc-text.primary-font-light,
      .heading-disc-text.fw-bold {
        font-size: clamp(16px, calc(1rem + (18 - 16) * ((100vw - 1365px) / (1920 - 1365))), 18px);
      }
    }

    .icon-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0px;
      margin: clamp(10px, calc(0.625rem + (50 - 10) * ((100vw - 1440px) / (1920 - 1440))), 50px) 0px;
      justify-content: center;

      @media(width <= 768px) { gap: 10px; }

      .icon-grid-col {
        flex: 0 0 8%;

        @media(width <= 1440px) { flex: 0 0 10%; }

        @media(width <= 992px) { flex: 0 0 18%; }

        @media(width <= 468px) { flex: 0 0 30%; }
      }

      .col-title {
        text-align: center;
      }
    }

    .office-image-gallery {
      position: relative;

      .col-wrapper {
        position: relative;

        &::after {
          content: "";
          width: 100%;
          height: 50px;
          position: absolute;
          bottom: 0;
          right: 0;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.523) 0%, rgb(0 0 0 / 54%) 20%, rgba(0, 0, 0, 0) 100%);
        }
      }

      .gallery-title {
        position: absolute;
        bottom: 10px;
        color: #fff;
        font-size: 0.85rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        z-index: 1;
        text-align: center;
        width: 100%;
        margin-bottom: 0px;
        padding: 0 10px;
      }
    }
  }

  @media (max-width: 768px) {
    height: auto;

    .outer,
    .inner {
      height: auto;
      overflow: visible;
    }
    .bg {
      position: static;
      height: auto;
      overflow: visible;
    }

    .bs-banner-bottom
    {
      padding: var(--section-space);
      inset: 0 !important;
    }

    .mobile-flex
    {
      justify-content: space-between;
      align-items: center !important;
      flex-direction: column;
      height: 100%;
    }

    .work-space-hero,
    .private-office-sec {
      position: relative !important;
      clip-path: none !important;
      pointer-events: auto !important;
      width: 100%;
    }
    .work-space-hero {
      height: 100vh;
      height: 100dvh;

      &::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background: linear-gradient(180deg, #000000 2.44%, rgb(0 0 0 / 0%) 33.21%);
            z-index: 2;
        }
    }
    .private-office-sec {
      height: auto;
    }
    .work-space-hero    > .fold-inner,
    .private-office-sec > .fold-inner {
      position: relative !important;
      transform: none !important;
      width: 100%;
    }
    .work-space-hero > .fold-inner {
      height: 100%;

    }
    .private-office-sec > .fold-inner {
      height: auto;
      max-height: none;
      padding: var(--section-md-space);
    }
  }
}

.design-district-sec {

  .design-district-hero,
  .design-district-sec2 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: clip-path;
  }
  .design-district-hero > .fold-inner,
  .design-district-sec2 > .fold-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
  }

  .design-district-hero {
    z-index: 1;
    background: linear-gradient(0deg, #000000 0%, #24321B 70%);
    

    .fold-inner 
    {
      padding: 80px 40px 40px 40px;

      @media(width <= 768px)
      {
        padding: var(--section-space);
      }
    }

    .dd-flex
    {
      display: flex;
      gap: 10px;
      height: 100%;

      @media(width <= 992px)
      {
        flex-direction: column-reverse;
        height: auto;
      }
    }

    .design-district-left {
      width: 50%;
      color: #fff;
      overflow: hidden;
      border: 2px solid #BDA371;

      @media(width <= 992px)
      {
         width: 100%;
         height: 50vh;
      }

      .image-gallery-wrapper {
        width: 100%;
        height: 100%;
        position: relative;

        .dd-img-gallery {
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;
          -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
          -webkit-transform: translateZ(0);
          transform: translateZ(0);

          &:nth-child(1) {
            -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1);
          }
        }
      }
    }

    .design-district-right {
      width: 50%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      height: 100%;
      margin-left: 16px;
      text-align: end;

       @media(width <= 992px)
      {
         width: 100%;
         text-align: center;
         align-items: center;
         margin-left: 0px;
      }

      .right-inner-content
      {
        padding-right: 16px;

         @media(width <= 992px)
          {
           padding-right: 0px;
           margin-bottom: 16px;
          }
      }

      @media (width <= 992px) {
        .text-end {
          text-align: center !important;
        }
      }
      > .overflow-hidden {
        @media (width <= 1280px) {
          width: 100%;
          max-width: 100%;
        }
      }
    }

    .design-district-thumbnails {
      display: flex;
      gap: min(max(5px, calc(0.3125rem + (10 - 5) * ((100vw - 1365px) / (1920 - 1365)))), 10px);
      position: relative;

      @media (width <= 1280px) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        &::-webkit-scrollbar { display: none; }
      }

      .design-district-thumb {
        position: relative;
        height: auto;
        width: min(max(110px, calc(6.875rem + (150 - 110) * ((100vw - 1365px) / (1920 - 1365)))), 150px);
        background-color: transparent;
        border-radius: 0px;
        padding: 0px;
        overflow: hidden;
        border: 2px solid transparent;
        transition: 0.4s ease;
        cursor: pointer;
        opacity: 0.8;

        @media (width <= 1280px) {
          flex: 0 0 auto;
        }
        @media (width <= 1280px) {
          flex: 0 0 140px;
        }

        &::after {
          content: "";
          width: 100%;
          height: 50px;
          position: absolute;
          bottom: 0;
          right: 0;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.523) 0%, rgb(0 0 0 / 54%) 20%, rgba(0, 0, 0, 0) 100%);
        }

        &:hover {
          border: 2px solid #BDA371;

          .thumb-img {
            transform: scale(1.02);
          }
        }

        &.active {
          background-color: unset;
          border: 2px solid #BDA371;
          opacity: 1;
        }

        .img-caption {
          position: absolute;
          bottom: 10px;
          color: #fff;
          font-size: 0.75rem;
          letter-spacing: 1px;
          text-transform: uppercase;
          text-shadow: 0 4px 4px rgba(0, 0, 0, 0.087);
          z-index: 1;
          text-align: center;
          width: 100%;
          margin-bottom: 0px;
          padding: 0 10px;
        }
      }
    }
  }

  .design-district-sec2 {
    z-index: 2;
    
    background-color: #000;
    overflow: auto;

    .fold-inner
    {
      padding: 80px 0 0 0;

      @media(width <= 768px)
      {
        padding: var(--section-space);
      }
    }

    .ticker-section {
      margin-top: 0px;
      overflow: hidden;
      width: 100%;

      .brand-heading {
        font-size: 18px;
        margin: 10px 0px 5px 0px;
        font-style: italic;
      }

      .ticker-wrap {
        display: flex;
        width: 200%;

        .ticker-list {
          display: flex;
          margin: 0;
          padding: 0;
          list-style: none;

          li {
            color: #fff;
            text-transform: capitalize;
            padding: 0px 10px 20px 10px;
            white-space: nowrap;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 170px;
            position: relative;

            &:after {
              content: "";
              position: absolute;
              inset: 0;
              width: 1px;
              height: 50px;
              background-color: #ffffff;
              transform: translate(0px, 50%);
            }

            img {
              width: 100%;
            }
          }
        }
      }
    }

    @media(width <=468px) {
      .ticker-section .ticker-wrap .ticker-list li:after {
        transform: translate(0px, 20%);
      }
    }

    @media (max-width: 468px) {
      .ticker-section .ticker-wrap .ticker-list li {
        width: 110px !important;
      }
    }

    .dd-cards {
      padding: 0px clamp(1px, calc(0.0625rem + (40 - 1) * ((100vw - 1280px) / (1920 - 1280))), 40px);


      .dd-cards-flex
      {
        display: flex;
        gap: 16px;

        .dd-cards-flex-inner
        {
          width: calc(33.33% - 16px);
        }

        @media(width <= 1024px)
        {
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -ms-overflow-style: none;

          &::-webkit-scrollbar {
            display: none;
          }

          .dd-cards-flex-inner
          {
            width: clamp(285px, calc(285px + (299 - 285) * ((100vw - 468px) / (1024 - 468))), 299px);
            flex-shrink: 0;
            scroll-snap-align: start;
          }
        }
      }

      .hover-on-anchore {
        position: relative;
        cursor: pointer;

        &::after {
          content: "";
          width: 100%;
          height: 150px;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.642) 0%, rgba(0, 0, 0, 0.705) 20%, rgba(0, 0, 0, 0) 100%);
        }

        &:hover .hover-subtitles {
          opacity: 1;
          visibility: visible;
          top: clamp(55px, calc(3.4375rem + (76 - 55) * ((100vw - 468px) / (1920 - 468))), 76px);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .hover-subtitles {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          width: 90%;
          opacity: 0;
          visibility: hidden;
          transition: 0.3s ease;
          color: #fff;
          height: auto;
          margin: 0 auto;
          padding: 20px;

          @media(width <= 1440px)
          {
            padding: 10px;
          }

          .anchore-para
          {
            font-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 768px) / (1920 - 768))), 16px);
          }
        }

        .card-data {
          padding: 10px;
          position: absolute;
          top: 10px;
          z-index: 2;
          width: 100%;
          text-align: center;

          .card-data-title {
            font-size: clamp(14px, calc(0.875rem + (18 - 14) * ((100vw - 768px) / (1920 - 768))), 18px);
            font-weight: 600;
            letter-spacing: 1px;
          }
        }
      }

      .grid-item-video {
        width: 100%;
        height: 100%;
      }
    }
  }

  @media (max-width: 768px) {
    height: auto;

    .outer,
    .inner {
      height: auto;
      overflow: visible;
    }
    .bg {
      position: static;
      height: auto;
      overflow: visible;
    }

    .design-district-hero,
    .design-district-sec2 {
      position: relative !important;
      clip-path: none !important;
      pointer-events: auto !important;
      width: 100%;
    }
    .design-district-hero {
      height: auto;
    }
    .design-district-sec2 {
      height: auto;
    }
    .design-district-hero  > .fold-inner,
    .design-district-sec2 > .fold-inner {
      position: relative !important;
      transform: none !important;
      width: 100%;
    }
    .design-district-hero > .fold-inner {
      height: 100%;
    }
    .design-district-sec2 > .fold-inner {
      height: auto;
    }
  }
}

.gastronomy-sec
{
  .bg
  {
    &::before
    {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(180deg, #000000 2.44%, rgb(0 0 0 / 0%) 35.21%);
      z-index: 5;
    }

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      right: 0;
      background: linear-gradient(360deg, #000000 2.44%, rgb(0 0 0 / 0%) 25.21%);
      z-index: 5;

      @media(width <= 468px)
      {
        background: linear-gradient(360deg, #000000 8.44%, rgb(0 0 0 / 0%) 37.21%);
      }
    }
  }
  .gastronomy-inner
  {
    .bs-content 
  {
    padding: 80px 40px 40px 40px;
    z-index: 6;
    @media(width <= 768px)
    {
      padding: var(--section-md-space);
    }
  }

  .gastronomy-tab-content {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: none;

    &.active {
      display: block;
    }
  }

  .gallery-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .gastronomy-gallery {
      position: relative;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;

      .gallery-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-clip-path: inset(0% 0% 0% 100%);
        clip-path: inset(0% 0% 0% 100%);
        will-change: clip-path, transform, filter;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }
    }
  }

  .thumbnails {
      position: fixed;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 1000;

      @media(width <= 468px)
      {
        position: static;
        transform: none;
        flex-direction: row;
        gap: 5px;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 10px;

        &::-webkit-scrollbar { display: none; }

        .gastronomy-thumbnail-img {
          flex-shrink: 0;
        }
      }

      .gastronomy-thumbnail-img {
        width: min(max(120px, calc(7.5rem + (150 - 120) * ((100vw - 992px) / (1920 - 992)))), 150px);
        height: min(max(80px, calc(5rem + (100 - 80) * ((100vw - 992px) / (1920 - 992)))), 100px);
        object-fit: cover;
        cursor: pointer;
        transition: 0.4s ease;
        position: relative;
        border: transparent;

        &:hover {
          border: 2px solid #BDA371;
          transform: scale(1.02);
        }

        &.active {
          border: 2px solid #BDA371;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
    }
  }

  .gastronomy-tab-bottom
  {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    bottom: 100px;
    left: 40px;
    z-index: 10;
    max-width: 900px;

    @media(width <= 768px)
    {
      left: 0px;
      padding: 0px 16px;
      width: 100%;
      bottom: 80px;
      
    }

    .brand-logo
    {
      height: auto;
      width: auto;
      @media(width <= 468px)
      {
        width: 80px !important;
        margin-bottom: 10px;
      }
    }

    .year-estd
    {
      font-size: 12px;
    }

    .cuisine-type
    {
      font-size: 20px;
      margin-bottom: 5px;
      color: #BDA371;
      font-weight: 600;
    }
    
    .resto-disc
    {
      font-size: var(--primary-discription-size);
      line-height: 1.5;
      margin-bottom: 0px;

      @media(width <= 468px)
      {
        line-height: 1.2;
      }
    }
  }

  .gastronomy-menus
  {
    display: flex;
    gap: 60px;

    @media(width <= 468px)
      {
        gap: 20px;
      }

    .gastronomy-items
    {
      font-size: var(--primary-heading-sub-size);
      font-weight: 600;
      letter-spacing: 1.2px;
      color: #ffffff;
      transition: 0.4s ease;
      cursor: pointer;

      @media(width <= 468px)
      {
        font-size: 14px;
      }

      &.active 
      {
        color: #BDA371;
        text-decoration: underline;
        text-underline-position: under;
        text-underline-offset: 10px;
      }

      &:hover
      {
        color: #BDA371;
        text-decoration: underline;
        text-underline-position: under;
        text-underline-offset: 10px;
      }
    }
  }
}

.wellness-sec {

  .bg
  {
    background-color: #000;
    padding: 80px 40px 40px 80px;

    @media(width <= 1024px)
    {
      padding: var(--section-md-space);;
    }
  }

  .wellness-left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 100%;

    .wellness-disc {
      font-size: 16px;
      line-height: 28px;
    }
  }

  .wellness-right-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    @media(width <= 992px)
    {
      height: auto;
      margin-top: 120px;
    }

    @media(width <= 768px)
    {
      margin-top: 20px;
    }

    .therapies-card {
      position: absolute;

      .therapies-card-content {
        position: relative;
        overflow: hidden;

        .therapies-details {
          position: absolute;
          bottom: -3px;
          padding: 10px;
          border-radius: 20px 20px 0px 0px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), all 0.3s ease;
          background-color: rgba(255, 255, 255, 0.07);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          box-shadow:
            inset 0 0 0 1px color-mix(in srgb, #fff calc(1 * 10%), transparent),
            inset 1.8px 3px 0px -2px color-mix(in srgb, #fff calc(1 * 90%), transparent),
            inset -2px -2px 0px -2px color-mix(in srgb, #fff calc(1 * 80%), transparent),
            inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(1 * 60%), transparent),
            inset -0.3px -1px 4px 0px color-mix(in srgb, #000 calc(1 * 12%), transparent),
            inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 calc(1 * 20%), transparent),
            inset 0px 3px 4px -2px color-mix(in srgb, #000 calc(1 * 20%), transparent),
            inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(1 * 10%), transparent),
            0px 1px 5px 0px color-mix(in srgb, #000 calc(1 * 10%), transparent),
            0px 6px 16px 0px color-mix(in srgb, #000 calc(1 * 8%), transparent);
          border: 0;
          width: 100%;

          @media(width <= 468px)
          {
            gap: 5px;
          }

          .therapies-name {
            font-size: var(--primary-heading-sub-size);
            color: var(--primary-color);
            margin-bottom: 0px;

              @media(width <= 468px)
              {
                font-size: 14px;
              }
          }

          .therapies-disc {
            margin-bottom: 0px;

            @media(width <= 468px)
            {
              font-size: 14px
            }
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    height: auto;

    .outer, .inner {
      height: auto;
      overflow: visible;
    }

    .bg {
      position: relative;
      height: auto;
    }

    .row.h-100 {
      height: auto !important;
    }

    .wellness-right-content {
      height: auto;
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-start;
      gap: 16px;
      padding: 24px 20px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }

      .therapies-card {
        position: relative;
        flex: 0 0 82%;
        max-width: 340px;
        scroll-snap-align: start;
      }
    }
  }
}

.township-amenities-sec {
  .bg {
    background: linear-gradient(180deg, #8D7766 0%, #202020 100%);
    padding: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .amenities-heading-wrap {
    flex: 0 0 auto;
    padding: 80px 40px 40px;
    text-align: center;
    will-change: transform, opacity;

    @media(width <= 768px)
    {
      padding: var(--section-md-space);
    }
  }

  .amenities-grid-wrap {
    flex: 1 1 auto;
    padding: 0 clamp(16px, calc(1rem + (40 - 16) * ((100vw - 768px) / (1920 - 768))), 40px);
    position: relative;
    min-height: 0;

    &::after {
      content: "";
      width: 100%;
      height: 150px;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 4;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.842) 0%, rgb(0 0 0 / 79%) 0%, rgba(0, 0, 0, 0) 18%);
      pointer-events: none;
    }
  }

  .amenities-grid-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: start;

    @media(width <= 1024px)
    {
      grid-template-columns: repeat(4, 1fr);
    }
     @media(width <= 992px)
    {
      grid-template-columns: repeat(3, 1fr);
    }
    @media(width <= 468px)
    {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .grid-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    will-change: transform;
    backface-visibility: hidden;
  }

  .grid-col-1, .grid-col-3, .grid-col-5
  {
    margin-top: 40px;
  }
  .amenities-grid-inner > .amenity-item:nth-child(2n) {
    margin-top: 40px;

    @media(width <= 768px)
    {
      margin-top: 0px;
    }
  }

  .amenity-item {
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      width: 100%;
      height: 150px;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.642) 0%, rgba(0, 0, 0, 0.705) 30%, rgba(0, 0, 0, 0) 100%);
      pointer-events: none;
    }

    .amenities-title {
      position: absolute;
      bottom: 15px;
      width: 100%;
      text-align: center;
      padding: 10px;
      font-size: var(--primary-discription-size);
      z-index: 2;
    }
  }

  @media (max-width: 768px) {
    height: auto;

    .outer, .inner {
      height: auto;
      overflow: visible;
    }

    .bg {
      position: relative;
      height: auto;
      overflow: visible;
    }

    .amenities-grid-wrap {
      overflow: visible;
    }
  }
}


.senior-living-sec {
  .bg 
  {
    background-image: url('./../images/senior-living-hub.webp');
    background-position: center;
    width: 100%;
    background-size: cover;
    padding: 80px 40px 40px 40px;

    &::before
    {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(180deg, #000000 2.44%, rgb(0 0 0 / 0%) 35.21%);
      z-index: 3;
    }

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      right: 0;
      background: linear-gradient(360deg, #000000 2.44%, rgb(0 0 0 / 0%) 25.21%);
      z-index: 2;
    }
  }

  .senior-heading {
    z-index: 2;
    position: relative;
  }
}

.green-blue-zone {
  
  .bg 
  {
    padding: var(--section-space);
    transition: background-color 0.3s linear;
    overflow: hidden;

    /* @media(width <= 768px)
    {
      padding: var(--section-md-space);
    } */
  }

   .zone-video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      opacity: 0;
     transition: opacity 0.8s ease, transform 1.5s ease;
      will-change: opacity, transform;
      z-index: -2;

      &.active {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.03);
      }

  }

  .video-overlay {
   position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.306) 0%, rgba(0,0,0,0.306) 100% );
    z-index: -1;
  }

  .content {
    position: relative;
    z-index: 5;
    height: 100%;
  }
  

  .zone-wrapper {
    display: flex;
    height: 100%;

    @media(width <= 768px)
    {
      gap: 25px;
    }
  }

  .left-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 65%;

    @media(width <= 992px)
    {
       width: 50%;
    }

    @media(width <= 768px)
    {
       gap: 30px;
    }
  }

  .right-content {
    position: relative;
    width: 35%;
    height: 100%;

    @media(width <= 992px)
    {
       width: 50%;
    }

    .zone-card {
      position: absolute;
      width: 100%;
      top: 0;
      overflow: hidden;

      .inner-card-details {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: clamp(10px, calc(0.625rem + (20 - 10) * ((100vw - 768px) / (1920 - 768))), 20px);
      }

      .inner-card-title {
        .card-no {
          font-size: clamp(40px, calc(2.5rem + (120 - 40) * ((100vw - 768px) / (1920 - 768))), 120px);
          margin-bottom: 10px;
        }

        .card-title {
          font-size: var(--primary-heading-sub-size);
          margin-bottom: 0px;

          @media(width <= 768px)
          {
             font-size: var(--primary-heading-sub-md-size);
          }
        }
      }
    }

    .tab-panel {
      position: absolute;
      width: 100%;
      top: 0;
      display: none;

      &.active {
        display: block;
      }

      &:not(.active) {
        visibility: hidden;
        pointer-events: none;
      }
    }

    #blue-zone {
      .zone-card {
        .inner-card-details {}
      }
    }
  }

  .ripple-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
  }

  @media (max-width: 768px) {
    .outer, .inner {
      /* height: auto; */
      overflow: visible;
    }

    .bg {
      position: relative;
      /* height: auto; */
    }

    .zone-wrapper {
      flex-wrap: wrap;
      height: auto;
    }

    .left-content,
    .right-content {
      width: 100%;
      height: auto;
    }

    .right-content {
      margin-top: 24px;

      .tab-panel {
        display: none;
        position: relative;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;

        &.active {
          display: flex;
        }

        &::-webkit-scrollbar {
          display: none;
        }
      }

      .zone-card {
        position: relative;
        width: auto;
        flex: 0 0 42%;
        scroll-snap-align: start;

        @media (max-width: 480px) {
          flex: 0 0 80%;
        }
      }
    }
  }
}

.selutogenic-sec {

  @media(width <= 468px)
  {
    height: auto;
  }

  .outer,
  .inner
  {
    @media(width <= 468px)
    {
      height: auto;
      overflow: visible;
    }
  }

  .bg
  {
    background-image: url('./../images/salutogenic.webp');
    background-position: center;
    width: 100%;
    background-size: cover;
    padding: 80px 40px 40px 40px;

    @media(width <= 992px)
    {
      padding: var(--section-md-space);
    }

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background: #171515;
      background:linear-gradient(90deg, rgba(23, 21, 21, 0.90) 32%, rgba(0, 0, 0, 0) 100%);
      z-index: -1;

      @media(width <= 992px)
      {
        background:linear-gradient(90deg, rgb(23 21 21 / 65%) 100%, rgb(0 0 0 / 0%) 100%);
      }
    }

    

    @media(width <= 468px)
    {
      position: relative;
      height: auto;
    }
  }
}

.selutogenic-content 
{
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  height: 100%;

  .selutogenic-disc {
    font-size: var(--primary-discription-size);
    line-height: 1.5;
  }

  .box-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    .box {
      svg 
      {
        width: 100%;
        height: 100%;
      }
    }

    .box-title {
      font-size: var(--primary-heading-sub-size);
      color: #fff;
      margin: 0 0 5px 0;
    }

    p {
      color: #cbcbcb;
      font-size: var(--primary-discription-size);
      line-height: 1.5;
      margin: 0;
    }
  }
}

.visionary-collab-sec
{
  @media(width <= 768px)
  {
    height: auto;
  }

  .outer,
  .inner
  {
    @media(width <= 768px)
    {
      height: auto;
      overflow: visible;
    }
  }

  .bg
  {
    padding: 80px 40px 40px 40px;
    background: linear-gradient(360deg, #635E53 0%, #030303 100%);

     @media(width <= 768px)
    {
        position: relative;
        height: auto;
        padding: var(--section-md-space);
    }
  }

 .founder-brand-logo
 {
  @media(width <= 1120px)
  {
    width: 30px !important;
  }
 }

  .sec-center
  {
    gap: 2rem;

    @media(width <= 1024px)
    {
      gap: 1rem;
    }
  }

  .visionary-collab-heading
  {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media(width <= 992px)
    {
      flex-direction: row;
    }
     @media(width <= 468px)
    {
      flex-direction: column;
    }
    .heading-disc-text
    {
      line-height: 1.2;
    }

    .margin-top
    {
      margin-top: -15px;

      @media(width <= 992px)
      {
        margin-top: 0px;
      }
    }
  }

  .collab-team-member
  {
    display: flex;
    gap: 16px;

    @media(width <= 1024px)
    {
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;

      @media(width <= 992px)
        {
        justify-content: center;
        }
    }
    @media(width <= 768px)
    {
      gap: 10px;
    }

    .col-member
    {
      flex-grow: 1;

      @media(width <= 1024px)
      {
         flex-grow: 0;
         width: 125px;

         @media(width <= 992px)
         {
          width: 115px;
         }

         @media(width <= 768px)
         {
          width: 122px;
         }
      }
    }

    .col-x
    {
      width: 10%;
    }
  }

  .collab-x
  {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: clamp(24px, calc(1.5rem + (60 - 24) * ((100vw - 768px) / (1920 - 768))), 60px);
  }
  .top-sec
  {
    .founders-details-div
    {
      position: relative;

      &::after {
        content: "";
        width: 100%;
        height: 150px;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.642) 0%, rgba(0, 0, 0, 0.705) 30%, rgba(0, 0, 0, 0) 100%);
    }

      .play-btn
      {
        position: absolute;
        top: 20px;
        right: 20px;

        @media(width <= 1365px)
        {
          top: 11px;
          right: 12px;
        }
        
        
        .glass-btn 
        {
          padding: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 35px;
          width: 35px;

          &:hover {
            i {
              transform: translate(0px, 0);
            }
          }
        }
      }
      .founder-details
      {
        position: absolute;
        bottom: 10px;
        width: 100%;
        padding: 10px 10px 0px 10px;
        z-index: 2;

        .founder-designation
        {
          font-size: clamp(10px, calc(0.625rem + (14 - 10) * ((100vw - 768px) / (1920 - 768))), 14px);
        }
      }
    }
  }
  .bottom-sec
  {
    @media(width <= 992px)
    {
      margin-top: 10px;
    }
    .bottom-tab-row
    {
      display: flex;
      gap: 16px;

      @media(width <= 992px)
      {
        margin-bottom: 10px;
      }

      .bottom-tab-col1
      {
        flex-grow: 1;
      }
      .bottom-tab-col2
      {
        width: 72%;
      }
    }

    @media(width <= 992px)
    {
      .tab-menus 
      {
        width: 70%;
        margin: 0 auto;
      }
    }

    @media(width <= 468px)
    {
      .tab-menus 
      {
        width: 100%;
      }
    }

   @media(width <= 1120px)
   {
     .tab-items
    {
      padding: 10px;
    }
   }
    .play-btn
    {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .glass-btn 
      {
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 35px;
        width: 35px;

        &:hover {
          i {
            transform: translate(0px, 0);
          }
        }
      }
    }
    .video-wrapper
    {
      height: 50vh;

      @media(height <= 700px)
      {
        height: 45vh !important;
      }

      @media(width <= 1120px)
      {
        height: 38vh !important;
      }
    }

    iframe 
    {
      width: 100%;
      height: 100%;
    }
    .nav-link
    {
      position: relative;
      cursor: pointer;
      padding: 0px;
    }

    #event-gallery,
    #testimonials
    {
      .active
      {
        border: 1px solid #B77A15;
      }
    }
    #testimonials-sm
    {
      @media(width <= 992px)
      {
        .play-btn 
        {
          inset: inherit;
          top: 20px;
            right: 20px;
        }
      }
    }
    #eventTabContent
    {
       img 
      {
        height: 50vh;
         @media(height <= 700px)
        {
          height: 45vh !important;
        }

        @media(width <= 1120px)
        {
          height: 38vh !important;
        }
      }
    }
    #testimonials
    {
      .play-btn
      {
        top: 20px;
        left: 20px;
        display:block;
      }
    }
    #testimonialTabContent
    {
      .video-wrapper
    {
      height: 50vh;
    }
    }
    .middle-content
    {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100%;

        @media(width <= 992px)
        {
          flex-direction: row;
        }

        @media(width <= 468px)
        {
          gap: 20px;
        }
    }
  }
}

.raipur-team-sec
{
  @media(width <= 768px)
  {
    height: auto;
  }

  .sec-center 
  {
    @media(width <= 1440px)
    {
      gap: 0.5rem;
    }
  }

  .outer,
  .inner
  {
    @media(width <= 768px)
    {
      height: auto;
      overflow: visible;
    }
  }

  .bg
  {
    padding: 80px 40px 40px 40px;
    background-color: #000;


    @media(width <= 768px)
    {
      padding: var(--section-md-space);
      position: relative;
      height: auto;
    }
  }

  .jrm-design-position
  {
    position: absolute;
    bottom: 76px;
    right: 6px;
    width: 100%;
    text-align: center;

    @media(width <= 992px)
    {
      bottom: 90px;
    }

    .jrm-design
    {
      font-family: "bon_vivant_family_scriptRg";
     font-size: clamp(24px, calc(1.5rem + (40 - 24) * ((100vw - 768px) / (1920 - 768))), 40px);
     color: var(--gold-color);
     margin-bottom: 0px;
    }
  }

  .team-member-details
  {
    margin-top: 20px;

    .team-member-name
    {
      font-size: var(--primary-heading-sub-size);
      font-weight: 600;
      margin: 10px 0 10px 0;
      text-align: center;
    }

    .team-member-desgination
    {
      font-size: var(--primary-discription-size);
      text-align: center;
    }
  }

  .team-image 
  {
    object-fit: cover;
    object-position: center;
  }

  .partners
  {
    margin-top: 30px;

    @media(width <= 1440px)
    {
      margin-top: 0px;
    }

    .partner-inner
    {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(25px, calc(1.5625rem + (50 - 25) * ((100vw - 992px) / (1920 - 992))), 50px);
      height: 100%;
    }
    
    .partner-name,
    .partner-logo
    {
      flex: 0 0 20%;
      font-size: var(--primary-heading-sub-size);
      margin-bottom: 0px;
    }
    .partner-logo
    {

      img 
      {
        height: unset;
        width: unset;
      }
    }
  }
}

.news-awards-sec
{
  @media(width <= 768px)
  {
    height: auto;
  }

  .outer,
  .inner
  {
    @media(width <= 768px)
    {
      height: auto;
      overflow: visible;
    }
  }

  .bg
  {
    padding: 80px 40px 40px 40px;
    background: linear-gradient(360deg, #BDA371 0%, #000000 100%);


    @media(width <= 768px)
    {
      padding: var(--section-md-space);
    }

    @media(width <= 768px)
    {
      position: relative;
      height: auto;
    }
  }

  @media(width <= 768px)
  {
    .township-container 
    {
      padding: 0px;
    }
  }

  .news-awards-heading
  {
    margin-bottom: 20px;

  }

  .news-slider-sec
  {
    margin-top: 20px;

    .news-slider-thumb
    {
      margin-bottom: clamp(30px, calc(0.625rem + (50 - 30) * ((100vw - 1440px) / (1920 - 1440))), 50px);

      @media(width <= 992px)
      {
        margin-bottom: 16px;
      }

      .swiper-wrapper
      {
        align-items: center;
      }
      .swiper-slide
      {
        text-align: center;
        padding: 10px;
        cursor: pointer;
        transition: 0.4s ease;
        border-bottom: 1px solid transparent;
        height: 59px;
        display: flex;
        align-items: center;
        justify-content: center;


        &:hover
        {
          border-bottom: 1px solid #B18F50;
        }

        &.swiper-slide-thumb-active
        {
          border-bottom: 1px solid #B18F50;
        }
      }
      img
      {
        width: auto;
        height: auto;

        @media(width <= 768px)
        {
          width: 100%;
        }
      }
    }
    .news-slider
    {
      .press-content
      {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        gap: 20px;
        max-width: 90%;

        @media(width <= 992px)
        {
          gap: 12px;
          max-width: 100%;
        }
      }
      .press-content-inner
      {
        display: flex;
        gap: 10px;
        justify-items: flex-start;

        img
        {
          height: 19px;
          width: auto;
        }

        .press-disc
        {
          font-size: var(--primary-heading-sub-size);
          line-height: 1.5;

          @media(width <= 1280px)
          {
            font-size: var(--primary-heading-sub-md-size)
          }
        }
      }
    }
    .swiper-button-next:after, .swiper-button-prev:after
    {
      display: none;
    }
    .swiper-button-next, .swiper-button-prev
    {
      position: static;
      padding: 10px 15px;
      border: 1px solid #ffffff;
      height: 50px;
      width: 50px;
      background-color: transparent;
      transition: 0.4s ease;

      @media(width <= 992px)
      {
        height: 40px;
        width: 40px;
        padding: 6px 10px;
      }

      &:hover
      {
        background-color: #ffffff;

        i
        {
          color: #BDA371;
        }
      }
    }
    .swiper-navigation
    {
      display: flex;
      justify-content: flex-end;
      gap: 20px;
      margin-top: clamp(1px, calc(0.0625rem + (20 - 1) * ((100vw - 1440px) / (1920 - 1440))), 20px);
      margin-top: 20px;

      @media(width <= 992px)
      {
        margin-top: 12px;
      }

      i
      {
        font-size: 20px;
        color: #ffffff;
        transition: 0.4s ease;
      }

    }
  }

}

.join-club-sec
{
  .bg 
  {
    padding: 80px 0px;
    background: linear-gradient(0deg, #BDA371 0%, #000 70.67%, #000 100%);
  }

  .join-club-heading
  {
    margin-bottom: 30px;

    .heading-sub-text
    {
      margin-bottom: 20px;
    }
  }

  .join-content
  {
    .heading-sub-text
    {
      line-height: 1.5;
      margin-bottom: 20px;
      font-weight: 300;
    }
  }
}

.enqire-now-sec
{

  @media(width <= 768px)
  {
    height: auto;
  }

  .outer,
  .inner
  {
    @media(width <= 768px)
    {
      height: auto;
      overflow: visible;
    }
  }

  .bg
  {
    padding: 80px 40px 40px 40px;
    background: url('./../images/enqire-now-bg.webp'), linear-gradient(180deg, #000000 0%, #606060 100%);
    background-position: center bottom;
    width: 100%;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    @media(width <= 992px)
    {
      padding: var(--section-md-space);
    }

    @media(width <= 768px)
    {
      position: relative;
      height: auto;
    }
  }

  .enqire-now-heading
  {
    margin-bottom: clamp(14px, 3.5vh, 50px);

    h5
      {
        font-size: clamp(18px, calc(1.125rem + (24 - 18) * ((100vw - 768px) / (1920 - 768))), 24px);
      }
  }

  .form-inner
  {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, calc(0.75rem + (16 - 12) * ((100vw - 1440px) / (1920 - 1440))), 16px);
    padding: 16px;
    border-radius: 20px;
    border: 0.759px solid rgba(212, 173, 104, 0.50);
    background: rgba(24, 24, 27, 0.20);
    box-shadow: 0 15.179px 18.973px -3.795px rgba(0, 0, 0, 0.10), 0 6.071px 7.589px -4.554px rgba(0, 0, 0, 0.10);
    border: 1px solid #d4ac68;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    .form-title
    {
      margin-bottom: clamp(6px, 1vh, 16px);
    }
    p
    {
      margin-bottom: 0;
    }
    .form-group {
        position: relative;
        margin-bottom: 5px;
    }
    .form-control
    {
      background-color: #DBD8D8;
    }
    textarea.form-control
    {
      height: clamp(58px, 9vh, 100px);
      min-height: 58px;
      resize: none;
    }
    .form-select
    {
      background-color: #DBD8D8;
      color: #18181b;
      border: 1px solid #d4ac68;
      border-radius: 6px;
      /* Matches .form-control padding so both controls share a height */
      padding: .375rem 2.5rem .375rem .75rem;
      width: 100%;
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d4ac68'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 14px 14px;
    }
    .form-select:focus
    {
      background-color: #DBD8D8;
      border-color: #d4ac68;
      outline: 0;
      box-shadow: 0 0 0 .25rem #d4ac6840;
    }

    .form-select:has(option[value=""]:checked)
    {
      color: #6b6b70;
    }
    .form-select option
    {
      color: #18181b;
      background-color: #DBD8D8;
    }

    .iti
    {
      display: block;
      width: 100%;
    }
    .iti input.form-control
    {
      width: 100%;
    }
    .iti__country-list
    {
      color: #18181b;
      text-align: left;
    }
    .submit-btn[disabled]
    {
      opacity: .6;
      cursor: not-allowed;
    }
    .form-check
    {
      display: flex;
      gap: 10px;
      align-items: end;
    }
    .form-check-input:checked {
        background-color: #DBD8D8;
        border-color: #d4ac68;
    }
    .form-control:focus,
    .form-check-input:focus {
        background-color: #DBD8D8;
        border-color: #d4ac68;
        outline: 0;
        box-shadow: 0 0 0 .25rem #d4ac6840;
    }
    .submit-btn
    {
      background-color: rgba(255, 255, 255, 0.07);
      padding: 10px;
      width: 100%;
      display: inline-block;
      background-color: #D4AD6866;
      border: 1px solid #d4ac68;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 6px;
      color: #ffffff;
    }
  }
  .brochure-title
    {
      margin-bottom: 16px;
    }

    .brochure-img
    {
      height: auto;
      width: min(max(233px, calc(14.5625rem + (251 - 233) * ((100vw - 1024px) / (1920 - 1024)))), 251px);

    }
}

.footer {
 
  @media(width <= 768px) {
    height: auto;
    position: relative;
  }
  .bg 
  {
    width: 100%;
    min-height: 100dvh;
    background: transparent;
    position: relative;
    inset: auto auto 0% 0%;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background:linear-gradient(0deg, rgba(0, 0, 0, 0.735)32%, rgba(0, 0, 0, 0) 100%);
      z-index: 1;
    }
  }

    .footer-image
    {
      z-index: 0;
      background-image: url('./../images/footer-bg.webp');
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0% auto auto 0%;

      @media(width <= 768px) {
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.35);
          z-index: 1;
        }
      }
    }

    .footer-fixed-wrap
    {
      position: fixed;
      width: 100%;
      bottom: 0;
      z-index:2;

      @media(width <= 768px) {
        position: relative !important;
        bottom: auto !important;
      }
    }

    .footer-container {
        max-width: 98%;
        margin: 0 auto;
        padding: 0 15px;
        z-index: 2;
        position: relative;

        @media(width <=1440px) {
            max-width: 95%;
        }

        @media(width <=1280px) {
            max-width: 100%;
        }
    }

    .footer-padding {
        padding: 50px 0px;

        @media(width <=1280px) {
            padding: 25px 0px;
        }
    }

    .contact-info {
        .contact-items {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin: 10px 0px;

            .icon {
                font-size: 14px;
            }
        }
        .contact-items-link {
            margin-right: 10px;
            transition: all 0.4s ease;
            font-size: 14px;

            &:hover {
                color: #BDA371;
            }
        }
    }

    .contact-items-nonlink {
        font-size: 14px;
        text-transform: uppercase;
    }

    .contact-subitems-nonlink {
        font-size: 14px;
    }

    .logo {
        width: 120px;
      
    }

    .footer-col {
        padding: 0px clamp(10px, calc(0.625rem + (40 - 10) * ((100vw - 1440px) / (1920 - 1440))), 40px) 0px 10px;

        @media(width<=1280px) {
            padding: 0px 0 0 10px;
        }

        @media(width <=992px) {
        }
        img {
            width: 120px;
        }

        .footer-menu-item {
            position: relative;
            margin-bottom: 16px;
            width: 85%;

            @media(width <= 1680px)
            {
                width: 95%;
            }

            .footer-menu-heading {
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;

                @media(width <= 468px)
                {
                    align-items: baseline;
                }

                .footer-menu-title {
                    font-size: 14px;
                    margin-bottom: 0px;
                    cursor: pointer;
                    text-transform: uppercase;
                    color: #ffffff;
                    text-decoration: unset;
                }

                .dropdown-icon {
                    font-size: 14px;
                    color: #BDA371;
                    transition: 0.4s ease;
                }

                &:hover .footer-menu-title {
                    color: #BDA371;
                }
            }

            .footer-submenu-item {
                display: none;
                margin-left: 14px;
                margin-top: 14px;
                color: #ffffff;
                text-decoration: unset;
            }

            .footer-submenu-title {
                transition: 0.4s ease;
                font-size: 14px;
                color: #ffffff;
                text-decoration: unset;

                &:hover {
                    color: #BDA371;

                }
            }
        }

        .active {
            color: #BDA371;
            transition: 0.4s ease;
        }

        .icon-rotated {
            transform: rotate(180deg);

        }

        .newsletter-box {
            width: 100%;

            .button-here {
                background-color: #BDA371;
                color: #ffffffe8;
                border: 1px solid #BDA371;
                border-radius: 0px;
                transition: 0.4s ease;
                max-width: 150px;

                &:hover {
                    background-color: #000000ff;
                    color: #ffffff;
                    border: 1px solid #BDA371;

                    i {
                        color: #ffffff !important;
                    }
                }
            }
        }

        .newsletter-box ::placeholder {
            font-size: 14px;
            color: #2b2b2bff;
            padding-left: 5px;
        }

        .form-control {
            background-color: #ffffffe8;
            color: #000000;
            height: 50px;
            border-radius: 0px;
            max-width: 250px;

            &:focus {
                border-color: #BDA371;
                box-shadow: unset;
            }
        }

        .contact-items-head
        {
            font-weight: 600;
            letter-spacing: 1px;
            font-size: 14px;
        }

        .social-media-container {
            padding: 20px 0px;

            @media(width <=768px) {
                padding: 20px 0px 0 0;
            }

            h3 {
                font-size: 20px;
            }

            a {
                background-color: #ffffffff;
                padding: 10px;
                border-radius: 50px;
                height: 40px;
                width: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.4s ease;
                text-decoration: unset;

                i {
                    font-size: 18px !important;
                    color: #000000;
                    transition: 0.4s ease;
                    text-decoration: unset;
                }

                &:hover {
                    background-color: #BDA371;

                    i {
                        color: #000000;
                    }
                }
            }

            .social-media {
                display: flex;
                justify-content: start;
                align-items: center;
                flex-wrap: wrap;
                gap: 15px;
                padding: 10px 0px;
            }
        }

        .contact-items-link {
            margin-right: 20px;
            margin-bottom: 0;
            color: #ffffff;
            text-decoration: unset;
        }
    }
    .sub-col{
            @media(width <=1400px) {
                flex-grow: 0.5 !important; 
            }
        }

    .footer-bottom {
        background-color: transparent;
        color: #ffffff;
        padding: 15px 0px;

        p {
            text-align: left;
            margin-bottom: 0px;
            font-size: 14px;

            @media(width <=768px) {
                text-align: center;
            }
        }
    }
}

.download-brochure
{
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;

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

  .glass-btn {
    height: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50px;
    overflow: hidden;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s ease;
    text-decoration: none;

    &:hover {
      width: 250px;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
      gap: 20px;
    }
  }
  .download-icon {
    font-size: 18px;
    min-width: 0px;
    text-align: center;
  }
  .text {
    white-space: nowrap;
    display: none;
    transition: opacity 0.3s ease;
    font-size: 12px;
  }
  .glass-btn:hover .text {
    display: block;
  }
}
.videoUrl
{
  cursor: pointer;
}
.video-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  

  .video-content {
    position: relative;
    width: 95%;
    aspect-ratio: 15 / 7;

    .close-btn {
      position: absolute;
      top: -18px;
      right: -10px;
      font-size: 26px;
      color: #000;
      cursor: pointer;
      font-weight: bold;
      background: #c89d59;
      border-radius: 50px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.5);
      z-index: 5;
    }

    iframe, video {
      width: 100%;
      height: 100%;
      border: 3px solid #a77b32;
      background-color: #000000;
    }
  }
}

/* ---------- SECTION INDICATOR (right-side dots) ---------- */

.section-indicator {
    position: fixed;
    right: clamp(14px, 1.5vw, 28px);
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
    will-change: transform;

    &.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .section-indicator__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8ad73;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition:
        background-color 0.45s var(--ease-luxe),
        transform 0.45s var(--ease-luxe);

    &::before {
        content: "";
        position: absolute;
        inset: -6px;
        border: 1px solid #c8ad73;
        border-radius: 50%;
        transform: scale(0.6);
        opacity: 0;
        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }

    &:hover {
        background: #c8ad73;

        &::before {
            transform: scale(1);
            opacity: 1;
        }
    }

    &.active {
        background: #c8ad73;

        &::before {
            transform: scale(1);
            opacity: 1;
            border-color: #c8ad73;
        }
    }
    }
}

@media (max-width: 768px) {
    .section-indicator {
        display: none;
    }
}

.section-indicator__dot::after {
    content: attr(data-title);
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background-color: rgba(0, 0, 0, 0.068);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow:
      color-mix(in srgb, rgb(255, 255, 255) calc(10%), transparent) 0px 0px 0px 1px inset,
      color-mix(in srgb, rgb(255, 255, 255) calc(90%), transparent) 1.8px 3px 0px -2px inset,
      color-mix(in srgb, rgb(255, 255, 255) calc(80%), transparent) -2px -2px 0px -2px inset,
      color-mix(in srgb, rgb(255, 255, 255) calc(60%), transparent) -3px -8px 1px -6px inset,
      color-mix(in srgb, rgb(0, 0, 0) calc(12%), transparent) -0.3px -1px 4px 0px inset,
      color-mix(in srgb, rgb(0, 0, 0) calc(20%), transparent) -1.5px 2.5px 0px -2px inset,
      color-mix(in srgb, rgb(0, 0, 0) calc(20%), transparent) 0px 3px 4px -2px inset,
      color-mix(in srgb, rgb(0, 0, 0) calc(10%), transparent) 2px -6.5px 1px -4px inset,
      color-mix(in srgb, rgb(0, 0, 0) calc(10%), transparent) 0px 1px 5px 0px,
      color-mix(in srgb, rgb(0, 0, 0) calc(8%), transparent) 0px 6px 16px 0px;
    border-radius: 50px;
    border: 0px;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    pointer-events: none;
}

/* SHOW ON HOVER */
.section-indicator__dot:hover::after,
.section-indicator__dot.show-tooltip::after {
    opacity: 1;
    visibility: visible;

    transform: translateY(-50%) translateX(0);
}


/* Safari fix: nested backdrop-filter renders as solid white on WebKit.
   Parent .tab-menus already blurs; pill differentiates via background tint. */
.tab-menus .tab-overlay-pill {
  background-color: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform, width;
  isolation: isolate;
}

.tab-menus {
  isolation: isolate;
}

/* =========================================================
   Form validation states — shared by every form on the site
   (driven by assets/js/form.js)
   ========================================================= */
.form-error {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 1.3;
  color: red;
  position: absolute;
}

/* Take up no space once the field is corrected */
.form-error:empty {
  display: none;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
  border-color: red;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-check-input.is-invalid:focus {
  border-color: red;
  box-shadow: 0 0 0 .25rem rgba(224, 115, 111, 0.25);
}

/* Bootstrap paints its own icon on .is-invalid — the border alone is enough here. */
.form-control.is-invalid {
  background-image: none;
  padding-right: .75rem;
}

.form-select.is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0736f'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* highlight()/unhighlight() only toggle .is-invalid on the checkbox itself */
.form-check-input.is-invalid ~ .form-check-label {
  color: rgb(255, 255, 255);
}

.form-status {
  font-size: 14px;
}

.form-status.is-success {
  color: #8fd39a;
}

.form-status.is-error {
  color: red;
}

/* Neither a failure nor a fresh success — e.g. an already-subscribed email */
.form-status.is-notice {
  color: #d8a657;
}