/*
|----------------------------------------------------------------
| header
|----------------------------------------------------------------
*/
.bnr .wrapper  {
  background-image: url(../images/interiors/interiors-bnr.jpg);
  height: 100vh;
}

.top-menu > a {
  z-index: 1;
}

.top-menu {
  padding: 50px 70px 0px;
  align-items: center;
}
.top-menu-container {
  padding-top: 0px;
}
.bnrTopMenu .register-btn {
  border: 1.5px solid #373E29;
  color: #373E29;
}
.burger-menu .line {
  background-color: #373E29;
}

h1 .num-title {
  color: #737A57;
}

/*
|----------------------------------------------------------------
| interiors-intro
|----------------------------------------------------------------
*/
.interiors-intro {
  padding: 150px 9vw 190px;
}
h3 {
  margin-bottom: 63px;
  font-size: 64px;
  line-height: 76px;
}

/*
|----------------------------------------------------------------
| style-function
|----------------------------------------------------------------
*/
.style-function {
  padding: 194px 0px 200px;
  background-color: #EBECE8;
}
.style-function .wrapper {
  text-align: center;
}
.style-function .wrapper h3 {
  font-size: 36px;
  line-height: 44px;
  margin: 48px auto 346px;
  width: 55%;
}
/*
|----------------------------------------------------------------
| lifestle --Flickity
|----------------------------------------------------------------
*/
.lifestyle {
  margin-left: 9vw;
}

/* nav-icons */
.select-nav-container.nav-icon {
  position: absolute;
  top: -140px;
  right: 9vw;
  z-index: 1;
}
.select-nav-control {
  border: 1.5px solid #373E29;
  background-color: transparent;
  opacity: 0.5;
  transition: opacity 0.5s;
}
.select-nav-control .bi-arrow-right {
  color: #48503A;
}
.select-nav-control.bi-arrow-circle::before {
  width: 0%;
  height: 0%;
}
.select-nav-active {
  opacity: 1;
}


/* carousel */
.bedroom-gallery .carousel-cell,
.style-function .carousel-cell {
  width: 1560px;
  height: 761px;
  margin-right: 110px;
  counter-increment: carousel-cell;
}
.style-function .carousel-cell {
  height: 960px;
}
.bedroom-gallery .carousel-cell {
  height: 860px;
}
.unitA .carousel-cell:nth-child(1) {
  background-image: url(../images/interiors/Unit\ B-1.jpg);
} 
.unitA .carousel-cell:nth-child(2) {
  width: 1344px;
  background-image: url(../images/interiors/Unit\ B-2.jpg);
} 
.unitA .carousel-cell:nth-child(3) {
  width: 768px;
  background-image: url(../images/interiors/Unit\ B-3.jpg);
} 
.unitA .carousel-cell:nth-child(4) {
  width: 768px;
  background-image: url(../images/interiors/Unit\ B-4.jpg);
}

.carousel-container {
  overflow: hidden;
}
.style-function .carousel-container {
  width: 91vw;

}

.circle-cursor {
  width: 260px;
  height: auto;
  z-index: 100;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .2s cubic-bezier(.25,.74,.22,.99), transform 1s cubic-bezier(.25,.74,.22,.99);
  pointer-events: none;
}


/* counter */
.lifestyle .content-row {
  padding: 0px 5vw 90px;
  align-items: flex-start;
}
.lifestyle .count-wrapperA,
.lifestyle .count-wrapperC,
.lifestyle .count-wrapperB {
  width: 60px;
  transform: rotate(90deg) translate(-25px, -35%);
  transform-origin: left top;
}

.lifestyle .counter {
  font-size: 60px;
  font-family: MinSansTrial-Regular;
  font-weight: normal;
  color: #9A9E8A;
  margin-bottom: -15px;
  margin-left: 40px;
}

.lifestyle .counter .total-items {
  font-size: 30px;
}

.lifestyle .count div{
  transform: rotate(-90deg);

}

/* UNIT B */
.unitB .carousel-cell:nth-child(1) {
  background-image: url(../images/interiors/Unit\ A-1.jpg);
} 
.unitB .carousel-cell:nth-child(2) {
  width: 1200px;
  background-image: url(../images/interiors/Unit\ A-3.jpg);
} 
.unitB .carousel-cell:nth-child(3) {
  width: 865px;
  background-image: url(../images/interiors/Unit\ A-2.jpg);
} 

/*
|----------------------------------------------------------------
| kitchen
|----------------------------------------------------------------
*/
.kitchen {
  background-color: #343434;
}
.kitchen .container {
  max-width: 100%!important;
}
.kitchen .left::after {
  position: absolute;
  content: "GAGGENAU INTEGRATED OVEN";
  left: 4vw;
  bottom: 50px;
  z-index: 1;
  font-family: SweetSansPro-Regular;
  font-weight: normal;
  font-size: 18px;
  line-height: 34px;
  letter-spacing: -1px;
  color: #FFFFFF;
}

