@import url(font.css);

.room_screen{

    z-index: 1;
    width: 100vw;
    position: relative;
    top: 0;
    left: 0;
}



.roomImgSec{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.roomImgSec > img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    position: absolute;
}

#whitelogo{
    opacity: 1;
}

#blacklogo{
    opacity: 0;
}

.navRight a{
    color: white;
}

.p2low{
    width: 100vw;
    height: 100%;
    padding: 5vw;
    background-color: var(--bglight);

}

.accom{
  
    
    text-align: center;
    font-family: serifFont;
    font-size: 2.2vw;
    -webkit-text-decoration: underline 1.5px solid var(--black);
            text-decoration: underline 1.5px solid var(--black);
    height: 4vw;
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--black);
  
}

.room1Sec{
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: white;
    border-radius: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2vw 2.4vw;
    gap: 1vw;
    margin-top: 2vw;
}

.r1Left,.r1Right{
    width: 50%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.r1TitleSec{
    -ms-flex-item-align: start;
        align-self: flex-start;
}


.r1TitleSec{
    -ms-flex-item-align: start;
        align-self: flex-start;
}

.r1ContentSec{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  
}

.r1Left,.r1Right{
    width: 50%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1vw;
}

.r1Left .imgDiv{
    width: 100%;
    height: 360px;
}

.r1Left .imgDiv img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    border-radius: 10px;
}

.contactSec{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}



.wabtn,.callbtn{
    width: 36%;
  height: 50px;
  background-color: var(--darkBlue);
  border-radius: 42px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6vw;
  -webkit-box-shadow: 0px 1px 2px #2B3044,
    0px 4px 16px #2B3044;
          box-shadow: 0px 1px 2px #2B3044,
    0px 4px 16px #2B3044;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: scale(var(--s, 1)) perspective(600px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
          transform: scale(var(--s, 1)) perspective(600px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  -webkit-perspective: 600px;
          perspective: 600px;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  -o-transition: transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
  cursor: pointer;

  -webkit-user-select: none; 
  -moz-user-select: none; /* For Firefox */
  -ms-user-select: none; /* For Internet Explorer */
  user-select: none; /* Standard syntax */ 
}

.wabtn:active,.callbtn:active{
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(0.93);
      -ms-transform: scale(0.93);
          transform: scale(0.93);
}

.wabtn img,.callbtn img{
    height: 70%;
}

.waText,.callText{
    width: 50%;
  text-align: center;
  color: var(--bglight);
}

.r1Right{
    height: 34vw;
  /* background-color: bisque; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0;
}

.r1IconSec{
    max-width: 100%;
  padding: 1vw;
 
  display: -ms-grid;
 
  display: grid;
  -ms-grid-columns: minmax(9vw,1fr) 1vw minmax(9vw,1fr) 1vw minmax(9vw,1fr) 1vw minmax(9vw,1fr);
  grid-template-columns: repeat(4,minmax(9vw,1fr));
  gap: 1vw;
}

.r1IconSec .iconDiv{
  height: 100%;
width: 100%;

/* background-color: greenyellow; */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}

.r1IconSec .icon {
  height: var(--h);
  width: var(--h);
  border-radius: 50%;
  
  -ms-grid-column-align: center;
  
      justify-self: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  --h: 5.6vw;
}

.r1IconSec .iconDiv .icon img{
  height: 70%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  /* fill: blueviolet; */
}

.r1IconSec .iconDiv .icon svg{
  height: 70%;
}

.r1IconSec .iconDiv .icon svg path{
  
}

.r1IconSec .iconDiv .iconText {
  text-align: center;
  font-size: .96vw;
  height: 2.4vw;
  color:var(--black)
  /* background-color: burlywood; */
}

.r1SaleText{
    padding: .5vw;
  background-color: yellow;
  border-radius: 5px;
  /* border: 1px solid black; */
  font-weight: 600;
}

.r1PriceDiv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:start;
        -ms-flex-pack:start;
            justify-content:start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.4vw;
    width: 100%;
  }

  .r1Price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
  }

  .r1Price .price{
   font-size: 1.8vw;
  }

  

  .r1priceDemo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
  }

  .r1PriceSec {
    padding-left: 2.8vw;
    gap: .28vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }


