/* New DeepClean global stylesheet generated from provided template */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Color palette updated to match the new blue theme from the provided template */
  --primary: #1e40af;
  --primary-light: #3b82f6;
  --primary-solid: #1e40af;
  --secondary: #64748b;
  --accent: #f0f9ff;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --dark: #1f2937;
  --text: #1f2937;
  --light: #f8fafc;
  --white: #ffffff;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  --border-radius: 12px;
}

body {
  font-family: 'Cairo', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text);
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Styles */
header {
  /* Use a simple sticky header similar to the provided template */
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--white);
  box-shadow: var(--shadow);
  z-index: 100;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  /* Use a solid primary color for the logo text instead of a gradient */
  color: var(--primary);
  /* Remove the default underline from anchor links and inherit color */
  text-decoration: none;
  border: none;
  cursor: pointer;

  /* Ensure the brand link has no bottom border or underline */
  border-bottom: none;
}

.nav-logo img {
  margin-left: 0.5rem;
  /* Stop the logo from spinning.  Remove the rotate animation so the logo stays fixed. */
  animation: none;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 0;

  display: inline-block;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;

  left: 0;
  right: 0;
  margin-inline: auto;
  bottom: -4px;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.nav-buttons {
  display: flex;
  gap: 1rem;
}

/*
 * Base button styles.  The original template uses subtle rounded
 * corners rather than fully pill‑shaped buttons.  Adjust the
 * border radius to use the global --border-radius variable for
 * consistency across the site and avoid overly circular buttons.
 */
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  /* Use a moderate border radius instead of a fully rounded pill */
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  /* Use gradient for primary buttons */
  background: var(--gradient);
  color: var(--white);
  box-shadow: var(--shadow);
  transform: translateY(0);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-outline {
  background: transparent;
  color: var(--primary-solid);
  border: 2px solid var(--primary-solid);
}

.btn-outline:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
}

/* Hero Section */
 .hero {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
      color: var(--white);
      padding: 4rem 0;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
      opacity: 0.3;
    }

    .hero-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .hero-text h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .hero-text p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }

    .hero-image {
      text-align: center;
    }

    .hero-image img {
      max-width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-lg);
    }

    .btn-secondary {
      background: var(--white);
      color: var(--primary);
      border: 2px solid var(--primary);
    }

    .btn-secondary:hover {
      background: var(--primary);
      color: var(--white);
    }
/* .hero {
 
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: var(--gradient);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='grain' width='100' height='100' patternUnits='userSpaceOnUse'><circle cx='50' cy='50' r='1' fill='rgba(255,255,255,0.1)'/></pattern></defs><rect width='100' height='100' fill='url(%23grain)'/></svg>");
  opacity: 0.1;
}

.hero .container {
  display: flex;
  align-items: center;
  gap: 4rem;
  position: relative;
  z-index: 2;
}

.hero-text {
  flex: 1;
  animation: slideInRight 1s ease-out;
}

.hero-text h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  
  background: linear-gradient(45deg, #fff, #f0f8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-text p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-image {
  flex: 1;
  animation: slideInLeft 1s ease-out;
}

.hero-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transform: rotate(-5deg);
  transition: transform 0.3s ease;
}

.hero-image img:hover {
  transform: rotate(0deg) scale(1.05);
} */

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Floating Elements */
.floating {
  position: absolute;
  animation: float 6s ease-in-out infinite;
}

.floating:nth-child(1) {
  top: 10%;
  animation-delay: 0s;
}

.floating:nth-child(2) {
  top: 60%;
  left: 5%;
  animation-delay: 2s;
}

