$themeColor : #d4b038 
// $themeColor : linear-gradient(to right, 
//     #AA6C39 0%,    /* Dark Gold/Brown at the start */
//     #C28E4D 25%,   /* Aztec Gold for shine */
//     #E6C16A 50%,   /* Middle Yellow Red as the highlight */
//     #C28E4D 75%,   /* Aztec Gold for shine */
//     #AA6C39 100%   /* Dark Gold/Brown at the end */
//   )
$secondarycolor: #f7f5ef
// $themeColor : #25505b
$opacity: 0.2
$themeColorWithOpacity: rgba($themeColor, $opacity)
// $themeColorWithOpacity: #d4b038

  
  
// html,body
//   padding: 0
//   margin: 0
//   color: #6d6d6d



@font-face 
  font-family: FuturaBT-Book
  src: url(../font/FuturaBT-Book.otf)

@font-face 
  font-family: HistoryPro
  src: url(../font/HistoryPro-Two.woff2)



.HistoryPro
  font-family: HistoryPro 

.FuturaBT-Book
  font-family: FuturaBT-Book

.owl-theme .owl-nav [class*=owl-]
  font-family: math

.nanum-myeongjo-regular
  font-family: "Nanum Myeongjo", serif
  font-weight: 400
  font-style: normal


.nanum-myeongjo-bold
  font-family: "Nanum Myeongjo", serif
  font-weight: 700
  font-style: normal


.nanum-myeongjo-extrabold 
  font-family: "Nanum Myeongjo", serif
  font-weight: 800
  font-style: normal


.playfair-display-regular
  font-family: "Playfair Display", serif
  font-optical-sizing: auto
  font-weight: 400
  font-style: normal

.playfair-display-medium
  font-family: "Playfair Display", serif
  font-optical-sizing: auto
  font-weight: 500
  font-style: normal

.playfair-display-semibold
  font-family: "Playfair Display", serif
  font-optical-sizing: auto
  font-weight: 600
  font-style: normal

.playfair-display-bold
  font-family: "Playfair Display", serif
  font-optical-sizing: auto
  font-weight: 700
  font-style: normal

.inter-regular
  font-family: "Inter", sans-serif
  font-optical-sizing: auto
  font-weight: 300
  font-style: normal

.inter-medium
  font-family: "Inter", sans-serif
  font-optical-sizing: auto
  font-weight: 500
  font-style: normal

.inter-semibold
  font-family: "Inter", sans-serif
  font-optical-sizing: auto
  font-weight: 600
  font-style: normal

.inter-bold
  font-family: "Inter", sans-serif
  font-optical-sizing: auto
  font-weight: 700
  font-style: normal






.AnimatePrice
  // display: inline-block
  padding: 2px
  position: relative
  overflow: hidden
  border-radius: 12px
  background: $themeColorWithOpacity
  transition: 1s linear
  // border: 3px solid #afafaf

  .enquireNowBtn
    position: relative
    color: $themeColor
    background: #000
    
    
form
  width: 100%
  display: flex

 
