*{margin:0;padding:0;box-sizing:border-box;font-family:'Quicksand',sans-serif;}

body{color:#555;background:#fff;}
body{
  overflow-x:hidden;
} .sidebar{
  overflow-y:auto;
}
/* SIDEBAR */
.sidebar{
  width:240px;
  height:100vh;
  position:sticky;
  top:0;
  background:#F5F2ED;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:30px 20px;
  z-index:1000;
}
/* MAIN LAYOUT */
.layout{
  display:flex;
}
/* HIDE HEADER IN DESKTOP */
.mobile-header{
  display:none;
}

/* MOBILE */
@media(max-width:768px){

  /* SHOW HEADER */
  .mobile-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    background:#fff;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
  }

  .mh-left{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .mh-left img{
    width:30px;
  }

  .mh-left span{
    font-size:16px;
    color:#5a5152;
    text-transform:lowercase;
  }

  .menu-btn{
    font-size:24px;
    cursor:pointer;
  }

   /* PUSH CONTENT DOWN */
  body{
    padding-top:70px;
  }

}
@media(max-width:768px){
  .sidebar{
    position:fixed;
    top:0;
    left:-260px;
    width:260px;
    height:100%;
    background:#fff;
    transition:0.3s ease;
    z-index:1002;
  }

  .sidebar.active{
    left:0;
  }
}
/* MAIN CONTENT */
.main{
  flex:1;
  overflow:hidden;
}
/* LOGO */
.logo{
  text-align:center;
}

.logo h1{
  font-size:60px;
  margin:0;
  color:#6b635a;
}

.logo h2{
  margin:5px 0;
  font-size:18px;
  color:#6b635a;
}

.logo p{
  font-size:12px;
  color:#8c837a;
}

/* MENU */
.menu{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:17px;
  text-align:center;
}

.menu a{
  text-decoration:none;
  color:#5a5152;
  letter-spacing:3px;
  font-size:14px;
  position:relative;
}

.menu a.active{
  color:#a88b6a;
}

.menu a.active::after{
  content:"";
  width:40px;
  height:2px;
  background:#a88b6a;
  display:block;
  margin:6px auto 0;
}

/* FOOTER */
.footer{
  margin-top:auto;
  text-align:center;
  font-size:12px;
  color:#777;
}

.socials{
  margin:10px 0;
  display:flex;
  justify-content:center;
  gap:15px;
}

.socials a{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:0.5px solid #8c7a64;
  color:#b7b7b7;
  font-size:14px;
  transition:0.3s;
  text-decoration:none;
}

.socials a:hover{
  background:#8c7a64;
  color:#fff;
  transform:translateY(-3px);
}

.brand{
  color:#a88b6a;
}


.sidebar{
  z-index:1002;
}
/* HERO */
.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
}

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

.slide{
  position:absolute;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1s ease;
}
.slide{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.slide.active{
  opacity:1;
}

/* OVERLAY (optional premium look) */
.hero::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.2);
  top:0;
  left:0;
}

/* TEXT BOX */
.hero-box{
  position:absolute;
  bottom:0px;
  left:0px;   /* 👉 change to left:60px if needed */
  width:420px;  /* fixed width */
  height:200px; /* fixed height (IMPORTANT) */
  background:#A38B6A;
  padding:30px;
  color:#fff;
  z-index:2;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-box h2{
  font-size:32px;
  font-weight:300;
  margin-bottom:10px;
}

.hero-box p{
  font-size:15px;
  line-height:1.6;
}

/* SECTION */
section{
  padding:80px 6%;
}

/* HEADINGS */
h2{
  margin-bottom:30px;
  color:#665d5e;
}

/* SECTION */
section{
  padding:80px 6%;
}

.sub{
  letter-spacing:3px;
  color:#999;
  font-size:12px;
}

h2{
  letter-spacing:5px;
  color:#5a5152;
}

.line{
  width:50px;
  height:3px;
  background:#A38B6A;
  margin:10px 0 40px;
}
.sidebar{
  border-right:1px solid #e5e5e5;
}
/* SECTION */
.about-section{
  padding:100px 6%;
  background:#fff;
}

/* HEADER */
.about-header .sub{
  letter-spacing:4px;
  font-size:12px;
  color:#999;
}

.about-header h2{
  font-size:36px;
  letter-spacing:6px;
  margin:10px 0;
  color:#222;
}

.about-header .line{
  width:60px;
  height:3px;
  background:#A38B6A;
  margin-top:10px;
}

/* LAYOUT */
.about-container{
  display:flex;
  align-items:center;
  gap:60px;
  margin-top:50px;
}

/* IMAGE */
.about-image{
  flex:1;
  overflow:hidden;
  border-radius:8px;
}

.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.5s;
}