.r1DisPer {
  font-size: 1.8vw;
  font-weight: 300;
}

.r1Price icon{
    font-size: 1.8vw;
  }

  .r1PriceDemoSec {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .6vw;
    opacity: .6;
  }

  .r1priceText{
    font-size: .9vw;
  }

  .r1priceDemo{
    font-size: .9vw;
  }

  .r1TitleSec .title{
    /* background-color: yellow; */
    font-weight: 600;
    font-size: 1.2vw;
    
  }

  #r2Sec{
   /* margin-top: 2vw; */
   position: relative;
   z-index: 2;
  }

  #r2ContSec{
    /* flex-direction: row-reverse; */
  }

  .r1Price .icon{
    font-size: 1.6vw;
  }
  



@media(max-width: 1536px) {
    
   

}
@media(max-width: 1288px) {
    
}
@media (max-width: 1024px) {
  .roomImgSec > img {
    
    -o-object-position: left;
    
       object-position: left;
    
}

.accom {
  
  font-size: 3vw;
  
}

.r1IconSec {
 
 row-gap: 2vw;
}

.r1Left .imgDiv {
  width: 100%;
  height: 30vw;
}

.r1TitleSec .title {
  font-size: 2vw;
}

.r1IconSec .icon {
  --h: 6.6vw;
}

.r1IconSec .icon {
  font-size: 1.2vw;
}
.r1IconSec .iconDiv .iconText {
  font-size: 1.2vw;
}

}

@media (max-width: 1024px) and (max-height:500px){
  .r1IconSec {
 
    gap: 0.1vw;
    row-gap: 1vw;
  }

  .wabtn, .callbtn {
    width: 40%;
    height: 36px;
  }
}

@media (max-width: 900px) {
  .wabtn, .callbtn {
    width: 44%;
    height: 36px;
  }

}

@media (max-width: 900px) and (max-height: 500px) {
  .wabtn, .callbtn {
    width: 44%;
    height: 36px;
  }

  .r1IconSec {
   
}

}


@media (max-width: 768px) {
   

}

@media (max-width: 768px) and (max-height: 600px) {

  .waText, .callText 
  {
    font-size: .8rem;
}
.forQue{
  font-size: .8rem;
}

}


@media (max-width: 640px) {
   
}



@media (max-width: 480px) {
  .roomImgSec {
    height: 60vh;
}
.roomImgSec > img {
  -o-object-position: 84%;
     object-position: 84%;
}

.accom {
  font-size: 1.5rem;
  height: 16vw;
}


.r1TitleSec {
  
  -ms-flex-item-align: center;
  
      -ms-grid-row-align: center;
  
      align-self: center;
  }

  .r1TitleSec .title {

    font-weight: 600;
    font-size: 1rem;
}

.room1Sec {
  gap: 4vw;
}

.r1ContentSec {
 
  -webkit-box-orient: vertical;
 
  -webkit-box-direction: normal;
 
      -ms-flex-direction: column;
 
          flex-direction: column;
  gap: 4vw;
}

.r1Left, .r1Right {
  width: 100%;
  
  gap: 4vw;
}

.r1Left .imgDiv {
  height: 50vw;
}

.contactSec {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4vw;
}

.wabtn, .callbtn {
  width: 80%;
}

.forQue{
  text-align: center;
}

.r1IconSec .icon {
  --h: 16vw;
}



.r1IconSec .iconDiv .iconText {
  
  font-size: 3vw;
  }

  .r1IconSec {
    row-gap: 10vw;
    
    grid-template-columns: repeat(3, 1fr);
}

.r1Right {
  height: auto;
}

.r1SaleText {
  padding: 1.5vw;
}

.r1PriceSec {
  gap: 2vw;
  padding-bottom: 1rem;
}

.r1PriceDiv {
  gap: 4vw;
}

.r1DisPer {
  font-size: 1rem;
}

.r1Price .icon {
  font-size: 1rem;
}

.r1Price .price {
  font-size: 1rem;
}

.r1priceText {
  font-size: .6rem;
}

.r1priceDemo {
  font-size: .6rem;
}

#r2Sec {
    margin-top: 8vw;
 
}
}