.AnimatePrice::before
  position: absolute
  content: ""
  background: conic-gradient(from 40deg at 50% 50%,#FFFFFF00  43%, $themeColor 100%)
  top: 0
  left: 0
  width: 100%
  height: 100%
  // translate: -150px 0px
  rotate: 0deg
  
  // animation: rotate 2s linear infinite

.AnimatePrice::before
  animation-name: rotate
  animation-duration: 3s
  transform: scale(8)
  animation-iteration-count: infinite
  animation-timing-function: linear


@keyframes rotate 

  from
    rotate: 0deg
    
  to
    rotate: 360deg


    
// @keyframes borderapp
  
//   from
//     border: 1px solid #000
    
//   to
//     border: 0px solid #000
  
.playvideooverlap
  video
    pointer-events: none
  


.row
  max-width: unset

.owl-carousel .owl-stage-outer
  overflow: unset !important

.popupBack
  position: fixed
  z-index: 20
  background: #000000cc
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  display: none
  backdrop-filter: blur(5px)
  
.GalleryPopup
  position: fixed
  display: flex
  z-index: 21
  background: #fff
  top: 50%
  left: 50%
  // width: 80vw
  // height: 80vh
  transform: translate(-50%, -50%) scale(0)
  align-items: center
  justify-content: center
  transition: .3s ease-out
  overflow: hidden
  border-radius: 12px
  width: 70%
  border-radius: 12px


  .closeGallery
    display: inline-block
    position: absolute
    color: #fff
    top: 15px
    right: 15px
    width: 15px
    


  img
    width: 100%



header
    background: #fff
    backdrop-filter: saturate(180%) blur(20px)
    position: fixed
    width: 100%
    z-index: 20
    box-shadow: 0 0 14px -5px $themeColor
    transition: .3s ease-out
    top:-88px



    .inner
        margin: auto 5%


    .navbar-brand
      img
        width: 157px
       
    .nav-link
         color: #000 !important
         font-size: 14px

    .shareicon
      display: none

@media only screen and (max-width: 480px)
  header
    .shareicon
      display: block
      width: 30px

@media only screen and (min-width: 1800px)
  .nav-link
      font-size: 16px !important



    

.navbar-collapse
    flex-grow: 0

.enquireNowBtn
    
    background: $themeColor
    text-align: center
    
    color: #000
    border-radius: 12px
    font-size: 15px
    align-items: center
    display: flex
    justify-content: center
    padding: 7px 15px

    img
      width: 25px
      margin-right: 10px

.outer
    width: 100



section
    width: 100%
    padding: 4% 0
    justify-content: center
    overflow: hidden
    // display: flex
    // align-items: center
    // transition: .5s ease-out

    
.sectitle
  font-size: 60px
  text-align: center
  color: $themeColor
  margin-bottom: 15px

.linehor
  display: flex
  justify-content: center
  width: 100%
  margin-bottom: 20px
  
  .linehorinner
    background: $themeColor
    width: 12%
    height: 3px


.secsubtitle
  font-size: 18px
  text-align: center
  margin-bottom: 25px
  color: #ababab
    

.owl-nav
  display: inline-block
  float: right
  margin-right: 10%

  .owl-prev, .owl-next    
    border-radius: 12px !important
    padding: 0px 18px !important
    font-size: 30px !important
    color: #000 !important

    
  

.banner
  display: flex

  align-items: center
  justify-content: center
  height: 100%
  // position: fixed
  z-index: 2
  transition: 1s ease-out
  top: 0
  left: 0
  padding: 0
  
.bannerShrink
  // background-image: url(../img/banner2.webp)
  background-size: cover
  background-position: center  
  z-index: 9
  width: 100%
  height: 100%
  overflow: hidden
  position: relative
  display: flex
  align-items: center
  justify-content: left

  .videobanner
    position: absolute
    width: 100vw
    height: 100%
    object-fit: cover
    /* position: fixed; */
    left: 0
    right: 0
    top: 0
    bottom: 0
    z-index: -1

  // .mobvideo
  //   display: none

  .bannerSlider 
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    z-index: 0
    .item
      height: 100%
      width: 100%
      background-position: top
      background-size: cover


    // iframe 
    //   height: 100%
    //   width: 100%

  .offerBoxOuter
    osition: relative
    width: 100%
    height: 100%
    display: flex
    align-items: center
    justify-content: center
    background: rgba(0, 0, 0, 0.7)
    z-index: 1


    .AnimatePrice
        padding: 5px

    .AnimatePrice::before
      // background: conic-gradient(from 40deg at 50% 50%,#FFFFFF00  43%, yellow 100%)


    .offerInner
      opacity: 0
      position: absolute
      padding: 20px
      border-radius: 12px
      text-align: center
      color: #fff
      // top: 58%
      transition: 1s ease-out
      // left: 50px
      // border: 1px solid
      // text-align: center
      // background: #fff
      // width: 565px
      // text-align: center

      .mainheadlogo
        width: 30%
        margin-bottom: 10px

    #sitevisit
      // color: $themeColor

      

        
      

      // .offerInner
      //   display: flex
      //   justify-content: space-between

    .offerTitle
      // padding: 20px 0px
      // border-bottom: 1px solid #00000091
      font-size: 18px
      // bottom: -20px
      position: relative
      border: 1px solid $themeColor
      display: inline-block
      padding: 5px 15px
      border-radius: 50px
      background: $themeColorWithOpacity
      margin-top: 20px


      img
        // filter: brightness(50)
        // width: 550px
        width: 18px
        margin-top: -5px
        padding-right: 5px

    .AnimatePrice
      background: unset
    .AnimatePrice::before
      background: unset
    .offerConifg
      
      padding-bottom: 20px
      // border-bottom: 1px solid #00000091
      font-size: 22px
      color: $themeColor

      .offerLoc
        font-size: 15px

    .paymentPlanFig
      padding: 15px

      .mainprojname
        color: $themeColor
        font-size: 50px 
        text-shadow: 0px 0px 10px #000000


      .projnametitle
        color: $themeColor
        font-size: 50px !important

        .headmobile
          display: none
        .headdesktop
          display: block
      .projloctitle
        font-size: 25px !important
      // font-size: 70px

    .offerUSP
      display: flex
      justify-content: center
      padding-bottom: 25px

      .innerusps
        font-size: 16px
        display: flex
        align-items: center
        border: 1px solid $themeColor
        background: $themeColorWithOpacity
        padding: 5px 15px
        border-radius: 40px
        margin: 0 15px
        

        img
          width: 8px
          margin-right: 5px
          

    .offerPaymentplan
      padding: 20px 0px
      // border-bottom: 1px solid #00000091
      font-size: 18px

    .offerButtons
      // padding-top: 20px 
      font-size: 20px
      display: flex
      justify-content: center
      align-items: center
      

      .enquireNowBtn
        width: max-content
        font-size: 20px
 
      
      // display: flex
      // justify-content: space-evenly

    

      a
        text-decoration: none
        width: 100%

      .whatsapp-img
        width: 24px
        margin-right: 8px

      .enquireNowBtn
        // width: 100%
        // height: 100%
        background: $themeColor
        // border: 1px solid
        color: #000

        img
          filter: brightness(0)

   


  
.Highlights 
  // background: $secondarycolor

  .bodyContent
    overflow: hidden
    margin: auto 3%


  .item
    height: 400px
    padding: 20px
    // width: 350px
    border-radius: 18px
    overflow: hidden
    position: relative
    // box-shadow: 0 0 14px -5px
    // margin: 10px
    background-position: center
    background-size: cover 
    color: #fff
    box-shadow: 0 0 14px -10px $themeColor
    display: flex
    align-items: end
    // margin: 0px 5px

    .highicon
      background: #d4b137
      height: 50px
      width: 50px
      border-radius: 50px
      padding: 10px
  

    .hightitle
      font-size: 20px
      margin-top: 20px
    
    .highdesc
      margin-top: 8px
      font-size: 18px
      letter-spacing: 0px
      color: #dedede



  .item::before
    background: #00000061
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
   
    

  // @media only screen and (min-width: 1380px)
  //   .item
  //     height: 170px
  //     padding: 20px
  //     // width: 350px
  //     border-radius: 12px
  //     // box-shadow: 0 0 14px -5px
  //     // margin: 10px
  //     background: #fffdf9
  //     color: #000

  

  .highCont
    font-size: 20px
    margin-top: 5px
    line-height: 23px
    position: relative
    text-shadow: 0 0 4px black
    width: 100%
    height: 100%
    // justify-content: center
    // display: flex
    // align-items: center
    // text-align: center

  .downloadBrochureOuter
    background: #fffdf9
    border-radius: 12px
    padding: 30px
    position: relative
    box-shadow: 0 0 14px -8px $themeColor


  .dnHeroimageOuter
    border-radius: 12px
    overflow: hidden
    // height: 350px
    box-shadow: 0 0 14px -10px $themeColor


    iframe
      width: 100%
      height: 100%


  .aboutprojouterimg
    height: 100%
    display: flex
    align-items: center

    .aboutprojinnerimg
      position: relative
      background: #f2e7c3
      padding: 3px
      overflow: hidden
      border-radius: 12px
      height: 100%
      width: 100%

      iframe
        // height: 100%
        position: relative
        border-radius: 12px
        height: 100%
        width: 100%
        
      img
        border-radius: 12px
        position: relative
        width: 100%
        object-fit: cover

      .blocktop
        position: absolute
        width: 50px
        height: 50px
        top: 0
        left: 0
        background: $themeColor

      .blockbottom
        position: absolute
        width: 50px
        height: 50px
        bottom: 0
        right: 0
        background: $themeColor

      .brandvidshow
        display: none


      

  
  .dnTextOuter
    font-size: 30px
    display: flex
    align-items: center
    text-align: left
    height: 100%
    justify-content: left
    text-align: justify

    .sectitle
      text-align: left
      font-size: 45px

    .linehor
      justify-content: left
      margin-bottom: 10px

    .secsubtitle
      text-align: left
      margin-bottom: 10px

    


    .aboutContent
      text-align: left
      color: #ababab

    .animatenumber
      display: flex
      justify-content: space-between
      .animatenumbersection
        width: 48.5%
        background: #f9f7f2
        border: 1px solid $themeColorWithOpacity
        border-radius: 12px
        padding: 15px
        margin-top: 15px

        .displaynumber
          color: $themeColor
          font-size: 25px
          letter-spacing: 2px

        .numbersdescription
          color: #ababab


    .dnBroBtnOuter
      display: flex
      text-align: center
      color: #000

      
    .enquireNowBtn
      
      display: inline-block
      // font-size: 17px
      // width: 100%
      

.Highlights2 
  // background: $secondarycolor

  .bodyContent
    overflow: hidden
    margin: auto 3%


  .item
    height: 400px
    padding: 20px
    // width: 350px
    border-radius: 18px
    overflow: hidden
    position: relative
    // box-shadow: 0 0 14px -5px
    // margin: 10px
    background-position: center
    background-size: cover 
    color: #fff
    box-shadow: 0 0 14px -10px $themeColor
    display: flex
    align-items: end
    // margin: 0px 5px

    .highicon
      background: #d4b137
      height: 50px
      width: 50px
      border-radius: 50px
      padding: 10px
  

    .hightitle
      font-size: 20px
      margin-top: 20px
    
    .highdesc
      margin-top: 8px
      font-size: 18px
      letter-spacing: 0px
      color: #dedede



  .item::before
    background: #00000061
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
   
    

  // @media only screen and (min-width: 1380px)
  //   .item
  //     height: 170px
  //     padding: 20px
  //     // width: 350px
  //     border-radius: 12px
  //     // box-shadow: 0 0 14px -5px
  //     // margin: 10px
  //     background: #fffdf9
  //     color: #000

  

  .highCont
    font-size: 20px
    margin-top: 5px
    line-height: 27px
    position: relative
    text-shadow: 0 0 4px black
    width: 100%
    height: 100%
    // justify-content: center
    // display: flex
    // align-items: center
    // text-align: center

  .downloadBrochureOuter
    background: $secondarycolor !important
    border-radius: 12px
    padding: 30px
    position: relative
    box-shadow: 0 0 14px -8px $themeColor


  .dnHeroimageOuter
    border-radius: 12px
    overflow: hidden
    // height: 350px
    box-shadow: 0 0 14px -10px $themeColor


    iframe
      width: 100%
      height: 100%


  .aboutprojouterimg
    height: 100%
    display: flex
    align-items: center

    .aboutprojinnerimg
      position: relative
      background: #f2e7c3
      padding: 3px
      overflow: hidden
      border-radius: 12px
      height: 100%
      width: 100%

      iframe
        // height: 100%
        position: relative
        border-radius: 12px
        height: 100%
        width: 100%
        
      img
        border-radius: 12px
        position: relative
        width: 100%
        object-fit: cover

      .blocktop
        position: absolute
        width: 50px
        height: 50px
        top: 0
        left: 0
        background: $themeColor

      .blockbottom
        position: absolute
        width: 50px
        height: 50px
        bottom: 0
        right: 0
        background: $themeColor

      .brandvidshow
        display: none


      

  
  .dnTextOuter
    font-size: 30px
    display: flex
    align-items: center
    text-align: left
    height: 100%
    justify-content: left
    text-align: justify

    .sectitle
      text-align: left
      font-size: 45px

    .linehor
      justify-content: left
      margin-bottom: 10px

    .secsubtitle
      text-align: left
      margin-bottom: 10px

    


    .aboutContent
      text-align: left
      color: #ababab

    .animatenumber
      display: flex
      justify-content: space-between
      .animatenumbersection
        width: 48.5%
        background: #f9f7f2
        border: 1px solid $themeColorWithOpacity
        border-radius: 12px
        padding: 15px
        margin-top: 15px

        .displaynumber
          color: $themeColor
          font-size: 25px
          letter-spacing: 2px

        .numbersdescription
          color: #ababab


    .dnBroBtnOuter
      display: flex
      text-align: center
      color: #000

      
    .enquireNowBtn
      
      display: inline-block
      // font-size: 17px
      // width: 100%

// background-color: #fff;
// opacity: 1;
.Partners
  padding-top: 0px
  padding-bottom: 100px
  position: relative
  // background-color: $secondarycolor
  background-image: url(../img/dpback.png)
  background-position: bottom
  background-repeat: no-repeat
  background-size: contain
  overflow: hidden
  .sectitle
    // color: #fff
  .container
    position: relative


  .bodyContent
    display: flex
    justify-content: center
    // border-radius: 12px
    // padding-top: 10px

  .col-7, .col-5
    justify-content: flex-start
    display: flex
    align-items: center
    font-size: 12px
    border-bottom: 1px solid $themeColorWithOpacity

    padding: 20px 10px

  .col-7, .col-5 
    img
      width: 162px

  .w-100
    border-bottom: 1px solid $themeColorWithOpacity
    
@media only screen and (min-width: 1300px)
  .Partners
    padding-bottom: 360px
    .col-7, .col-5
      justify-content: center
      text-align: center
      font-size: 13px
      border-bottom: 0
      margin-top: 10px
      padding: 5px 10px 
      justify-content: space-evenly


@media only screen and (min-width: 1440px)
  .Partners
    padding-bottom: 480px
    .col-7, .col-5
      padding: 5px 10px 
      justify-content: space-evenly


@media only screen and (min-width: 0px)
  .Partners
    
    .col-5
     
      justify-content: space-evenly
      
   

// .Partners::before 
//     content: ""
//     position: absolute
//     width: 100%
//     height: 100%
//     top: 0
//     left: 0
//     background: rgba(0, 0, 0, 0.5)
       
.Configuration
  // background: #fffdf9
  background: $secondarycolor
  
  .container 
    overflow: hidden
  
    .configTabButtons
      display: flex
      justify-content: center

      .configTabButtonsOuter
        display: flex
        justify-content: center
        .TabBtns
          border: 1px solid $themeColor
          border-radius: 12px
          background: #fff
          color: $themeColor 
          font-size: 15px
          padding: 6px 20px
          margin: 10px 5px
          // box-shadow: 0 0 14px -10px 
          cursor: pointer

        .TabBtns-active
          background: $themeColor
          color: #fff

  .bodyContent 
    display: flex
    justify-content: center

    
     
    .hideConfig
      display: none

    .showConfig
      display: flex
      justify-content: center
      width: 100%


    .row
      justify-content: center

    .floorplanbackDrop::before 
      content: 'View Plan'
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      display: flex
      text-align: center
      justify-content: center
      align-items: center
      
      font-size: 18px
      background: rgb(255 255 255 / 50%)
      backdrop-filter: blur(2px)
      border-radius: 12px


    // .floorplanback2Drop::before 
    //   content: 'Request Initiated. Will share soon'


  .item
    // background: #ffffff
    // border-radius: 12px
    // position: relative
    overflow: hidden
    padding: 10px
    // margin: 20px
    // box-shadow: 0 0 14px -10px
   
    .floorPlanTop
      display: flex
      justify-content: space-between
      argin-top: 20px
      position: relative
      box-shadow: 0 0 14px -4px $themeColor

      .upsconfig
        position: absolute
        width: 100%
        height: 100%
        

        .upsconfiginner
          position: absolute
          top: 20px
          left: 20px
          display: inline-block
          background: $themeColor
          padding: 3px 15px
          font-size: 13px
          border-radius: 12px
          color: #000
          box-shadow: 0 0 14px -5px $themeColor

        .viewfloorplan
          position: absolute
          bottom: 20px
          right: 20px
          // bottom: 20px
          // left: 20px
          display: inline-block
          background: $themeColor
          padding: 5px 15px
          font-size: 13px
          border-radius: 8px
          color: #000
          display: flex
          justify-content: center
          align-items: center
          cursor: pointer
          box-shadow: 0 0 14px -5px $themeColor

          img
            width: 13px
            margin-right: 5px

    .floorplanImg
      // border: 1px solid $themeColor
      // padding-bottom: 20px
      // margin-bottom: 20px
      width: 100%
      // border-radius: 12px
      overflow: hidden
      position: relative
      filter: blur(3px)

    .floorPlanBottom
      line-height: 25px
      // display: flex
      text-align: left
      justify-content: space-between
      align-items: center
      padding: 20px
      padding-top: 10px 
  
      .congigDetails
        margin-bottom: 8px
        margin-top: 8px
        // color: $themeColor

        .configSQ
          font-size: 17px
          color: #ababab
          margin: 10px 0px 0px
          display: flex
          justify-content: space-between
          padding: 10px 0px
          border-bottom: 1px solid #f5edd4

        .configSQUSP
          display: block
          font-size: 13px
          text-align: center
          margin-top: 0px


    
    .enquireNowBtn
      // padding: 6px 30px
      display: inline-block
      color: $themeColor
      padding: 6px 20px
      width: 100%
      background: $themeColor
      color: #000
      margin-top: 10px



    .fpOuter
      position: relative
      background: #ffffff
      border-radius: 12px
      overflow: hidden
      // padding: 30px
      // margin: 20px
      box-shadow: 0 0 14px -8px $themeColor

      .bestSellerOuter
        position: absolute
        top: 0
        left: 0
        background: $themeColor
        z-index: 1
        color: #fff
        padding: 2px 14px
        border-radius: 0 0 12px


.starting
  display: none


.Aminities2
  
  // background: $secondarycolor
  .container
    overflow: hidden
  .item
  
    // border-left: 1px solid $themeColor
    
    display: flex
    align-items: center
    justify-content: center
    margin-bottom: 20px
  


  .amimain
    display: flex
    justify-content: center
    
    .amiinner
      text-align: center
      display: flex
      align-items: center
      justify-content: center
      padding: 10px
      font-family: playfair-display-regular
      
      

      .amiiconouter
        display: flex
        justify-content: center
        // margin-bottom: 10px

        .amiicon
          margin-right: 20px
          img
            width: 50px


@media only screen and (max-width: 480px)
  // .Aminities2
  //   .bottom
  //     .amenitiesouter
  //       display: flex
  //       justify-content: center

  .Aminities2 
    .amimain
      .amiinner
        display: block
        .amiiconouter
          .amiicon
            margin-right: 0px
            margin-bottom: 10px


      
       
          
  


.Aminities
  // background: #fffdf9
 
  position: relative
  


  .container
    position: relative
    overflow: hidden
  .displayImage
   
    display: block

    height: 100%
    // margin: 5px

  .item
    height: 170px
    padding: 20px
    // width: 350px
    border-radius: 12px
    overflow: hidden
    position: relative
    // box-shadow: 0 0 14px -5px
    // margin: 10px
    background-position: center
    background-size: cover 
    color: #fff
    box-shadow: 0 0 14px -7px $themeColor


  .item::before
    background: rgba(0, 0, 0, 30%)
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
   
    

  @media only screen and (min-width: 1380px)

    .item
      height: 170px
      padding: 20px
      // width: 350px
      border-radius: 12px
      // box-shadow: 0 0 14px -5px
      // margin: 10px
      background: #fffdf9
      color: #000

   
  

  .highCont
    font-size: 22px
    margin-top: 5px
    line-height: 27px
    position: relative
    text-shadow: 0 0 4px black

  .downloadBrochureOuter
    background: #fffdf9
    border-radius: 12px
    padding: 30px
    position: relative
    box-shadow: 0 0 14px -8px $themeColor

  .wideImg
    display: block
    // background: #000
    height: 100%
    border-radius: 12px
    display: flex
    justify-content: center
    align-items: center
    overflow: hidden
    position: relative
    box-shadow: 0 0 14px -10px $themeColor

    .AmiName
      display: inline-block
      position: absolute
      top: 30px
      left: 0
      background: #000000bd
      color: #fff
      z-index: 3
      padding: 5px 15px 5px 15px
      text-shadow: 0 0 10px black
      font-size: 20px


    img 
      
      position: absolute
      width: 100%
      height: 100%
      object-fit: cover
      // transition: .5s ease-out


  .imgBtn
    // background: #000
    border-radius: 12px
    display: block
    height: 100px
    overflow: hidden
    box-shadow: 0 0 14px -10px $themeColor

    img
      width: 100%
      height: 100%
      object-fit: cover


  .imgtext
    text-align: center
    margin-bottom: 5px




.Gallery
  // height: 100vh
  background: $secondarycolor

  .owl-stage-outer
    overflow: unset

  .item
    border-radius: 12px
    // box-shadow: 0 0 14px -5px
    overflow: hidden
    box-shadow: 0 0 14px -10px $themeColor

.virtual
  // background: $secondarycolor
  video
    border-radius: 12px
  video
    width: 100%
    height: 70%
    // border-radius: 12px
    // box-shadow: 0 0 14px -5px #000
    // margin-top: 10px


  
  .videoouter
    position: relative
    box-shadow: 0 0 14px -5px $themeColor
    border-radius: 12px
    overflow: hidden
    margin-bottom: 25px

    .videotop
      position: relative

    .videobottom
      padding: 10px 15px
      background: #fff
      .videotitle
        font-size: 18px
      .videosubtitle
        color: #ababab
        font-size: 15px

    // .videotop::before
    //   content: ''
    //   position: absolute
    //   top: 0
    //   left: 0
    //   width: 100%
    //   height: 100%
    //   background-image: url(../img/playbutton.png)
    //   background-size: 50px
    //   background-position: center
    //   background-repeat: no-repeat
    //   backdrop-filter: blur(10px)
      // border-radius: 12px


  .virtualtouroverlay::before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-image: url(../img/playbutton.png)
    background-size: 50px
    background-position: center
    background-repeat: no-repeat
    backdrop-filter: blur(10px)
    // border-radius: 12px

@media only screen and (max-width: 480px)
  .virtual
    .bottom
      display: flex
      justify-content: center
      .col-6
        margin-bottom: 20px

.Video
  .videoOuter
    display: flex
    justify-content: center
    width: 100%
    margin-top: 10px

    .videoContentOuter
      width: 70%
      height: 480px
      overflow: hidden
      border-radius: 12px

      iframe
        width: 100%
        height: 100%



.location2
  background: $secondarycolor
  .bottom

    .loccol
      display: flex
      justify-content: center
      // width: 100%

      .locleftouter
        display: flex
        align-items: center

        .locmapimg
          overflow: hidden
          border-radius: 10px
          border: 1px solid $themeColor
          
        


      .locrightouter
        width: 100%

        



        .locOuter
          display: flex
          justify-content: space-between
          border: 1px solid $secondarycolor
          border-radius: 10px
          margin-bottom: 10px
          padding: 20px
          transition: .2s ease-in

          .locinnerleft
            display: flex

            .locinnerlefticon
              width: 48px
              height: 48px
              background: $themeColorWithOpacity
              display: flex
              justify-content: center
              align-items: center
              border-radius: 12px
              margin-right: 14px

              img
                width: 24px
                height: 24px
            
            .locinnerleftdesc
              // margin-left: 10px

              .loctitle
                color: $themeColor
                font-size: 18px
                margin-bottom: 5px

              .locdesc
                ul
                  margin: 0
                  padding: 0
                  color: #ababab
                  font-size: 14px
                  margin-left: 14px
                  // width: 100%
          .locinnerright
            font-size: 14px
            color: $themeColor

        .locOuter:hover
          border: 1px solid $themeColor
          background: #fefdfb


@media only screen and (max-width: 600px)
  .location2
    .bottom
      display: flex
      justify-content: center

      .loccol2
        margin-top: 20px

        .locrightouter
          .locOuter
            padding: 10px

            .locinnerleftdesc
              text-align: left

      

    


.About
  padding-bottom: 80px
  // background: $secondarycolor


  .bottom
    .bottomtop 
      .aboutleft
        display: flex
        align-items: center
        justify-content: left

        .aboutleftinner
          padding: 40px 100px
          box-shadow: 0 0 14px -5px $themeColor
          border-radius: 20px
          background: #fff
          

      .aboutright
        .aboutrightinner
          color: #ababab
          font-size: 18px
        .uspsaboutouter
          .uspsaboutinner
            display: inline-block
            color: #000
            background: $themeColorWithOpacity
            font-size: 14px
            border-radius: 20px
            margin-right: 10px
            padding: 8px 20px

      .aboutmiddle
        .aboutnumberssection

          display: flex
          justify-content: center
          padding: 15px
          
          
            
          
          .aboutmiddleouter
            text-align: center
            background: #fff
            overflow: hidden
            border-radius: 12px
            padding: 20px
            margin-top: 20px
            box-shadow: 0 0 14px -5px $themeColor
            width: 100%
            
            
              
            .aboutnumberslogo
              display: inline-block
              background: #f4f1e8
              border-radius: 122px
              width: 50px
              height: 50px
              padding: 10px
              img
                width: 30px
            .aboutnumbersnumber
              margin-top: 5px
              font-size: 36px
            .aboutnumbersdesc
              margin-top: 5px
              font-size: 14px


      .aboutbottom
        background: $themeColorWithOpacity
        border-radius: 12px
        text-align: center
        font-size: 12px
        padding: 20px
        margin-top: 20px

        

        .disclaimer
          
          .reraimg
            margin-top: 10px
            width: 15%



@media only screen and (max-width: 600px)
  .About
    .bottom
      .bottomtop
        display: flex
        justify-content: center

        .aboutbottom
          .disclaimer
            .reraimg
              width: 35%



        .aboutleft
          .aboutleftinner
            padding: 30px 60px

        .aboutrightinner
          margin-top: 20px

        .uspsaboutinner
          margin-bottom: 20px

        .aboutmiddle
          .aboutnumberssection

            .aboutmiddleouter
              margin-top: 0



.footerPop
    
    position: fixed
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    // width: 25%
    // height: 50%
    background: #fff
    // backdrop-filter: saturate(180%) blur(20px)
    z-index: 21
    box-shadow: 0 0 14px -5px $themeColor
    display: flex
    align-items: center
    justify-content: center
    border-radius: 20px
    // display: none
    overflow: hidden
    
    // background-image: url(../img/background.webp) !important
    // background-position: center !important
    // background-size: contain !important
    // background-repeat: repeat !important

    .closeform
      display: inline-block
      position: absolute
      top: 15px
      right: 20px
      width: 10px

    .or
        margin: 10px 0px

    a
      color: unset
      text-decoration: none

    .enqtext
      color: $themeColor
      font-family: 'Cormorant Garamond',serif
      margin-bottom: 10px
      font-size: 30px
      font-weight: 600

    .phoneEnq
      font-size: 17px
      margin-bottom: 10px
      color: $themeColor
    
    .titleform
      font-size: 9.5px
      margin-bottom: -3px
      letter-spacing: .32em
      text-transform: uppercase
      color: $themeColor
      font-weight: 400


    .captcha
      font-size: 11.5px
      // margin-bottom: 15px
      margin: 14px 0 16px
      color: #8a8275

      

      .dnd
        margin-top: -3px !important
        color: #8a8275
        width: unset

        a
          color: $themeColor

    .usps
      display: flex
      font-size: 10.5px
      line-height: 1.25
      text-align: center
      margin: 14px 0 20px
      padding: 0 4px 16px
      border-bottom: 1px solid $themeColor
      justify-content: space-around

      .usps-inner
        display: flex
        flex-direction: column
        gap: 7px
        justify-content: center
        align-items: center
        text-align: center
      

      i
        width: 1px
        background: $themeColor
        flex: 0 0 auto
        align-self: stretch

      svg
        width: 19px
        height: 19px
        flex: 0 0 auto
   
  

      img
        width: 40px
        margin-bottom: 10px

    .uspOuter
      width: 31%

    .inner
      width: 100%
      // height: 85%
      font-size: 15px
      text-align: center
      padding: 30px
      max-width: 430px

      .phoneNumber
        display: flex

      .option-field
        font-size: 11px
        color: #8a8275
        margin-top: -10px
        text-align: left
        // margin-bottom: 13px


      input, select
        background: #ccae4e1c
        border: none
        box-shadow: none
        border: 1px solid #eadfbb 
        font-size: 15px
        border-radius: 12px
        padding: 14px 15px
        height: auto
        margin-bottom: 13px

      .select-outer
        width: 48%


        .select-title
          font-size: 10px
          letter-spacing: .06em
          text-transform: uppercase
          text-align: left
          margin: 0 2px 6px

        
      select
        // width: 48%
        padding: 14px 15px
        text-align: center

      .iti
        width: 100%
        // padding: 5px 25px
        
        margin-bottom: 13px

        .iti__selected-country-primary
          padding: 15px 0px 15px 14px


        .iti__country-container
          // border-right: 1px solid $themeColor
          // padding-right: 14px
          // padding-margin: 14px

      .form-control:focus, input[type="tel"]:focus
        color: #000
        background-color: #faf6ec
        border-color: #eadfbb
        outline: 0
        box-shadow: unset


      .enquireNowBtn
        width: 100%
        padding: 16px
        font-weight: 600
        letter-spacing: .02em
        font-size: 15px

      #submitBtn:focus, #submitBtn:hover
        color: #000
        background: #d4b038d6

      .whatsapp-form
        background: #fff
        border: 1px solid #1faa53
        color: #1faa53

      .or
        display: flex
        align-items: center
        gap: 12px
        margin: 14px 0
        color: var(--muted)
        font-size: 11px
        letter-spacing: .12em
        text-transform: uppercase

      .or::before, .or::after 
        content: ""
        flex: 1
        height: 1px
        background: $themeColor

      .phone
        width: 100%

      .whatsapp-img
        width: 24px
        margin-right: 8px
      .slide-submit
        display: none

      .bottom-disc
        text-align: center
        font-size: 11px
        color: #8a8275
        margin: 16px 0 0
        line-height: 1.5

      

      
    

.footerSticky
    
    position: fixed
    bottom: -60px
    left: 0%
    
    width: 100%
    // height: 50%
    background: rgba(255, 255, 255, .8)
    backdrop-filter: saturate(180%) blur(20px)
    z-index: 20
    box-shadow: 0 0 14px -5px $themeColor
    display: flex
    align-items: center
    justify-content: center
    // transition: .3s ease-out
    // display: none

    .option-field
      display: none

    .bottom-disc
      display: none

    .dnd
      width: 250px

    .closeform
      display: none
     

    .mobileFooter
      display: none
    a
      color: unset
      text-decoration: none

    .enqtext
      color: $themeColor
      font-size: 18px
      display: flex
      /* width: 130px */
      align-items: center
      font-family: 'Cormorant Garamond',serif
      font-weight: 600

    .phoneOuter
      display: none
    .phoneEnq
      font-size: 17px
      margin-bottom: 10px
      color: $themeColor
    
    .titleform
      // font-size: px
      margin-bottom: 20px
      display: none

    .captcha
      font-size: 8px
      margin-right: 17px
      // display: none
      // width: 180px

    .usps
      display: none
 

      img
        width: 40px
        margin-bottom: 10px

    .uspOuter
      width: 31%

    .inner
      // width: 85%
      // height: 85%
      font-size: 15px
      text-align: center
      padding: 9px
      display: flex

      .phoneNumber
        display: flex

      input, select
        background: unset
        border: none
        box-shadow: none
        border-bottom: 1px solid #6d767e
        padding: 5px 10px
        font-size: 13px
        border-radius: 0
        width: 180px
        margin: auto 20px
        
      select
        width: 180px
        padding: 5px 10px
        text-align: center


      .iti
        bottom: -5px
        // width: 100%
        // padding: 5px 25px
        
        // margin-bottom: 16px
      
      .iti__selected-country
        top: -2px
  

      .form-control:focus, input[type="tel"]:focus
        color: #000
        background-color: unset
        border-color: #000
        outline: 0
        box-shadow: unset

      .whatsapp-img
        width: 24px
        margin-right: 8px

      .enquireNowBtn
        // width: 232px

      .or,.countWhatsApp
        display: none
      .phone
        width: 100%

      .slide-submit
        display: none





.appearText
  opacity: 0
  transition: .5s ease-out
  // transform: translate(-100px, 00px)
  transform: scale(0.8)

.zoomIn
  transition: .5s ease-out

.zoomIn:hover
  color: #000
  transform: translate(0px, -2px) !important
  box-shadow: 0 0 20px -5px  $themeColor !important
  
// .loadingImgLeft
//   width: 100%
//   height: 50%
//   bottom: 0
//   left: 0
//   position: fixed
//   background: #fff
//   z-index: 21
//   transition: .5s ease-in-out

// .loadingImgRight
//   width: 100%
//   height: 50%
//   top: 0
//   right: 0
//   position: fixed
//   background: #fff
//   z-index: 21
//   transition: .5s ease-in-out

// .loadingImg
//   display: flex
//   position: fixed
//   top: 0%
//   left: 0
//   width: 100%
//   height: 100%
//   // background: rgba(250, 250, 252, .8)
//   // backdrop-filter: saturate(180%) blur(20px)
//   z-index: 30
//   justify-content: center
//   align-items: center
//   transition: .5s ease-in-out
//   padding: 30px
//   opacity: 1
  

//   .loadingImgOuter
//     width: 100% 
//     text-align: center

//     img
//       width: 50%

//   .loadingicon
//     width: 100%
//     display: flex
//     justify-content: center
//     margin-top: 10px
    

//     img
//       width: 100px

  
  
//   .loadMessage
//     text-align: center
//     margin-top: 20px
//     font-size: 20px

  // mobile

@media only screen and (max-width: 600px)

  .loadingImgOuter
    img
      width: 100% !important

  header
    nav
      .navbar-brand
        padding: 0
      .navbar-toggler
        background: url(../img/hamburger.png)
        border: none
        background-position: center
        background-size: 50%
        background-repeat: no-repeat
        transition: 0.5s ease-out

      button:hover, button:focus, .button:hover, .button:focus

        // background: url(../img/close.png)
        border: none
        // background-position: center
        // background-size: 70%
        // background-repeat: no-repeat
      .navbar-toggler:focus
        box-shadow: none
      .enquireNowBtn
        display: none
      .hideContact
        display: none

    .hidNavmenu
      display: none !important
        

  section
    padding: 15% 0px
  .container
    text-align: center
    width: 100vw

  .banner
    box-shadow: 0 0 14px -5px #000
  .bannerShrink
    // background-image: url(../img/banner1.jpg)
    background-position: top
    background-size: cover
    background-repeat: no-repeat

    // .deskvideo
    //   display: none
    
    // .mobvideo
    //   display: block
    

    .bannerSlider 
      position: absolute
      top: -30%
      left: 0
      width: 100%
      height: 100%
      z-index: 0
      // height: 80%
      .item
        height: 100%
        width: 100%
        background-position: top
        background-size: cover


    .offerBoxOuter
      // background: unset
      // align-items: flex-end
      // justify-content: center

      .offerTitle
        font-size: 15px
        img
         width: 18px
        //  margin-bottom: 10px

      .offerInner
        
        text-align: center
        // bottom: 45px
        transition: .6s ease-out
        // background: #fff
        // font-weight: 600
        color: #fff
        border-radius: 12px
        // box-shadow: 0 0 14px -5px #000
        // transform: scale(0.8)
        opacity: 1
        top: unset
       
        .mainheadlogo
          width: 50%
          margin-bottom: 20px

        .offerUSP
          display: inline-block
          font-size: 15px
          padding-bottom: 0px
          // margin-bottom: 10px

          .innerusps
            display: inline-block
            margin: 10px 10px

        .AnimatePrice
          width: 100%
          position: relative
          margin: 10px 0px
          padding: 3px
          background: $themeColorWithOpacity

        .AnimatePrice::before
          animation-duration: 5s
          background: conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 43%, $themeColor 100%)

        .offerConifg
          position: relative
          z-index: 2
          font-size: 18px
          // background: #fff
          // border: 1px solid
          // margin: 10px 0px
          padding: 10px 10px
          border-radius: 12px
        .offerLoc
          font-size: 15px

        .paymentPlanFig
          font-size: 15px
          padding: 0
          // margin: 10px 0px
          .mainprojname
            font-size: 35px
          .projnametitle
            
            font-size: 30px !important
            .headmobile
              display: block
            .headdesktop
              display: none
          .projloctitle
            font-size: 15px !important


        .offerButtons
          padding-top: 10px
          display: flex
          justify-content: center
          // margin-bottom: 20px

       
          #sitevisit
            // background: $themeColor
            // color: #fff
            font-size: 15px



      .offerInner
        // left: 0
        
    

  .top 
    text-align: left
    margin-bottom: 10px

    .sectitle
      font-size: 36px

    .secsubtitle
      font-size: 18px
      margin-bottom: 20px


  .Highlights
    // background: $secondarycolor
    padding-bottom: 10px
    .downloadBrochureOuter
      padding: 30px 10px
      text-align: center
      display: flex
      justify-content: center

      .dnHeroimageOuter
        // height: 200px
        margin-top: 20px

      .dnTextOuter
        // padding: 30px 0px 0
        text-align: center
        height: unset

        .sectitle
          font-size: 36px
          text-align: center
          margin-top: 10px
        .linehor
          justify-content: center

        .aboutContent
          text-align: center

        .dnBroBtnOuter
          justify-content: center

        .enquireNowBtn
          // width: 100%
        .dnTextInner
          text-align: center

        .secsubtitle
          text-align: center

        #mainVideo
          margin-top: 20px

    // iframe
    //   pointer-events: none !important

  .Highlights2
    // background: $secondarycolor
    // padding-bottom: 10px
    .downloadBrochureOuter

      padding: 30px 10px
      text-align: center
      display: flex
      justify-content: center

      .dnHeroimageOuter
        // height: 200px
        margin-top: 20px

      .dnTextOuter
        // padding: 30px 0px 0
        text-align: center
        height: unset

        .sectitle
          font-size: 36px
          text-align: center
          margin-top: 10px
        .linehor
          justify-content: center

        .aboutContent
          text-align: center

        .dnBroBtnOuter
          justify-content: center

        .enquireNowBtn
          // width: 100%
        .dnTextInner
          text-align: center

        .secsubtitle
          text-align: center

        #mainVideo
          margin-top: 20px


  .virtual
    iframe
      width: 100%
      height: 40%
      // margin-top: 40px


  .Configuration
    .container
      .configTabButtons
        display: block
        .configTabButtonsOuter
          // display: block

      .bottom
        .bodyContent
          #tower2
            display: inline-flex
            justify-content: center
          .hideConfig
            justify-content: center

        .AnimatePrice, .enquireNowBtn
          // width: 100%
          // transition: .2s linear

        .AnimatePrice::before
          background: conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 43%, $themeColor 100%)
          transform: scale(20)

   



  .Aminities
    .col-md-8
      display: none
    .amiOuter
      display: flex
      justify-content: center
    .row
      // display: inline
      
  .Location
    padding: 25% 0px
    .bodyContent
      .outerLoc
        display: none
      .locMap
        display: none
        border-radius: 12px
        overflow: hidden
        margin-bottom: 10px
        box-shadow: 0 0 14px -5px $themeColorWithOpacity
      .locMobile
        display: block
        border-radius: 12px
        overflow: hidden
        box-shadow: 0 0 14px -5px $themeColorWithOpacity
        .accordion-button:not(.collapsed)
          background-color: $themeColorWithOpacity

        button:hover, button:focus, .button:hover, .button:focus
          background-color: $themeColorWithOpacity
          color: #000

        .accordion-button:focus
          box-shadow: unset

        .accordion-button:focus
          border-color: $themeColor

        .accordion-button:not(.collapsed)::after
          filter: brightness(0)

        .accordion-button:not(.collapsed)
          color: #000

        .accordion-button
          padding: 10px 15px
          font-size: 18px

          img 
            width: 40px
            margin-right: 15px

        ul
          text-align: left
          padding: 0px

  .footerPop
    width: 90%

    .inner
      padding: 26px 20px 22px

      .checkbox-priv
        transform: scale(0.5) !important
        margin-top: -3px !important

      .dnd
        margin-left: 0px



  

    // transform: scale(1)

  .footerSticky
    box-shadow: unset
    // bottom: -0.1px

    .closeform
      display: none

    .mobileFooter
      // height: 100px
      width: 100%
      display: flex
      justify-content: center
      align-items: center

      .mobFooterPhone, .mobFooterWhatsapp
        width: 50%
        text-align: center
        height: 50px
        display: flex
        align-items: center
        justify-content: center

        .enquireNowBtn
          font-size: 14px !important

        img
          width: 35px
      .phoneOuter
        display: block

        .phoneEnq
          font-size: 14px !important

        .phoneEnq
          margin: 0

      .enquireNowBtn
        border-radius: 0
        background: unset
        padding: 0
        display: block
        width: 100%
        display: flex
      // .mobFooterInner

        


    .inner
      display: none

  .footerPop
    .inner
      .countWhatsApp
        display: flex
      .slide-submit
          display: flex

      .enqtext
        font-size: 27px
        margin-bottom: 10px

  

  .GalleryPopup
    width: 100%
    border-radius: 0

    .closeGallery
      top: 10px
      right: 10px
      width: 15px