.kitchen .right {
  align-self: stretch;
  padding: 100px 4vw 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kitchen .right h2 {
  color: #FFFFFF;
}
.kitchen .right h3 {
  font-size: 36px;
  line-height: 44px;
  margin-top: -40px;

}
.kitchen .right h5 {
  color: #FFFFFF;
}
.kitchen .right img {
  width: 666px;
  height: auto;
}

/*
|----------------------------------------------------------------
| primary-bedroom
|----------------------------------------------------------------
*/
.primary-bedroom-intro {
  padding: 200px 9vw 118px;
}
.primary-bedroom-intro .detail  {
  width: 94%;
}

/* gallery */
.bedroom-gallery .carousel-cell:nth-child(1) {
  background-image: url(../images/interiors/Master\ Bedroom-1.jpg);
} 
.bedroom-gallery .carousel-cell:nth-child(2) {
  width: 1026px;
  background-image: url(../images/interiors/Master\ Bedroom.jpg);
} 

/*
|----------------------------------------------------------------
| ensuite-bathroom
|----------------------------------------------------------------
*/
.ensuite-bathroom {
  padding: 200px 9vw 198px;
}
.ensuite-bathroom img {
  margin: 190px 0px 10px;
  padding-right: 18vw;
}
/*
|----------------------------------------------------------------
| statement-bathroom
|----------------------------------------------------------------
*/
.statement-bathroom {
  background-color: #343434;
}
.statement-bathroom .container {
  max-width: 100%!important;
}
.statement-bathroom .wrapper > .left::after {
  position: absolute;
  content: "CEA SHOWER HEAD";
  left: 4vw;
  bottom: 50px;
  z-index: 1;
  font-family: SweetSansPro-Regular;
  font-weight: normal;
  font-size: 18px;
  line-height: 34px;
  letter-spacing: -1px;
  color: #FFFFFF;
}

.statement-bathroom .wrapper > .right {
  align-self: stretch;
  padding: 100px 4vw 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.statement-bathroom .right h2 {
  color: #FFFFFF;
}
.statement-bathroom .right h3 {
  font-size: 36px;
  line-height: 44px;
  margin-top: -40px;

}


.statement-bathroom .row.detail {
  align-items: flex-start;
} 
.statement-bathroom .detail .left {
  padding-right: 0.5vw;
}
.statement-bathroom .detail .right {
  padding-left: 0.5vw;
}
.statement-bathroom .right h5 {
  color: #FFFFFF;
  margin-top: 126px;
}
/*
|----------------------------------------------------------------
| balcony-privateOffice
|----------------------------------------------------------------
*/
.balcony-privateOffice {
  padding: 194px 9vw 200px;
  background-color: #EBECE8;
}
.balcony-privateOffice .wrapper {
  text-align: center;
}
.balcony-privateOffice .wrapper h3 {
  font-size: 36px;
  line-height: 44px;
  margin: 48px auto 221px;
  width: 55%;
}

.balcony-privateOffice .container .row:first-child{
  margin:200px auto 190px;
}


.balcony-privateOffice .flexroom-washroom .left {
  padding-right: 3.4vw;
  padding-bottom: 194px;
}
.balcony-privateOffice .flexroom-washroom .right {
  padding-left: 3.4vw;
  align-self: flex-end;
}

/*
|----------------------------------------------------------------
| room-gallery
|----------------------------------------------------------------
*/
.room-gallery {
  overflow: hidden;
  background-color: #373E29;

}
.room-gallery .flickity-sync {
  padding: 130px 4vw 179px;

}
.room-gallery .flickity-sync.container {
  max-width: 2015px;
}
/* content-row */
.room-gallery .content-row {
  padding: 0px 5vw 90px;
  align-items: flex-start;
}
.room-gallery .count-wrapper {
  width: 60px;
  transform: rotate(90deg) translate(-25px, -35%);
  transform-origin: left top;
}

.room-gallery .counter {
  font-size: 60px;
  font-family: MinSansTrial-Regular;
  font-weight: normal;
  color: #9A9E8A;

}

.room-gallery .counter .total-items {
  font-size: 30px;
}

.room-gallery .count div{
  transform: rotate(-90deg);

}
.room-gallery h2 {
  color: #AB7F53;
  margin-top: 10px;
  margin-left: 35px;
  margin-bottom: 0px;
}
.room-gallery .content-row p {
  color: #FFFFFF;
}

.room-gallery .content-row .subtitle {
  width: 435px;
  height: 125px;
  overflow: hidden;
}
.room-gallery .content-row .subtitle-wrapper {
  transform: rotate(90deg) translate(0px, -100%);
  transform-origin: left top;
  width: 125px;
  height: 435px;
  overflow: hidden;
  
}
.room-gallery .content-row .subtitle .column,
.room-gallery .content-row .subtitle .flickity-viewport {
  width: 125px;
  height: 435px!important;
  overflow: hidden;
}
.room-gallery .content-row .subtitle h2{
  transform: rotate(-90deg) translate(-87px, -142%);
  width: 435px;
  height: 125px;
}


.room-gallery .content-row .right {
  height: 140px;
}
.room-gallery .content-row .detail {
  transform: rotate(90deg) translate(-25px, -100%);
  transform-origin: left top;
  width: 50px;
  height: 800px;
  overflow: hidden;
}
.room-gallery .content-row .detail .flickity-viewport {
  width: 50px;
  height: 800px;
}
.room-gallery .content-row .detail .column {
  width: 50px;
  height: 800px;
}
.room-gallery .content-row .detail p{
  transform: rotate(-90deg) translate(-363px, -722%);
  width: 800px;
  height: 50px;
}

.room-gallery .content-row .detail2, 
.room-gallery .content-row .detail3, 
.room-gallery .content-row .detail4 {
  margin-top: -760px;
}




/* slider-row */
.room-gallery .sliders-row .left {
  height: 630px;
}

/* carousel */

/* .room-gallery .swiper-wrapper { */
  .room-gallery .sliders-row .carousel {
  overflow: hidden;
  width: 580px;
  height: 580px;
  border-radius: 50%;
}

.room-gallery .sliders-row .swiper-wrapper { 
    overflow: hidden;
    width: 580px;
    height: 620px;
  }


.room-gallery .sliders-row .carousel-cell {
  width: 580px!important;
  counter-increment: carousel-cell;
  opacity: 1;
  filter: none;
  transform: scale(1);
  transition: opacity 0.3s,filter 0.3s, transform 0.3s;
}
.room-gallery .sliders-row .carousel-cell .img{
  height: 580px;
}
.room-gallery .sliders-row .cell { 
    width: 580px!important;
    height: 580px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
.room-gallery .sliders-row .left .carousel-cell:nth-child(1) .img {
  background-image: url(../images/room-gallery/Lounge-1\ \(1\).jpg);
} 
.room-gallery .sliders-row .left .carousel-cell:nth-child(2) .img {
  background-image: url(../images/room-gallery/Home\ Office-1.jpg);
} 

.room-gallery .sliders-row .medium .carousel-cell:nth-child(1) .img {
  background-image: url(../images/room-gallery/Closet.jpg);
} 
.room-gallery .sliders-row .medium .carousel-cell:nth-child(2) .img {
  background-image: url(../images/room-gallery/Gym-1.jpg);
} 

.room-gallery .sliders-row .right .carousel-cell:nth-child(1) .img {
  background-image: url(../images/room-gallery/Kidsplay-Room-3.jpg);
  background-position: 50% 95%;
} 
.room-gallery .sliders-row .right .carousel-cell:nth-child(2) .img {
  background-image: url(../images/room-gallery/Media\ Room-1.jpg);
} 


.room-gallery .left .cell:nth-child(1) {
  background-image: url(../images/test/Lounge-1\ \(1\).jpg);
} 
.room-gallery .left .cell:nth-child(2) {
  background-image: url(../images/test/Home\ Office-1.jpg);
} 
.room-gallery .left .cell:nth-child(3) {
  background-image: url(../images/test/Gym-1.jpg);
} 

.room-gallery .medium .cell:nth-child(1) {
  background-image: url(../images/test/Closet.jpg);
} 
.room-gallery .medium .cell:nth-child(2) {
  background-image: url(../images/test/Gym-1.jpg);
} 
.room-gallery .medium .cell:nth-child(3) {
  background-image: url(../images/test/Home\ Office-1.jpg);
} 

.room-gallery .right .cell:nth-child(1) {
  background-image: url(../images/test/Kidsplay\ Room-3.jpg);
} 
.room-gallery .right .cell:nth-child(2) {
  background-image: url(../images/test/Media\ Room-1.jpg);
} 
.room-gallery .right .cell:nth-child(3) {
  background-image: url(../images/test/Gym-1.jpg);
}


/* captions */
.room-gallery h5 {
  font-size: 20px;
  color: #9A9E8A;
}
.room-gallery .captions-row > .column {
  /* width: 200px; */
  height: 40px;
  overflow: hidden;
  text-align: center;
}
.room-gallery .caption-wrapper {
  transform: rotate(90deg) translate(-20px, -100%);
  transform-origin: left top;
  width: 40px;
  height: 200px;
  overflow: hidden;
}
.room-gallery .caption-wrapper.is-center {
  left: 30%;
}
.room-gallery .caption-wrapper .column,
.room-gallery .caption-wrapper .flickity-viewport {
  width: 40px;
  height: 200px!important;
  overflow: hidden;
}
.room-gallery .caption-wrapper h5{
  transform: rotate(-90deg) translate(-70px, -224%);
  width: 200px;
  height: 40px;
}

/* btn icon */

.flickity-prev-next-button {
  top: -10%;
  width: 60px;
  height: 60px;
  border: 2px solid #9A9E8A;
  background-color: transparent;
  color: #9A9E8A;
}
.flickity-prev-next-button .flickity-button-icon {
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;

}
.flickity-prev-next-button:hover {
  background-color: unset;
}
.flickity-prev-next-button.next {
  left: 95px;
}
/*
|----------------------------------------------------------------
| features-intro
|----------------------------------------------------------------
*/
.features-intro {
  padding: 200px 9vw 190px;
}
/* .features-intro h3 {
  margin-bottom: 60px;
} */
.features-intro p {
  width: 92%;
}

/* features-detail */
.features-detail .container {
  max-width: 100%;
}
.features-detail .right {
  background-color:#EBECE8 ;
  align-self: stretch;
}
.features-detail .feature-list.is-center {
  top: 50%;
  width: 88%;
}
.features-detail .feature-list h3 {
  font-size: 36px;
  line-height: 46px;
  width: 90%;
  margin: 0 auto 46px;
  padding-left: 10px;
}
.features-detail ol {
  padding-left: 0rem;
}
.features-detail li {
  font-family: SweetSansPro-Regular;
  font-size: 20px;
  line-height: 30px;
  color: #343434;
  font-weight: normal;
  display: flex;
  flex-direction: row;
}
.features-detail li .list-num{
  width: 30px;
  flex: 0 0 30px;
}
.features-detail li span:last-of-type {
  padding-left: 10px;
}

.features-detail .nav-icon {
  margin: 140px auto;
  text-align: center;
}
.features-detail .bi-arrow-circle::before {
  background-color:#EBECE8 ;
}

/*
|----------------------------------------------------------------
| features-gallery
|----------------------------------------------------------------
*/
.features-gallery {
  padding: 0px 0px 198px;
}
.features-gallery .wrapper {
  text-align: center;
}
.features-gallery .wrapper h3 {
  font-size: 36px;
  line-height: 44px;
  margin: 48px auto 221px;
  width: 55%;
}

.features-gallery .lifestyle {
  margin-left: 0PX;
}

/* carousel */

.features-carousel .flickity-viewport {
  height: 745px;
}
.features-carousel .carousel-cell {
  width: 895px;
  height: 745px;
  margin-right: 30px;
  counter-increment: carousel-cell;
}


/*
|----------------------------------------------------------------
| Query media
|----------------------------------------------------------------
*/

@media (max-width: 1890px) {
  /*style-function & bedroom primary - sync flickity */
  /* sync flicity */
  .bedroom-gallery .carousel-cell,
  .style-function .carousel-cell{
    width: 1420px;
    /* height: 693px; */
    height: 874px;
    margin-right: clamp(60px,6vw,110px);
  }
  .bedroom-gallery .carousel-cell {
    height: 783px;
  }
  .bedroom-gallery .carousel-cell:nth-child(2) {
    width: 934px;
  }
  /* unitA & B */
  .unitA .carousel-cell:nth-child(2) {
    width: 1224px;
  } 
  .unitA .carousel-cell:nth-child(4),
  .unitA .carousel-cell:nth-child(3) {
    width: 699px;
  }
  
.unitB .carousel-cell:nth-child(2) {
  width: 1093px;
} 
.unitB .carousel-cell:nth-child(3) {
  width: 788px;
}

  
  /* SYNC flickity - room-gallery*/
  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 560px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 510px;
    height: 510px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 510px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 510px;

  }

  
  /* feature intro */
  .features-detail .feature-list.is-center {
    width: 80%;
  }

  .features-detail .feature-list.is-center {
    width: 88%;
  }
  .features-detail .feature-list h3 {
    font-size: clamp(21px,1.8vw,36px);
    line-height: clamp(28px,2.5vw,46px);
    width: 95%;
    margin: 0 0px clamp(15px,1.5vw,46px) auto;
  }
  .features-detail li {
    font-size: clamp(10px,1.1vw,20px);
    line-height: clamp(15px,1.5vw,30px);
  }
  .features-detail .nav-icon {
    margin: clamp(78px,8vw,140px) auto;
  }
}

@media (max-width: 1700px) {
  h3 {
    font-size: clamp(35px,3.5vw,64px);
    line-height: clamp(40px,4vw,76px);
    margin-bottom: clamp(30px,3.5vw,63px);
  }

  /* main quaters */
  .interiors-intro {
    padding: clamp(80px,8vw,150px) 9vw clamp(115px,9vw,190px);
  }

  /* style & function */
  .style-function {
    padding: clamp(115px,9vw,194px) 0px clamp(120px,9.3vw,200px);
  }
  .style-function .wrapper h3 {
    font-size: clamp(24px,2.1vw,36px);
    line-height: clamp(32px,2.9vw,44px);
    margin:  clamp(30px,2.5vw,48px) auto clamp(230px,20vw,364px);
    width: 62%;
  }


  /* signature kitchen */
  .statement-bathroom .wrapper > .left::after,
  .kitchen .left::after {
    font-size: clamp(12px,1vw,18px);
    line-height: clamp(22px,1.5vw,34px);
    bottom: clamp(30px,2.5vw,50px);
  }
  .features-gallery .wrapper h3,
  .balcony-privateOffice .wrapper h3,
  .statement-bathroom .right h3,
  .kitchen .right h3{
    font-size: clamp(24px,2.1vw,36px);
    line-height: clamp(32px,2.9vw,44px);
  }
  .statement-bathroom .wrapper > .right,
  .kitchen .right {
    padding: clamp(20px,4vw,100px) 4vw clamp(10px,2vw,48px);
  }
  .kitchen .right img {
    width: clamp(270px,37vw,666px);
  }

  /* primary bedroom */
  .primary-bedroom-intro {
    padding: clamp(120px,9.3vw,200px) 9vw clamp(45px,5vw,118px);
  }

  /* style function & bedroom primary */
/* sync flickity */
  /* counter */
  .style-function .count-wrapperA,
  .style-function .count-wrapperB,
  .bedroom-gallery .count-wrapperC  {
    width: 47px;
  }
  .style-function .counter,
  .bedroom-gallery .counter  {
    font-size:clamp(40px,3.5vw, 60px);
  }

  .style-function .carousel-cell, 
  .bedroom-gallery .carousel-cell {
    width: 1260px;
    height: 775px;
  }
  .bedroom-gallery .carousel-cell {
    height: 695px;
  }
  .bedroom-gallery .carousel-cell:nth-child(2) {
    width: 829px;
  }
  /* unitA & B */
  .unitA .carousel-cell:nth-child(2) {
    width: 1086px;
  } 
  .unitA .carousel-cell:nth-child(4),
  .unitA .carousel-cell:nth-child(3) {
    width: 621px;
  }
  
.unitB .carousel-cell:nth-child(2) {
  width: 970px;
} 
.unitB .carousel-cell:nth-child(3) {
  width: 699px;
}
.select-nav-container.nav-icon {
  position: absolute;
  top: -120px;
}

  /* ensure bathcroom */
  .ensuite-bathroom {
    padding: clamp(120px,9.3vw,200px) 9vw clamp(120px,9.3vw,198px);
  }
  .ensuite-bathroom img {
    margin-top: clamp(115px,9vw,190px);
  }
  /* state,emt bathroom */
  .statement-bathroom .right h5 {
    margin-top: clamp(30px,5vw,126px);
  }
  /* balcony-privite */
  .balcony-privateOffice {
    padding: clamp(120px,9.3vw,194px) 9vw clamp(120px,9.3vw,200px);
  }
  .balcony-privateOffice .wrapper h3 {
    margin:  clamp(30px,2.5vw,48px) auto clamp(125px,10vw,221px);
    width: 62%;
  }
  .balcony-privateOffice .container .row:first-child {
    margin: clamp(120px,9.3vw,200px) auto clamp(120px,9.3vw,190px);
  }
  .balcony-privateOffice .flexroom-washroom .left {
    padding-bottom: clamp(100px,9.5vw,194px);
  }

  
  /* SYNC flickity - room-gallery*/
  .room-gallery .flickity-sync {
    padding: clamp(60px,7vw,130px) 4vw clamp(100px,9vw,179px);
  }

  /* content-row */
  .room-gallery .content-row {
    padding: 0px 2vw clamp(50px,4vw,90px);
  }
  .room-gallery .counter {
    font-size:clamp(40px,3.5vw, 60px);
  }
  .room-gallery .count-wrapper {
    width: 55px;
  }
  /* subtitle */
 

  /* detail */
  .room-gallery .content-row .detail {
    transform: rotate(90deg) translate(-25px, -89%);
  }
  .room-gallery .content-row .detail p {
    transform: rotate(-90deg) translate(-350px, -722%);
  }

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 490px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 440px;
    height: 440px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 440px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 440px;

  }

  /* caption */
  .room-gallery h5 {
    font-size: clamp(16px,1vw,20px);
  }
  .room-gallery .caption-wrapper {
    transform: rotate(90deg) translate(-20px, -90%);
  }
  .room-gallery .caption-wrapper h5 {
    transform: rotate(-90deg) translate(-70px, -205%);
  }
  
  /* icon */
  .flickity-prev-next-button {
    width: clamp(30px,3.5vw,60px);
    height: clamp(30px,3.5vw,60px);
  }
  .flickity-prev-next-button.next {
    left: clamp(50px,6vw,95px);
  }

  
  /* feature-intro */
  .features-intro {
    padding: clamp(120px,9.3vw,200px) 9vw clamp(120px,9.3vw,190px);
  }
  .features-detail .feature-list ol {
    padding-left: 0px;
  }
  /* feature-gallery */
  .features-gallery {
    padding: 0px 0px clamp(120px,9.3vw,198px);
  }
  .features-gallery .wrapper h3 {
    margin:  clamp(30px,2.5vw,48px) auto clamp(125px,10vw,221px);
  }
  /* carseoul */
  .features-carousel .flickity-viewport {
    height: clamp(393px,46vw,750px)!important;
  }
  .features-carousel .carousel-cell {
    height: clamp(186px,40vw,745px);
    margin-right: clamp(15px,1.5vw,30px);
  }
  .features-carousel .carousel-cell {
    width: clamp(223px,56.5vw,895px);
  }
  
}

@media (max-width: 1500px) { 
  /* main quaters */
  .interiors-intro {
    padding: clamp(80px,8vw,150px) 5vw clamp(115px,9vw,190px);
  }
  .primary-bedroom-intro {
    padding: clamp(120px,9.3vw,200px) 5vw clamp(45px,5vw,118px);
  }
  .ensuite-bathroom {
    padding: clamp(120px,9.3vw,200px) 5vw clamp(120px,9.3vw,198px);
  }
  .balcony-privateOffice {
    padding: clamp(120px,9.3vw,194px) 5vw clamp(120px,9.3vw,200px);
  }
  .features-intro {
    padding: clamp(120px,9.3vw,200px) 5vw clamp(120px,9.3vw,190px);
  }

  
  /* style function & bedroom primary */
  /* sync flickity */
  /* counter */
  .style-function .count-wrapperA,
  .style-function .count-wrapperB,
  .bedroom-gallery .count-wrapperC {
    width: 48px;
  }
  .style-function .carousel-cell,
  .bedroom-gallery .carousel-cell {
    width: 1100px;
    height: 677px;
  }
  .bedroom-gallery .carousel-cell {
    height: 606px;
  }
  .bedroom-gallery .carousel-cell:nth-child(2) {
    width: 724px;
  }
  /* unitA & B */
  .unitA .carousel-cell:nth-child(2) {
    width: 948px;
  } 
  .unitA .carousel-cell:nth-child(4),
  .unitA .carousel-cell:nth-child(3) {
    width: 542px;
  }
  
.unitB .carousel-cell:nth-child(2) {
  width: 847px;
} 
.unitB .carousel-cell:nth-child(3) {
  width: 610px;
}
.select-nav-container.nav-icon {
  top: -100px;
}

  
  
  /* SYNC flickity - room-gallery*/
  
  /* counter */
  .room-gallery .count-wrapper {
    width: 50px;
  }

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 440px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 390px;
    height: 390px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 390px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 390px;

  }
  
  /* caption */
  .room-gallery .caption-wrapper {
    transform: rotate(90deg) translate(-20px, -85%);
  }

  /* feature detail */
  .features-detail .nav-icon {
    bottom: -160px;
  }

}

