body {
      font-family: 'Segoe UI', sans-serif;
      scroll-behavior: smooth;
      background-color: #fff;
      color: #333;
    }

    :root {
      --primary-orange: #ff7a00;
      --dark-grey: #2f2f2f;
      --light-grey: #f5f5f5;
    }

    /* --- Navbar --- */
    .navbar {
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(6px);
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }
    .navbar-brand img {
      height: 48px;
      transition: transform 0.3s ease;
    }
    .navbar-brand img:hover {
      transform: scale(1.05);
    }
    .nav-link {
      color: #333 !important;
      font-weight: 500;
      position: relative;
      padding-bottom: 4px;
    }
    .nav-link::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--primary-orange);
      transition: width 0.3s;
    }
    .nav-link:hover::after,
    .nav-link.active::after {
      width: 100%;
    }

    .bg-orange { background-color: var(--primary-orange);}

.text-orange {
  color: #ff7a00 !important;
}

.border-orange {
border: 2px solid #ff7a00 !important;
}

    .btn-orange {
      background-color: var(--primary-orange);
      color: white;
      border-radius: 30px;
      padding: 10px 25px;
      transition: 0.3s;
      font-weight: 500;
    }
    .btn-orange:hover {
      background-color: #e36c00;
      color: #fff;
    }
    
    .btn-orangex {
      background-color: var(--primary-orange) !important;
      color: #fff !important;
      border: none !important;
      border-radius: 0; /* optional: for sharp edges */
      font-weight: 500;
      padding: 8px 20px;
      transition: all 0.3s ease;
    }
    
    .btn-orangex:hover,
    .btn-orangex:focus {
      background-color: #e36c00 !important;
      color: #fff !important;
    }
    

    /* --- About --- */
    .about {
      padding: 80px 0;
      background-color: var(--light-grey);
    }
    .about h2 {
      font-weight: 700;
      color: var(--dark-grey);
    }
    .about img {
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    /* --- Services --- */
    .services {
      background-color: #fff;
      padding: 80px 0;
    }
    .service-card {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s ease;
      border1: 1px solid var(--primary-orange);
      border: 1px solid #dddddd;
      border-top: 4px solid var(--primary-orange);
    }
    .service-card:hover {
      transform: translateY(-5px);
    }

    /* --- Contact --- */
    .contact {
      padding: 80px 0;
      background-color: #fff5ef;
    }
    .form-control:focus {
      border-color: var(--primary-orange);
      box-shadow: 0 0 0 0.2rem rgba(255,122,0,0.25);
    }

    /* --- Footer --- */
    footer {
      background: var(--dark-grey);
      color: #ccc;
      text-align: center;
      padding: 25px 0;
    }
    footer a {
      color: var(--primary-orange);
      text-decoration: none;
    }
    footer a:hover {
      text-decoration: underline;
    }

/* CTA Button Styling */
.cta-btn {
  transition: all 0.3s ease;
  background-color: #ff7a00;
  color: white !important;
  box-shadow: 0 0 10px rgba(255, 122, 0, 0.3);
}
.cta-btn:hover {
  background-color: #e36c00;
  box-shadow: 0 0 15px rgba(255, 122, 0, 0.5);
  transform: translateY(-2px);
}

/* Ensure navbar stays slightly elevated */
.navbar {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Adjust padding for small screens */
@media (max-width: 992px) {
  .cta-btn {
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
}

    :root {
      --primary-orange: #ff7a00;
      --dark-grey: #2f2f2f;
      --light-grey: #f7f7f7;
    }
    body { background-color: var(--light-grey); font-family: 'Segoe UI', sans-serif; }
    .navbar { background-color: rgba(255,255,255,0.95); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .navbar-brand img { height: 45px; }
    .btn-orange { background-color: var(--primary-orange); color: #fff; border-radius: 30px; transition: 0.3s; }
    .bg-orange { background-color: var(--primary-orange);}
    .btn-orange:hover { background-color: #e36c00; }
    .form-floating > label { color: #666; }
    .form-floating > .form-control:focus ~ label { color: var(--primary-orange); }
    .estimator-card { background-color: #fff; border-radius: 15px; padding: 40px; box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
    .result-box { font-weight: 600; font-size: 1.25rem; margin-top: 20px; color: var(--dark-grey); }