.about-image:hover img{
  transform:scale(1.05);
}
.about-image img{
  height:500px;
}
/* TEXT */
.about-content{
  flex:1;
}
.about-content{
  max-width:500px;
}
.about-content p{
  color:#555;
  line-height:1.8;
  margin-bottom:20px;
  font-size:15px;
}

.about-content span{
  color:#c9a96e;
  font-weight:600;
}

.about-content h4{
  margin-top:20px;
  font-size:18px;
  color:#222;
}

/* RESPONSIVE */
@media(max-width:900px){
  .about-container{
    flex-direction:column;
  }
}

/* SECTION */
.ps-section{
  padding:80px 6%;
}

/* TITLE */
.ps-sub{
  letter-spacing:3px;
  color:#999;
  font-size:12px;
}

.ps-title{
  letter-spacing:5px;
  color:#5a5152;
}

.ps-line{
  width:50px;
  height:3px;
  background:#A38B6A;
  margin:10px 0 50px;
}

/* GRID */
.ps-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}

/* CARD */
.ps-card{
  position:relative;
}

/* IMAGE */
.ps-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

/* LABEL (STICKING EFFECT 🔥) */
.ps-card span{
  position:absolute;
  bottom:-18px;
  left:0;
  background:#eee;
  padding:12px 25px;
  letter-spacing:3px;
  font-size:13px;
  color:#5a5152;
}
@media(max-width:768px){

  .ps-section{
    padding:40px 20px;
  }

  .ps-grid{
    grid-template-columns:1fr;
    gap:60px;
  }

  .ps-card img{
    height:200px;
  }

}
/* OVERLAY (hidden by default) */
.overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index:1001;
}

.overlay.active{
  opacity:1;
  visibility:visible;
}
/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* SERVICES */
.services div{
  padding:15px;
  border-bottom:1px solid #ddd;
}

/* PROJECTS */
.project{
  height:200px;
  background-size:cover;
}

.stats{
  position:relative;
  background:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab') center/cover;
  padding:100px 8%;
  color:#fff;
}

/* DARK OVERLAY */
.stats-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
}

/* CONTENT */
.stats-container{
  position:relative;
  display:flex;
  justify-content:space-between;
  text-align:center;
  z-index:2;
}

/* BOX */
.stat-box{
  flex:1;
}

/* ICON */
.stat-box .icon{
  width:80px;
  height:80px;
  background:#fff;
  color:#8c7a64;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  margin:0 auto 20px;
}

/* NUMBER */
.stat-box h3{
  font-size:40px;
  margin-bottom:10px;
}

