/* =========================
   HERO SECTION
========================= */

.hero-section{
  position:relative;
  overflow:hidden;
}

/* overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background:var(--overlay-color);
  opacity:.3;
  z-index:2;
  pointer-events:none;
}

/* carousel layer */
.hero-carousel{
  position:relative;
  z-index:1;
}

/* slide image fix */
.hero-section .carousel-item img{
  width:100%;
  height:100vh;
  object-fit:cover;
}

/* indicators */
.hero-section .carousel-indicators li{
  background:rgba(255,255,255,.5);
}
.hero-section .carousel-indicators .active{
  background:var(--c1);
}

/* mobile */
@media(max-width:768px){
  .hero-section .carousel-item img{
    height:60vh;
  }
}

/* =========================
   CONCEPT SECTION
========================= */

.concept-section{
  position:relative;
  padding:30px 0;
  background:var(--bg);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  overflow:hidden;
}

/* background image layer */
.concept-bg{
  position:absolute;
  inset:0;
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--bg-opacity,.1);
  z-index:0;
  pointer-events:none;
}

/* content layer */
.concept-inner{
  position:relative;
  z-index:1;
}

/* ===============================
   VIRTUAL TOUR SECTION
=============================== */

.virtual-tour-section{
  position:relative;
  padding:50px 0;
  background:var(--bg);
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

/* color overlay when bg image exists */
.virtual-tour-color-overlay{
  position:absolute;
  inset:0;
  background:var(--bg);
  opacity:.9;
  z-index:0;
}

/* overlay layer */
.virtual-tour-bg-overlay{
  position:absolute;
  inset:0;
}

/* inner */
.virtual-tour-inner{
  position:relative;
  z-index:2;
}

/* title */
.virtual-tour-title{
  font-size:4.5rem;
  letter-spacing:-1px;
  color:var(--text);
  font-weight:500;
}

/* header spacing */
.virtual-tour-section .section-header{
  margin-bottom:20px;
}


/* ===============================
   GALLERY SECTION
=============================== */

.gallery-section{
  position:relative;
  padding:30px 0;
  background:var(--bg);
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.12);
}

/* background image */
.gallery-bg{
  position:absolute;
  inset:0;
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--bg-opacity,.1);
  z-index:0;
  pointer-events:none;
}

/* inner */
.gallery-inner{
  position:relative;
  z-index:1;
}

/* header */
.gallery-section .section-header{
  margin-bottom:20px;
}

.section-label{
  color:var(--text);
  font-size:18px;
}

.section-title{
  font-size:4.5rem;
  letter-spacing:-1px;
  color:var(--text);
  font-weight:500;
}

/* grid */
.gallery-grid{
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  position:relative;
  z-index:1;
}

/* button */
.gallery-btn{
  display:inline-block;
  background:var(--btn2);
  color:#fff;
  padding:12px 24px;
  text-decoration:none;
  border-radius:4px;
  font-weight:500;
  transition:.3s;
}

/* กัน browser เปลี่ยนสี */
.gallery-btn:link,
.gallery-btn:visited,
.gallery-btn:hover,
.gallery-btn:active{
  color:#fff !important;
  text-decoration:none !important;
}

.gallery-btn i{
  margin-right:8px;
}

.gallery-btn:hover{
  opacity:.9;
}

.partners-section{
  padding-top:20px !important;
  padding-bottom:20px !important;
  background-color:var(--bg) !important;
  box-shadow:0 5px 15px rgba(0,0,0,.4);
}

#project-info.project-info-section{
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:50px 0 100px !important;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  position:relative;
  overflow:hidden;
  min-height:800px;
}

/* overlay */
.project-info-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.project-info-overlay.soft{
  background-color:var(--overlay);
  opacity:.1;
  z-index:1;
}
.project-info-overlay.solid{
  background-color:var(--overlay);
  z-index:0;
}

/* bg2 */
.project-info-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:var(--bg2);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:1;
  pointer-events:none;
}

/* inner */
.project-info-inner{
  position:relative;
  z-index:2;
}

/* card */
.project-info-content{
  background-color:var(--card);
  padding:40px;
  border-radius:16px 16px 16px 16px !important;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
  min-height:600px;
  max-width:100%;
}

/* title */
.project-info-title{
  font-size:4.5rem;
  letter-spacing:-1px;
  color:var(--text);
  font-weight:500 !important;
}

/* tabs */
.tab-btn{
  border-radius:8px;
}
.tab-btn.active{
  background-color:var(--btn);
  color:#fff;
  border:1px solid var(--btn);
}
.tab-btn:not(.active){
  background-color:transparent;
  color:var(--btn);
  border:1px solid var(--btn);
}

