/* Favicon and Social Share meta tags are added in the HTML head */

/* --- Custom Slider Thumb using Font Awesome Icon (WebKit) --- */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: transparent; /* transparent so pseudo-element shows */
    border: none;
    position: relative;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb::before {
    content: "\f1b0"; /* Unicode for Font Awesome paw icon */
    font-family: "Font Awesome 6 Free"; /* This should match your kit */
    font-weight: 900; /* Solid style */
    font-size: 24px;
    color: #ff6600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Calculator Email Button Styles */
  #calcEmailButton {
    background: #ff6600;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    margin-top: 20px;
  }
  #calcEmailButton:hover {
    background: #e65c00;
    transform: scale(1.03);
  }
  #calcEmailButton:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.5);
  }
  
  /* Testimonial Logo */
  .testimonial-logo {
    display: block;
    margin: 0 auto 20px;
    max-width: 200px;
  }
  
  /* (All other styles remain as before) */
  


/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: #f4f4f4;
    color: #333;
  }
  .container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
  }
  
  /* NAVIGATION */
  nav.navbar {
    background: #3698e9;
    color: #fff;
    padding: 10px 0;
    position: relative;
    z-index: 1001;
  }
  nav.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 1.5em;
    font-weight: bold;
  }
  .hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
  }
  .hamburger span {
    height: 3px;
    width: 25px;
    background: #fff;
    margin: 4px 0;
    transition: 0.3s;
  }
  .nav-links {
    list-style: none;
    display: flex;
  }
  .nav-links li {
    margin-left: 20px;
  }
  .nav-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
  }
  .nav-links a:hover {
    color: #ddd;
  }
  .nav-links .cta {
    background: #ff6600;
    padding: 5px 10px;
    border-radius: 5px;
  }
  /* Hide the close button on desktop */
  .nav-links .close-menu {
    display: none;
  }
  
  /* HERO SECTION */
  .hero {
    /* Background is set inline in the HTML */
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative;
  }
  .hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .hero .container {
    position: relative;
    z-index: 1;
    padding: 20px;
    border-radius: 10px;
  }
  .hero h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
  }
  .hero p {
    font-size: 1.2em;
    margin-bottom: 20px;
  }
  .hero .btn {
    background: #ff6600;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    font-size: 1em;
  }
  
  /* SERVICES SECTION */
  .services {
    padding: 50px 0;
    background: #fff;
  }
  .services h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2em;
  }
  .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  .card {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .card h3 {
    margin-bottom: 10px;
    font-size: 1.4em;
  }
  
  /* PRICING SECTION */
  .pricing {
    padding: 50px 0;
    background: #f9f9f9;
  }
  .pricing h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5em;
    color: #333;
  }
  .pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  .pricing-cards .card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .pricing-cards .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  }
  .pricing-cards .card h3 {
    margin-bottom: 15px;
    font-size: 1.8em;
    color: #ff6600;
  }
  .pricing-cards .card p {
    margin: 10px 0;
    font-size: 1.1em;
    color: #555;
  }
  .pricing-cards .card .rate,
  .pricing-cards .card .fee {
    font-weight: bold;
  }
  .pricing-cards .card .desc {
    margin-top: 15px;
    font-style: italic;
    color: #777;
  }
  
  /* CALCULATOR SECTION */
  .calculator {
    padding: 50px 0;
    background: #4bb7e9;
  }
  .calculator h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    color: #fff;
  }
  .calculator-card {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 400px;
    margin: 0 auto;
  }
  .form-group {
    margin-bottom: 20px;
  }
  .form-group label {
    display: block;
    margin-bottom: 10px;
  }
  input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    background: #ddd;
    height: 4px;
    border-radius: 5px;
    outline: none;
  }
  /* Custom Slider Thumb (WebKit) */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M226.5%2092.9c14.3%2042.9-.3%2086.2-32.6%2096.8s-70.1-15.6-84.4-58.5s.3-86.2%2032.6-96.8s70.1%2015.6%2084.4%2058.5zM100.4%20198.6c18.9%2032.4%2014.3%2070.1-10.2%2084.1s-59.7-.9-78.5-33.3S-2.7%20179.3%2021.8%20165.3s59.7%20.9%2078.5%2033.3zM69.2%20401.2C121.6%20259.9%20214.7%20224%20256%20224s134.4%2035.9%20186.8%20177.2c3.6%209.7%205.2%2020.1%205.2%2030.5l0%201.6c0%2025.8-20.9%2046.7-46.7%2046.7c-11.5%200-22.9-1.4-34-4.2l-88-22c-15.3-3.8-31.3-3.8-46.6%200l-88%2022c-11.1%202.8-22.5%204.2-34%204.2C84.9%20480%2064%20459.1%2064%20433.3l0-1.6c0-10.4%201.6-20.8%205.2-30.5zM421.8%20282.7c-24.5-14-29.1-51.7-10.2-84.1s54-47.3%2078.5-33.3s29.1%2051.7%2010.2%2084.1s-54%2047.3-78.5%2033.3zM310.1%20189.7c-32.3-10.6-46.9-53.9-32.6-96.8s52.1-69.1%2084.4-58.5s46.9%2053.9%2032.6%2096.8s-52.1%2069.1-84.4%2058.5z%22/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
    margin-top: -13px;
  }

  /* Calculator Email Button Styles */