.enqNowFlotaing
  display: none
  position: fixed
  bottom: 60px
  right: 10px
  background: #A57C3A
  /* writing-mode: vertical-rl; */
  /* text-orientation: mixed; */
  color: #fff
  /* transform: rotate(180deg); */
  padding: 9px
  box-shadow: 0 0 14px -5px #000
  border-radius: 12px
  z-index: 1
  width: 55px


// .altBack
//   background-image:  linear-gradient(135deg, #fffbf2 25%, transparent 25%), linear-gradient(225deg, #fffbf2 25%, transparent 25%), linear-gradient(45deg, #fffbf2 25%, transparent 25%), linear-gradient(315deg, #fffbf2 25%, #fff 25%) !important
//   background-position:  10px 0, 10px 0, 0 0, 0 0 !important
//   background-size: 20px 20px !important
//   background-repeat: repeat !important

.altBack
  background-image: url(../img/background.webp) !important
  background-position: center !important
  background-size: contain !important
  background-repeat: repeat !important


@media only screen and (min-width: 1024px)
  .bottom-nav
    display: none


.bottom-nav
  background: rgba(255, 255, 255, 0.8)
  backdrop-filter: saturate(180%) blur(20px)
  position: fixed
  bottom: -70px
  z-index: 10
  left: 0
  width: 100%
  height: 50px
  box-shadow: 0 0 14px -5px $themeColor
  border-bottom: 1px solid #000000
  transition: 0.3s ease-out


  .customfoot

    .item
      text-align: center
      font-size: 13px
      display: flex
      justify-content: center
      align-items: center
      height: 50px
      color: #000

      a
        text-decoration: none
        color: #000
        width: 100%
        height: 100%
        display: flex
        justify-content: center
        align-items: center









