:root {
     --pastel-blue: #AEC6CF;
     --pastel-blue-light: #E0EBF0;
     --dusty-rose: #D8AFA0;
     --dusty-rose-light: #EADAD4;
     --off-white: #F8F8F8;
     --charcoal: #36454F;
     --white: #FFFFFF;
     --card-bg: #F4F7F9;
     --section-bg: #EAEFF2;
   }

   /* -- Base & Helpers -- */
   html {
     scroll-behavior: smooth;
   }

   body {
     font-family: 'Poppins', sans-serif;
     color: var(--charcoal);
   }

   /* -- Sections -- */
   section {
     padding: 80px 0;
   }

   .section-title {
     text-align: center;
     margin-bottom: 50px;
     position: relative;
   }

   .section-title h2 {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--charcoal);
     margin-bottom: 20px;
   }

   /* Brush stroke effect for section titles */
   .section-title h2::after {
     content: '';
     display: block;
     width: 100px;
     height: 5px;
     background-color: var(--dusty-rose);
     margin: 15px auto 0;
     border-radius: 5px;
     opacity: 0.7;
     background-image: url("data:image/svg+xml,%3Csvg width='100' height='5' viewBox='0 0 100 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.5C10 1 20 3 30 2.5C40 2 50 3.5 60 3C70 2.5 80 1.5 90 2C100 2.5 100 2.5 100 2.5' stroke='%23D8AFA0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: contain;
   }

   .section-title p {
     color: #6c757d;
   }

   .card,
   .contact-info,
   .contact form,
   .bg-white {
     background-color: var(--card-bg) !important;
   }

   .text-white {
     color: var(--white);
   }

   .navbar {
     background-color: var(--white);
     box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
   }

   .navbar-brand {
     font-weight: 700;
     color: var(--charcoal);
   }

   .navbar-phone {
     font-weight: 600;
     color: var(--charcoal);
     text-decoration: none;
     transition: color .3s ease;
     white-space: nowrap;
     /* no wrapping on tiny screens */
     font-size: 1rem;
   }

   .navbar-phone:hover {
     color: var(--dusty-rose);
   }

   .nav-link {
     font-weight: 600;
     color: var(--charcoal);
   }

   .navbar-nav .nav-link.active,
   .navbar-nav .nav-link:hover {
     color: var(--dusty-rose);
   }

   /* -- Buttons -- */
   .btn-cta {
     background-color: var(--dusty-rose);
     color: var(--white);
     border-radius: 50px;
     padding: 0.75rem 2rem;
     font-weight: 600;
     transition: all 0.3s ease;
     border: 2px solid var(--dusty-rose);
   }

  /* Make button smaller on mobile */
  @media (max-width: 576px) {
    .btn-cta {
      padding: 0.5rem 1.25rem;   /* smaller padding */
      font-size: 0.9rem;         /* slightly smaller text */
      border-radius: 40px;       /* slightly tighter corners */
    }
  }

   .btn-cta:hover {
     background-color: #c99c8b;
     color: var(--white);
     border-color: #c99c8b;
   }

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

   .btn-cta-outline:hover {
     background-color: var(--dusty-rose);
     color: var(--white);
   }

   /* -- Hero Section -- */
   #hero {
     padding: 100px 0;
     background-image: linear-gradient(rgba(224, 235, 240, 0.6), rgba(224, 235, 240, 0.6)), url('assets/bg.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
   }

   #hero h1 {
     font-weight: 700;
     color: var(--charcoal);
   }

   #hero .read-more-link {
     text-decoration: none;
     font-weight: 600;
   }

   /* -- Services Section -- */
   #services {
     background-color: var(--pastel-blue-light);
     background-image: url('assets/splash.png');
     background-size: 140px auto;
     background-repeat: no-repeat;
     background-position: top 20px right 20px; /* default for desktop */
   }

   /* Media query for mobile (e.g., max width 768px) */
   @media (max-width: 768px) {
     #services {
       background-position: bottom 20px right 20px; /* moved to bottom */
     }
   }

   .service-card {
     border: none;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     height: 100%;
     will-change: transform, box-shadow; /* Prevents layout jumps */
   }

   .service-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   }

   .service-card .card-body {
     text-align: center;
   }

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

   .service-card:hover .icon {
    color: var(--dusty-rose);
  }

   .stretched-link {
     color: var(--dusty-rose);
     text-decoration: none;
   }

   .stretched-link:hover {
     color: var(--charcoal);
     text-decoration: none;
   }

   .icon-link {
  text-decoration: none;
  color: inherit; /* keeps icon color same */
}

