/* PUSH MAIN CONTENT */
main{
  padding-top: 90px; /* header + subnav */
}

.review-section,
.contact-card-section,
.why-us-premium,
.immersive-showcase{
  overflow-x:hidden;
}

/* hero section */
.slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-radius: 10px;
}

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide.active {
  opacity: 1;
  
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.slide img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.slider-button {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px;
  font-size: 18px;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.slider-button:hover {
  background-color: rgba(255, 255, 255, 1);
}

@media (max-width: 768px) {
  .slider {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
    height: auto;
  }

  .slide img {
    width: 100vw;
    height: auto;
    border-radius: 0;
  }
}

@media (max-width: 768px) {
  .slider {
    height: 60vh;
  }

  .slide img {
    height: 100%;
    object-fit: cover;
  }
}

.slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.slider-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dots button.active {
  width: 28px;
  border-radius: 20px;
  background: #ffffff;
}

.info-highlight {
  text-align: left;
  display: inline-block;
}

/* Mobile polish */
@media (max-width: 768px) {
  .slider-dots {
    bottom: 12px;
  }
}

/* hero section ends */

/* photo section */
/* ================= GALLERY SECTION ================= */
.gallery-section{
  max-width:1400px;
  margin:80px auto;
  padding:0 24px;
}

/* Tabs */
.gallery-tabs{
  display:flex;
  gap:26px;
  margin-bottom:32px;
  border-bottom:1px solid var(--border);
}

.gallery-tabs button{
  background:none;
  border:none;
  font-size:14px;
  font-weight:500;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#666;
  padding:12px 0;
  cursor:pointer;
  position:relative;
}

.gallery-tabs button.active{
  color:var(--dark);
}

.gallery-tabs button.active::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background:var(--gold);
}

/* Grid */
/* ================= GOOGLE-PHOTOS STYLE COLLAGE ================= */
.gallery-grid.collage{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:repeat(3, 1fr);
  gap:16px;
  height:520px; /* controls overall collage height */
}

/* Big image */
.gallery-item.feature{
  grid-row:1 / span 3;
  grid-column:1;
}

/* Small images */
.gallery-item.small{
  grid-column:2;
}

/* Images */
.gallery-item{
  overflow:hidden;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}

/* Subtle interaction (no shadow) */
.gallery-item:hover img{
  transform:scale(1.04);
}

/* Responsive */
@media (max-width: 1024px){
  .gallery-grid.collage{
    height:420px;
  }
}

@media (max-width: 768px){
  .gallery-grid.collage{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    height:auto;
  }

  .gallery-item.feature{
    grid-row:auto;
  }

  .gallery-item.small{
    height:220px;
  }
   .gallery-tabs{
    overflow-x:auto;
    gap:20px;
  }
}
/* ================= VIEW MORE CTA ================= */
.view-more-wrap{
  max-width:1400px;
  margin:23px auto 40px;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:22px;
}

/* Left line */
.view-line{
  flex:1;
  height:1px;
  background:var(--border);
}

/* Button */
.view-more-btn{
  position:relative;
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--dark);
  padding:12px 26px;
  border:1px solid var(--dark);
  transition:all .3s ease;
}

/* Subtle hover */
.view-more-btn:hover{
  color:var(--gold);
  border-color:var(--gold);
}

/* Mobile polish */
@media(max-width:768px){
  .view-more-wrap{
    margin:50px auto 30px;
  }

  .view-more-btn{
    font-size:13px;
    padding:10px 22px;
  }
}

/* animation */
/* ================= PREMIUM SECTION DIVIDER ================= */
.section-divider{
  max-width:1400px;
  margin:120px auto;
  padding:0 24px;
}

.divider-line{
  display:block;
  width:100%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,155,94,.4) 20%,
    rgba(184,155,94,.8) 50%,
    rgba(184,155,94,.4) 80%,
    transparent 100%
  );
  transform:scaleX(0);
  transform-origin:left;
}

