:root { --primary:#b76e79; --soft:#faf6f7; }
body { font-family:'Poppins', sans-serif; margin:0; }
* { box-sizing: border-box; margin: 0; padding: 0; }

.top-bar {
display:flex; justify-content:space-between;
padding:12px 20px; border-bottom:1px solid #eee;
align-items:center;
}

.nav a {
margin:0 10px;
text-decoration:none;
color:#333;
font-size:0.9rem;
}

.hero {
background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url("images/banner.jpeg") center/cover;
color:#fff; text-align:center; padding:110px 20px;
}


    section {
      padding: 60px 20px;
      max-width: 1100px;
      margin: auto;
    }

    .center { text-align: center; }

    /* HERO */
    .hero {
/*      background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9") center/cover no-repeat;
*/ 
      background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("images/banner.jpeg") center/cover no-repeat;
 
      color: #fff;
      padding: 110px 20px;
      text-align: center;
    }

    .hero h1 {
      font-size: 3rem;
      margin-bottom: 10px;
    }

    .hero p {
      font-size: 1.1rem;
      opacity: 0.95;
    }

   .btn {
      display: inline-block;
      margin-top: 25px;
      padding: 12px 28px;
      border-radius: 30px;
      background: var(--primary);
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      box-shadow: 0 6px 18px rgba(183,110,121,0.35);
    }

   ul {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: #555;
}

ul li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 2px;
  color: #b76e79;
  font-size: 0.9rem;
}

    section h2 {
  letter-spacing: 0.5px;
}

.grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}

.card {
background:var(--soft);
padding:25px;
border-radius:12px;
}

/*.btn {
background:var(--primary);
color:#fff;
padding:12px 28px;
border-radius:30px;
text-decoration:none;
display:inline-block;
margin-top:20px;
}
*/
.gallery {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:12px;
margin-top:30px;
}

.gallery img {
width:100%;
height:220px;
object-fit:cover;
border-radius:12px;
}

footer {
text-align:center;
padding:25px;
background:#faf6f7;
}















    /* SERVICES */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 40px;
    }

    .card {
      background: var(--soft);
      padding: 25px;
      border-radius: 14px;
    }

    .price {
      margin-top: 8px;
      font-weight: 600;
    }

    /* GALLERY */
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      margin-top: 35px;
    }

    .gallery img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 12px;
    }

    /* BRANDS */
    .brands {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      margin-top: 30px;
    }

    .brand {
      padding: 10px 18px;
      border: 1px solid #ddd;
      border-radius: 20px;
    }

    /* CONTACT */
    .contact {
      background: var(--soft);
      border-radius: 20px;
      padding: 40px 20px;
    }

    footer {
      text-align: center;
      padding: 25px;
      font-size: 0.9rem;
      color: #777;
    }

    @media (max-width: 600px) {
      .hero h1 { font-size: 2.2rem; }
      section { padding: 45px 18px; }
    }

    /* Mobile polish */
@media (max-width: 600px) {
  .brand-name {
    display: none; /* icon only on mobile */
  }
}

    @media (max-width: 600px) {
  .hero {
    padding: 90px 20px;
  }
}

    
    .testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.testimonial-card {
  background: #faf6f7;
  padding: 30px 25px;
  border-radius: 18px;
  position: relative;
  text-align: left;
}

.testimonial-card p {
  font-style: italic;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
}

.testimonial-card .quote {
  font-size: 3rem;
  color: #b76e79;
  position: absolute;
  top: 10px;
  left: 15px;
  opacity: 0.25;
}

.client-name {
  margin-top: 15px;
  font-weight: 600;
  color: #2c2c2c;
  font-size: 0.9rem;
}

.top-bar {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 10px 15px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.top-bar a {
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #2c2c2c;
  text-decoration: none;
}

.top-bar a i {
  font-size: 1rem;
  color: #b76e79;
}

.top-bar a:hover {
  color: #b76e79;
}

    .top-bar {
  justify-content: space-between;
  padding: 10px 20px;
}

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

.logo {
  width: 45px;
  height: 45px;
}

.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c2c2c;
}

.top-right {
  display: flex;
  gap: 20px;
}

    .contact p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  font-weight: 500;
}

.contact i {
  color: #b76e79;
  font-size: 1rem;
}

.contact a {
  color: #2c2c2c;
  text-decoration: none;
}

.contact a:hover {
  color: #b76e79;
}








.nav-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 12px;
  background: #faf6f7;
  border-bottom: 1px solid #eee;
}

.nav-bar a {
  text-decoration: none;
  color: #2c2c2c;
  font-weight: 500;
}

.nav-bar a:hover {
  color: #b76e79;
}