/*
Theme Name: Astra RTS
Theme URI: https://ropetech.co.ke
Template: astra
Author: Brainstorm Force
Author URI: https://ropetech.co.ke
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.6.1783944387
Updated: 2026-07-13 12:06:27

*/

/* ==========================================================================
   Custom Header Styles (Astra Child Theme)
   ========================================================================== */

.custom-site-header {
    background-color: #CBB394;
    position: relative;
    z-index: 9899;
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    padding: 0;
    width: 100% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adds subtle scroll separation */
}

.custom-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0px;
    background-color: #CBB394; 
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Brand Logo & Title --- */
.custom-logo-area a img {
    max-height: 100px;
    width: auto;
    display: block;
}

.custom-site-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.custom-site-title:hover {
    color: #0073aa;
}

/* --- Desktop Menu Styling --- */
.custom-navigation {
    display: inline;
    float: right;
}

.custom-menu, 
.custom-menu-fallback {
    list-style: none;
    margin: 0;
    padding: 5px;
    display: flex;
    gap: 30px;
}

.custom-menu li,
.custom-menu-fallback li {
    position: relative;
}
.menu-item {
    border: 1px solid #DEC756;
    border-radius: 5px;
    padding:2px;
}

.custom-menu li a,
.custom-menu-fallback li a {
    color: #1E293B;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.3s ease;
    display: block;
}

.custom-menu li a:hover,
.custom-menu-fallback li a:hover,
.custom-menu li.current-menu-item > a {
    color: #0073aa;
}

/* --- Dropdown Sub-menus (Desktop) --- */
.custom-menu li ul {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-radius: 4px;
    z-index: 999;
}

.custom-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-menu li ul li a {
    padding: 10px 20px;
    font-size: 15px;
}

.custom-menu li ul li a:hover {
    background-color: #f8f9fa;
    color: #0073aa;
}

/* --- Button / CTA --- */
.custom-header-cta {
    display: block;
}

.custom-cta-button {
    background-color: #DEC756;
    color: #005177 !important;
    padding: 10px 22px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
}

.custom-cta-button:hover {
    background-color: #B57B10;
    transform: translateY(-1px);
}

.custom-cta-button:active {
    transform: translateY(0);
}

