html {
    /* font-size:0.521vw; */
    font-size: 62.5%;
}
 
  :root {
    --main-primary-color: #2EA3F2;
    --black-color:#000;
    --wht-color:#fff;
    --gray-bg-color:#EEEEEE;
  }



  @font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/fonts/SFProDisplay-Medium.eot');
    src: url('../fonts/fonts/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Medium.woff') format('woff'),
        url('../fonts/SFProDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/fonts/SFProDisplay-Light.eot');
    src: url('../fonts/fonts/SFProDisplay-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Light.woff') format('woff'),
        url('../fonts/SFProDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/fonts/SFProDisplay-Regular.eot');
    src: url('../fonts/fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Regular.woff') format('woff'),
        url('../fonts/SFProDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/fonts/SFProDisplay-Heavy.eot');
    src: url('../fonts/fonts/SFProDisplay-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Heavy.woff') format('woff'),
        url('../fonts/SFProDisplay-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/fonts/SFProDisplay-Black.eot');
    src: url('../fonts/fonts/SFProDisplay-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Black.woff') format('woff'),
        url('../fonts/SFProDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/fonts/SFProDisplay-Bold.eot');
    src: url('../fonts/fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Bold.woff') format('woff'),
        url('../fonts/SFProDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/fonts/SFProDisplay-Semibold.eot');
    src: url('../fonts/fonts/SFProDisplay-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Semibold.woff') format('woff'),
        url('../fonts/SFProDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/fonts/SFProDisplay-Thin.eot');
    src: url('../fonts/fonts/SFProDisplay-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Thin.woff') format('woff'),
        url('../fonts/SFProDisplay-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

  body {
    margin: 0;
    padding: 0;
    font-family: 'SF Pro Display';
    font-weight: 400;
    overflow-x: hidden;
  }
  
ul{list-style: none; padding: 0; margin: 0;}
a{transition: all .2s ease; text-decoration: none;}
.gray-bg{background: var(--gray-bg-color); }
.same-section{padding: 5.208vw 0}
.same-title h2{color: var(--black-color); font-size: 3.646vw; font-weight: 700; margin: 0 0 1rem; line-height:normal;}
.mid-sub-heading{color: var(--black-color); font-size: 2.083vw; font-weight: 700; line-height:normal; width: 100%; max-width: 47.917vw; margin: 0 auto;}

.same-title{padding-bottom: 4.688vw;}
.same-title p + p{padding-top: 2rem;}
.same-title p{color: #3D3D3D; font-size: 1.250vw; line-height: 1.7; font-weight: 400;}
.bottom-middle-btn{margin-top: 2.604vw; display: flex;  align-items: center; flex-wrap: wrap;}
.bottom-middle-btn .btn + .btn{margin-left: 1rem;}
.btn-primaryx{font-size: 16px; font-weight: 500; background-color: var(--main-primary-color); color: var(--wht-color);    transition: .3s; border-radius: 5px; border: solid 1px var(--main-primary-color); text-transform: uppercase; padding:1.5rem 3rem; display: inline-block;}
.btn-primaryx:hover{background: var(--wht-color); color: var(--main-primary-color);    border-radius: 0 20px 0 20px;
    box-shadow: 0px 8px 9px rgb(46 163 242 / 31%);
    transform: translateY(-5px); }


.btn-outline-primaryx{font-size: 16px; font-weight: 500; background-color: var(--wht-color); color: #9B9B9B; border-radius: 5px;    transition: .3s; border: solid 1px #9B9B9B; text-transform: uppercase; padding:1.5rem 3rem; display: inline-block;}
.btn-outline-primaryx:hover{background: var(--main-primary-color); color: var(--wht-color); border-color: var(--main-primary-color);     border-radius: 0 20px 0 20px;
    box-shadow: 0px 8px 9px rgb(46 163 242 / 31%);
    transform: translateY(-5px);}
.equal-margin-section{margin:0 2.083vw;}
.radius-section{border-radius: 3.2rem;}
:is(.btn-primaryx, .btn-outline-primaryx):focus{outline: none; box-shadow: none;}



.bottom-middle-btn .btn {min-width:220px}

.container-fluid{max-width: calc(100vw - 20vw);}
/* .container-fluid{max-width:1460px;} */
.wid-90 { max-width: 90%; }






.header{display: flex; align-items: center; justify-content: space-between; padding:1.458vw 2.083vw; background: var(--wht-color);  z-index: 9;}
.header .logo-bx a{display: block; width: 100%; max-width: 153px; }
.header .header-navmenu ul{display: flex; align-items: center;}
.header .header-navmenu ul li{padding: 0 3.4rem;}
.header .header-navmenu ul li:last-child{padding-right: 0;}
.header .header-navmenu ul li a{font-size: 2rem; color: var(--black-color); font-weight: 400;     padding: 5px 10px;     position: relative;}
.header .header-navmenu ul li  a:hover { background-color: var(--main-primary-color); color:var(--wht-color); }
.header .header-navmenu ul li  a:before { content: ""; position: absolute; bottom: 12px; left: 12px; width: 12px; height: 12px; border: 3px solid var(--main-primary-color); border-width: 0 0 3px 3px; opacity: 0; transition: all 0.3s }
.header .header-navmenu ul li  a:hover:before { opacity: 1; bottom: -8px; left: -8px; }
.header .header-navmenu ul li  a:after { content: ""; position: absolute; top: 12px; right: 12px; width: 12px; height: 12px; border: 3px solid var(--main-primary-color); border-width: 3px 3px 0 0; opacity: 0; transition: all 0.3s; }
.header .header-navmenu ul li  a:hover:after { opacity: 1; top: -8px; right: -8px; }
.header .header-navmenu ul li.active a{background-color: var(--main-primary-color); color:var(--wht-color);}
.header .header-navmenu ul li.active a:before { opacity: 1; bottom: -8px; left: -8px; }
.header .header-navmenu ul li.active a:after {  opacity: 1; top: -8px; right: -8px; }


#toggle-btn{width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 17px; color: var(--wht-color); background: var(--main-primary-color); border: 1px solid var(--main-primary-color); transition: 0.3s; -webkit-transition: 0.3s; border-radius: 100%; outline: none;}
#nav-close-btn{background-color: transparent; color: var(--main-primary-color); font-size: 20px; outline: none!important; border: 0; }

.headerFix { animation: smoothScroll .2s linear; position: fixed; left: 0; right: 0; top: 0; box-shadow: 0 3px 10px 5px rgba(0, 0, 0, .06); background: var(--wht-color); }
@keyframes smoothScroll {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0px);
	}
} 


/* #black-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; background: rgba(0, 0, 0,0.5); pointer-events: none; visibility: hidden; transition: 0.3s; -webkit-transition: 0.3s; } */

.banner{background:linear-gradient(to left, #2ea3f130 0%, #2EA3F2 100%);  padding-top: 11.021vw; min-height: 45.313vw; position: relative;}
.banner:before{position: absolute; left: 0; right: 0; bottom: 0; top: 0; background:  url(../images/banner-right.png)no-repeat right bottom; background-size: 57%;   content: ''; }
.banner :is(h2, p){color: var(--wht-color);}
.banner .bottom-middle-btn .btn-outline-primaryx{background:transparent; border-color: var(--wht-color); color: var(--wht-color);}
.banner .bottom-middle-btn .btn-outline-primaryx:hover{background: var(--wht-color); color: var(--main-primary-color);}
.banner .bottom-middle-btn .btn-primaryx{background:var(--wht-color); border-color: var(--wht-color); color: var(--main-primary-color); }
.banner .bottom-middle-btn .btn-primaryx:hover{background: var(--main-primary-color); color: var(--wht-color); border-color: var(--main-primary-color);}
.banner .same-title{position: relative; z-index: 1;}






.why-clearrails-wrapper .why-contentbx .icon-bx{min-height: 7rem; margin-bottom: 3rem; }
.why-clearrails-wrapper .why-contentbx h3{font-size: 2.083vw; color: var(--black-color); font-weight: 700; min-height: 7.813vw;}
.why-clearrails-wrapper .why-contentbx p{font-size: 1.042vw; color: #484848; font-weight: 400;}



.locations-wrapper-section .locations-right-bx{border-left: solid 1px var(--black-color); padding-left: 3rem; height: 100%;}
.locations-wrapper-section .nav{flex-direction: column; padding-right: 2rem; }
.locations-wrapper-section .nav .nav-link{border: solid 1px transparent; background-color: var(--wht-color); color:#4F4E4E; font-size:1.146vw;  border-radius: 5px; width: 100%; display:block; text-align: left; font-weight: 400; padding: 1.5rem 2rem;}
.locations-wrapper-section .nav .nav-link.active{background: var(--main-primary-color); color: var(--wht-color);font-weight: 700;}




.inverst-clearrails-wrapper{ position: relative; }
.inverst-clearrails-wrapper .inverst-image-banner { height: 46.354vw; border-radius: 3.2rem; overflow: hidden;} 
.inverst-clearrails-wrapper .inverst-image-banner img{width: 100%; object-fit: cover; height: 100%;}
.inverst-clearrails-wrapper .inverst-content-title{position: absolute; left:0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2;}
.inverst-clearrails-wrapper .same-title :is(h2,p ){color: var(--wht-color);}
.inverst-clearrails-wrapper .inverst-content-title .wid-90{max-width: 600px;}



/* .villa-section-wrapper .same-title{margin-bottom: 10rem;} */
/* .villa-section-wrapper{padding-left: 2.083vw;} */
.villa-section-wrapper .villa-card{margin-bottom: 7rem;}
.villa-section-wrapper .villa-card .img-bx{border-radius: 24px; overflow: hidden; position: relative; height: 33vw;}
.villa-section-wrapper .villa-card .img-bx img{width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.villa-section-wrapper .villa-card h3{font-size: 2.083vw; color: var(--black-color); font-weight: 700; position: absolute; z-index: 2; top: 4rem; left: 3rem;}
.villa-section-wrapper .villa-content-bx{text-align: center; padding: 0 2rem;}
.villa-section-wrapper .villa-detail-list{ border-radius: 30px; background: var(--wht-color); padding: 1.042vw; margin: -9rem 0 3rem; position: relative; z-index: 3;}
.villa-section-wrapper .villa-detail-list .detail-bx{display: flex; align-items: center; padding:1rem 0;}
.villa-section-wrapper .villa-detail-list .icon-bx{width:45px;}
.villa-section-wrapper .villa-detail-list h4{font-size:0.938vw; font-weight: 700; color: var(--black-color); margin: 0 0 0 1.5rem;  width: 70%; text-align: left; white-space: pre;}
.villa-section-wrapper .villa-card .btn-primaryx{font-size: 0.833vw;}


  /* footer */
  .footer{padding: 4.688vw 0 2.604vw; text-align: center;}
  .footer .footer-logo a{width: 100%; max-width: 225px; display: block; margin: 0 auto 3.125vw; }
  .footer .footer-menu{display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
  .footer .footer-menu li{ padding: 0 3.5rem;}
  .footer .footer-menu li a{color: var(--black-color); font-size: 1.042vw;} 
  .footer .footer-menu li a:hover{color: var(--main-primary-color);} 




  .burger { position: relative; display: block; order: -1; cursor: pointer; user-select: none; z-index: 10; width: 30px; height:15px; rotate: 0deg; border: none; outline: none; visibility: visible; background: none; transition: 0.35s ease; }
  .burger-line { position: absolute; display: block; left: 0; width: 100%; height: 3px; opacity: 1; rotate: 0deg; border: none; outline: none; border-radius: 1rem; background-color: var(--main-primary-color); transition: 0.25s ease-in-out; }
  .burger-line:nth-child(1) { top: 0px; }
  .burger-line:nth-child(2) { top: 0.5rem; width: 70%; }
  .burger-line:nth-child(3) { top: 1rem; }
  .burger.is-active > .burger-line:nth-child(1) { top: 0.5rem; rotate: 135deg; }
  .burger.is-active > .burger-line:nth-child(2) { opacity: 0; visibility: hidden; }
  .burger.is-active > .burger-line:nth-child(3) { top: 0.5rem; rotate: -135deg; }


.villa-section-wrapper .owl-theme .owl-dots .owl-dot span{background: #c1c1c1;}
.villa-section-wrapper .owl-theme .owl-dots .owl-dot.active span, .villa-section-wrapper .owl-theme .owl-dots .owl-dot:hover span { background: var(--main-primary-color); }



.cyclone-proof-text { font-size: 16px; color: #000; font-weight: 500; padding:4vw 0 1.5vw;}
.cyclone-proof-text .cyclone-proof-list {display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
.cyclone-proof-text .cyclone-proof-list li { width: 20%; display: flex; align-items: center; justify-content: center; padding: 0 15px; }
.cyclone-proof-text .cyclone-proof-list li h3{font-size: 2rem; color: var(--black-color); font-weight: 700; margin: 0;}
.cyclone-proof-text .cyclone-proof-list li .icon-bx{display: inline-block; width: 100%; max-width: 43px; margin-right: 15px; }



.contact-wrapper .contact-info{text-align: center; margin-bottom: 3rem;}
.contact-wrapper .contact-info .icon-box{ width: 100%;  max-width: 60px; line-height: 60px; height: 60px; border-radius: 5px; text-align: center; margin: 0 auto 2rem; background: #fff; text-align: center;  }
.contact-wrapper .contact-info :is(p, a){color: #3D3D3D; font-size: 18px; font-weight: 400;}
.contact-wrapper .contact-info a:hover{color: var(--main-primary-color);}

/* 
 .html.a-fullscreen{position: relative !important;}
 html.a-fullscreen body{  height: auto !important; margin: 0; overflow: visible !important; padding: 0; width: 100%;}
html.a-fullscreen .a-canvas {position: relative !important;} */


 .panorama-wrapper{ position: relative; min-height: 100vh;}
 .panorama-wrapper iframe{display: block; height: 100vh;}
 .take-housing-wrapper .img-box { text-align: right; }
 .take-housing-wrapper .same-title { margin-top: -120px; }
 .inner-banner{background: linear-gradient(to left, #2ea3f130 0%, #2EA3F2 100%); padding: 4vw 0;  text-align: center;}
 .inner-banner h1{    font-size:3.646vw; font-weight: 700; margin: 0; line-height: normal; color: var(--wht-color); }
 .inner-banner p { font-size: 1.2vw; font-weight: 600; color: #fff; margin-top: 10px; }
 .lightgallery-wrapper .lightgallery { display: flex; flex-wrap: wrap; }
 .lightgallery-wrapper .lightgallery a { flex: 0 0 25%; padding: 10px; height: 300px; overflow: hidden; }
 .lightgallery-wrapper .lightgallery a img { width: 100%; height: 100%; object-fit: cover; }



 .swiper-container-wrapper{overflow: hidden;display: flex; flex-flow: column nowrap; width: 100%;}
 .swiper-container-wrapper .swiper-container { overflow: hidden; width: 100%; margin-left: auto; margin-right: auto;  }
 .swiper-container-wrapper .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}
  @media (min-width: 480px) {
    .swiper-container-wrapper .swiper-container {
      min-height: 320px;
    }
  }
  @media (min-width: 480px) {
   .swiper-container-wrapper {
      flex-flow: row nowrap;
    }
  }
  
  .swiper-container-wrapper :is(.swiper-button-next, .swiper-button-prev) {color: var(--wht-color); width: 50px; height: 50px; background: var(--main-primary-color); border-radius: 4px; }
  .swiper-button-next:after, .swiper-button-prev:after{font-size: 22px;}
  .swiper-container-wrapper :is(.swiper-button-next, .swiper-button-prev):hover {background: var(--main-primary-color); color: var(--wht-color); }
  .swiper-container-wrapper .swiper-slide { text-align: center; background-size: cover; background-position: center; background-color: #fff; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;}
  .swiper-container-wrapper .gallery-top { position: relative; width: 100%; height: 50vh; }
  @media (min-width: 480px) {
    .swiper-container-wrapper  .gallery-top {
      width: 80%;
      height: calc(100vh - 101px);
      margin-right: 10px;
    }
  }
  
  .swiper-container-wrapper .gallery-thumbs { width: 100%; height: 25vh; padding-top: 10px; }
  @media (min-width: 480px) {
    .swiper-container-wrapper .gallery-thumbs {
      width: 20%;
      height: calc(100vh - 101px);
      padding: 0;
    }
  }
  .swiper-container-wrapper .gallery-thumbs .swiper-wrapper { flex-direction: row; }
  @media (min-width: 480px) {
    .swiper-container-wrapper .gallery-thumbs .swiper-wrapper {
      flex-direction: column;
    }
  }
  .swiper-container-wrapper .gallery-thumbs .swiper-slide { width: 25%; flex-flow: row nowrap; height: 100%; opacity: 0.75; cursor: pointer; }
  @media (min-width: 480px) {
    .swiper-container-wrapper .gallery-thumbs .swiper-slide {
      flex-flow: column nowrap;
      width: 100%;
    }
  }
  .swiper-container-wrapper .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }

.villa-detail-wrapper .same-title h2{font-size: 2.646vw;}
.dotlist{margin: 1rem 0;}
.dotlist li{padding:5px 0 5px 40px;font-weight: 400; font-size: 1.10vw; line-height:1.6;  color: #3D3D3D; position: relative;}
.dotlist li .check-icon-left{    color: #3D3D3D; position: absolute; left: 5px; top: 10px; font-size: 1vw;}

.section-bottom-btn{    margin-top: 6rem;}

.factory-locations-wrapper .locations-card-img { height: 100%; position: relative; overflow: hidden; }
.factory-locations-wrapper .locations-card-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; overflow: hidden;}
.factory-locations-wrapper .title-bx h3{ font-size: 2.083vw; color: var(--black-color); font-weight: 700; position: absolute; z-index: 2; top: 4rem; left: 3rem;}
.factory-locations-wrapper .right-location-card .locations-card-img {height: 50%; margin-bottom: 15px;}
.factory-locations-wrapper .right-location-card .locations-card-img + .locations-card-img {margin-bottom: 0;}
.factory-locations-wrapper .ribbion-text { background: #2ea3f2; padding: 10px 20px; color: #fff; text-align: center; font-size: 2rem; font-weight: 600; position: absolute; right: -80px; top: 23px; min-width: 230px; transform: rotate(50deg);  z-index: 2;}

.sale-info-wrapper { padding: 3rem; background: #fff; border: solid 1px #B6B6B6; border-radius: 21px; width: 100%; max-width: 350px; margin-top: 5rem;}
.sale-info-wrapper h3{font-size: 24px; color: var(--main-primary-color); font-weight: 700; margin-bottom: 10px; line-height: normal;}
.sale-info-wrapper p{font-size: 14px; color: #414141; line-height: 20px; }
.sale-info-wrapper :is(.sold-info, .need-sale) { font-size: 14px; color: var(--black-color); font-weight: 400; }
.sale-info-wrapper :is(.sold-info, .need-sale) strong { font-weight: 700;}

.sale-info-wrapper .sale-progress { margin: 2rem 0 3rem; }
.sale-info-wrapper .progress{ height: 8px; background: #CBCBCB; margin: 7px 0; border-radius: 50px;}
.sale-info-wrapper .progress .progress-bar{ background-color: var(--main-primary-color); border-radius: 50px;}
.sale-info-wrapper .btn {width: 100%; display: block;}

.villa-1550-detail-wrapper { position: relative; }
.villa-1550-detail-wrapper .same-title{padding-left: 3vw;}
.villa-1550-detail-wrapper .same-title h3{font-size: 1.4vw; color: #000; font-weight: 700; margin-bottom: 2vw;} 
.villa-1550-detail-wrapper .same-title h3 .border-text{border-bottom: solid 3px #000;  padding-bottom: 5px; display: inline-block;} 
.villa-1550-detail-wrapper .same-title h2{font-size: 2.1vw;}
.villa-1550-detail-wrapper  .villa-1550-imgbox{position: absolute; width: 48%; height: 100%; top: 0; bottom: 0; left: 0;}
.villa-1550-detail-wrapper  .villa-1550-imgbox img{width: 100%; height: 100%; object-fit: cover;}
.villa-1550-detail-wrapper  .btn-primaryx{margin-top: 20px;}

.villa-1550-detail-wrapper .sale-info-wrapper{    padding: 0;border: inherit; margin: 2.5rem 0 1rem;}
.villa-1550-detail-wrapper .sale-info-wrapper .sale-progress{margin: 0;}



.newProjectsTablistWrapper .nav{flex-direction: row;  justify-content: center; margin:2.8vw 0 4vw;}
.newProjectsTablistWrapper .nav .nav-item{margin: 0 6px;}
.newProjectsTablistWrapper .nav .nav-link{border: solid 1px var(--main-primary-color); background-color: var(--wht-color); color:var(--main-primary-color); font-size:1.146vw;  border-radius: 5px; width: 100%; display:block; text-align: center; font-weight: 400; padding: 1rem 2rem;}
.newProjectsTablistWrapper .nav .nav-link.active{background: var(--main-primary-color); color: var(--wht-color);}