:root {

        --primary: #f1bc29;

        --secondary: #4a90e2;

        --accent: #f9d56e;

        --soft-pink: #ffe5e5;

        --soft-green: #e3f7e8;

        --dark-text: #2c3e50;

        --shadow-sm:

          0 10px 25px -5px rgba(0, 0, 0, 0.05),

          0 8px 10px -6px rgba(0, 0, 0, 0.02);

        --shadow-md: 0 20px 25px -12px rgba(0, 0, 0, 0.08);

        --border-radius-card: 1.5rem;

      }

      body {

        font-family:

          "Segoe UI",

          "Poppins",

          system-ui,

          -apple-system,

          "Roboto",

          sans-serif;

        color: var(--dark-text);

        scroll-behavior: smooth;

        overflow-x: hidden;

      }

      /* custom rounded shapes & playful touches */

      h1,

      h2,

      h3 {

        font-weight: 700;

        letter-spacing: -0.02em;

      }

      .section-title {

        position: relative;

        display: inline-block;

        margin-bottom: 2rem;

      }

      .section-title:after {

        content: "";

        position: absolute;

        bottom: -12px;

        left: 50%;

        transform: translateX(-50%);

        width: 70px;

        height: 4px;

        background: var(--primary);

        border-radius: 4px;

      }
      section {
  overflow: hidden;
}

      .card,

      .feature-card,

      .testimonial-card,

      .form-card,

      .gallery-item {

        border-radius: var(--border-radius-card);

        transition:

          transform 0.2s ease,

          box-shadow 0.2s ease;

        box-shadow: var(--shadow-sm);

        border: none;

        background: white;

      }

      .feature-card:hover,

      .card:hover {

        transform: translateY(-5px);

        box-shadow: var(--shadow-md);

      }

      .btn-primary-custom {

        background: var(--primary);

        border: none;

        padding: 12px 28px;

        border-radius: 40px;

        font-weight: 600;

        color: white;

        transition: all 0.2s;

        box-shadow: 0 4px 8px rgba(255, 145, 77, 0.3);

      }

      .btn-primary-custom:hover {

        background: #e07a3a;

        transform: scale(0.98);

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

      }

      .btn-outline-custom {

        border: 2px solid var(--primary);

        background: transparent;

        border-radius: 40px;

        padding: 10px 24px;

        font-weight: 600;

        color: var(--primary);

      }

      .top-bar {

        background: rgb(99 49 141);

        color: #f8f9fa;

        font-size: 0.85rem;

        padding: 8px 0;

      }

      .top-bar a {

        color: #f8f9fa;

        text-decoration: none;

        transition: 0.2s;

      }

      .top-bar a:hover {

        color: var(--primary);

      }

      .social-icons i {

        font-size: 1.1rem;

        margin: 0 6px;

        transition: 0.2s;

      }

      .navbar {

        background: white;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

        padding: 12px 0;

      }

      .navbar-brand img {

        max-height: 43px;

      }

      .sticky-call-btn {

        position: fixed;

        bottom: 20px;

        right: 20px;

        background: #25d366;

        color: white;

        width: 55px;

        height: 55px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);

        z-index: 1040;

        transition: 0.2s;

        text-decoration: none;

      }

      .sticky-call-btn i {

        font-size: 28px;

      }

      .whatsapp-float {

        position: fixed;

        bottom: 90px;

        right: 20px;

        background: #128c7e;

        width: 55px;

        height: 55px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        color: white;

        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);

        z-index: 1040;

        text-decoration: none;

      }

      .hero-section {

        background: linear-gradient(135deg, #fff9f0 0%, #ffefe0 100%);

        padding: 60px 0 40px;

      }

      .hero-img {

        border-radius: 2rem;

        box-shadow: var(--shadow-md);

        width: 100%;

        height: auto;

        object-fit: cover;

      }

      .lead-form-card {

        background: white;

        border-radius: 2rem;

        padding: 2rem;

        box-shadow: var(--shadow-md);

      }

      .process-step {

        text-align: center;

        padding: 20px;

        background: white;

        border-radius: 2rem;

        box-shadow: var(--shadow-sm);

        height: 100%;

      }

      .step-number {

        width: 50px;

        height: 50px;

        background: var(--primary);

        color: white;

        border-radius: 60%;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        font-weight: bold;

        font-size: 1.5rem;

        margin-bottom: 1rem;

      }

      .gallery-img {

        cursor: pointer;

        transition: 0.2s;

        border-radius: 1.2rem;

        width: 100%;

        height: 220px;

        object-fit: cover;

      }

      .gallery-img:hover {

        opacity: 0.85;

        transform: scale(1.01);

      }

      /* lightbox custom */

      .lightbox {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, 0.9);

        z-index: 1050;

        justify-content: center;

        align-items: center;

        flex-direction: column;

      }

      .lightbox.active {

        display: flex;

      }

      .lightbox-img {

        max-width: 90%;

        max-height: 80%;

        border-radius: 1rem;

        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);

      }

      .lightbox-close,

      .lightbox-prev,

      .lightbox-next {

        position: absolute;

        color: white;

        font-size: 2rem;

        cursor: pointer;

        background: rgba(0, 0, 0, 0.5);

        width: 50px;

        height: 50px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: 0.2s;

      }

      .lightbox-close {

        top: 20px;

        right: 30px;

      }

      .lightbox-prev {

        left: 30px;

        top: 50%;

        transform: translateY(-50%);

      }

      .lightbox-next {

        right: 30px;

        top: 50%;

        transform: translateY(-50%);

      }

      @media (max-width: 768px) {

        .lightbox-prev,

        .lightbox-next {

          width: 40px;

          height: 40px;

          font-size: 1.5rem;

        }

        .top-bar .row > div {

          text-align: center !important;

          margin-bottom: 5px;

        }

        .sticky-call-btn,

        .whatsapp-float {

          width: 48px;

          height: 48px;

        }

        .whatsapp-float {

          bottom: 80px;

        }

        .hero-section {

          padding: 30px 0;

        }

      }

      footer {

        background: #63318d;

        color: #ccc;

      }

      footer a {

        color: #ddd;

        text-decoration: none;

      }

      footer a:hover {

        color: var(--primary);

      }

      .carousel-control-prev-icon,

      .carousel-control-next-icon {

        background-color: var(--primary);

        border-radius: 50%;

        padding: 20px;

      }

      .testimonial-card {

        padding: 1.8rem;

        margin: 1rem;

        background: white;

      }

      .star-rating i {

        color: #ffb800;

      }

      .map-container iframe {

        width: 100%;

        height: 280px;

        border-radius: 1.5rem;

        border: 0;

      }

      .btn-nav-call {

        background: var(--primary);

        border-radius: 30px;

        padding: 6px 16px;

        color: white;

        font-weight: 600;

        margin-left: 10px;

      }