@media (max-width: 1300px) { 
  /* style function & bedroom primary */
  /* sync flickity */
  /* counter */
  .style-function .count-wrapperA,
  .style-function .count-wrapperB,
  .bedroom-gallery .count-wrapperC {
    width: 43px;
  }
  .style-function .carousel-cell,
  .bedroom-gallery .carousel-cell {
    width: 940px;
    height: 554px;
  }
  .bedroom-gallery .carousel-cell {
    height: 518px;
  }
  .bedroom-gallery .carousel-cell:nth-child(2) {
    width: 619px;
  }
  /* unitA & B */
  .unitA .carousel-cell:nth-child(2) {
    width: 811px;
  } 
  .unitA .carousel-cell:nth-child(4),
  .unitA .carousel-cell:nth-child(3) {
    width: 463px;
  }
  .select-nav-container.nav-icon {
    top: -85px;
  }
  
  .unitB .carousel-cell:nth-child(2) {
    width: 724px;
  } 
  .unitB .carousel-cell:nth-child(3) {
    width: 522px;
  }
    
  /* SYNC flickity - room-gallery*/
  /* counter */
  .room-gallery .counter {
    width: 110px;
  }
  .room-gallery .count-wrapper {
    width: 43px;
  }

  /* subtitle */
  .room-gallery .content-row .subtitle h2 {
    transform: rotate(-90deg) translate(-130px, -142%);
  }

    /* detail */
  .room-gallery .content-row .detail2, 
  .room-gallery .content-row .detail3, 
  .room-gallery .content-row .detail4 {
    margin-top: -765px;
  }

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 390px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 340px;
    height: 340px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 340px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 340px;

  }
  /* caption */
  .room-gallery .caption-wrapper {
    transform: rotate(90deg) translate(-20px, -80%);
  }

  
  /* feature detail */
  .features-detail .nav-icon {
    bottom: -145px;
  }

  
}

