* {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

      }

      body {

        font-family: "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

        background-color: #f8f9fa;

        color: #212529;

        scroll-behavior: smooth;

      }

      .btn-gradient {

        background: linear-gradient(135deg, #0d6efd, #ffc107);

        border: none;

        color: #212529;

        font-weight: 600;

        transition: 0.3s ease;

        box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);

      }

      .btn-gradient:hover {

        transform: translateY(-3px);

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

        color: #fff;

        background: linear-gradient(135deg, #0b5ed7, #e0a800);

      }

      .btn-outline-custom {

        border: 2px solid #0d6efd;

        background: transparent;

        color: #0d6efd;

        font-weight: 600;

      }

      .btn-outline-custom:hover {

        background: #0d6efd;

        color: white;

      }

      .top-header {

        background: #0d2137;

        color: #f8f9fa;

        font-size: 0.85rem;

        padding: 8px 0;

      }

      .top-header a {

        color: #ffc107;

        text-decoration: none;

        transition: 0.2s;

      }

      .top-header a:hover {

        color: #fff;

      }

      .social-icons a {

        color: #f8f9fa;

        margin: 0 6px;

        font-size: 0.9rem;

        transition: 0.2s;

        display: inline-block;

      }

      .social-icons a:hover {

        color: #ffc107;

        transform: scale(1.1);

      }

      .navbar-sticky {

        background: white;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

        transition: all 0.3s ease;

        padding: 12px 0;

      }

      .navbar-sticky.sticky-top {

        position: sticky;

        top: 0;

        z-index: 1030;

        background: white;

      }

      .navbar-brand {

        font-weight: 800;

        font-size: 1.6rem;

      }

      .nav-link {

        font-weight: 500;

        color: #212529;

        margin: 0 4px;

        transition: 0.2s;

      }

      .nav-link:hover {

        color: #0d6efd;

      }

      .carousel-item {

        height: 88vh;

        min-height: 500px;

        background-size: cover;

        background-position: center 30%;

        position: relative;

      }

      .carousel-item::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

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

      }

      .carousel-caption {

        bottom: 25%;

        text-align: center;

        z-index: 2;

      }

      .carousel-caption h1 {

        font-size: 3rem;

        font-weight: 800;

        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);

      }

      .carousel-caption p {

        font-size: 1.2rem;

        max-width: 700px;

        margin: 0 auto 20px;

        text-shadow: 1px 1px 4px black;

      }

      .service-card {

        background: white;

        border-radius: 20px;

        padding: 1.5rem;

        transition: all 0.3s;

        height: 100%;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);

        border: 1px solid rgba(0, 0, 0, 0.05);

      }

      .service-card:hover {

        transform: translateY(-8px);

        box-shadow: 0 20px 35px rgba(13, 110, 253, 0.1);

        border-color: #ffc107;

      }

      .service-icon {

        font-size: 2.8rem;

        color: #0d6efd;

        margin-bottom: 1rem;

      }

      .why-icon {

        font-size: 2rem;

        color: #ffc107;

        background: #fff3e0;

        width: 65px;

        height: 65px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        margin: 0 auto 1rem;

      }

      .step-number {

        width: 55px;

        height: 55px;

        background: linear-gradient(135deg, #0d6efd, #ffc107);

        color: white;

        font-weight: bold;

        font-size: 1.6rem;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0 auto 1rem;

      }

      /* GALLERY STYLES */

      .gallery-item {

        cursor: pointer;

        border-radius: 16px;

        overflow: hidden;

        position: relative;

      }

      .gallery-item img {

        width: 100%;

        height: 240px;

        object-fit: cover;

        transition: 0.4s ease;

      }

      .gallery-item:hover img {

        transform: scale(1.08);

      }

      .gallery-item::after {

        content: "\f00e";

        font-family: "Font Awesome 6 Free";

        font-weight: 900;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%) scale(0);

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

        color: white;

        width: 50px;

        height: 50px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 1.5rem;

        transition: 0.3s ease;

        pointer-events: none;

      }

      .gallery-item:hover::after {

        transform: translate(-50%, -50%) scale(1);

      }

      /* LIGHTBOX MODAL */

      .lightbox-modal {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

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

        z-index: 9999;

        cursor: pointer;

        align-items: center;

        justify-content: center;

      }

      .lightbox-modal.active {

        display: flex;

      }

      .lightbox-modal img {

        max-width: 90%;

        max-height: 90%;

        object-fit: contain;

        border-radius: 8px;

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

      }

      .lightbox-close {

        position: absolute;

        top: 25px;

        right: 35px;

        color: white;

        font-size: 40px;

        font-weight: bold;

        cursor: pointer;

        transition: 0.2s;

        background: none;

        border: none;

      }

      .lightbox-close:hover {

        color: #ffc107;

      }

      /* TESTIMONIAL STYLES - COMPACT & ELEGANT */

      .testimonials-section {

        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

      }

      section{

        overflow: hidden;

      }

      .testimonial-card {

        background: white;

        border-radius: 20px;

        padding: 1.8rem;

        margin: 0.5rem;

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

        transition: 0.3s;

        border-bottom: 4px solid #ffc107;

        height: 100%;

      }

      .testimonial-card:hover {

        transform: translateY(-5px);

        box-shadow: 0 15px 35px rgba(13, 110, 253, 0.15);

      }

      .testimonial-text {

        font-size: 0.95rem;

        line-height: 1.6;

        color: #555;

        margin: 1rem 0;

        font-style: italic;

      }

      .customer-name {

        font-weight: 700;

        color: #0d6efd;

        margin-top: 0.5rem;

        font-size: 1rem;

      }

      .customer-role {

        font-size: 0.8rem;

        color: #888;

      }

      .rating-stars i {

        color: #ffc107;

        font-size: 0.9rem;

        margin: 0 1px;

      }

      .testimonial-carousel-control {

        width: 40px;

        height: 40px;

        background: #0d6efd;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        cursor: pointer;

        z-index: 10;

        transition: 0.2s;

      }

      .testimonial-carousel-control:hover {

        background: #ffc107;

      }

      /* Contact */

      .contact-info-box {

        background: white;

        padding: 1.8rem;

        border-radius: 20px;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

        height: 100%;

      }

      .whatsapp-float {

        position: fixed;

        bottom: 25px;

        right: 25px;

        background: #25d366;

        color: white;

        width: 55px;

        height: 55px;

        border-radius: 50%;

        text-align: center;

        font-size: 30px;

        line-height: 55px;

        z-index: 1030;

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

        transition: 0.2s;

      }

      .whatsapp-float:hover {

        transform: scale(1.08);

        background: #20b859;

        color: white;

      }

      .back-to-top {

        position: fixed;

        bottom: 25px;

        left: 25px;

        background: #0d6efd;

        color: white;

        width: 45px;

        height: 45px;

        border-radius: 50%;

        text-align: center;

        line-height: 45px;

        font-size: 1.3rem;

        z-index: 1030;

        opacity: 0;

        visibility: hidden;

        transition: 0.2s;

        cursor: pointer;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

      }

      .back-to-top.show {

        opacity: 1;

        visibility: visible;

      }

      footer {

        background: #111;

        color: #aaa;

      }

      footer a {

        color: #ddd;

        text-decoration: none;

        transition: 0.2s;

      }

      footer a:hover {

        color: #ffc107;

      }

      @media (max-width: 768px) {

        .carousel-caption h1 {

          font-size: 1.9rem;

        }

        .carousel-item {

          height: 70vh;

        }

        .top-header .contact-info span {

          font-size: 0.7rem;

        }

        .testimonial-card {

          padding: 1.2rem;

          margin: 0.3rem;

        }

        .gallery-item img {

          height: 180px;

        }

      }