/* --- Mobile Toggle (Hamburger Button) --- */
.custom-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.hamburger-bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333333;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Toggle Animation */
.custom-menu-toggle.is-active .hamburger-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.custom-menu-toggle.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.custom-menu-toggle.is-active .hamburger-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* --- Mobile Menu Drawer --- */
.custom-mobile-navigation-wrapper {
    display: none;
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.custom-mobile-navigation-wrapper.is-open {
    display: block; /* Overrides hidden display initialization */
    max-height: 600px; 
    overflow-y: auto;
}

.custom-mobile-navigation {
    padding: 20px;
}

.custom-mobile-menu {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}

.custom-mobile-menu li {
    margin-bottom: 15px;
}

.custom-mobile-menu li a {
    color: #4a4a4a;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    display: block;
}

.custom-mobile-menu li a:hover {
    color: #0073aa;
}

/* Mobile Submenus */
.custom-mobile-menu li ul {
    list-style: none;
    padding-left: 15px;
    margin-top: 10px;
}

.custom-mobile-menu li ul li {
    margin-bottom: 10px;
}

.custom-mobile-menu li ul li a {
    font-size: 16px;
    color: #777777;
}

.custom-mobile-cta .custom-cta-button {
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   Responsive Adaptations (Small Media Devices Breakpoint)
   ========================================================================== */
@media (max-width: 767px) {
    .custom-header-container {
        padding: 10px 15px; /* Adds safe-padding for edge-to-edge layouts */
    }

    .custom-logo-area a img {
        max-height: 50px; /* Constrains logo height on small screens */
    }

    .custom-site-title {
        font-size: 20px; /* Shrinks typography size slightly */
    }

    /* Hides structural desktop elements */
    .custom-navigation,
    .custom-header-cta {
        display: none !important;
    }

    /* Reveals and activates layout flex alignment for the hamburger element */
    .custom-menu-toggle {
        display: flex;
    }
}



/* ==========================================================================
   Nia Stays Style
   ========================================================================== */

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: #FEFBF5;
      color: #1E2A38;
      line-height: 1.5;
      scroll-behavior: smooth;
    }

    h1, h2, h3, h4, .logo, .nav-links a, .btn, .hero h1, .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .section-title {
      font-size: 2.5rem;
      margin-bottom: 2rem;
      position: relative;
      display: inline-block;
    }
    .section-title:after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 70px;
      height: 3px;
      background: #C7A25B;
    }

    /* Luxury color palette */
    :root {
      --gold: #C7A25B;
      --gold-light: #E4CDA0;
      --deep-navy: #1E2A38;
      --charcoal: #2C3E44;
      --cream: #FEFBF5;
      --white: #FFFFFF;
      --shadow: 0 20px 35px -12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.02);
      --shadow-hover: 0 25px 40px -12px rgba(0,0,0,0.15);
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* BUTTONS */
    .btn {
      display: inline-block;
      padding: 12px 28px;
      border-radius: 40px;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
      text-decoration: none;
      transition: 0.25s ease;
      cursor: pointer;
      border: none;
      background: none;
      font-size: 0.95rem;
    }
    .btn-primary {
      background: var(--gold);
      color: #1E2A38;
      box-shadow: 0 2px 8px rgba(199,162,91,0.2);
    }
    .btn-primary:hover {
      background: #b58b3e;
      transform: translateY(-2px);
      box-shadow: 0 10px 20px -5px rgba(199,162,91,0.3);
    }
    .btn-outline {
      border: 1px solid var(--gold);
      color: var(--deep-navy);
    }
    .btn-outline:hover {
      background: var(--gold);
      color: #1E2A38;
    }
    .btn-light {
      background: white;
      color: var(--deep-navy);
      box-shadow: var(--shadow);
    }
    .btn-light:hover {
      background: var(--gold-light);
      transform: translateY(-2px);
    }

    /* HEADER & NAV */
    header {
      position: sticky;
      top: 0;
      background: rgba(254, 251, 245, 0.96);
      backdrop-filter: blur(8px);
      z-index: 1000;
      border-bottom: 1px solid rgba(199,162,91,0.2);
      padding: 16px 0;
    }
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo a {
      font-size: 1.9rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--deep-navy);
      letter-spacing: -0.02em;
    }
    .logo span {
      color: var(--gold);
      font-weight: 500;
    }
    .nav-links {
      display: flex;
      gap: 2rem;
      align-items: center;
    }
    .nav-links a {
      text-decoration: none;
      font-weight: 500;
      color: var(--deep-navy);
      transition: 0.2s;
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
    }
    .nav-links a:hover, .nav-links a.active {
      color: var(--gold);
    }
    .nav-cta {
      background: var(--deep-navy);
      color: white !important;
      padding: 8px 20px;
      border-radius: 40px;
    }
    .nav-cta:hover {
      background: var(--gold);
      color: #1E2A38 !important;
    }
    .mobile-menu {
      display: none;
      font-size: 1.8rem;
      cursor: pointer;
      color: var(--deep-navy);
    }

    /* PAGE SECTIONS */
    .page {
      display: block;
      animation: fadeIn 0.4s ease;
    }
    .page.active-page {
      display: block;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px);}
      to { opacity: 1; transform: translateY(0);}
    }

    /* HERO */
    .hero {
      padding: 70px 0 50px;
      background: linear-gradient(135deg, #FEF5E7 0%, #FEFBF5 100%);
      border-radius: 0 0 40px 40px;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
    .hero h1 {
      font-size: 3.6rem;
      line-height: 1.2;
      margin-bottom: 1.2rem;
    }
    .hero p {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      color: #3A4A55;
    }
    .hero-buttons {
      display: flex;
      gap: 1rem;
    }
    .hero-img img {
      width: 100%;
      border-radius: 28px;
      box-shadow: var(--shadow-hover);
      object-fit: cover;
    }

    /* TRUSTRIP */
    .trust-strip {
      background: white;
      padding: 28px 0;
      border-bottom: 1px solid #eee8df;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 2rem;
      text-align: center;
    }
    .trust-item{
      background: white;
      border-left: 5px solid var(--gold);
      border-right: 5px solid var(--gold);
      border-radius:20px;
    }
    .trust-item i {
      color: var(--gold);
      font-size: 1.8rem;
      margin-bottom: 8px;
    }
    .trust-item p {
      font-weight: 500;
    }

    /* Cards + Grids */
    .benefits-grid, .services-preview-grid, .testimonial-grid, .service-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin: 3rem 0;
    }
    .card {
      background: white;
      border-radius: 24px;
      padding: 2rem;
      transition: all 0.3s;
      box-shadow: var(--shadow);
      border: 1px solid #f0e7dd;
    }
    .card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-hover);
      border-color: var(--gold-light);
    }
    .card-icon {
      font-size: 2.5rem;
      color: var(--gold);
      margin-bottom: 1rem;
    }
    .testimonial-card {
      background: white;
      border-left: 5px solid var(--gold);
    }
    .testimonial-card p {
      font-style: italic;
      margin-bottom: 1rem;
    }

    /* Property Cards (Listings) */
    .filter-bar {
      margin: 2rem 0;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .filter-btn {
      padding: 8px 24px;
      border-radius: 40px;
      background: #fff;
      border: 1px solid #ddd2c4;
      cursor: pointer;
      transition: 0.2s;
    }
    .filter-btn.active-filter, .filter-btn:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: #1E2A38;
      font-weight: 500;
    }
    .listings-grid {
      display: flex;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 2rem;
    }
    .property-card {
      background: white;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: 0.2s;
    }
    .property-card img {
      width: 100%;
      height: 240px;
      object-fit: cover;
    }
    .property-info {
      padding: 1.5rem;
    }
    .property-price {
      color: var(--gold);
      font-weight: 700;
      font-size: 1.3rem;
    }
    .view-details-btn {
      margin-top: 12px;
      width: 100%;
      background: transparent;
      border: 1px solid var(--gold);
      border-radius: 40px;
      padding: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.2s;
    }
    .view-details-btn:hover {
      background: var(--gold);
      color: #1E2A38;
    }

    /* MODAL (DETAIL PAGE OVERLAY) */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(5px);
      z-index: 9999;
      display: none;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }
    .modal-container {
      background: #FEFBF5;
      max-width: 1100px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      border-radius: 32px;
      position: relative;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
      animation: fadeInUp 0.3s ease;
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px);}
      to { opacity: 1; transform: translateY(0);}
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      border-bottom: 1px solid #e2d9cf;
    }
    .modal-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
    }
    .modal-close {
      font-size: 2rem;
      cursor: pointer;
      background: none;
      border: none;
      color: var(--deep-navy);
    }
    .modal-gallery {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      padding: 2rem;
      background: #F7F2EA;
    }
    .modal-gallery img {
      width: 220px;
      height: 160px;
      object-fit: cover;
      border-radius: 20px;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .modal-details {
      padding: 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    .amenities-list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .amenities-list li {
      background: #EAE3D8;
      padding: 6px 14px;
      border-radius: 40px;
      font-size: 0.9rem;
    }
    .modal-cta {
      grid-column: span 2;
      text-align: center;
      margin-top: 1rem;
    }
    @media (max-width: 750px) {
      .modal-details { grid-template-columns: 1fr; }
      .modal-cta { grid-column: span 1; }
      .hero-grid { grid-template-columns: 1fr; }
      
         /* MODAL (DETAIL PAGE OVERLAY) */
        .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.8);
          backdrop-filter: blur(5px);
          z-index: 9999;
          display: none;
          justify-content: center;
          align-items: center;
          padding: 0.5rem;
        }
        .modal-container {
          background: #FEFBF5;
          max-width: 600px;
          width: 90%;
          max-height: 90vh;
          overflow-y: auto;
          border-radius: 32px;
          position: relative;
          box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
          animation: fadeInUp 0.3s ease;
        }
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(30px);}
          to { opacity: 1; transform: translateY(0);}
        }
        .modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.5rem 2rem;
          border-bottom: 1px solid #e2d9cf;
        }
        .modal-header h2 {
          font-family: 'Cormorant Garamond', serif;
          font-size: 1.5rem;
        }
        .modal-close {
          font-size: 1.5rem;
          cursor: pointer;
          background: none;
          border: none;
          padding: 5px;
          color: var(--deep-navy);
        }
        .modal-gallery {
          display: flex;
          gap: 1rem;
          overflow-x: auto;
          padding: 2rem;
          background: #F7F2EA;
        }
        .modal-gallery img {
          width: 220px;
          height: 160px;
          object-fit: cover;
          border-radius: 20px;
          flex-shrink: 0;
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .listings-grid {
          display: block;
          grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
          gap: 2rem;
        }
        .amenities-list {
          list-style: none;
          display: flex;
          flex-wrap: wrap;
          gap: 2px;
        }
        .amenities-list li {
          background: #EAE3D8;
          padding: 6px 14px;
          border-radius: 40px;
          font-size: 0.9rem;
        }
    }
    /* How It Works + FAQ */
    .steps {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1.5rem;
      margin: 2rem 0;
    }
    .step {
      flex: 1;
      text-align: center;
      background: white;
      border-radius: 28px;
      padding: 2rem;
      transition: all 0.3s;
      box-shadow: var(--shadow);
      border: 1px solid #f0e7dd;
    }
    .step-number {
      background: var(--gold);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .faq-item {
      margin-bottom: 1.5rem;
      border-bottom: 1px solid #eadfcb;
      padding-bottom: 1rem;
    }
    .faq-question {
      font-weight: 700;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      margin: 3rem 0;
    }
    .contact-form input, .contact-form textarea {
      width: 100%;
      padding: 14px;
      margin-bottom: 1rem;
      border: 1px solid #e2d9cf;
      border-radius: 20px;
      background: white;
    }
    .formheader {
            font-size: 2rem;
            font-weight: 900;
            background-color: #C7A25B; 
            border-radius: 20px;
            padding: 20px 10px 10px 10px;
        }
    .map iframe {
      width: 100%;
      height: 280px;
      border-radius: 28px;
      border: 0;
    }
    .social-links a {
      color: var(--deep-navy);
      margin-right: 1.5rem;
      font-size: 1.5rem;
      transition: 0.2s;
    }
    .social-links a:hover { color: var(--gold); }
    footer {
      background: #1E2A38;
      color: #e7dfd3;
      padding: 48px 0 24px;
      margin-top: 60px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
      gap: 2rem;
    }
    .footer-grid h4 {
      color: var(--gold);
      margin-bottom: 1rem;
    }
    .footer-grid a {
      color: #ddd2c4;
      text-decoration: none;
      display: block;
      margin-bottom: 0.5rem;
    }
    .footer-grid a:hover { color: var(--gold); }
    .copyright {
      text-align: center;
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid #3a4a55;
      font-size: 0.8rem;
    }
    @media (max-width: 767px) {
      .contact-grid { grid-template-columns: 1fr; }
      .nav-links {
        position: fixed;
        top: 80px;
        left: -100%;
        flex-direction: column;
        background: rgba(254, 251, 245, 0.98);
        width: 80%;
        height: calc(100vh - 80px);
        transition: 0.3s;
        padding: 2rem;
        box-shadow: 4px 0 20px rgba(0,0,0,0.05);
        gap: 2rem;
        align-items: flex-start;
        backdrop-filter: blur(10px);
      }
      .nav-links.active {
        left: 0;
      }
      .mobile-menu {
        display: block;
      }
      .hero { padding: 10px; }
      .container { padding: 0 24px; }
      .hero h1 { font-size: 1.5rem; }
      .section-title { 
          font-size: 1.5rem; 
          padding:20px 1px 1px 1px;
      }
      .hero p { 
          font-size: 0.9rem; 
      }
      .btn {
          display: inline-block;
          padding: 5px 10px;
          border-radius: 40px;
          font-weight: 300;
          font-family: 'Inter', sans-serif;
          text-decoration: none;
          transition: 0.25s ease;
          cursor: pointer;
          border: none;
          background: none;
          font-size: 0.8rem;
        }
        .btn-primary {
          background: var(--gold);
          color: #1E2A38;
          box-shadow: 0 2px 8px rgba(199,162,91,0.2);
        }
        .btn-primary:hover {
          background: #b58b3e;
          transform: translateY(-2px);
          box-shadow: 0 10px 20px -5px rgba(199,162,91,0.3);
        }
        .btn-outline {
          border: 1px solid var(--gold);
          color: var(--deep-navy);
        }
        .btn-outline:hover {
          background: var(--gold);
          color: #1E2A38;
        }
        .btn-light {
          background: white;
          color: var(--deep-navy);
          box-shadow: var(--shadow);
        }
        .btn-light:hover {
          background: var(--gold-light);
          transform: translateY(-2px);
        }
        /* TRUSTRIP */
        .trust-strip {
          background: white;
          padding: 20px 2px;
          border-bottom: 1px solid #eee8df;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          gap: 1rem;
          text-align: center;
        }
        .trust-item{
          background: white;
          border-left: 3px solid var(--gold);
          border-right: 3px solid var(--gold);
          border-radius:20px;
        }
        .trust-item i {
          color: var(--gold);
          font-size: 1rem;
          margin-bottom: 4px;
        }
        .trust-item p {
          font-weight: 500;
          font-size: 0.7rem;
        }
        /* Cards + Grids */
        .benefits-grid, .services-preview-grid, .testimonial-grid, .service-cards {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: 2rem;
          margin: 1rem 0;
        }
        .card {
          background: white;
          border-radius: 24px;
          padding: 0.5rem;
          transition: all 0.3s;
          box-shadow: var(--shadow);
          border: 1px solid #f0e7dd
          font-size: 0.8rem;
        }
        .card h3{
            font-weight:800;
            color: #50243B;
        }
        .card p{
            font-weight:500;
            font-size: 0.9rem;
        }
        .card:hover {
          transform: translateY(-6px);
          box-shadow: var(--shadow-hover);
          border-color: var(--gold-light);
        }
        .card-icon {
          font-size: 1.5rem;
          color: var(--gold);
          margin-bottom: 0.5rem;
        }
        .testimonial-card {
          background: white;
          border-left: 5px solid var(--gold);
        }
        .testimonial-card p {
          font-style: italic;
          margin-bottom: 1rem;
        }
        .steps {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 1.5rem;
          margin: 2rem 0;
        }
        .step {
          flex: 1;
          text-align: center;
          background: white;
          border-radius: 28px;
          padding: 0.5rem;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          transition: all 0.3s;
          box-shadow: var(--shadow);
          border: 1px solid #f0e7dd;
        }
        .step h3{
            color: #50243B;
        }
        .step p{
            font-weight:500;
            font-size: 0.9rem;
        }
        .step-number {
          background: var(--gold);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 1rem;
          font-weight: bold;
          margin-bottom: 1rem;
        }
        .formheader {
            font-size: 1.2rem;
            font-weight: 900;
            background-color: #C7A25B; 
            border-radius: 10px;
            padding: 20px 10px 10px 10px;
        }

    }
    
        .whatsapp-chat-link {
        background-color: #25D366;
        color: white !important;
        padding: 10px 20px;
        border-radius: 24px;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
    }
    .whatsapp-chat-link:hover {
        background-color: #128C7E;
    }