@media (max-width: 1200px) {
  .features-detail .feature-list.is-center {
    top: 50%;
  }
  .features-detail .feature-list h3 {
    font-size: clamp(19px,1.8vw,36px);
    line-height: clamp(25px,2.5vw,46px);
    padding-left: 5px;
  }
  .features-detail li {
    font-size: clamp(0px,1.08vw,20px);
    line-height: clamp(0px,1.3vw,30px);
  }

  .features-detail li .list-num{
    width: 25px;
    flex: 0 0 25px;
    margin-top: 5px;
  }
  .features-detail li span:last-of-type {
    padding-left: 5px;
    margin-top: 5px;
  }
}

@media (max-width: 1100px) { 
  /* style function & bedroom primary */
  /* sync flickity */
  /* counter */
  .style-function .count-wrapperA,
  .style-function .count-wrapperB,
  .bedroom-gallery .count-wrapperC {
    width: 38px;
  }
  .style-function .carousel-cell,
  .bedroom-gallery .carousel-cell {
    width: 780px;
    height: 480px;
  }
  .bedroom-gallery .carousel-cell {
    height: 430px;
  }
  .bedroom-gallery .carousel-cell:nth-child(2) {
    width: 573px;
  }
  /* unitA & B */
  .unitA .carousel-cell:nth-child(2) {
    width: 672px;
  } 
  .unitA .carousel-cell:nth-child(4),
  .unitA .carousel-cell:nth-child(3) {
    width: 384px;
  }
  .select-nav-container.nav-icon {
    top: -85px;
  }
  
  .unitB .carousel-cell:nth-child(2) {
    width: 600px;
  } 
  .unitB .carousel-cell:nth-child(3) {
    width: 533px;
  }
  
/* sync flickity */

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 340px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 290px;
    height: 290px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 290px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 290px;

  }
  
}