/* Animation state */
.reveal-divider.active .divider-line{
  animation:goldLineDraw 1.8s ease forwards;
}

/* Keyframes */
@keyframes goldLineDraw{
  from{
    transform:scaleX(0);
    opacity:0;
  }
  to{
    transform:scaleX(1);
    opacity:1;
  }
}

/* Mobile spacing */
@media(max-width:768px){
  .section-divider{
    margin:90px auto;
  }
}

/* why choose us sectionx */
/* ================= PREMIUM WHY US ================= */
.why-us-premium{
  max-width:1400px;
  margin:140px auto;
  padding:0 24px;
}

.why-us-container{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:100px;
  align-items:start;
}

/* Title */
.section-eyebrow{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:22px;
}

.why-us-title h2{
  font-size:44px;
  font-weight:500;
  line-height:1.2;
  color:#222;
}

/* List */
.why-us-list{
  display:flex;
  flex-direction:column;
  gap:56px;
}

/* Item */
.why-item{
  display:flex;
  gap:32px;
  align-items:flex-start;
  position:relative;
}

.why-item::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:100%;
  background:var(--border);
}

.why-index{
  font-size:13px;
  letter-spacing:2px;
  color:var(--gold);
  min-width:32px;
  padding-left:12px;
}

.why-item h4{
  font-size:18px;
  font-weight:500;
  margin-bottom:10px;
}

.why-item p{
  font-size:15px;
  line-height:1.8;
  color:#555;
  max-width:460px;
}

/* ================= SOFT REVEAL ================= */
.reveal-soft{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1s ease, transform 1s ease;
}

.reveal-soft.active{
  opacity:1;
  transform:translateY(0);
}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .why-us-container{
    grid-template-columns:1fr;
    gap:80px;
  }

  .why-us-title h2{
    font-size:38px;
  }
}

@media(max-width:640px){
  .why-us-premium{
    margin:100px auto;
  }

  .why-us-title h2{
    font-size:30px;
  }

  .why-us-list{
    gap:42px;
  }

  .why-item{
    gap:22px;
  }

  .why-item p{
    font-size:14px;
  }
}

/* customer review section */
/* ================= CUSTOMER REVIEWS ================= */
.review-section{
  background:linear-gradient(180deg,#2a2218,#1f1912);
  color:#f5f1ea;
  padding:120px 0;
}

.review-container{
  max-width:1400px;
  margin:auto;
  padding:0 24px;
}

/* Header */
.review-header{
  max-width:520px;
  margin-bottom:60px;
}

.review-header .section-eyebrow{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:16px;
}

.review-header h2{
  font-size:40px;
  font-weight:500;
  line-height:1.2;
}

/* Slider */
.review-slider{
  display:flex;
  align-items:center;
  gap:30px;
}

/* Buttons */
.review-btn{
  background:none;
  border:1px solid rgba(184,155,94,.6);
  color:var(--gold);
  width:48px;
  height:48px;
  border-radius:50%;
  cursor:pointer;
  transition:all .3s ease;
}

.review-btn:hover{
  background:rgba(184,155,94,.1);
}

/* Track */
.review-track-wrapper{
  overflow:hidden;
  flex:1;
}

.review-track{
  display:flex;
  gap:40px;
  transition:transform .6s ease;
}

/* Card */
.review-card{
  min-width:420px;
}

.review-card p{
  font-size:18px;
  line-height:1.9;
  margin-bottom:28px;
  color:#f0ebe2;
}

.review-card h4{
  font-size:15px;
  font-weight:500;
  letter-spacing:.5px;
}

.review-card span{
  font-size:13px;
  color:rgba(255,255,255,.6);
}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .review-card{
    min-width:360px;
  }
}

@media(max-width:768px){
  .review-section{
    padding:90px 0;
  }

  .review-header h2{
    font-size:32px;
  }

  .review-slider{
    gap:18px;
  }

  .review-card{
    min-width:280px;
  }

  .review-card p{
    font-size:16px;
  }
}