/* TEXT */
.stat-box p{
  letter-spacing:3px;
  font-size:13px;
}
@media(max-width:768px){

  .stats{
    padding:70px 5%;
  }

  .stats-container{
    flex-direction:column;
    gap:40px;
  }

  /* EACH BOX */
  .stat-box{
    flex:none;
  }

  /* ICON */
  .stat-box .icon{
    width:60px;
    height:60px;
    font-size:22px;
    margin-bottom:15px;
  }

  /* NUMBER */
  .stat-box h3{
    font-size:28px;
    margin-bottom:8px;
  }

  /* TEXT */
  .stat-box p{
    font-size:12px;
    letter-spacing:2px;
  }

}
/* CONTACT */
/* CTA SECTION */
.cta-section{
  padding:60px 10%;
  background:
    linear-gradient(rgba(20,15,10,0.75), rgba(20,15,10,0.75)),
    url('https://www.floor-sanding.com/wp-content/uploads/2023/08/brown-colour-schemes.jpg');
  background-size:cover;
  background-position:center;
  color:#fff;
  text-align:center;
}
.cta-container{
  background:rgba(23, 22, 22, 0.3);
  padding:40px;
  border-radius:12px;
  backdrop-filter:blur(5px);
}
/* TEXT */
.cta-text h2{
  font-size:40px;
  letter-spacing:2px;
  margin-bottom:20px;
  color:#fff;
  font-weight:500;
}

.cta-text p{
  font-size:16px;
  color:#e6e0d6; /* warm off-white */
  line-height:1.8;
  margin-bottom:35px;
}

/* BUTTON */
.cta-btn{
  display:inline-block;
  padding:15px 40px;
  background:#c9a96e;
  color:#1a1a1a; /* darker text = premium */
  text-decoration:none;
  border-radius:40px;
  font-size:14px;
  letter-spacing:1px;
  transition:all 0.3s ease;
  font-weight:500;
}
.floating-wa{
  position:fixed;
  bottom:25px;
  right:25px;
  width:60px;
  height:60px;
  background:#f8f8f8;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 25px rgba(0,0,0,0.25);
  z-index:999;
}

/* Image inside */
.floating-wa img{
  width:28px;
  height:28px;
}
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

.floating-wa{
  animation: float 2s ease-in-out infinite;
}
/* Hover */
.floating-wa:hover{
  transform:scale(1.1);
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}

/* HOVER */
.cta-btn:hover{
  background:#d0a864;
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
/* SECTION */
.ct-section{
  background:#A38B6A;
  padding:40px 6%;
  color:#fff;
}

/* TITLE (VERY IMPORTANT FIX) */
.ct-title{
  font-size:48px;
  font-weight:300;
  color:rgba(243, 243, 243, 0.4); /* 🔥 faded grey like reference */
  margin-bottom:60px;
}

/* CONTAINER */
.ct-container{
  display:flex;
  justify-content:space-between;
  gap:80px;
}

/* BOX */
.ct-box{
  flex:1;
}

/* HEADINGS */
.ct-box h4{
  font-size:16px;
  letter-spacing:2px;
  font-weight:600;
  margin-bottom:20px;
  color:#fff;
}

/* TEXT */
.ct-box p{
  font-size:16px;
  line-height:1.8;
  color:rgba(255,255,255,0.9);
  margin-bottom:10px;
}

/* CONTACT ARROWS */
.ct-box p strong{
  font-weight:600;
}

/* OPTIONAL: spacing for arrows */
.ct-box p::before{
  margin-right:6px;
}
@media(max-width:768px){

  .ct-container{
    flex-direction:column;
    gap:30px;
  }

  .ct-title{
    font-size:28px;
  }

}

/* ANIMATION */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:0.8s;
}

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

@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

/* MOBILE */
@media(max-width:768px){
  .main{margin-left:0;}
  .about{flex-direction:column;}
  .grid{grid-template-columns:1fr;}
}
/* WHY SECTION */
.why-section{
  background:#fff;
  padding:100px 6%;
}

/* HEADER */
.why-header{
  margin-bottom:60px;
}

.why-header .sub{
  letter-spacing:4px;
  font-size:12px;
  color:#aaa;
}

.why-header h2{
  font-size:36px;
  margin:10px 0;
  color:#5a5152;
}

.why-header .line{
  width:60px;
  height:3px;
  background:#A38B6A;
}

/* GRID */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
}

/* CARD */
.why-card{
  max-width:350px;
}

.why-card .icon{
  font-size:30px;
  color:#8c7c65;
  margin-bottom:15px;
}