.icon-link:hover {
  color: var(--dusty-rose); /* optional: no color shift on hover */
}
   /* -- Pricing Section -- */
   #pricing {
     background-color: var(--section-bg);
     /* pastel backdrop */
     background-image: linear-gradient(rgba(224, 235, 240, 0.6), rgba(224, 235, 240, 0.6)), url('assets/bg-contact.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
   }

   .pricing-menu {
     background-color: var(--white);
     border: 2px solid var(--pastel-blue-light);
     border-radius: 15px;
     padding: 2rem;

   }

   .price-item {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
   }

   .price-item .service-name {
     font-weight: 600;
     margin-right: 1rem;
   }

   .price-item .dots {
     flex-grow: 1;
     border-bottom: 2px dotted var(--pastel-blue);
     margin: 0 1rem;
     position: relative;
     bottom: 4px;
   }

   .price-item .service-price {
     font-weight: 700;
     color: var(--dusty-rose);
     background-color: var(--pastel-blue-light);
     padding: 0.2rem 0.6rem;
     border-radius: 5px;
   }

   /* Pricing tabs (nav-pills) */
   #pricingTabs .nav-link {
     border-radius: 50px;
     /* rounded pill shape */
     padding: 0.5rem 1.25rem;
     margin: 0.25rem;
     /* gives space both horizontally & vertically */
     font-weight: 500;
     color: var(--charcoal);
     background-color: var(--pastel-blue-light);
     transition: all 0.3s ease;
   }

   #pricingTabs .nav-link:hover {
     background-color: var(--dusty-rose);
     color: var(--white);
   }

   #pricingTabs .nav-link.active {
     background-color: var(--dusty-rose);
     color: var(--white);
     box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
   }

   .shadow-text{text-shadow: 1px 1px #000;}


   /* Mobile fix for pricing */
   @media (max-width: 576px) {
     .price-item {
       justify-content: flex-start;
     }

     .price-item .dots {
       display: none;
     }

     .price-item .service-name {
       width: 100%;
       margin-bottom: 0.5rem;
     }
   }

   /* -- About Section -- */
   #about {
     background-color: var(--pastel-blue-light);
     background-image: url('assets/smudge.png');
     background-size: 440px auto;
     background-repeat: no-repeat;
     background-position: bottom 20px right 20px;
   }

   #about .about-img {
     border-radius: 15px;
   }

   /* Subtitle headings (keep your style, add underline accent) */
   .section-subtitle {
     margin-top: 3rem;
     margin-bottom: 1rem;
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--dusty-rose);
     text-align: center;
     position: relative;
     display: inline-block;
     padding-bottom: 1rem;
   }

   .section-subtitle::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background-color: var(--dusty-rose);
     border-radius: 2px;
   }

   /* Box styling for the checklist */
   .section-subtitle-box {
     background: #f8f9fa;
     /* light gray card background */
     border-radius: 12px;
     padding: 2rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   }

   /* Checklist style */
   .why-list li {
     font-size: 1rem;
     line-height: 1.6;
     color: var(--charcoal);
     margin-bottom: 0.75rem;
   }

   /* -- Contact Section -- */
   #contact {
     background-color: var(--section-bg);
     /* pastel backdrop */
   }

   .contact-info {
     word-break: break-word;
     overflow-wrap: anywhere;
     background-image: url('assets/contact_logo.png');
     background-size: 140px auto;
     background-repeat: no-repeat;
     background-position: top 20px right 20px;
   }

   /* Hide logo on mobile */
   @media (max-width: 768px) {
     .contact-info {
       background-image: none;
     }
   }

   .contact-info i {
     font-size: 1.5rem;
     color: var(--dusty-rose);
   }

   .social-links a {
     font-size: 1.5rem;
     margin: 0 10px;
     transition: color 0.3s ease;
   }

   .social-links a:hover {
     color: var(--dusty-rose);
   }

   .form-control {
     padding: 0.75rem 1.25rem;
   }

   .form-control:focus {
     box-shadow: 0 0 0 0.25rem rgba(216, 175, 160, 0.5);
     border-color: var(--dusty-rose);
   }

   /* -- Social Buttons -- */
   .social-links {
     display: flex;
     justify-content: center;
     gap: 12px;
   }

   .social-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--pastel-blue-light);
     color: var(--charcoal);
     font-size: 1.2rem;
     transition: all 0.3s ease;
   }

   .social-btn:hover {
     background: var(--dusty-rose);
     color: var(--white);
   }

   /* -- Footer -- */
   footer {
     background-color: var(--charcoal);
     color: var(--off-white);
     padding: 20px 0;
     background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/footer-bg.png');
     background-position: center;
     background-attachment: fixed;
   }

   footer .footer-brand {
     font-size: 1.25rem;
     /* slightly smaller */
     font-weight: 700;
   }

   footer a {
     color: var(--pastel-blue-light);
     text-decoration: none;
   }

   footer a:hover {
     color: var(--white);
   }

   /* -- Mobile FABs -- */
   .fab-container {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1030;
     display: flex;
     flex-direction: column;
     /* default: stack for larger screens */
     gap: 10px;
   }

   .fab {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
     padding: 0;
   }

   /* On mobile, place side by side */
   @media (max-width: 576px) {
     .fab-container {
       flex-direction: row;
       gap: 6px;
     }
   }

   #scrollTopBtn {
     display: none;
     background-color: var(--charcoal);
   }

   /* Default (desktop) */
   .logo-img {
     height: 70px;
     width: auto;
   }

   /* Mobile (Bootstrap breakpoint example: below 768px) */
   @media (max-width: 767.98px) {
     .logo-img {
       max-height: 50px;
     }
   }