.floating:nth-child(3) {
  bottom: 20%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Section Styles */
section {
  padding: 5rem 0;
  position: relative;
}

.section-heading {
  text-align: center;
  margin-bottom: 4rem;
}

.section-heading h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-heading p {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

/* About Section */
.about-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.mission, .vision, .values {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border-top: 4px solid transparent;
  background-clip: padding-box;
}

.mission {
  border-image: linear-gradient(45deg, #667eea, #764ba2) 1;
}

.vision {
  border-image: linear-gradient(45deg, #f093fb, #f5576c) 1;
}

.values {
  border-image: linear-gradient(45deg, #4ecdc4, #44a08d) 1;
}

.mission:hover, .vision:hover, .values:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}

.values ul {
  list-style: none;
  padding-}

.values li {
  margin-bottom: 1rem;
  position: relative;
}

.values li::before {
  content: '✨';
  position: absolute;
  top: 0;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 4rem;
}

.stat {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 15px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.stat:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.stat h3 {
  font-size: 3rem;
  font-weight: bold;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.service-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}

.service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-card:hover img {
  transform: scale(1.1);
}

.service-card-content {
  padding: 1.5rem;
}

.service-card-content h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.service-card-content a {
  color: var(--primary-solid);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.service-card-content a:hover {
  text-decoration: underline;
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.benefit {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 15px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.benefit:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature {
  text-align: center;
  padding: 2rem;
  transition: all 0.3s ease;
}

.feature:hover {
  transform: scale(1.05);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: inline-block;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* CTA Section */
.cta {
  background: var(--primary);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 3rem 2rem;
  border-radius: 20px;
  box-shadow: var(--shadow);
  max-width: 900px;
  margin: 2rem auto;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='20' cy='20' r='2' fill='rgba(255,255,255,0.1)'/><circle cx='80' cy='80' r='2' fill='rgba(255,255,255,0.1)'/></svg>");
  animation: moveBackground 20s linear infinite;
}

@keyframes moveBackground {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(-100px) translateY(-100px); }
}

.cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Contact Section */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

.contact-info {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.request-form {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary-solid);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkbox-grid label:hover {
  color: var(--primary-solid);
}

.checkbox-grid input[type="checkbox"] {
  margin-left: 0.5rem;
  transform: scale(1.2);
}

/* Footer */
footer {
  background: var(--dark);
  color: white;
  padding: 3rem 0 1rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-column h4 {
  margin-bottom: 1rem;
  color: var(--secondary);
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 0.5rem;
}

.footer-column ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-column ul li a:hover {
  color: var(--secondary);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #444;
  color: #ccc;
}

/* Animations */
.animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .hero .container {
    flex-direction: column;
    text-align: center;
  }
  .hero-text h1 {
    font-size: 2.5rem;
  }
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile navigation: display the navigation links when the .show class is added */
.nav-links.show {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  padding: 1rem 2rem;
  z-index: 9999;
}

/* Loading Animation */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.loading.hide {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid var(--primary-solid);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*------------------------------------------------------------------*/
/* Custom Components: Sub-Service Cards, Modal, Offers               */
/*
 * The following styles support the new features added to the
 * DeepClean website.  Sub-service cards provide a flexible grid
 * for displaying child services with imagery.  The booking modal
 * allows visitors to quickly place an order without leaving the
 * current page.  The offers section highlights current promotions
 * with attractive callouts.  These components use the existing
 * design tokens (shadows, border radii, colours) for a cohesive look.
 */

/* Sub-service grid and cards */
.sub-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.sub-service-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.sub-service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.sub-service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.sub-service-info {
  padding: 1rem;
  text-align: center;
  flex: 1;
}

.sub-service-info h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

/* Improve sub-service description styling */
.sub-service-info p {
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* New features grid and cards inspired by the provided template */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.feature-card {
  background: var(--accent);
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  transition: transform 0.3s ease;
}

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

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.feature-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

/* CTA section styling */
.cta-section {
  background: var(--gradient);
  color: var(--white);
  padding: 4rem 0;
  margin-top: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section .cta-content {
  position: relative;
  z-index: 2;
}

.cta-section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta-section p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/*
 * Sub‑services styling
 *
 * The following rules are inspired by the sample AC service page provided by the user.
 * Cards display an image with an overlay icon on hover, a title, description,
 * a list of features and a price tag with a call‑to‑action button. These
 * classes can be used across all service detail pages to present the
 * sub‑services consistently.
 */

.sub-services {
  margin-top: 4rem;
}

.sub-services-header {
  text-align: center;
  margin-bottom: 3rem;
}

.sub-services-header h2 {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.sub-services-header p {
  font-size: 1.1rem;
  color: var(--secondary);
  max-width: 600px;
  margin: 0 auto;
}

.sub-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.sub-service-card {
  background: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sub-service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.sub-service-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.sub-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.sub-service-card:hover .sub-service-image img {
  transform: scale(1.1);
}

.sub-service-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: rgba(30, 64, 175, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sub-service-card:hover .sub-service-overlay {
  opacity: 1;
}

.service-icon {
  font-size: 3rem;
  color: var(--white);
}

.sub-service-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.sub-service-content h3 {
  font-size: 1.3rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.sub-service-content p {
  color: var(--secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.service-features {
  list-style: none;
  margin-bottom: 1rem;
}

.service-features li {
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
  color: var(--dark);
  font-size: 0.9rem;
}

.service-features li::before {
  content: '✓';
  color: var(--success);
  font-weight: bold;
  margin-left: 0.5rem;
}

.service-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.price-tag {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--primary);
}

.book-btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Make sub-service cards layout horizontal on larger screens */
@media (min-width: 768px) {
  .sub-service-card {
    flex-direction: column;
    align-items: center;
  }
  .sub-service-card img {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
  }
  .sub-service-info {
    text-align: right;
    padding: 1rem;
  }
}

/* Booking modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: var(--shadow);
  width: 90%;
  max-width: 450px;
  position: relative;
}

.modal-content h2 {
  margin-bottom: 1rem;
  color: var(--primary-solid);
}

.modal-content label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text);
}

.modal-content input,
.modal-content select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.modal-content input:focus,
.modal-content select:focus {
  outline: none;
  border-color: var(--primary-solid);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.modal-content .close {
  position: absolute;
  top: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  transition: color 0.3s ease;
}

.modal-content .close:hover {
  color: var(--primary-solid);
}

/* Offers section */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Slider for offers section on the homepage */
.offers-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Increase the slider height to give offer images more vertical space. */
  height: 450px;
  margin-top: 2rem;
}

.offer-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.offer-slide.active {
  opacity: 1;
}

.offer-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 12px;
  text-align: center;
}

.offer-caption h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.offer-caption p {
  margin: 0;
  font-size: 1rem;
}

.offer-card {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.offer-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--primary-solid);
}

.offer-card p {
  font-size: 1rem;
  color: var(--text);
  opacity: 0.8;
}

/*
 * Typography tweaks
 *
 * The global reset at the top of this stylesheet removes all default
 * margins and padding from elements.  While this offers a clean slate
 * for layout, it also eliminates the natural spacing between
 * paragraphs.  On the service detail pages this resulted in the
 * paragraphs running together and appearing cramped.  To restore
 * readability across the site we reintroduce a bottom margin and
 * increased line-height on paragraphs within sections.  Specific
 * components like hero-text continue to define their own margins and
 * are unaffected.
 */
section p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* ---------------------------------------------------------------------
 * Custom Home Hero Section
 *
 * The home page hero uses a different layout than service pages.  It
 * introduces the company with a large headline, decorative underline,
 * callouts describing key capabilities and a full‑height image of a
 * cleaning professional.  The hero is split into two columns on
 * large screens and stacks vertically on small devices.
 */
 .hero-home {
  background: var(--light);
  padding: 4rem 0 5rem;
  position: relative;
  overflow: hidden;
 }

 .hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
 }

 .hero-left h1 {
  font-size: 2.6rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
 }

 .hero-left .hero-underline {
  width: 220px;
  height: 4px;
  background-image: linear-gradient(to right, var(--success) 0%, var(--primary-light) 50%, var(--primary) 100%);
  border-radius: 2px;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
 }

 .hero-left .hero-callouts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
 }

 .hero-left .hero-callouts.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
 }

/* Ensure the left side of the home hero stacks its elements vertically. This
   allows the callouts row to sit below the headline and underline, and
   positions the primary CTA button under the callouts rather than
   alongside them. */
.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Separate the callouts from the CTA button with a bottom margin */
.hero-left .hero-callouts.horizontal {
  margin-bottom: 1.5rem;
}

/* Provide top margin for the hero CTA button to clearly separate it
   from the callout row */
.hero-left a.btn {
  margin-top: 1rem;
}

/* A wrapper for the callouts and the CTA in the home hero.  We use
   flex-direction: column so that the callout row appears above the
   button on large screens.  On smaller screens the existing media
   queries collapse the layout naturally. */
.hero-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}

/* Ensure the callout row within the hero buttons stretches the full
   width of its container so that the subsequent CTA button appears
   on its own line below the callouts. */
.hero-buttons .hero-callouts.horizontal {
  width: 100%;
}
}

 .hero-left .callout {
  display: flex;
  align-items: center;
  background: var(--white);
  color: var(--dark);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
 }

 .hero-left .callout-icon {
  font-size: 1.3rem;
  color: var(--primary);
  margin-left: 0.5rem;
 }

 .hero-right img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
 }

 @media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-left {
    order: 2;
    /* Center align the text and callouts on small screens */
    align-items: center;
    text-align: center;
  }
  .hero-right {
    order: 1;
  }
  .hero-left .hero-callouts.horizontal {
    justify-content: center;
  }
  .hero-left .callout {
    margin: 0.25rem;
  }

  /* Reduce the hero image height on mobile for better fit */
  .hero-right img {
    height: 300px;
  }

  /* Add horizontal padding to the navigation on mobile so it isn't flush to the screen edges */
  .nav {
    padding-left: 1rem;
    padding-}
 }

/*
 * Sub‑service grid layout
 *
 * Present two cards per row on larger screens to give each card
 * sufficient space for its image and content.  On narrow screens the
 * grid gracefully collapses to a single column.  We explicitly set
 * the column count inside a media query rather than relying on
 * minmax() alone, which may still produce three columns depending on
 * container width.  These rules override earlier definitions.
 */
@media (min-width: 768px) {
  .sub-services-grid {
    /* Display three cards per row on larger screens instead of two. */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Always allow sub-service cards to stretch and fill their grid cell */
.sub-service-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Make sure the image fills the full width of its card.  We also
   remove any intrinsic max-width constraints introduced by previous
   definitions by explicitly setting width to 100% and height to a
   fixed value for a consistent aspect ratio. */
.sub-service-image img,
.sub-service-card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover;
  display: block;
}

/* Branches section styles */
#branches {
  /* Use a subtle background and center align the content */
  background-color: var(--accent);
  padding: 4rem 0;
}

#branches .section-heading {
  text-align: center;
  margin-bottom: 2rem;
}

/* Style for the map image in the branches section */
.branches-map {
  display: block;
  margin: 0 auto;
  width: 80%;
  max-width: 800px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  height: auto;
  /* Ensure any image added later maintains aspect ratio */
  object-fit: cover;
}

/* Responsive adjustments for service page hero sections */
@media (max-width: 768px) {
  /* Stack hero text and image vertically on smaller screens */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-text {
    text-align: center;
  }
  .hero-image {
    margin-top: 1.5rem;
  }
  .hero-image img {
    height: 250px;
  }
}

/* ===========================
   New Sections: Reviews, Process, FAQ
   (Appended without modifying existing styles)
   =========================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.review-card {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.review-header .avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
}

.review-stars {
  letter-spacing: 2px;
  font-size: 0.95rem;
  color: #f59e0b;
}

.review-text {
  color: #444;
  line-height: 1.8;
}

/* Process (How We Work) */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.process-step {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 4px solid var(--primary);
}

.process-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.step-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* FAQ */
.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  text-align: right;
  background: transparent;
  border: none;
  padding: 1rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.05rem;
  color: var(--text);
}

.faq-q:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30,64,175,0.15);
}

.faq-toggle {
  font-size: 1.25rem;
  margin-}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}

.faq-a {
  padding: 0 1.25rem 1rem;
  color: #555;
  line-height: 1.9;
}


/* ===== Brand text near logo ===== */
.nav .nav-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 800; font-size: 1rem; }
.brand-tag { font-size: .75rem; opacity: .85; }

/* ===== New hero aligned with reference design ===== */
.hero-home { padding: clamp(2.5rem, 6vw, 5rem) 0; background: var(--light, #f8fafc); }
.hero-home .hero-wrap {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-home .hero-wrap { grid-template-columns: 1fr; }
}
.hero-home h1 {
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  margin: 0 0 .5rem;
}
.hero-home .hero-sub { color: #475569; font-size: 1.05rem; margin-bottom: 1rem; }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.btn.btn-outline { border: 1.5px solid var(--primary); background: transparent; color: var(--primary); }
.btn.btn-outline:hover { background: var(--primary); color: #fff; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: .75rem; }
.stat { background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow); padding: .9rem; text-align: center; }
.stat .num { font-size: 1.25rem; font-weight: 800; }
.stat .label { font-size: .85rem; color: #475569; }
.nowrap { white-space: nowrap; }

/* ===== Floating WhatsApp ===== */
.whatsapp-float {
  position: fixed;
  bottom: 18px;
  left: 18px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  z-index: 1000;
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }


/* ======= Refined Hero (hero-pro) ======= */
.hero-home{background: linear-gradient(135deg, #f7fbff 0%, #ffffff 50%, #f3f6ff 100%); padding: clamp(2.5rem,6vw,5rem) 0;}
.hero-pro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.25rem,3vw,2.75rem);align-items:center}
@media(max-width:992px){.hero-pro{grid-template-columns:1fr} .hero-pro__visual{order:-1}}
.badge{display:inline-block;background:rgba(30,64,175,.08);color:#1e40af;border:1px solid rgba(30,64,175,.15);padding:.35rem .6rem;border-radius:999px;font-size:.8rem;margin-bottom:.6rem}
.hero-pro h1{font-size:clamp(1.9rem,4.8vw,3.2rem);margin:.25rem 0 .6rem;line-height:1.15}
.text-accent{color:var(--primary)}
.lead{color:#475569;font-size:1.05rem;max-width:48ch;margin-bottom:1rem}
.hero-pro .features{display:flex;gap:.6rem 1rem;flex-wrap:wrap;margin:0 0 1.1rem;padding:0;list-style:none}
.hero-pro .features li{color: #1e40af;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:.45rem .8rem;box-shadow:var(--shadow)}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.btn.btn-outline{border:1.5px solid var(--primary);background:transparent;color:var(--primary)}
.btn.btn-outline:hover{background:var(--primary);color:#fff}
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:.75rem;max-width:520px}
.trust-item{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);padding:.8rem .9rem;text-align:center}
.trust-item strong{display:block;font-size:1.3rem}
.trust-item span{font-size:.85rem;color:#64748b}
.hero-pro__visual{position:relative}
.hero-blob{position:absolute;inset:10% 5% 5% 10%;background:radial-gradient(40% 40% at 60% 40%, rgba(30,64,175,.12), transparent 60%), radial-gradient(30% 30% at 30% 70%, rgba(59,130,246,.12), transparent 60%);filter:blur(30px);border-radius:36px}
.hero-image{position:relative;display:block;width:100%;max-width:560px;margin-inline:auto;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.12)}

/* ======= WhatsApp Floating Button (real icon) ======= */
.whatsapp-float{position:fixed;bottom:18px;left: 18px;width:56px;height:56px;display:grid;place-items:center;background:#25D366;color:#fff;border-radius:50%;box-shadow:0 8px 20px rgba(0,0,0,.15);z-index:1000;transition:transform .2s ease, box-shadow .2s ease}
.whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2)}


/* ===== About Section Refresh ===== */
#about {
  background: var(--accent);
}
#about .section-heading {
  text-align: center;
  margin-bottom: 1.25rem;
}
#about .section-heading h2 {
  margin-bottom: .35rem;
}
#about .about-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}
#about .mission, #about .vision, #about .values {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem;
}
#about .values ul {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
#about .values li {
  position: relative;
  padding-right: 1.4rem;
}
#about .values li::before {
  content: "✓";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--primary);
  font-weight: 800;
}
#about .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .9rem;
  margin-top: 1.1rem;
}
#about .stats .stat {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  text-align: center;
  padding: .9rem .75rem;
}
#about .stats .stat h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1.4rem;
}
#about .stats .stat p {
  margin: .25rem 0 0;
  color: #475569;
  font-size: .92rem;
}

/* ===== Solutions (Entrepreneurs) Page ===== */
.hero-subpage{background:linear-gradient(135deg,#f7fbff,#fff);padding:clamp(2.2rem,6vw,4.8rem) 0}
.hero-sub-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.1rem,3vw,2.2rem);align-items:center}
@media(max-width:992px){.hero-sub-wrap{grid-template-columns:1fr} .hero-sub-visual{order:-1}}
.hero-sub-content h1{font-size:clamp(1.8rem,4.4vw,3rem);margin:.25rem 0 .5rem}
.hero-sub-content .lead{color:#475569;max-width:54ch;margin-bottom:1rem}
#solutions-sectors .sectors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.sector-card{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden}
.sector-card img{width:100%;height:160px;object-fit:cover}
.sector-card h3{margin:.7rem .9rem .2rem;color:var(--primary)}
.sector-card p{margin:0 .9rem 1rem;color:#475569}
#solutions-offer .offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.offer-item{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);padding:1rem;text-align:center}
.offer-item .offer-ic{font-size:1.6rem;margin-bottom:.4rem}
.cta-business{text-align:center}