.why-card h3{
  font-size:14px;
  letter-spacing:2px;
  color:#5a5152;
  margin-bottom:15px;
}

.why-card p{
  font-size:15px;
  line-height:1.8;
  color:#777;
}

/* MOBILE */
@media(max-width:768px){
  .why-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
}
/* SECTION */
.expertise-section{
  background:#fff;
  padding:100px 6%;
}

/* HEADER */
.exp-header{
  margin-bottom:70px;
}

.exp-header .sub{
  font-size:12px;
  letter-spacing:4px;
  color:#aaa;
}

.exp-header h2{
  font-size:42px;
  color:#5a5152;
  margin:10px 0;
  line-height:1.3;
}

.exp-header .line{
  width:60px;
  height:3px;
  background:#A38B6A;
}

/* CONTAINER */
.exp-container{
  display:flex;
  gap:80px;
}

/* LEFT */
.exp-left{
  flex:1;
}

.exp-item{
  display:flex;
  gap:20px;
  margin-bottom:50px;
}

.exp-item .icon{
  font-size:40px;
}

.exp-item h3{
  font-size:14px;
  letter-spacing:2px;
  color:#5a5152;
  margin-bottom:10px;
}

.exp-item p{
  color:#777;
  line-height:1.8;
  font-size:15px;
}

/* RIGHT */
.exp-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:60px;
}

/* ROW */
.row{
  display:flex;
  gap:40px;
  align-items:flex-start;
}

/* SECOND ROW OFFSET */
.row.second{
  margin-top:0px; /* creates zigzag overlap */
}

/* IMAGE BOX */
.img-box{
  position:relative;
}

/* IMAGE */
.img-box img{
  width:200px;
  height:160px;
  object-fit:cover;
  display:block;
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
}

/* OFFSET EFFECT */
.down{
  margin-top:50px;
}

.up{
  margin-top:-50px;
}

/* LABEL */
.img-box span{
  position:absolute;
  bottom:-18px;
  left:0;
  background:#eee;
  padding:10px 18px;
  font-size:11px;
  letter-spacing:2px;
  color:#5a5152;
}

/* IMAGE COLOR MATCH */
.img-box img{
  filter:contrast(95%) brightness(95%) saturate(90%);
}
@media(max-width:768px){

  /* STACK EVERYTHING */
  .exp-container{
    flex-direction:column;
    gap:40px;
  }

  .exp-left,
  .exp-right{
    width:100%;
  }

  .row{
    flex-direction:column;
    gap:30px;
  }

  .row.second{
    margin-top:0;
  }

  /* REMOVE ZIGZAG COMPLETELY */
  .down,
  .up{
    margin:0 !important;
  }

  /* 🔥 MAKE ALL BOXES SAME SIZE */
  .img-box{
    width:100% !important;
  }

  /* 🔥 SAME HEIGHT FOR ALL IMAGES */
  .img-box img{
    width:100%;
    height:240px;        /* uniform height */
    object-fit:cover;    /* keeps image clean */
    border-radius:8px;
  }

.img-box{
  position:relative;
  overflow:hidden;
}

.img-box span{
  position:absolute;
  bottom:1%;          /* 👈 FIXED: stays at bottom */
  left:50%;
  transform:translateX(-50%);
  
  background:rgba(255,255,255,0.9);
  padding:8px 16px;
  font-size:12px;
  letter-spacing:1px;
  border-radius:3px;

  backdrop-filter:blur(6px); /* 🔥 premium glass effect */
}

}

/* SECTION */
.rw-section{
  padding:80px 6%;
}

/* HEADER */
.rw-sub{
  letter-spacing:3px;
  font-size:12px;
  color:#999;
}

.rw-title{
  letter-spacing:5px;
  color:#5a5152;
}

.rw-line{
  width:50px;
  height:3px;
  background:#a88b6a;
  margin:10px 0 50px;
}

/* GRID */
.rw-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr); /* 🔥 3 per row */
  gap:40px;
}

