*{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;
}
/* HEADINGS */
h2{
  margin-bottom:30px;
  color:#665d5e;
}

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

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

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

.line{
  width:50px;
  height:3px;
  background:#a88b6a;
  margin:10px 0 40px;
}
.sidebar{
  border-right:1px solid #e5e5e5;
}
/* 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;
}

/* CONTACT */
.ct-section{
  background:#A38B6A;
  padding:35px 6%;
  color:#fff;
}

/* TITLE (VERY IMPORTANT FIX) */
.ct-title{
  font-size:48px;
  font-weight:300;
  color:rgba(240, 240, 240, 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;}
  .grid{grid-template-columns:1fr;}
}

/* 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;
}

/* HOVER */
.cta-btn:hover{
  background:#d0a864;
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
.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);
}
.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);
}
/* SECTION */
.services-section{
  padding:60px 6%;
  background:#f8f8f8;
}
/* FILTER BUTTONS - MODERN MINIMAL */
.filter-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:25px 40px;
  margin:40px 0;
}
.filter-buttons{
  max-width:900px;
}
/* BUTTON */
.filter-buttons button{
  background:none;
  border:none;
  font-size:13px;
  letter-spacing:1px;
  color:#b5b5b5;
  cursor:pointer;
  position:relative;
  padding:5px 0;
  transition:0.3s ease;
}

/* HOVER */
.filter-buttons button:hover{
  color:#555;
}

/* ACTIVE */
.filter-buttons button.active{
  color:#222;
  font-weight:500;
}

/* SUBTLE UNDERLINE (DIFFERENT STYLE) */
.filter-buttons button::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:1px;
  background:#c9a96e;
  transition:0.3s ease;
}

/* ACTIVE LINE */
.filter-buttons button.active::after{
  width:100%;
}


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

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

.service-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  transition:0.4s;
}

.service-item:hover img{
  transform:scale(1.05);
}

/* HIDE */
.hide{
  display:none;
}
@media(max-width:900px){
  .services-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:600px){
  .services-grid{
    grid-template-columns:1fr;
  }
}
.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;
}