footer
  // transition: .5s ease-out
  // bottom: -60px 

.floorplanbackDrop
  // filter: blur(2px)
  position: relative
  // .sliderOuter
  //   z-index: 10
  //   width: 100%
  //   position: fixed
  //   bottom: 0
  //   left: 0
  //   padding: 10px

  //   .slide-submit
  //     box-shadow: 0 0 14px -5px $themeColor
  //     height: 45px

.floatingring
  position: fixed
  border: 1px solid #ede4d2
  width: 300px
  height: 300px
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  border-radius: 300px
  z-index: -1


.flashanim
  overflow: hidden
  position: relative
.flashanim::before
  position: absolute
  top: 0px
  left: -100%
  content: ''
  background: #000
  width: 100%
  height: 100%
  background: linear-gradient(120deg, rgba(255,255,255, 0) 30%, rgba(255,255,255, .8),rgba(255,255,255, 0) 70%)
  // transform: rotate(338deg)
  // transform-origin: left
  animation: fill 3s infinite linear

@keyframes fill 
  0%    
    left: -100%


  30%   
    left: 100%

  100%  
    left: 100%
    
:root 
  --gold: #C6A23C
  --bg: #F7F5F0
  --white: #fff
  --ink: #14120F
  --grey: #9B968E
  --line: #EFE9DC

  --display: "Playfair Display", Georgia, serif
  --body: "Poppins", system-ui, sans-serif