#calcEmailButton {
    background: #ff6600;       /* Use your primary CTA color */
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    margin-top: 20px;           /* Optional: ensure proper spacing above the button */
  }
  
  #calcEmailButton:hover {
    background: #e65c00;       /* A slightly darker shade on hover */
    transform: scale(1.03);     /* Optional: a subtle scale effect on hover */
  }
  
  #calcEmailButton:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.5);
  }
  
  /* Custom Slider Thumb (Firefox) */
  input[type="range"]::-moz-range-thumb {
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M226.5%2092.9c14.3%2042.9-.3%2086.2-32.6%2096.8s-70.1-15.6-84.4-58.5s.3-86.2%2032.6-96.8s70.1%2015.6%2084.4%2058.5zM100.4%20198.6c18.9%2032.4%2014.3%2070.1-10.2%2084.1s-59.7-.9-78.5-33.3S-2.7%20179.3%2021.8%20165.3s59.7%20.9%2078.5%2033.3zM69.2%20401.2C121.6%20259.9%20214.7%20224%20256%20224s134.4%2035.9%20186.8%20177.2c3.6%209.7%205.2%2020.1%205.2%2030.5l0%201.6c0%2025.8-20.9%2046.7-46.7%2046.7c-11.5%200-22.9-1.4-34-4.2l-88-22c-15.3-3.8-31.3-3.8-46.6%200l-88%2022c-11.1%202.8-22.5%204.2-34%204.2C84.9%20480%2064%20459.1%2064%20433.3l0-1.6c0-10.4%201.6-20.8%205.2-30.5zM421.8%20282.7c-24.5-14-29.1-51.7-10.2-84.1s54-47.3%2078.5-33.3s29.1%2051.7%2010.2%2084.1s-54%2047.3-78.5%2033.3zM310.1%20189.7c-32.3-10.6-46.9-53.9-32.6-96.8s52.1-69.1%2084.4-58.5s46.9%2053.9%2032.6%2096.8s-52.1%2069.1-84.4%2058.5z%22/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
  }
  .calculator .result {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px;
  }
  
  /* TESTIMONIALS SECTION */
  .testimonial-logo {
    display: block;
    margin: 0 auto 20px;  /* Centers the image and adds 20px margin below */
    max-width: 200px;     /* Adjust this value to control the image size */
  }
  
  .testimonials {
    padding: 50px 0;
    background: #fff;
  }
  .testimonials h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
  }
  .testimonial-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  .testimonial-card {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
  }
  .testimonial-card p {
    font-style: italic;
    margin-bottom: 15px;
  }
  .testimonial-card h4 {
    font-weight: normal;
    color: #555;
  }
  
  /* CONTACT SECTION */
  .contact {
    padding: 50px 0;
    background: #4bb7e9;
  }
  .contact h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    color: #fff;
  }
  .contact-card {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 500px;
    margin: 0 auto;
  }
  .contact-card .form-group {
    margin-bottom: 20px;
  }
  .contact-card label {
    display: block;
    margin-bottom: 10px;
  }
  .contact-card input,
  .contact-card textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1em;
  }
  .contact-card button.btn {
    background: #ff6600;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
  }
  
/* FAQ Section Styles */
.faq {
    padding: 50px 0;
    background: #fff;
  }
  .faq h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em;
    color: #333;
  }
  .accordion {
    max-width: 800px;
    margin: 0 auto;
  }
  .accordion-item {
    background: #f9f9f9;
    border-radius: 10px;
    margin: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
  }
  .accordion-header {
    background: #3698e9;
    color: #fff;
    padding: 15px 20px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: 1.2em;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  .accordion-header:hover {
    background: #2e7ac7;
  }
  .accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
  }
  .accordion-content p {
    padding: 15px 0;
    margin: 0;
  }
  .accordion-item.active .accordion-content {
    max-height: 200px; /* adjust as needed */
  }
  

  /* FOOTER */
  .footer {
    background: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
  }
  
  /* MOBILE STYLES */
  @media (max-width: 768px) {
    .hamburger {
      display: flex;
    }
    .nav-links {
      position: fixed;
      background: #333;
      height: 100%;
      width: 250px;
      top: 0;
      right: -250px;
      flex-direction: column;
      padding-top: 60px;
      transition: right 0.3s ease-in-out;
    }
    .nav-links.active {
      right: 0;
    }
    .nav-links li {
      margin: 20px 0;
      text-align: center;
    }
    /* Show the close button on mobile only */
    .nav-links .close-menu {
      display: block;
      position: absolute;
      top: 10px;
      right: 20px;
    }
    .nav-links .close-menu a {
      font-size: 1.5em;
      color: #fff;
      text-decoration: none;
    }
  }