@media (max-width: 991px) {
  
  .desktop-version991 {
    display: none!important;
  }
  .mobile-version991{
    display: block;
  }
  
  /* SYNC flickity - room-gallery*/
  .room-gallery .flickity-sync {
    padding: 70px 0% 130px;
   }
   .room-gallery .content-row {
    padding-left: 7vw;
    padding-bottom: 0px;
    margin-bottom: -50px;
    width: 70%;
    margin: 0;
    margin-bottom: -50px;
  }
  .room-gallery .content-row .left{
   margin-bottom: 40px;
 }
  /* counter */
  .room-gallery .counter {
    width: 110px;
    font-size: 36px;
    line-height: 50px;
  }
  .room-gallery .counter .total-items {
    font-size: 18px;
    margin-left: 5px;
  }
  .room-gallery .count-wrapper {
    width: 35px;
    transform: rotate(90deg) translate(5px, -35%);
  }
  .room-gallery p {
    font-size: 14px;
    line-height: 20px;
  }

  /* subtitle */
  .room-gallery .content-row .subtitle h2 {
    transform: rotate(-90deg) translate(-130px, -142%);
  }
  .room-gallery .content-row .subtitle {
    height: 85px;
  }

    /* detail */
    .room-gallery .content-row .detail {
      transform: rotate(90deg) translate(-25px, -98%);
    }
  .room-gallery .content-row .detail2, 
  .room-gallery .content-row .detail3, 
  .room-gallery .content-row .detail4, 
  .room-gallery .content-row .detail5 {
    margin-top: -780px;
  }
  /* btn icon */
  .flickity-prev-next-button.previous {
    left: 86vw;
  }
  .flickity-prev-next-button.next {
    left: 92vw;
  }

  
  /* feature detail */
  .features-detail .feature-list.is-center {
    position: static;
    left: auto;
    top: auto;
    margin-right: auto;
    transform: none;
    width: 100%;
  }
  .features-detail .right {
    padding: 50px 12vw 140px;
  }
  .features-detail li {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: -5px;
  }
  .features-detail .nav-icon {
    bottom: -86px;
    right: 42vw;
  }


  .feature-list.mobile-version991 {
    padding: 65px 12vw 55px;
    background-color: #EBECE8;
  }
  .feature-list h3 {
    font-size: 24px!important;
    line-height: 30px!important;
    width: 103%!important;
    padding-left: 0px!important;
    margin-bottom: 0px!important;
  }
  .feature-list h5 {
    margin-bottom: 14px;
  }
  .features-detail .nav-icon {
    margin-top: -80px;
  }
}