// ==============================
// Specs Section
// ==============================

.ct-specs 
  // background: var(--bg)
  color: var(--ink)
  font-family: var(--body)
  padding: 52px 18px 58px


.ct-inner 
  max-width: 960px
  margin: auto



// ==============================
// Section Heading
// ==============================

.ct-head 
  text-align: center
  margin-bottom: 28px


.ct-title 
  font: 400 clamp(30px, 8.6vw, 44px) / 1.18 var(--display)
  margin: 0 0 18px

  em 
    color: var(--gold)
    font-style: normal
  


.ct-rule 
  width: 56px
  height: 3px
  background: var(--gold)
  border: 0
  margin: 0 auto 18px


.ct-sub 
  font-weight: 300
  font-size: 16px
  line-height: 1.6
  color: #302c26
  max-width: 32ch
  margin: auto



// ==============================
// Main Card
// ==============================

.ct-card 
  background: var(--white)
  border: 1px solid var(--line)
  border-radius: 16px
  box-shadow: 0 6px 26px rgba(20, 18, 15, 0.05)
  padding: 30px 20px 24px



// ==============================
// Featured Content
// ==============================

.ct-feature 
  text-align: center
  padding-bottom: 26px


.ct-number 
  font: 500 clamp(58px, 17vw, 76px) / 1 var(--display)
  margin: 0 0 4px

  sup 
    font-size: 0.4em
  