/* ITEM */
.rw-item{
  overflow:hidden;
}

/* IMAGE */
.rw-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:0.4s;
}

/* HOVER EFFECT 🔥 */
.rw-item:hover img{
  transform:scale(1.08);
}
@media(max-width:768px){

  .rw-grid{
    grid-template-columns:1fr; /* stack on mobile */
    gap:20px;
  }

  .rw-item img{
    height:200px;
  }

}/* SECTION */
.ts-pro{
  padding:100px 6%;
}

/* TITLE */
.ts-title{
  letter-spacing:5px;
  color:#5a5152;
}

.ts-line{
  width:50px;
  height:3px;
  background:#a88b6a;
  margin:10px 0 60px;
}

/* CONTAINER */
.ts-container{
  position:relative;
  display:flex;
  align-items:center;
  height:380px;
}

/* MAIN IMAGE */
.ts-main{
  width:300px;
  height:360px;
  object-fit:cover;
  border-radius:12px;
  position:relative;
  z-index:3;
  box-shadow:0 15px 40px rgba(0,0,0,0.2);
}

/* SIDE IMAGES */
.ts-side{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:180px;
  height:240px;
  object-fit:cover;
  opacity:0.2;
  filter:blur(2px);
  border-radius:10px;
  z-index:1;
}

/* LEFT IMAGE */
.ts-side.left{
  left:-140px; /* pushed left */
}

/* RIGHT IMAGE */
.ts-side.right{
  left:240px; /* slightly behind main image */
}

/* TEXT BOX */
.ts-box{
  margin-left:120px; /* spacing from image */
  width:420px;
  height:360px;
  background:#A38B6A;
  color:#fff;
  padding:50px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* QUOTE */
.quote{
  font-size:40px;
  opacity:0.5;
}

/* TEXT */
.ts-box p{
  line-height:1.8;
  font-size:15px;
  margin:20px 0;
  min-height:100px;
}

/* NAME */
.ts-box h4{
  opacity:0.8;
}
@media(max-width:768px){

  /* STACK LAYOUT */
  .ts-container{
    flex-direction:column;
    height:auto;
    gap:30px;
  }

  /* HIDE SIDE IMAGES */
  .ts-side{
    width:50%
  }

  /* MAIN IMAGE */
  .ts-main{
    width:100%;
    max-width:320px;
    height:300px;
    margin:0 auto 25px;
    object-fit:cover;
  }

  /* TEXT BOX */
  .ts-box{
    margin:0;
    width:100%;
    height:auto;
    padding:30px 20px;
    text-align:center;
    border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    z-index: 1001;
  }

  /* TEXT */
  .ts-box p{
    font-size:16px;
    line-height:1.9;
    min-height:auto;
  }

  /* QUOTE */
  .quote{
    text-align:center;
    font-size:30px;
    margin-bottom:10px;
  }

  /* TITLE CENTER */
  .ts-title{
    text-align:center;
  }

  .ts-line{
    margin:10px auto 40px;
  }

}
.close-btn{
  position:absolute;
  top:15px;
  right:15px;
  font-size:22px;
  cursor:pointer;
  display:none;
}

/* show only mobile */
@media(max-width:768px){
  .close-btn{
    display:block;
  }
  .menu-btn{
  cursor:pointer;
  font-size:22px;
}
}
.fade-left{
  opacity:0;
  transform:translateX(-60px);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-left.show{
  opacity:1;
  transform:translateX(0);
}
.fade-right{
  opacity:0;
  transform:translateX(60px);
  transition:all 0.8s ease;
}

.fade-right.show{
  opacity:1;
  transform:translateX(0);
}
.phone-link{
  color:inherit;              /* same as text */
  text-decoration:none;       /* no underline */
  font-weight:normal;
}

.phone-link:hover{
  color:#ffddae;              /* your gold theme */
}

/* iPhone specific override */
a[href^="tel"]{
  color:inherit;
  text-decoration:none;
}