@media (max-width: 900px) { 
  
  /* statement bathroom */
  .kitchen .right h2,
  .statement-bathroom .right h2 {
    font-size: 20px;
    line-height: 30px;
  }

  /* style function & bedroom primary */
  /* sync flickity */
  /* counter */
  .style-function .count-wrapperA,
  .style-function .count-wrapperB,
  .bedroom-gallery .count-wrapperC {
    width: 33px;
  }
  .style-function .carousel-cell,
  .bedroom-gallery .carousel-cell {
    width: 620px;
    height: 382px;
  }
  .bedroom-gallery .carousel-cell {
    height: 342px;
  }
  .bedroom-gallery .carousel-cell:nth-child(2) {
    width: 456px;
  }
  /* unitA & B */
  .unitA .carousel-cell:nth-child(2) {
    width: 535px;
  } 
  .unitA .carousel-cell:nth-child(4),
  .unitA .carousel-cell:nth-child(3) {
    width: 477.5px;
  }
  .select-nav-container.nav-icon {
    top: -85px;
  }
  
  .unitB .carousel-cell:nth-child(2) {
    width: 477.5px;
  } 
  .unitB .carousel-cell:nth-child(3) {
    width: 344px;
  }

/* sync flickity */

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 310px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 260px;
    height: 260px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 260px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 260px;

  }
  /* caption */
  .room-gallery .caption-wrapper {
    transform: rotate(90deg) translate(-20px, -75%);
  }
  .features-intro h1 {
    width: 120%;
  }

}