/* location section */

/* ================= LOCATION PREMIUM ================= */
.location-premium{
  background:#fbfaf8;
  padding:90px 0;
}

/* Title */
.location-title{
  max-width:1400px;
  margin:0 auto 70px;
  padding:0 24px;
}

.location-title .section-eyebrow{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:16px;
}

.location-title h2{
  font-size:42px;
  font-weight:500;
  color:#222;
}

/* Layout */
.location-layout{
  max-width:1400px;
  margin:auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:90px;
  align-items:start;
}

/* Map */
.location-map{
  height:520px;
  overflow:hidden;
}

.location-map iframe{
  width:100%;
  height:100%;
  border:0;
}

/* Info */
.location-info{
  display:flex;
  flex-direction:column;
}

.location-intro{
  font-size:15.5px;
  line-height:1.9;
  color:#555;
  margin-bottom:48px;
  max-width:420px;
}

/* Blocks */
.info-block{
  position:relative;
  padding-left:20px;
  margin-bottom:36px;
}

.info-block::before{
  content:'';
  position:absolute;
  left:0;
  top:4px;
  width:2px;
  height:100%;
  background:var(--gold);
}

.info-block span{
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#777;
  display:block;
  margin-bottom:6px;
}

.info-block p{
  font-size:15px;
  line-height:1.7;
  color:#333;
}

/* CTA */
.location-btn{
  margin-top:30px;
  display:inline-block;
  text-decoration:none;
  font-size:13.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--dark);
  border-bottom:1px solid var(--dark);
  padding-bottom:6px;
  transition:.3s ease;
}

.location-btn:hover{
  color:var(--gold);
  border-color:var(--gold);
}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .location-layout{
    grid-template-columns:1fr;
    gap:70px;
  }

  .location-map{
    height:420px;
  }

  .location-title h2{
    font-size:36px;
  }
}

@media(max-width:640px){
  .location-premium{
    padding:100px 0;
  }

  .location-title h2{
    font-size:30px;
  }

  .location-intro{
    font-size:14.5px;
  }
}


/* location section ends */

/* ================= CONTACT CARD ================= */
.contact-card-section{
  background:#fbfaf8;
  padding:30px 24px;
  display:flex;
  justify-content:center;
   position: relative;   /* REQUIRED */
  overflow: hidden;     /* keeps waves inside */
}

/* Card */
.contact-card{
  width:100%;
  max-width:1200px;
  background:#fff;
  padding:90px 80px;
  border:1px solid rgba(184,155,94,.35);
  position:relative;
}

/* Gold frame accent */
.contact-card::before,
.contact-card::after{
  content:'';
  position:absolute;
  width:120px;
  height:120px;
  border:1px solid rgba(184,155,94,.5);
}

.contact-card::before{
  top:20px;
  left:20px;
  border-right:none;
  border-bottom:none;
}

.contact-card::after{
  bottom:20px;
  right:20px;
  border-left:none;
  border-top:none;
}

/* Header */
.contact-card-header{
  text-align:center;
  margin-bottom:80px;
}

.contact-card-header h2{
  font-size:42px;
  font-weight:500;
  color:#222;
  margin-bottom:20px;
}

/* Gold ornament */
.gold-ornament{
  display:flex;
  justify-content:center;
  gap:10px;
}

.gold-ornament span{
  height:2px;
  background:var(--gold);
}

.gold-ornament span:nth-child(1){ width:40px; }
.gold-ornament span:nth-child(2){ width:14px; opacity:.6; }
.gold-ornament span:nth-child(3){ width:6px; opacity:.3; }

/* Body layout */
.contact-card-body{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  align-items:start;
}

/* Brand */
/* Brand logo wrapper */
.contact-brand .brand-logo{
  margin-bottom:26px;
  display:flex;
  align-items:center;
}

/* Logo image */
.contact-brand .brand-logo img{
  max-width:180px;
  width:100%;
  height:auto;
  display:block;
}


