body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background: #d1c5c5;

 }

 header {
    background: #111;
    color: white;
    text-align: center;
    padding: 20px;
 }

 .hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('209e0cd1-cc0c-4b9c-b0a9-66ad3e8291a2.jpg');
    color: white;
    text-align: center;
    padding: 100px 20px;

 }

 .btn {
   background: gold;
   padding: 12px 25px;
   text-decoration: none;
   color: black;
   font-weight: bold;
   border-radius: 5px;
 }

 .services {
    padding: 60px 20px;
    text-align: center;
 }

 .service-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
 }

 footer {
    background: black;
    color: white;
    text-align: center;
    padding: 10px;
 }

 .quote {
   background: #111;
   color: white;
   padding: 30px;
   text-align: center;
 }

 .quote input, .quote textarea {
   width: 90%;
   max-width: 400px;
   margin: 10px;
   padding: 10px;
   border: none;
   border-radius: 5px;
 }

 .quote button {
   background: #ffcc00;
   border: none;
   padding: 10px 20px;
   cursor: pointer;
 }

 .whatsapp {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: green;
   color: white;
   padding: 15px;
   border-radius: 50px;
   text-decoration: none;
 }

 .card {
   background: rgb(246, 246, 247);
   width: 250px;
   padding: 20px;
   border-radius: 12px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   transition: 0.3;
 }

 .card:hover {
   transform: translateY(-10px);
 }

 .card h3 {
   margin-bottom: 10px;
 }

 html {
   scroll-behavior: smooth;
 }

 .section {
   min-height: 100vh;
   padding: 60px 20px;
 }

 .gallery-grid {
   display: block;
   gap: 20px;
   justify-content: center;
   border-radius: 10px;
   transition: 0.3s;
 }

 .gallery img {
   width: 500px;
   margin: auto;
   justify-content: center;
   border-radius: 10px;
   cursor: pointer;
  }

  .gallery img:hover {
   transform: scale(1.05);
  }

  .before-after {
   display: flex;
   gap: 20px;
   justify-content: center;
  }

  .before-after img {
   width: 200px;
   border-radius: 10px;
  }

  .hidden {
   opacity: 0;
   transform: translateY(50px);
   transition: 0.6s;
  }

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

  .card:nth-child(1) {transition-delay: 0.1s; }
  .card:nth-child(2) {transition-delay: 0.2s; }
  .card:nth-child(3) {transition-delay: 0.3s; }
  .card:nth-child(4) {transition-delay: 0.4s; }
  .card:nth-child(5) {transition-delay: 0.5s; }
  .card:nth-child(6) {transition-delay: 0.6s; }
 

 #modal {
   display: none;
   position: fixed;
   z-index: 999;
   padding-top: 50px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   text-align: center;
 }

 #modalImg {
   margin-top: 5%;
   max-width: 90%;
 }

 #closeBtn {
   position: absolute;
   top: 20px;
   right: 40px;
   font-size: 40px;
   color: white;
   cursor: pointer;
 }

 .rating-badge {
   background: rgb(70, 68, 62);
   color: #000;
   padding: 10px 15px;
   display: inline-block;
   border-radius: 20px;
   font-weight: bold;
 }