@media (max-width: 767px) {

  h1 {
    margin-bottom: 46px;
  }
  h3 {
    margin-bottom: 30px!important;
    font-size: 30px!important;
    line-height: 36px!important;
  }

    .top-menu {
      padding: 30px 5% 0px;
    }

    /* main quaters */
    .interiors-intro {
      padding: 103px 12vw 73px;
    }
    .interiors-intro p {
      width: 95%;
    }

    /* interior section */
      /* map */
  .interior-section {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .main-quarters {
    height: 350px;
    width: auto;
  }
  
  .map-cover {
    display: block;
    width: 100vw;
    height: 611px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;
  }
  .map-cover-icon {
    display: block;
    width: auto;
    height: 112px;
    left: clamp(137px, 53vw, 346px);
    top: 50%;
    z-index: 99;
  }
  .interior-section {
    background-color: #ffffff;
  }
  .interior-section .draggableInterior {
    overflow-x: auto;
  }
  .interior-section .draggableInterior .main-quarters {
    height: 368px;
  }
  
  .interior-section .draggableInterior .map-cover {
    display: block;
    width: 100vw;
    height: 368px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;
  }
  .map-cover-icon {
    display: block;
    width: auto;
    height: 132px;
    left: clamp(137px, 51vw, 346px);
    top: 50%;
    z-index: 99;
  }

  /* .style-function */
  .style-function {
    padding: 95px 0px 100px;
  }
  .style-function h5 {
    color: #48503A;
    font-size: 14px;
    line-height: 23px;
  }
  .style-function .wrapper h3 {
    margin: 24px auto 65px!important;
  }
  .style-function .wrapper h3 {
    width: 76%;
  }
  .style-function .select-nav-control {
    background-color: #9A9E8A;
    border: none;
  }
  .style-function .select-nav-control .bi-arrow-right {
    color: #FFFFFF;
  }

  
  /* style function & bedroom primary */
  /* sync flickity */
  /* unitA & B */
  
  .style-function .flickity-viewport,
  .bedroom-gallery .flickity-viewport {
    height: 253px!important;
  }
  .style-function .carousel-cell,
  .bedroom-gallery .carousel-cell {
    width: 320px;
    height: 230px!important;
    margin-right: 10px;
  }
  .bedroom-gallery .carousel-cell:nth-child(2) {
    width: 619px;
  }

  .flickity-page-dots {
    bottom: -2px;
    text-align: left;
  }
  .flickity-page-dots .dot.is-selected {
    background-color: #737A57;
  }
  .flickity-page-dots .dot {
    border: 1px solid #737A57;
    background-color: transparent;
    opacity: 1;
  }

  /* unit A Unit B */
  .units-gallery .select-nav-container.nav-icon {
    position: static;
    margin-left: 9vw;
    margin-bottom: 30px;
  }
  .unitA .carousel-cell:nth-child(2) {
    width: 320px;
  } 
  .unitA .carousel-cell:nth-child(4),
  .unitA .carousel-cell:nth-child(3) {
    width: 184px;
  }
  
  .unitB .carousel-cell:nth-child(2) {
    width: 272px;
  } 
  .unitB .carousel-cell:nth-child(3) {
    width: 208px;
  }

  /* kitchen */
  .kitchen .row {
    flex-direction: column-reverse;
  }
  .kitchen .right {
    /* height: 430px; */
    padding: 31px 12vw 48px;
  }
  
  .kitchen .right .is-center {
    position: static;
    left: auto;
    top: auto;
    margin-right: auto;
    transform: none;
    width: 100%;
    width: clamp(330px,70vw,505px);
  }
  .kitchen .right h5 {
    /* text-align: center; */
    margin-top: 5px;
    font-size: 12px;
    line-height: 18px;
  }
  .kitchen .left::after {
    left: 12vw;
    font-size: 12px;
    line-height: 18px;
  }

  /* primary bedroom */
  .primary-bedroom-intro {
    padding: 100px 12vw 53px;
  }
  .primary-bedroom-intro h3 {
    margin-top: 25px;
  }
  .primary-bedroom-intro .detail {
    width: 100%;
  }

  /* .ensuite-bathroom */
  .ensuite-bathroom {
    padding: 60px 5vw 99px;
  }
  .ensuite-bathroom p {
    margin: auto 7vw;
  }
  .ensuite-bathroom img {
    margin-top: 53px;
    padding-right: 0px;
  }

  /* statement bathroom */
  .statement-bathroom .wrapper {
    flex-direction: column-reverse;
  }
  .statement-bathroom .right h2 {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 35px;
  }
  .kitchen .right h3,
  .statement-bathroom .right h3 {
    font-size: 21px!important;
    line-height: 36px!important;
  }
  .statement-bathroom .wrapper > .right {
    padding: 31px 12vw 81px;
  }
  .statement-bathroom .right h5 {
    margin: 10px 0px 0px;
  }


  /* .balcony-privateOffice */
  .balcony-privateOffice {
    padding: 0px;
    background-color: transparent;
  }
  .balcony-privateOffice .wrapper{
    padding: 95px 12vw 65px;
    background-color: transparent;
  }
  .balcony-privateOffice > img {
    padding: 0px 5vw;
  }
  .balcony-privateOffice h5 {
    color: #48503A;
    font-size: 14px;
    line-height: 23px;
  }
  .balcony-privateOffice .wrapper h3 {
    margin: 24px auto 0px!important;
    width: 100%;
  }

  
  .balcony-privateOffice .container{
    background-color: #EBECE8;
    padding: 106px 12vw 79px;
    margin-top: -46px;
  }
  .balcony-privateOffice .container .row:first-child {
    margin: 0px auto 53px;
  }
  .balcony-privateOffice .flexroom-washroom .left {
    padding-bottom: 5px;
    padding-right: 0px;
  }
  .balcony-privateOffice .flexroom-washroom .right {
    padding-left: 0px;
  }

  /* feature intro */
  .features-intro {
    padding: 100px 12vw 53px;
  }


    /* sync flickity */
   
    .room-gallery .content-row .left{
      margin-bottom: 8px;
    }
      /* slider-row */
      .room-gallery .sliders-row .left {
        height: 260px;
      }
        .room-gallery .sliders-row .carousel {
        overflow: hidden;
        width: 210px;
        height: 210px;
        border-radius: 50%;
      }
      .room-gallery .sliders-row .carousel-cell {
        width: 210px!important;
        counter-increment: carousel-cell;
        opacity: 1;
        filter: none;
        transform: scale(1);
        transition: opacity 0.3s,filter 0.3s, transform 0.3s;
      }
      .room-gallery .sliders-row .carousel-cell .img{
        height: 210px;
    
      }
      
    /* caption */
    .room-gallery .caption-wrapper {
      transform: rotate(90deg) translate(-20px, -68%);
    }


    /* .features-gallery */
    .features-gallery {
      padding: 0px 0px 120px;
    }
    
    .features-gallery .wrapper h5 {
      color: #48503A;
      font-size: 14px;
      line-height: 23px;
    }
    .features-gallery .wrapper h3 {
      margin: 24px auto 60px!important;
      width: 76%;
    }
    
  /* carseoul */
  .features-carousel .flickity-viewport {
    height:330px!important;
  }
  .features-carousel .carousel-cell {
    height: 304px;
    margin-right: 10px;
  }
  .features-carousel .carousel-cell {
    width: 320px;
  }
  .features-carousel .carousel-cell h5 {
    margin-top: 36px;
  }
  .features-carousel .carousel-cell:nth-child(4) h5 {
    margin-top: 0px;
  }
   
}

@media (max-width: 650px) {
  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 230px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 180px;
    height: 180px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 180px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 180px;
  }
  
  /* caption */
  .room-gallery .caption-wrapper {
    transform: rotate(90deg) translate(-20px, -63%);
  }

  /* btn icon */
  .flickity-prev-next-button.previous {
    left: 84vw;
  }
  .flickity-prev-next-button.next {
    left: 91vw;
  }
  .flickity-prev-next-button {
    top: -12%;
  }
}