.contact-brand p{
  font-size:15.5px;
  line-height:1.9;
  color:#555;
  max-width:380px;
}

/* Form */
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px 36px;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label{
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#777;
  margin-bottom:8px;
}

.form-group input,
.form-group textarea{
  border:none;
  border-bottom:1px solid var(--border);
  padding:12px 4px;
  font-size:15px;
  outline:none;
  transition:border-color .3s ease;
}

.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--gold);
}

.form-group.full{
  grid-column:span 2;
}

.form-group textarea{
  resize:none;
}

/* Submit */
.contact-submit{
  grid-column:span 2;
  margin-top:26px;
  background:none;
  border:1px solid var(--dark);
  padding:14px 34px;
  font-size:13.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
  color:var(--dark);
  width:fit-content;
  transition:.3s ease;
}

.contact-submit:hover{
  color:var(--gold);
  border-color:var(--gold);
}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .contact-card{
    padding:70px 50px;
  }

  .contact-card-body{
    grid-template-columns:1fr;
    gap:70px;
  }

  .contact-form{
    grid-template-columns:1fr;
  }

  .form-group.full,
  .contact-submit{
    grid-column:span 1;
  }
}

@media(max-width:640px){
  .contact-card{
    padding:60px 30px;
  }

  .contact-card-header h2{
    font-size:32px;
  }
}

/* ================= CONTACT LOGO MOBILE FIX ================= */

@media (max-width: 768px){

  .contact-brand{
    text-align:center;
  }

  .contact-brand .brand-logo{
    justify-content:center;
    margin-bottom:20px;
  }

  .contact-brand .brand-logo img{
    max-width:140px;
  }

  .contact-brand p{
    margin:0 auto;
  }
}

@media (max-width: 480px){

  .contact-brand .brand-logo img{
    max-width:120px;
  }
}
.contact-brand .brand-logo img{
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.08));
}
/* showcase */
/* ================= IMMERSIVE SHOWCASE ================= */

.immersive-showcase{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  color:#fff;
}

/* Background image */
.showcase-bg{
  position:absolute;
  inset:0;
  
  transform:scale(1.05);
  z-index:1;
}
/* Background wrapper */
.showcase-bg{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}

/* Background image */
.showcase-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
}


/* Dark overlay */
.immersive-showcase::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:2;
}

/* Content */
.showcase-content{
  position:relative;
  z-index:3;
  max-width:1400px;
  height:100%;
  margin:auto;
  padding:0 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Eyebrow */
.showcase-eyebrow{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}

/* Heading */
.showcase-content h2{
  font-size:56px;
  font-weight:500;
  line-height:1.15;
  max-width:620px;
}

/* Gold animated wave */
.gold-wave{
  width:140px;
  height:2px;
  background:linear-gradient(
    90deg,
    var(--gold),
    rgba(184,155,94,.3),
    var(--gold)
  );
  margin:40px 0 70px;
  animation:wave 3s infinite linear;
}

@keyframes wave{
  0%{ background-position:0 0; }
  100%{ background-position:200px 0; }
}

/* Media grid */
.showcase-media{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:50px;
  align-items:end;
}

/* Media blocks */
.media{
  position:relative;
  overflow:hidden;
}

/* Video */
.video-block video{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s ease;
}

.video-block:hover video{
  transform:scale(1.08);
}

/* Image */
.image-block img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s ease;
}

.image-block:hover img{
  transform:scale(1.08);
}

/* Labels */
.media-label{
  position:absolute;
  bottom:20px;
  left:20px;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#fff;
  opacity:.85;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1024px){
  .showcase-content h2{
    font-size:44px;
  }

  .showcase-media{
    grid-template-columns:1fr;
    gap:40px;
  }
}

@media(max-width:640px){
  .immersive-showcase{
    height:auto;
    padding:120px 0;
  }

  .showcase-content h2{
    font-size:34px;
  }
}