/* -------------------- Reset & Base Styles 
-------------------- */ * {
  margin: 0; padding: 0; box-sizing: border-box;
}
body { font-family: 'Helvetica Neue', Arial, sans-serif; 
  line-height: 1.6; color: var(--medium-grey); 
  background-color: #fff;
}
/* -------------------- New Color Palette 
-------------------- */
:root {
  --primary-red: #840101; --primary-red-hover: #700000; 
  --main-grey: #999; --medium-grey: #666; --light-grey: 
  #ccc;
}
/* -------------------- Navigation -------------------- */ 
header {
  position: fixed; top: 0; width: 100%; background: #fff; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 1000;
}
nav { max-width: 1200px; margin: auto; padding: 20px; 
  display: flex; justify-content: space-between; 
  align-items: center;
}
nav .logo { font-size: 1.8em; font-weight: bold; color: 
  var(--primary-red);
}
nav ul { list-style: none; display: flex;
}
nav ul li { margin-left: 30px;
}
nav ul li a { text-decoration: none; color: 
  var(--main-grey); font-weight: 500; transition: color 
  0.3s;
}
nav ul li a:hover { color: var(--primary-red);
}
/* -------------------- Hero Section -------------------- 
*/ .hero {
  position: relative; height: 100vh; background: 
  url('https://i.ibb.co/b5NFPV1q/pexels-binyaminmellish-1396122.jpg') 
  no-repeat center center/cover; display: flex; 
  align-items: center; justify-content: center; text-align: 
  center; padding: 0 20px;
}
.hero-overlay { position: absolute; top: 0; left: 0; width: 
  100%; height: 100%; background: rgba(0, 0, 0, 0.5);
}
.hero-content { position: relative; color: #fff; max-width: 
  800px; z-index: 1;
}
.hero-content h1 { font-size: 3.5em; margin-bottom: 20px; 
  line-height: 1.2;
}
.hero-content p { font-size: 1.5em; margin-bottom: 30px;
}
.cta-buttons { display: flex; gap: 20px; flex-wrap: wrap; 
  justify-content: center;
}
.cta-button { padding: 15px 30px; font-size: 1.2em; 
  background-color: var(--primary-red); color: #fff; 
  border-radius: 50px; text-decoration: none; transition: 
  background 0.3s;
}
.cta-button:hover { background-color: 
  var(--primary-red-hover);
}
.cta-button.secondary { background-color: transparent; 
  border: 2px solid var(--primary-red);
}
.cta-button.secondary:hover { background-color: 
  var(--primary-red); color: #fff;
}
/* -------------------- Container -------------------- */ 
.container {
  max-width: 1200px; margin: 0 auto; padding: 20px;
}
/* -------------------- Reviews Carousel Section 
-------------------- */ .reviews-section {
  padding: 80px 20px; text-align: center; background-color: 
  var(--light-grey);
}
.reviews-section h2 { font-size: 2.5em; margin-bottom: 
  40px; color: var(--primary-red);
}
/* Carousel Styles */ .carousel { position: relative; 
  height: 180px; overflow: hidden;
}
.carousel-item { position: absolute; top: 0; left: 0; 
  right: 0; padding: 20px; opacity: 0;
}
.review-text { font-size: 1.2em; margin-bottom: 10px; 
  color: var(--medium-grey);
}
.review-author { font-size: 1em; color: var(--main-grey);
}
/* -------------------- Services Section 
-------------------- */ .services-section {
  background-color: #fff; padding: 80px 20px;
}
.services-section h2 { text-align: center; font-size: 
  2.5em; margin-bottom: 40px; color: var(--primary-red);
}
.services-grid { display: grid; grid-template-columns: 
  repeat(auto-fit, minmax(250px, 1fr)); gap: 40px;
}
.service-item { background: #fff; border-radius: 10px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 30px; 
  text-align: center; transition: transform 0.3s;
}
.service-item:hover { transform: translateY(-10px);
}
.service-item .icon { font-size: 2.5em; margin-bottom: 
  20px; color: var(--primary-red);
}
.service-item h3 { font-size: 1.5em; margin-bottom: 15px;
}
.service-item p { font-size: 1em; line-height: 1.4; color: 
  var(--medium-grey);
}
/* -------------------- Contact Section 
-------------------- */ .contact-section {
  background-color: #fff; padding: 80px 20px; text-align: 
  center;
}
.contact-section h2 { font-size: 2.5em; margin-bottom: 
  20px; color: var(--primary-red);
}
.contact-section p { font-size: 1.2em; margin-bottom: 30px; 
  color: var(--medium-grey);
}
.contact-btn { padding: 15px 30px; background-color: 
  var(--primary-red); color: #fff; border-radius: 50px; 
  font-size: 1.2em; text-decoration: none; transition: 
  background 0.3s;
}
.contact-btn:hover { background-color: 
  var(--primary-red-hover);
}
/* -------------------- Footer -------------------- */ 
footer {
  background-color: var(--main-grey); color: #fff; 
  text-align: center; padding: 20px;
}
footer p { font-size: 1em;
}
/* -------------------- Mobile Responsive 
-------------------- */ @media (max-width: 768px) {
  nav { padding: 10px 15px;
  }
  nav ul { flex-wrap: wrap; justify-content: center;
  }
  nav ul li { margin-left: 15px; margin-top: 5px;
  }
  .hero-content h1 { font-size: 2.5em;
  }
  .hero-content p { font-size: 1.2em;
  }
  .cta-button { font-size: 1em; padding: 10px 20px;
  }
  .reviews-section h2, .services-section h2, 
  .contact-section h2 {
    font-size: 2em;
  }
  .services-grid { grid-template-columns: 1fr;
  }
}