@media (min-width: 576px) {
  .room-gallery .sliders-row .left .carousel {
    overflow: visible;
  }
  .room-gallery .sliders-row .left .flickity-viewport {
    border-radius: 50%!important;
    overflow: hidden!important;
  }
}

@media (max-width: 575px) {

  
  .desktop-version575 {
    display: none!important;
  }
  .mobile-version575{
    display: block;
  }

   /* SYNC flickity - room-gallery*/
   .room-gallery .content-row {
    width: 100%;
   }

   
   
  .room-gallery .content-row .detail2-2, 
  .room-gallery .content-row .detail3-3, 
  .room-gallery .content-row .detail4-4, 
  .room-gallery .content-row .detail5-5 {
    margin-top: -780px;
  }
   
   /* slider-row */
.room-gallery .sliders-row {
  /* max-width: 540px; */
  max-width: 421px;
  margin: 0 auto;
}
  .room-gallery h5 {
    font-size: 14px;
    text-align: center;
  }
  /* left */
  .room-gallery .sliders-row .left {
    height: 430px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 390px;
    height: 390px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 390px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 390px;

  }
  /* medium */
  .room-gallery .medium {
    height: 230px;
  }
    .room-gallery .medium .carousel {
    overflow: hidden;
    width: 190px;
    height: 190px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .right .flickity-viewport {
    margin-top: 0px;
  }
  .room-gallery .medium .carousel-cell {
    width: 190px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .medium .carousel-cell .img{
    height: 190px;
  }
  /* medium */
  .room-gallery .right {
    height: 230px;
  }
    .room-gallery .right .carousel {
    overflow: hidden;
    width: 190px;
    height: 190px;
    border-radius: 50%;
  }
  .room-gallery .right .carousel-cell {
    width: 190px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .right .carousel-cell .img{
    height: 190px;
  }

  /* caption */
  .room-gallery .left .caption-wrapper {
    transform: rotate(90deg) translate(205px, -85%);
  }
  .room-gallery .medium .caption-wrapper {
    transform: rotate(90deg) translate(105px, -68%);
  }
  .room-gallery .right .caption-wrapper {
    transform: rotate(90deg) translate(105px, -68%);
  }
  /* btn icon */
  .caption-wrapper.caption-wrapper1-1 {
    overflow: visible!important;
  }
  .flickity-prev-next-button {
    top: unset;
    width: 49px;
    height: 49px;
  }
  .flickity-prev-next-button.previous {
    left: -25px;
    top: 130%;
    z-index: 999;
  }
  .flickity-prev-next-button .flickity-button-icon {
    transform: rotate(-89deg);
  }
  .flickity-prev-next-button.next {
    left: -27px;
    top: -45%;
    z-index: 999;
  }

  /* feature */
  .features-detail .nav-icon {
    bottom: -86px;
    right: 33vw;
  }

}

@media (max-width: 420px) {
  .flickity-prev-next-button.next {
    top: -42%;
  }

}
@media (max-width: 414px) {
  .flickity-prev-next-button.next {
    top: -40%;
  }

}
@media (max-width: 400px) {
  .flickity-prev-next-button.next {
    top: -37%;
  }

}