/* brochure */
.brochure-section{
  border-top:1px solid var(--btn);
}

.brochure-btn{
  display:inline-block;
  background-color:var(--btn);
  color:#fff;
  padding:12px 24px;
  border:none;
  border-radius:4px;
  font-weight:500;
  transition:all .3s ease;
  cursor:pointer;
}

.brochure-btn i{
  margin-right:8px;
}

/* section */
#room-types.room-types-section{
  background-color:var(--bg);
  padding:100px 0 !important;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  position:relative;
}

/* bg image */
.room-types-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--bg-opacity);
  z-index:0;
  pointer-events:none;
}

/* center bar */
.room-types-bar{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  height:150px;
  background-color:var(--btn);
  z-index:1;
  border-radius:8px;
}

/* container */
.room-types-inner{
  position:relative;
  z-index:2;
}

/* header */
#room-types .section-header{
  margin-bottom:20px !important;
}

#room-types .section-label{
  color:var(--text);
  font-size:18px;
}

#room-types .virtual-tour-title{
  font-size:4rem;
  letter-spacing:-1px;
  color:var(--text);
  font-weight:500 !important;
}

/* nav */
.room-type-navigation{
  background-color:var(--card);
  box-shadow:0 8px 25px rgba(0,0,0,.1);
  position:relative;
  z-index:3;
}

.room-nav-title{
  color:var(--text);
}

/* tabs */
.room-tab.active{
  background-color:var(--btn);
  color:#fff;
}
.room-tab:not(.active){
  background-color:transparent;
  color:var(--btn);
  border:1px solid var(--btn);
}

/* dropdown arrow */
.size-dropdown{
  background-repeat:no-repeat;
  background-position:right 10px center;
}

/* icon color */
.unit-detail i{
  color:var(--btn);
}

#master-plan.master-plan-section{
  padding-top:30px !important;
  padding-bottom:30px !important;
  background-color:var(--bg);
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
  position:relative;
}

.master-plan-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:var(--bg);
  opacity:.9;
  z-index:0;
}

.master-plan-container{
  position:relative;
  z-index:1;
}

#master-plan .section-header{
  margin-bottom:20px !important;
}

#master-plan .section-label{
  color:var(--text);
  font-size:18px;
}

#master-plan .section-title{
  font-size:4.5rem;
  letter-spacing:-1px;
  color:var(--text);
  font-weight:500 !important;
}

.master-plan-navigation{
  background-color:var(--card);
  box-shadow:0 8px 25px rgba(0,0,0,.1);
}

.master-plan-tab.active{
  background-color:var(--btn);
  color:#fff;
}

.master-plan-tab:not(.active){
  background-color:transparent;
  color:var(--btn);
  border:1px solid var(--btn);
}

.building-dropdown{
  background-repeat:no-repeat;
  background-position:right 10px center;
}

.plan-fallback{
  background-color:#f8f9fa;
  min-height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.plan-hidden{
  display:none;
}

#exclusive-services.exclusive-services-section{
  padding-top:30px !important;
  padding-bottom:30px !important;
  background-color:var(--bg);
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 15px 50px rgba(0,0,0,.2);
  position:relative;
}

.exclusive-services-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:var(--bg);
  opacity:.9;
  z-index:0;
}

.exclusive-services-container{
  position:relative;
  z-index:2;
}

#exclusive-services .section-header{
  margin-bottom:20px !important;
}

#exclusive-services .section-label{
  color:var(--text);
  font-size:18px;
}

#exclusive-services .section-title{
  font-size:4.5rem;
  letter-spacing:-1px;
  color:var(--text);
  font-weight:500 !important;
}

.exclusive-services-box{
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  background-color:var(--card);
  position:relative;
  z-index:3;
}

.service-tab.active{
  background-color:var(--btn);
  color:#fff;
}

.service-tab:not(.active){
  background-color:transparent;
  color:var(--btn);
  border:1px solid var(--btn);
}

#location.location-section{
  padding-top:30px !important;
  padding-bottom:30px !important;
  background-color:var(--bg);
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  position:relative;
}

.location-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:var(--bg);
  opacity:.9;
  z-index:0;
}

.location-container{
  position:relative;
  z-index:1;
}

.brochure-btn-submit{
  background:linear-gradient(135deg,var(--g1),var(--g2));
}

.brochure-btn-download{
  display:none;
  background:linear-gradient(135deg,var(--g1),var(--g2));
}