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

@font-face {
  font-family: "Noto Sans Display";
  src: url("../../fonts/NotoSansDisplay-Regular.ttf");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

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

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

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

::-webkit-scrollbar {
  width: 2px;
  height: 8px;
}

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

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

:root 
{
  --bs-link-color: #ffffff;
  --cdn-url: https://cdn.dellatownships.com;
}

html,
body {
  font-family: "Noto Sans Display", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  color: #ffffff;
  scroll-behavior: smooth;
  background-color: #000000;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.Bon-Vivant-fonts {
    font-family: "bon_vivant_family_scriptRg";
    color: #bda371;
    font-size: 70px;
    line-height: 80px;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

a {
  text-decoration: none;
  color: var(--bs-link-color);
}

a:hover 
{
  color: var(--bs-link-color);
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}


.fs12 {
  font-size: 12px !important;
}

.fs14 {
  font-size: 14px !important;
}

.fs16 {
  font-size: 16px !important;
}

.fs18 {
  font-size: 18px !important;
}

.fs20 {
  font-size: 20px !important;
}

.fs22 {
  font-size: 22px !important;
  line-height: 28px;
}

.fs24 {
  font-size: 24px !important;
  line-height: 30px;
}

.fs26 {
  font-size: 26px !important;
}

.fs28 {
  font-size: 28px !important;
}

.fs30 {
  font-size: 30px !important;
  line-height: 38px;
}

.fs32 {
  font-size: 32px !important;
}

.fs36 {
  font-size: 36px !important;
  line-height: 42px;
}

.fs40 {
  font-size: 40px !important;
  line-height: 40px;
}

.fs44 {
  font-size: 44px !important;
  line-height: 40px;
}

.fs46 {
  font-size: 46px !important;
}

.fs48 {
  font-size: 48px !important;
}

.fs50 {
  font-size: 50px !important;
}

.fs52 {
  font-size: 52px !important;
}

.fs54 {
  font-size: 54px !important;
}

.fs56 {
  font-size: 56px !important;
  line-height: 55px;
}

.fs60 {
  font-size: 60px !important;
  line-height: 65px;
}

.fs64 {
  font-size: 64px !important;
  line-height: 65px;
}

.fs70 {
  font-size: 70px !important;
  line-height: 54px;
}

.fs72 {
  font-size: 72px !important;
}

.fs75 {
  font-size: 75px !important;
  line-height: 73px;
}

.fs85 {
  font-size: 85px !important;
}

.fs90 {
  font-size: 90px !important;
}

.fs100 {
  font-size: 100px !important;
}

.fs120 {
  font-size: 120px !important;
}

.black {
  color: #000000 !important;
}

.white {
  color: #ffffff !important;
}

.gold {
    background: #D4AD68;
    background: linear-gradient(to bottom, #D4AD68 0%, #aa7215 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    content: none;
}

.breadcrumb {
  margin-top: 16px;

  ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .breadcrumb-item {
      display: flex;
      align-items: center;
      font-size: clamp(14px, calc(0.875rem + (16 - 14) * ((100vw - 768px) / (1920 - 768))), 16px);

      a {
        color: #ffffff;
        transition: 0.2 ease;

        &:hover {
          color: #bda371 !important;
        }
      }
    }
    .websitebackbutton {
      display: flex;
      align-items: center;
      font-size: 14px;
  }
}

.common-container {
  width: 1280px;
  margin: 0 auto;
  position: relative;
  padding: 0 15px;

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

  }
}

figure
{
  margin: 0px;
}

/* Home Landing Banner section styles Starts here */


.text-border-bottom {
  text-decoration: underline solid #b18f50 3px;
  text-decoration-color: #d4ad68;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-color: #b18f50;
  -webkit-text-decoration-style: solid;
}

.text-border-bottom-tooltop {

  transition: 0.2s ease;
    text-decoration: underline solid #b18f50 3px;
  text-underline-offset: 5px;
    text-decoration-color: #d4ad68;
    text-decoration-thickness: 2px;
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-color: #b18f50;
    -webkit-text-decoration-style: solid;
  }

  .tooltip-inner {
    border: 2px solid #997538;
    padding: 20px;
    max-width: 600px;
    white-space: normal;
    text-align: left;
    background-color: #000;
    color: #fff;
    border-radius: 0px;
    font-size: 14px;
    font-family: "Noto Sans Display", sans-serif;
    line-height: 20px;
}

.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;
    }

}