.ct-name 
  font: 500 19px var(--display)
  margin: 0 0 10px


.ct-text 
  font-weight: 300
  font-size: 16px
  line-height: 1.6
  color: #302c26
  max-width: 30ch
  margin: auto



// ==============================
// Divider
// ==============================

.ct-divider 
  border: 0
  border-top: 1px solid var(--line)
  margin: 24px 0 4px



// ==============================
// Specification Rows
// ==============================

.ct-row 
  display: flex
  justify-content: space-between
  align-items: baseline
  gap: 14px
  padding: 15px 0
  border-bottom: 1px solid var(--line)

  &:last-child 
    border: 0
  


.ct-label 
  font-weight: 300
  font-size: 14.5px
  color: #302c26
  margin: 0


.ct-value 
  font: 500 26px / 1 var(--display)
  white-space: nowrap
  margin: 0

  span 
    font: 400 0.42em var(--body)
    color: #302c26
    margin-left: 4px
  



// ==============================
// Bottom Note
// ==============================

.ct-note 
  font: italic 300 14px / 1.6 var(--body)
  color: #302c26
  text-align: center
  margin: 20px 0 0
  padding-top: 18px
  border-top: 1px solid var(--line)



// ==============================
// Desktop
// ==============================

@media (min-width: 768px) 

  @media (min-width: 768px)

  .ct-specs
    padding: 92px 40px 100px

  .ct-card
    display: grid
    grid-template-columns: 0.85fr 1.15fr
    gap: 48px
    align-items: center
    padding: 44px

  .ct-feature
    text-align: left
    padding: 0 44px 0 4px
    border-right: 1px solid var(--line)

  .ct-number
    font-size: 86px

  .ct-text
    margin: 0
    max-width: 26ch

  .ct-divider
    display: none

  .ct-row
    padding: 17px 0

  .ct-label
    font-size: 15.5px

  .ct-value
    font-size: 30px

  .ct-note
    grid-column: 1 / -1
    margin-top: 10px

  .mobFooterWhatsapp
    grid-column: 1 / -1
    // width: 100%
    display: flex
    justify-content: center
    align-items: center
    // margin-top: 28px

  .enquireNowBtn
    display: flex
    align-items: center
    justify-content: center
    gap: 10px
    // width: 100%
    max-width: 360px
  

.mobFooterWhatsapp
  grid-column: 1 / -1
  // width: 100%
  display: flex
  justify-content: center
  align-items: center
  // margin-top: 28px

.enquireNowBtn
  display: flex
  align-items: center
  justify-content: center
  gap: 10px
  // width: 100%
  max-width: 360px