.pinyon-script-font {
  font-weight: 400;
  font-style: normal;
  font-family: "Pinyon Script", cursive;
  line-height: clamp(70px, calc(4.375rem + (130 - 70) * ((100vw - 768px) / (1920 - 768))), 130px);
  text-transform: capitalize;
  font-size: 120px;
  background: #D4AD68;
  background: linear-gradient(to bottom, #D4AD68 0%, #aa7215 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: 10px;
  position: relative;
}

sup {
  font-size: 10px;
  color: #ffffff;
}


/* township home banner start */
.home-landing-desktop {
  display: block;
}

.home-landing-mobile {
  display: none;
}

.home-banner-disc-desktop {
  display: block;

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

.home-banner-disc-mobile {
  display: none;

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

    .home-banner-disc-sec {
      padding: 15px;

      p {
        color: #fff;
        font-size: 16px;
        line-height: 25px;
        max-width: 100%;
        margin-bottom: 0px;
      }
    }
    
  }
}

.home-landing-banner {
  position: relative;
  background: #000000;

  .img-overlay {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(0 0 0 / 28%);

      @media(width <= 468px)
      {
        background-color: rgb(0 0 0 / 54%);
      }
    }

    .home-banner-img {
      padding-top: clamp(25.6px, calc(1.6rem + (36 - 25.6) * ((100vw - 768px) / (1920 - 768))), 36px);
      height: calc(100vh - 100px);
      width: 100%;
      object-fit: cover;
      object-position: top;

      @media(width <= 468px)
      {
        height: calc(100vh - 150px);
      }
    }
  }

  .top-text-position {
    position: absolute;
    top: 0;
    width: 100%;

    .top-text-panel-sec {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      white-space: nowrap;
      text-wrap: nowrap;

      .pinyon-script-font {
        font-size: clamp(40px, calc(2.5rem + (100 - 40) * ((100vw - 768px) / (1920 - 768))), 100px);
        text-transform: capitalize;
        flex: 3;
      }
    }

    .top-text-panel-sec-title {
      color: #ffffff;
      text-transform: uppercase;
      font-size: clamp(34px, calc(2.125rem + (40 - 34) * ((100vw - 768px) / (1920 - 768))), 40px);
      line-height: 1;
      font-family: "Noto Sans Display", sans-serif;
      margin-left: 30px;

      @media(width <=992px) {
        margin-left: 20px;
      }
    }

    .right-text-panel-sec {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      white-space: nowrap;
      text-wrap: nowrap;

      h2 {
        color: #ffffff;
        text-transform: none;
        margin-right: 30px;
        font-size: clamp(30px, calc(1.875rem + (60 - 30) * ((100vw - 768px) / (1920 - 768))), 60px);
        line-height: 1;

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

      .gold-gradient-color {
        background: #D4AD68;
        background: linear-gradient(to bottom, #D4AD68 0%, #aa7215 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .text-underline {
        text-decoration: underline solid #b18f50 3px;
        text-underline-position: under;
        text-decoration-color: #d4ad68;
        text-decoration-thickness: 2px;
      }

      .text-tm {
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 10px;
        background-color: #ffffff;
      }
    }

    .home-banner-disc-sec {
      display: flex;
      justify-content: end;
      flex-direction: column;
      align-items: flex-end;
      padding-top: 100px;

      @media (width <=1120px) {
        padding-top: 100px;
      }

      p {
        color: #fff;
        font-size: 16px;
        line-height: 25px;
        max-width: 440px;
        margin-right: 30px;
        margin-bottom: 0px;

        @media (width <=1120px) {
          max-width: 340px;
        }
      }
    }
    .video-container
      {
        width: auto;
        margin: 20px 309px;
        text-align: left;
        padding-bottom: 0 !important;
        overflow: unset;
        height: auto; 
        box-shadow: unset;

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

        .playVideoHover
        {
          display: none;
        }

        .banner-play-btn
        {
          display: flex;
          gap: 10px;
          justify-content: flex-start;
          align-items: center;
          backdrop-filter: blur(2px);
          font-size: 14px;
          padding: 10px 15px;
          color: #fff;
          background-color: #ffffff1a;
          border-radius: 40px;
          border: 1px solid #b8860b;
          text-transform: uppercase;
          letter-spacing: 1px;
          transition: all 0.3s ease;

          &:hover 
          {
            backdrop-filter: blur(5px);
            background-color: #0000001a;
          }

          img 
          {
            width: 30px;
            height: 30px;
          }
        }
      }
  }

  @media (width <=768px) {
    .top-text-position {
      .top-text-panel-sec {
        .pinyon-script-font {
          font-size: clamp(42px, calc(2.625rem + (48 - 42) * ((100vw - 468px) / (768 - 468))), 48px);
        }
      }

      .top-text-panel-sec-title {
        font-size: clamp(25px, calc(1.5625rem + (34 - 25) * ((100vw - 468px) / (768 - 468))), 34px);
        margin-left: 15px;
        text-wrap: wrap;
        white-space: pre-wrap;
      }

      .right-text-panel-sec {
        h2 {
          font-size: 36px;
          margin-right: 15px;
          white-space: wrap;
        }
      }
    }
  }

  @media (width <=468px) {

    .img-overlay {
      .home-banner-img {
        padding-top: 70px;
      }
    }

    .top-text-position {
      top: 17px;

      .top-text-panel-sec {
        .pinyon-script-font {
          line-height: 65px;
        }
      }

      .right-text-panel-sec {
        margin-top: 10px;
      }
    }
  }
}
/* township home banner end */

/* township home about JRM start */
.about-jrm-sec {
  background-color: black;
  color: white;
  font-family: "Noto Sans Display", sans-serif;
  margin: 0;
  padding: 50px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  @media (width <=1140px) {
    padding: 30px 0px;
  }

  .about-jrm-div {
    position: relative;
    z-index: 2;
  }

  .image-jrm-desktop {
    display: block;
  }

  .image-jrm-mobile {
    display: none;
  }

  .para-about-jrm {
    
    text-align: center;
    margin: 0 auto;
    font-family: 'Noto Sans Display', sans-serif;
    font-weight: 300;
    position: relative;

    .quotation-marks,
    .quotation-marks {
      margin: 0;
      height: 35px;
      width: 35px;
    }


    .gold {
      background: #D4AD68;
      background: linear-gradient(to bottom, #D4AD68 0%, #aa7215 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
        font-size: clamp(20px, calc(1.25rem + (30 - 20) * ((100vw - 768px) / (1920 - 768))), 30px);
        cursor: pointer;
    }

    .jrm-disc-p {
      font-size: clamp(18px, calc(1.125rem + (28 - 18) * ((100vw - 768px) / (1920 - 768))), 28px);
      font-family: 'Noto Sans Display', sans-serif;
      font-weight: 400;
      padding: 0 3px;
      margin-bottom: 5px;
      position: relative;

      &:first-of-type::before {
        content: url("../images/start-quot-mark.svg");
        display: inline-block;
        width: 35px;
        height: auto;
        margin-right: 8px;

        @media (width <= 468px)
        {
          width: 25px;
      }
    }
      &:last-of-type::after {
        content: url("../images/end-quot-mark.svg");
      display: inline-block;
        width: 35px;
        height: auto;
        margin-left: 8px;
        
         @media (width <= 468px)
        {
          width: 25px;
        }
      }
    }
  }

  .about-jrm-cta {
    display: flex;
    align-items: center;
    position: relative;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: -120px;
    position: relative;
    z-index: -1;

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

    @media(width <=1120px) {
      margin-top: -30px;
    }

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

    .cta-jrm-img-wrap {
      img {
        max-width: 280px;
        transition: opacity 0.3s ease;
        filter: grayscale(1);
      }
    }

    .cta-jrm-signature {

      margin: 150px 100px 0px 200px;

      @media(width <=1120px) {
        margin: 150px 100px 0px 150px;
      }

      .della-group-cta-button {
        font-size: 15px;
        color: #ffffff;
        margin: 0;
      }

      .jrm-name {
        font-size: clamp(42px, calc(2.625rem + (56 - 42) * ((100vw - 768px) / (1920 - 768))), 56px);
        text-transform: capitalize;
        line-height: 83px;
        padding: 20px;
      }

      .della-group-cta-button {
        font-size: 16px;
        color: white;
      }
    }
  }

  @media (width <=992px) {
    .image-jrm-desktop {
      display: none;
    }

    .image-jrm-mobile {
      display: block;
      margin-bottom: 30px;

      img {
        max-width: 300px;
        transition: opacity 0.3s ease;
        filter: grayscale(1);
        text-align: center;
      }
    }

    .about-jrm-cta {
      align-items: center;
      justify-content: center;

      .cta-jrm-signature {
        margin: 50px auto 0px auto;
      }
    }
  }

  @media (width <=468px) {
    .para-about-jrm {

      .quotation-marks-invers,
      .quotation-marks {
        width: 6%;
        padding-top: 10px;
      }
    }

    .image-jrm-mobile {
      img {
        max-width: 100%;
      }
    }
  }

}

/* township home about JRM end */

/* launching townships sec start */
.launching-townships-sec {
  padding: 50px 0 0 0;
  background-color: #D2D3D5;

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

  .launching-townships-title {
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .launching-townships-text {
      text-align: center;
      font-size: clamp(26px, calc(1.625rem + (40 - 26) * ((100vw - 768px) / (1920 - 768))), 40px);
      color: #000;
      font-family: "Noto Sans Display", sans-serif;
      line-height: 0px;
      font-weight: 400;
      text-transform: uppercase;
    }

    .pinyon-script-font {
      line-height: clamp(51.2px, calc(3.2rem + (100 - 51.2) * ((100vw - 768px) / (1920 - 768))), 100px);
      font-size: clamp(36px, calc(2.25rem + (60 - 36) * ((100vw - 768px) / (1920 - 768))), 60px);
      margin: 0px;
    }
  }

  .launching-townships-desc {
    margin-top: 40px;

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

    p {
      color: #666;
      line-height: 20px;
      font-size: 16px;
    }

    .conglomerate-Left {
      .Jene-img img {
        width: 380px;
        margin: 0 auto;
      }

      .signature-image img {
        width: 160px;
      }

      .conglomerate-Left-inner {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 60px;
        margin-top: -50px;

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

        .conglomerate-Left-inner-left {
          display: flex;
          align-items: center;
        }

        .the-text,
        .factor-text {
          font-size: 20px;
          color: black;
          opacity: 0.7;
          font-family: "Noto Sans Display", sans-serif;

          .first-Letter {
            font-size: 36px;
          }
        }

        .factor-text {
          margin-top: 21px;
        }

        .big-text {
          font-size: 55px;
          Font-family: "Playfair Display", serif;
          color: #000000;
        }

        .conglomerate-Left-inner-right {
          p {
            text-align: center;
          }
        }
      }
    }
  }

  @media (width <=1024px) {
    .launching-townships-title {
      padding-top: 0px;
    }

    .launching-townships-desc {
      .conglomerateLeft {
        .conglomerateLeft-inner {
          justify-content: center;
        }
      }
    }
  }

  @media (width <=992px) {
    .launching-townships-title {
      .launching-townships-title-text {
        line-height: 10px;
      }
    }

  }

  @media (width <=468px) {
    .launching-townships-title {
      .launching-townships-text {
        line-height: 1;
      }
    }
  }
}
/* launching townships sec end */

/* our-expansion section start */
.our-expansion-sec {
  padding: 50px 0px;
  background-color: #ffffff;
  background-image: url('../images/contour-lines.svg');
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 100%;

  .our-expansion-plans {
    text-align: center;

    .our-expansion-text {
      font-family: "Noto Sans Display", sans-serif;
      font-size: 18px;
      font-weight: 500;
      text-transform: uppercase;
      background: #D4AD68;
      background: linear-gradient(to bottom, #D4AD68 0%, #aa7215 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-decoration: underline;
      letter-spacing: 2px;
      margin-bottom: 30px;
      text-align: center;
      position: relative;
      display: inline-block;

      @media(width <=1280px) {
        margin-bottom: 15px;
      }

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, #D4AD68 0%, #aa7215 100%);
      }
    }
  }

  .our-expansion-title {
    display: flex;
    flex-direction: column;
    align-items: center;

    .our-expansion-text {
      font-size: clamp(26px, calc(1.625rem + (40 - 26) * ((100vw - 768px) / (1920 - 768))), 40px);
      color: #000;
      font-family: "Noto Sans Display", sans-serif;
      line-height: 1;
      font-weight: 400;
      text-transform: uppercase;
      text-align: center;
    }

    .pinyon-script-font {
      font-size: clamp(36px, calc(2.25rem + (60 - 36) * ((100vw - 768px) / (1920 - 768))), 60px);
      margin-top: -41px;
      line-height: 1;
    }
  }

  .mid-conten-sec {
    .box-grid-flex {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 100%;

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

    .box-grid-block,
    .box-grid-block-3,
    .box-grid-block-4,
    .box-grid-block-5 {
      padding: 40px 40px;
      display: inline-block;
      color: #fff;
      font-family: 'Noto Sans Display', sans-serif;
      text-align: center;

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

      img {
        text-align: center;
      }

      .box-1 p {
        font-size: clamp(16px, calc(1rem + (22 - 16) * ((100vw - 768px) / (1920 - 768))), 22px);
        font-weight: 300;
        font-style: italic;
        text-transform: uppercase;
        margin: 0;
        line-height: 1.4;
        color: #BEBFBD;

        strong {
          font-weight: 600;
          color: #666;
        }
      }

      .divider-line {
        border-top: 1px solid #c2a14b;
        width: 80%;
        margin: 10px auto;
      }

      .box-2 {
        p {
          margin: 10px 0 0;
          font-size: clamp(18px, calc(1.125rem + (20 - 18) * ((100vw - 768px) / (1920 - 768))), 20px);
          font-weight: 400;
          color: #666666;
          line-height: 1.2;
        }

        .num-grey {
          color: #666666;
          font-weight: 300;
        }

        .num-highlight {
          color: #666;
          font-weight: 600;
          font-size: clamp(22px, calc(1.375rem + (26 - 22) * ((100vw - 768px) / (1920 - 768))), 26px);
        }
      }

      .box-grid-block-3 {
        padding: 40px 11px;
      }

      .box-grid-block-4 {
        padding: 36px 65px;
      }

      .box-grid-block-5 {
        padding: 40px 0;
      }
    }
  }

  .map-z-index {
    position: relative;
    z-index: 0;
  }

  .year-cta {
    display: flex;
    justify-content: center;
    gap: 0px;
    margin: -50px 0 0 0;
    position: relative;
    z-index: 2;

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

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

    .map25 {
      position: relative;
      right: 45px;

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

    a {
      border: 1px solid #666;
      border-radius: 25px;
      background: #fff;
      font-size: 18px;
      font-weight: 500;
      padding: 10px 30px;
      color: black;
      display: inline-block;

      &:hover {
        background: linear-gradient(to bottom, #baa16a, #a77b32);
        border: 1px solid #000;
        color: #fff;
      }
    }

    .year-cta-active {
      background: linear-gradient(to bottom, #baa16a, #a77b32);
      border: 1px solid #000;
      color: #fff;
    }
  }

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

    .mid-conten {

      .box-grd-block,
      .box-grd-block-3,
      .box-grd-block-4,
      .box-grd-block-5 {
        padding: 20px 20px;

      }
    }

    .our-expansion-plans {
      .our-text {
        margin-bottom: 10px;
      }
    }
  }

  @media (width <=768px) {
    .our-expansion-title {
      .pinyon-script-font {
        line-height: 49px;
        margin-top: 0px;
      }
    }
  }

  @media (width <=468px) {
    .mid-conten {
      .box-grd-flex {
        flex-direction: row;
      }

      .box-grd-block,
      .box-grd-block-3,
      .box-grd-block-4,
      .box-grd-block-5 {
        padding: 10px;
        width: 50%;
      }
    }
  }
}

/* our-expansion section end */

/* Scale section start */
.scale-section {
  padding: 50px 0px;
  background-color: #000000;
  background-image: url('../images/contour-lines.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  width: 100%;

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

  .scale-sec-heading {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 20px;

    .pinyon-script-font {
      line-height: clamp(35px, calc(2.1875rem + (70 - 35) * ((100vw - 768px) / (1920 - 768))), 70px);
      font-size: clamp(36px, calc(2.25rem + (60 - 36) * ((100vw - 768px) / (1920 - 768))), 60px);
      padding-right: 16px;

      @media (width <=1440px) {
        line-height: 1;
      }
    }

    .normal-text {
      font-size: clamp(26px, calc(1.625rem + (40 - 26) * ((100vw - 768px) / (1920 - 768))), 40px);
      color: #ffffff;
      font-family: "Noto Sans Display", sans-serif;
      line-height: 0px;
      font-weight: 400;
      text-transform: uppercase;
    }
  }

  .scale-boxes-desktop {
    display: block;
  }

  .scale-boxes-mobile {
    display: none;
  }

  .scale-boxes-sec {
    .scale-boxes {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 15px;

      .scale-box {
        width: calc(25% - 10px);
        position: relative;
        overflow: hidden;
        
        .play-cta-launch 
        {
          width: 60px;
          height: 60px;
          left: 48px;
          top: 54px;

          @media(width <= 992px)
          {
            width: 50px;
            height: 50px;
            left: 38px;
            top: 42px;
          }

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

        .scale-img {
          width: 100%;
          height: auto;
          border: 1px solid #e09c43;
          position: relative;
          transition: all 0.5s ease-in-out;
          cursor: pointer;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #000000 0%, #aa7215 20%, #aa7215 40%, #aa7215 60%, #aa7215 80%, #aa7215 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 1;
          }

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 200px;
            width: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 60%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);
            z-index: 0;
          }

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

          .scale-text {
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
            text-align: center;
            margin: 0 auto;
            z-index: 2;

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

           .scale-text-title {
              font-size: clamp(16px, calc(1rem + (18 - 16) * ((100vw - 768px) / (1920 - 768))), 18px);
              margin-top: 20px;
              font-weight: 500;
              text-transform: uppercase;
              line-height: 1.4;
              padding: 5px;
            }

            .big-num {
              font-family: 'Noto Sans Display', sans-serif;
              font-size: clamp(26px, calc(1.625rem + (30 - 26) * ((100vw - 768px) / (1920 - 768))), 30px);
              font-weight: 300;
              color: #666;
              transition: color 0.5s ease;
              line-height: 1;
            }

            span {
              display: block;
              font-family: 'Noto Sans Display', sans-serif;
              font-size: clamp(16px, calc(1rem + (23 - 16) * ((100vw - 768px) / (1920 - 768))), 23px);
              font-weight: 400;
              color: #D1D3D4;
              line-height: 1;
            }
          }

          &:hover .scale-text .big-num {
            color: #ffffff;
          }

          &:hover p.overlay-text {
            opacity: 1;
          }

          &:hover::before {
            opacity: 0.9;
          }

          p.overlay-text {
            padding: 0 15px;
            position: absolute;
            left: 0;
            right: 0;
            top: 5%;
            text-align: center;
            color: white;
            opacity: 0;
            font-family: 'Noto Sans Display', sans-serif;
            transition: opacity 0.5s ease;
            z-index: 1;
            font-size: 18px;

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

  }

  @media (width <=768px) {
    .scale-boxes-desktop {
      display: none;
    }

    .scale-boxes-mobile {
      display: block;
      position: relative;


      .scale-boxes-mobile-slider {

        .play-cta-launch 
        {
          @media(width <= 468px)
          {
            top: 67px;
          }
        }

        .scale-img {
          width: 100%;
          height: auto;
          border: 1px solid #e09c43;
          position: relative;
          transition: all 0.5s ease-in-out;

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

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 200px;
            width: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 60%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);
            z-index: 0;
          }
        }

        .scale-text {
          position: absolute;
          bottom: 0px;
          left: 0;
          right: 0;
          text-align: center;
          margin: 0 auto;
          z-index: 2;
          padding: 5px;

          p {
            font-size: 18px;
            margin-top: 20px;
            font-weight: 500;
            text-transform: uppercase;

            span {
              margin: 20px 10px;
              font-size: 16px;
              font-weight: 500;
              color: white;
            }
          }

          p {
            font-size: 12px;
            margin-top: 10px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.7);
            padding: 0 22px;
          }

          .big-num {
            font-family: 'Noto Sans Display', sans-serif;
            font-size: 30px;
            font-weight: 300;
            color: #ffffff;
            transition: color 0.5s ease;
          }
        }
      }

      .swiper-button-prev::after,
      .swiper-button-next::after {
        content: none;
      }

      .swiper-button-prev.scale-boxes-mobile-slider-prev,
      .swiper-button-next.scale-boxes-mobile-slider-next {
        background: linear-gradient(to right, #b18f50, #aa833e);
        background: -webkit-linear-gradient(to right, #b18f50, #aa833e);
        width: 30px;
        display: flex;

        img {
          max-width: 10px;
        }
      }

      .swiper-button-prev.scale-boxes-mobile-slider-prev {
        left: 0px;
        top: 22px !important;
      }

      .swiper-button-next.scale-boxes-mobile-slider-next {
        right: 0px;
        top: 22px !important;
      }
    }
  }

  @media (width <=468px) {
    .scale-sec-heading {
      margin-bottom: 30px;

      .normal-text {
        line-height: 1;
        text-align: center;
      }
    }
  }
}
/* Scale section end */


/* revolutionary section start */
.revolutionary-sec {
  padding: 50px 0px;
  background-color: #fff;
  color: #000;

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

  .revolutionary-head {
    padding-top: 20px;

    .pinyon-script-font {
      font-size: clamp(36px, calc(2.25rem + (60 - 36) * ((100vw - 768px) / (1920 - 768))), 60px);
      line-height: 50px;
    }

    .normal-text {
      font-size: clamp(26px, calc(1.625rem + (40 - 26) * ((100vw - 768px) / (1920 - 768))), 40px);
      color: #000000;
      font-family: "Noto Sans Display", sans-serif;
      line-height: 1;
      font-weight: 400;
      text-transform: uppercase;
      text-align: center;
    }

    sup {
      top: -16px;
      color: #000000;
      font-size: clamp(14px, calc(0.875rem + (20 - 14) * ((100vw - 768px) / (1920 - 768))), 20px);
    }
  }

  .pro-steps-revolutionary {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    padding-top: 30px;

    @media(width <=468px) {
      padding: 15px 0px;
      gap: 10px;
    }

    .pro-step-revolutionary {
      font-size: 1.1rem;
      font-weight: normal;
      text-transform: capitalize;
      position: relative;

      &:not(:last-child)::after {
        content: "|";
        position: absolute;
        right: -18px;
        color: #ccc;

        @media(width <= 468px)
        {
          right: -10px;
        }
      }

      &::first-letter {
        font-weight: bold;
      }
    }
  }

  .cta-revolutionary {
    display: inline-block;
    padding: 9px 42px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-decoration: none;
    border-radius: 30px;
    border-color: transparent;
    border: solid 1px #000;
    font-size: 16px;
    color: #000;
    letter-spacing: 6px;
    text-align: center;
    transition: 0.4s ease;

    &:hover {
      color: #000;
      background: linear-gradient(to bottom, #baa16a, #a77b32);
    }

    @media(width <= 768px)
    {
      font-size: 14px;
      letter-spacing: 3px;
      padding: 9px 32px;
    }
  }

  .content-col-revolutionary {
    padding: 0 55px;

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

      .scroll-bar-hidden::-webkit-scrollbar
      {
        display: none;
      }
    }

    .col-revolutionary {
      width: calc(33.33% - 10px);

      @media(width <=468px) {
        width: calc(90% - 0px);
      }

      .card-image {
        width: 100%;
        object-fit: cover;
      }

      .col-title-revolutionary {
        font-size: clamp(18px, calc(1.125rem + (24 - 18) * ((100vw - 768px) / (1920 - 768))), 24px);
        font-weight: 400;
        margin: 20px 0 0 0;
        text-transform: uppercase;
        line-height: 1;
        min-height: 58px;
      }

      .col-text-revolutionary {
        font-size: clamp(16px, calc(1rem + (18 - 16) * ((100vw - 768px) / (1920 - 768))), 18px);
        line-height: 1.5;
        margin-bottom: 0px;
      }
    }
  }

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

    .content-col-revolutionary {
      padding: 0 15px;
    }
  }
}
/* revolutionary section end */

/*  Design Culture Section start */
.design-culture-section
{
  display: block;

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

.design-culture-wrap-mob
{
  display: none;

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

.design-culture-section, .design-culture-wrap-mob {
  position: relative;

  .design-culture-bg {
    background-image: url(../images/design-culture-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 800px;
    position: relative;
    
      @media(width <= 1440px)
      {
        height: 600px;
      }

      @media(width <= 1024px)
      {
        height: 500px;
      }

      @media(width <= 468px)
      {
        background-image: url(../images/design-culture-mob-bg.webp);
        width: 100%;
        height: 400px;
      }
    }

    .design-culture-heading {
      font-family: "Noto Sans Display", sans-serif;
      font-size: clamp(24px, calc(1.5rem + (54 - 24) * ((100vw - 768px) / (1920 - 768))), 54px);
      font-weight: 400;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 0.9;
      padding: 20px;
      width: 80%;

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

      span {
        display: block;
        font-size:  clamp(24px, calc(1.5rem + (54 - 24) * ((100vw - 768px) / (1920 - 768))), 54px);
        font-weight: 400;
        text-transform: none;
        letter-spacing: 1px;
        background: linear-gradient(to bottom, #D4AD68 0%, #aa7215 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-decoration: underline solid #b8860b 3px;
        text-underline-offset: 2px;
        line-height: 0.9;

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

  .design-culture-buttons {
      display: flex;
      justify-content: center;

      .design-culture-btn {
        backdrop-filter: blur(5px);
        padding: 0px 20px;
        min-width: 204px;
        color: #fff;
        border-radius: 40px;
        border: 1px solid #b8860b;
        font-family: "Noto Sans Display", sans-serif;
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        opacity: 0.7;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

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

        &:hover {
          background-color: rgb(184 134 11 / 45%);
        }

        .toggle-icon {
          font-weight: 100;
          font-size: 32px; 

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

      .concept-btn {
        position: absolute;
        left: 0;
        transform: translate(20px, 153px); 

        @media (width <= 1440px)
        {
          transform: translate(20px, 27px);
        }

        @media(width <= 468px)
        {
          transform: translate(10px, 81px);
        }
      }

      .architects-btn {
        position: absolute;
        top: 32rem;
        right: 18rem;
        transform: translateY(-50%);

        @media(width <= 1440px)
        {
          top: 21rem;
        }

        @media(width <= 992px)
        {
          top: 18rem;
          right: 1rem;
        }

        @media(width <= 468px)
        {
          transform: translateY(30%);
          top: 20.8rem;
        }
      }
    }

    #concepts-content {
      position: absolute;
      bottom: 0;
    }

    .content-panel {
      width: 100%;
      background-color: #000;
      padding: 40px 0 0 0;
      color: white;
      font-family: "Noto Sans Display", sans-serif;
      position: relative;

      .close-icon-concept {
        font-size: 30px;
        position: absolute;
        right: 20px;
        top: 0;
        cursor: pointer;
      }

      .content-panel-inner-bkp {
        .image-grid {
          display: flex;
          gap: 35px;
          padding: 10px;

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

          .image-item {
            flex: 1;

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

            video, .placeholder-image img {
              height: 260px;
              width: 280px;
              margin: 0 auto;
              object-fit: cover;

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

            .image-caption {
              font-size: 14px;
              text-align: center;
              font-weight: 100;
              line-height: 1.5;
              margin-top: 20px;
              text-transform: uppercase;

              .bold-text {
                font-weight: 500;
                text-decoration: underline;
              }
            }
          }
        }

        .architect-expandable {
          display: flex;
          padding: 0 30px;
          height: 50vh;

          .architect-expandable-container {
            height: auto;
            display: inline-block;
            position: relative;
            overflow: hidden;
            padding: 0 6px;

            &:not(:hover) {
              width: calc(33.33vw);
            }

            &:hover .col-bg::after {
              height: 60vh;
              background: linear-gradient(180deg, rgb(0 0 0 / 2%) 5.2%, #000 60%);
            }

            &:hover .architect-detailblock {
              opacity: 1;
              transform: translateX(0);
            }

            .col-bg {
              background-blend-mode: multiply;
              background-position: center;
              background-repeat: no-repeat;
              content: "";
              position: relative;
              cursor: pointer;
              transform: all 2s ease;
              height: 60vh;


              &::after {
                content: "";
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 21vh;
                background: linear-gradient(180deg, rgb(0 0 0 / 2%) 5.2%, #000 35%);

              }
            }

            .architect-detailblock {
              opacity: 0;
              transform: translateX(100%);
              transition: opacity 0.8s ease-out, transform 0.8s ease-out;
              position: absolute;
              bottom: 50px;
              left: 0;
              right: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              text-align: center;

              @media(width <= 1440px)
              {
                bottom: 0px;
              }

              .architectName {
                font-size: clamp(24px, calc(1.5rem + (28 - 24) * ((100vw - 768px) / (1920 - 768))), 28px);
                color: white;
                font-family: 'Playfair Display', serif;
                text-transform: uppercase;
              }

              .architectCity {
                font-size: clamp(28px, calc(1.75rem + (40 - 28) * ((100vw - 768px) / (1920 - 768))), 40px);
                color: #BDA371;
                font-family: 'bon_vivant_family_scriptRg';
                font-weight: bold;
              }

              ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding: 0 10px;
                list-style: none;

                li {
                  margin-bottom: 10px;
                  width: calc(30% - 0px);
                  margin-right: 5px;

                  img {
                    width: 68px;
                  }
                }
              }
            }

            .col-bg-ilan {
              background-image: url(../images/ilan-expand.webp);
            }

            .col-bg-yasmin {
              background-image: url(../images/yasmin-expand.webp);
            }

            .col-bg-blaine {
              background-image: url(../images/blaine-expand.webp);
            }

            .col-bg-darine {
              background-image: url(../images/darine-expand.webp);
            }

            .col-bg-ruta {
              background-image: url(../images/ruta-expand.webp);
            }

            .col-bg-peter {
              background-image: url(../images/peter-expand.webp);
            }

            .col-bg-danny {
              background-image: url(../images/danny-expand.webp);
            }

            .col-bg-karim {
              background-image: url(../images/karim-expand.webp);
            }

            .col-bg-ross {
              background-image: url(../images/rossprofile1.webp);
            }

            .col-bg-david {
              background-image: url(../images/david-expand.webp);
            }

            .col-bg-laetitia {
              background-image: url(../images/laetitia-expand.webp);
            }

            .col-bg-blanco {
              background-image: url(../images/blanco-expand.webp);
            }

            .col-bg-femke {
              background-image: url(../images/femke-expand.webp);
            }

            .col-bg-sean {
              background-image: url(../images/sean-expand.webp);
            }

            .col-bg-ivanna {
              background-image: url(../images/ivanna-expand.webp);
            }

            .col-bg-chen {
              background-image: url(../images/chen-expand.webp);
            }
          }
        }
      }

      .close-icon-architects {
        font-size: 30px;
        position: absolute;
        right: 20px;
        top: 0;
        cursor: pointer;
      }

      .concept-mobile-prev, .concept-mobile-next
      {
        width: 40px;
        height: 40px;
      }
    }

    #architects-content {
      height: auto;
      position: absolute;
      bottom: 0;
    }

    .architectselecttext {
      text-align: center;
      font-size: clamp(28px, calc(1.75rem + (34 - 28) * ((100vw - 768px) / (1920 - 768))), 34px);
      color: white;
      line-height: normal;
      font-family: "Playfair Display", serif;
      background-color: rgba(0, 0, 0, 1);
      padding: 10px;

      span {
        font-size: clamp(18px, calc(1.125rem + (24 - 18) * ((100vw - 768px) / (1920 - 768))), 24px);
        display: block;
        text-align: center;
        font-family: "Playfair Display", serif;
      }
    }

  @media (width <=1440px) {
    .design-culture-bg {
      .content-panel {
        .content-panel-inner-bkp {
          .architect-expandable {
            .architect-expandable-container {
              .col-bg {
                height: 50vh;

                &::after {
                  height: 11vh;
                }

              }
            }
          }
        }
        .content-panel-inner-bkp {
          .image-grid {
            gap: 15px;
          }

          .architect-expandable {
            height: auto;
          }
        }
      }
    }
  }

  @media (width <=768px) {
    .design-culture-bg {
      & .design-culture-buttons {
        .architects-btn {
          right: 1rem;
        }
      }
    }
  }

}
/*  Design Culture Section end */

/* Tens things section start */
.tenThingsSection
{
  padding: 50px 0px;
  background: #D2D3D5;

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

  .gallery-container-desktop
  {
    display: block;
    padding-left: 50px;
    position: relative;

    @media(width <= 1024px)
    {
      padding-left: 20px;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 100%;
      background: -webkit-linear-gradient(#b18f50, #aa833e);
      z-index: 1;

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

    .gallery-thumbs
    {
      .swiper-slide {
        font-family: "Noto Sans Display", sans-serif;
        font-size: 16px;
        line-height: normal;
        padding-left: 20px !important;
        height: fit-content !important;
        border-bottom: 1px solid #333;
        padding: 12px 0;
        color: #333;
        cursor: pointer;

         @media(width <= 1024px)
        {
          padding-left: 10px !important;
        }
      }

      .swiper-slide-thumb-active, .swiper-slide:hover
      {
        color: #000;
        font-weight: 600;
        font-style: italic;
      }

      .thumb-nos
      {
        font-size: 20px;
        color: #000;
        text-decoration: underline;
        font-weight: 500;
      }

      .swiper-wrapper
      {
          padding-bottom: 0px;
      }
    }

    .gallery-main
    {
         .swiper-wrapper
          {
              padding-bottom: 0px;
          }
    }
    @media(width <= 992px)
    {
      display: none;
    }
  }

  .gallery-container-mobile
  {
      display: none;

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

      .tenThingsVideoTitleMob
      {
        font-size: 18px;
        font-family: "Noto Sans Display", sans-serif;
        color: #000;
        font-weight: 600;
        font-style: italic;
        display: flex;
        padding: 20px;
        text-align: center; 
        margin-bottom: 0px;
        justify-content: center;
        margin-bottom: 10px;

        span 
        {
          font-size: 18px;
          text-decoration: underline;
          padding-right: 10px;
          font-style: normal;
        }
      }
      .gallery-slider-mobile {
        .swiper-pagination {
          width: 69%;
        }
        .swiper-wrapper {
            padding-bottom: 30px;
        }

        .gallery-slider-mobile-counter
        {
          color: #000000
        }
      }

        iframe 
        {
          @media(width <= 992px)
          {
            height: 48vw;
          }

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

  .ten-things-sec-head
  {
    .normal-text
    {
      font-size: clamp(26px, calc(1.625rem + (40 - 26) * ((100vw - 768px) / (1920 - 768))), 40px);
      color: rgb(0, 0, 0);
      font-family: "Noto Sans Display", sans-serif;
      line-height: 1;
      font-weight: 400;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 50px;

      @media(width <= 768px)
      {
        margin-bottom: 20px;
      }
    }
    
      .pinyon-script-font {
        font-size: clamp(36px, calc(2.25rem + (60 - 36) * ((100vw - 768px) / (1920 - 768))), 60px);
        line-height: 1;
      }
    }
}
/* Tens things section end */

/* resident real state section start */
.resident-real-state-sec
{
  padding: 50px 0;
  background: #000 url(../images/residental-real-state-bg.svg) no-repeat;
  background-position: top;
  background-size: 100%;
  position: relative;
  z-index: 1;

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

  .resident-real-state-heading
  {
    .normal-text-small
    {
      color: #fff;
      font-size: clamp(16px, calc(1rem + (18 - 16) * ((100vw - 768px) / (1920 - 768))), 18px);
      text-decoration: underline;
      font-weight: 400;
      text-align: center;
    }

    .normal-text
    {
      font-size: clamp(26px, calc(1.625rem + (40 - 26) * ((100vw - 768px) / (1920 - 768))), 40px);
      color: rgb(255, 255, 255);
      font-family: "Noto Sans Display", sans-serif;
      line-height: 1;
      font-weight: 400;
      text-transform: uppercase;
      text-align: center;
    }
  }
}
/* resident real state section end */

/* Award section start */
.award-sec
{
  padding: 50px 0px;
  position: relative;
  display: flex;
  align-items: center;
  background: #000;
  color: #ffffff;
  flex-wrap: nowrap;

  .award-section::after {
    content: "";
    position: absolute;
    bottom: -33%;
    width: 100%;
    height: 100%;
    background-image: url(../images/contour-lines.svg);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    z-index: 0;
  }

  @media(width <= 1440px)
  {
    padding: 25px 0px;
  }
  .normal-text
  {
    font-size: clamp(26px, calc(1.625rem + (40 - 26) * ((100vw - 768px) / (1920 - 768))), 40px);
    color: rgb(255, 255, 255);
    font-family: "Noto Sans Display", sans-serif;
    line-height: 1;
    font-weight: 400;
    text-transform: uppercase;
    text-align: left;
  }
  .pinyon-script-font
  {
    font-size: clamp(36px, calc(2.25rem + (60 - 36) * ((100vw - 768px) / (1920 - 768))), 60px);
     line-height: 1;
     text-transform: lowercase;
  }
  .link-small {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: clamp(16px, calc(1rem + (20 - 16) * ((100vw - 768px) / (1920 - 768))), 20px);
    text-transform: uppercase;
    color: white;
    border-bottom: 1px solid white;
    font-family: "Noto Sans Display", sans-serif;
  }
  .award-left {
      padding: 80px 0px 0 0;
      position: relative;

      .award-para
      {
          margin-top: 100px;
          max-width: 520px;
          font-size: clamp(18px, calc(1.125rem + (26 - 18) * ((100vw - 768px) / (1920 - 768))), 26px);
          font-family: "Noto Sans Display", sans-serif;

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

          .highlight {
              color: #b18f50;
              text-decoration: underline;
              letter-spacing: 0.6px;
          }
      }
  }

  .award-right
  {
    display: flex;
    align-items: center;
    height: 100%;
    
    .awardSwiper
    {
        .swiper-slide
        {
          width: 18.75rem;
          display: flex;
          flex-direction: column;
          justify-content: end;
          align-items: self-start;
          position: relative;

          div {
              padding-bottom: 0.625rem;
          }
          .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right {
              background-image: none;
          }
        }

        .swiper-button-prev,.swiper-button-next {
            bottom: 0;
            top: auto !important;
            background: -webkit-linear-gradient(#aa833e, #b18f50);
            width: 50px;
        }

        .swiper-button-next {
            right: 31.4%;

            @media(width <= 1440px)
            {
              right: 23.4%;
            }

            @media(width <= 768px)
            {
              right: 0;
            }
        }
        .swiper-button-prev {
            left: 31.4%;

            @media(width <= 1440px)
            {
              left: 23.4%;
            }

            @media(width <= 768px)
            {
              left: 0;
            }
        }
        .awardSwiper-pagination
        {
          width: 20%;
          bottom: 5%;
           @media(width <= 1440px)
            {
              width: 27%;
            }
        }
    }
  }
}
/* Award section end */

/* Global Video structure and modal start*/
.video-sec
{
  position: relative;

  .video-container {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
      margin: 0 auto;
      z-index: 2;

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

.play-cta-launch
{
  border: 0;
  position: absolute;
  left: 10%;
  width: 80px;
  text-align: center;
  margin: 0 auto;
  top: 15%;
  right: auto;
  margin: 0 auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-wrap: nowrap;
  white-space: nowrap;
  
  @media(width <= 1440px)
  {
    height: 70px;
    width: 70px;
    top: 20%;
  }

  @media(width <= 1024px)
  {
    height: 60px;
    width: 60px;
    top: 18%;
  }

  @media (width <= 468px)
  {
    height: 60px;
    width: 60px;
    top: 50%;
    left: 50%;
  }

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

.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  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 {
        width: 100%;
        height: 100%;
        border: 3px solid #a77b32;
    }
  }
}
/* Global Video structure and modal end*/

.playVideoHover {
  position: absolute;
  inset: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: pointer;
  overflow: hidden;
  font-size: 10px;
  cursor: pointer ;
  z-index: 4;

}


.videoUrl:hover .playVideoHover {
  opacity: 1;
  transform: scale(1);
  animation: pulse 1.8s ease-in-out infinite;
}


.playVideoHover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transform: scale(1.2);
  opacity: 0;
}

.videoUrl:hover .playVideoHover {
  animation: pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.videoUrl:hover .playVideoHover::after {
  animation: ripple 1.5s ease-out infinite;
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.6);
}

/* More visible breathing/pulse animation */
@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2),
      0 10px 25px rgba(0, 0, 0, 0.4);
  }

  50% {
    transform: scale(1.15);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.35),
      0 15px 35px rgba(0, 0, 0, 0.6);
  }
}

/* More dramatic expanding fading ripple */
@keyframes ripple {
  0% {
    transform: scale(1.2);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}


/* Global swiper pagination and counter css start */

.gallery-slider-mobile,
.scale-boxes-mobile-slider,
.awardSwiper,
.launch-events-gallery-slider, 
.event-gallery-slider,
.inspiring-voice-slider, 
.mobile-grid-slider,
.architecture-slider,
.retail-experience-slider,
.internal-news-slider,
.internal-upcoming-slider
{
  padding: 0px 30px;

  .swiper-wrapper {
      padding-bottom: 60px;

      @media(width <= 1024px)
      {
        padding-bottom: 40px;
      }
  }

  .swiper-pagination {
      top: inherit;
      width: 80%;
      left: 0%;
      right: 0;
      bottom: 7%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      transform: translate(0px, 0px);
      margin: auto;
      background: #ffffff;

      .swiper-pagination-bullet {
          border-radius: 0;
          margin: 0;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          -webkit-transition: all .35s ease;
          -o-transition: all .35s ease;
          transition: all .35s ease;
          height: 3px;
          margin: 0;

      }

      .swiper-pagination-bullet-active {
          background: #bda375;
      }
  }

  .swiper-button-next {
      right: 0;
  }

  .swiper-button-prev {
     left: 0px;
  }

  .swiper-button-next,
  .swiper-button-prev
  {
    top: 22px;
    background: linear-gradient(to right, #baa16a, #a77b32);
    background: -webkit-linear-gradient(to right, #baa16a, #a77b32);
    width: 30px;
    display: flex;

    img, svg
    {
      width: 15px;
    }
  }
  
  .scale-box-counter,
  .gallery-slider-mobile-counter,
  .awardSwiper-counter,
  .launch-events-gallery-counter, 
  .event-gallery-counter,
  .inspiring-voice-counter,
  .mobile-grid-slider-counter,
  .architecture-slider-counter,
  .retail-experience-counter,
  .internal-news-slider-counter,
  .internal-upcoming-slider-counter {
      position: absolute;
      bottom: -4px;
      left: 0;
      right: 0;
      text-align: center;
      margin: 0 auto;
      color: #ffffff;
      font-size: 18px;
  }
}
/* Global swiper pagination and counter css end */


.townships-phase-sec
{
  padding: 30px 0px;
  background-color: #D2D3D5;

  .nav-tabs {
      justify-content: center;
      border: none;
      gap: 5px;
      margin-bottom: 0px;

      .active {
          background-color: #BDA371;
          color: #000000;
      }

      .nav-item 
      {
          padding: 5px;

          .nav-link {
              border-radius: 50px;
              border-color: transparent;
              border: solid 1px #000;
              font-size: 14px;
              color: black;
              font-family: "Noto Sans Display", sans-serif;
              width: 145px;
              padding: 10px 0px;
          }
      }
  }
}

.video-section
{
  .play-btn-launch
  {
    .playIconvideoLarge
    {
        @media(width <= 468px)
        {
            width: 50px !important;
            height: 50px !important;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            transform: translate(-8%, 80%);
        }
    }
    
  }
}
.form-section-title-wrap .pinyon-script-font
{
  @media(width <= 468px)
  {
    font-size: 4rem !important;
  }
}

.together-text-row
{
  @media (width <= 468px)
  {
    justify-content: center;
  }
}

/* Auto slider start */
.imagescroller
{

  .swiper-slide{
    width: 100%;
    height: 100vh;
  }
  .auto-slider
  {
    /* .swiper-wrapper {
      transition-timing-function: linear;
    } */

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

    h2
    {
      font-size: 20px;
      font-family: "Noto Sans Display", sans-serif;
      font-weight: 600;
      color: #ffffff;
      text-transform: uppercase;
      text-align: center;
      margin-top: 20px;

    }
  }
}
/* Auto slider End */