:root {
          --primary: #ffb609;
          --secondary: #333;
          --gray: #f4f4f4;
      }

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

      html {
          scroll-behavior: smooth;
      }

      body {
          color: var(--secondary);
          line-height: 1.7;
      }

      section {
          scroll-margin-top: 150px;
          /* same as header height */
      }

      /* TOP BAR */
      .top-bar {
          position: sticky;
          top: 0;
          z-index: 3000;
          background: #f1c40f;
          padding: 6px 20px;
          display: flex;
          justify-content: space-between;
          font-weight: 600;
          font-size: 14px;
      }

      .top-bar a {
          text-decoration: none;
          color: black;
      }

      .top-bar a i {
          color: white;
      }

      /* HEADER */
      header {
          position: sticky;
          top: 36px;
          z-index: 2500;
          background: #fff;
          box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
      }

      .nav {
          /* max-width: 1200px; */
          /* margin: auto; */
          padding: 2px 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .nav .logo img {
          width: 80px;
          height: auto;
      }

      .menu {
          display: flex;
          align-items: center
      }

      .menu>a,
      .dropdown>a {
          margin-left: 22px;
          text-decoration: none;
          color: #333;
          font-weight: 500;
      }



      /* ===== MOBILE MENU ===== */
      .menu-toggle {
          display: none;
          font-size: 26px;
          cursor: pointer;
      }

      /* Mobile styles */
      @media (max-width: 992px) {
          .menu-toggle {
              display: block;
          }

          .menu {
              position: absolute;
              top: 100%;
              left: 0;
              width: 100%;
              background: #fff;
              flex-direction: column;
              align-items: flex-start;
              padding: 20px;
              display: none;
              box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
          }

          .menu.active {
              display: flex;
          }

          .menu>a,
          .dropdown>a {
              margin: 12px 0;
          }

          /* Disable hover dropdown on mobile */
          .dropdown-content {
              position: static;
              box-shadow: none;
              opacity: 1;
              visibility: visible;
              transform: none;
              display: none;
              padding-left: 15px;
          }

          .dropdown.active .dropdown-content {
              display: block;
          }
      }


      /* DROPDOWN */
      .dropdown {
          position: relative
      }

      .dropdown-content {
          position: absolute;
          top: 100%;
          left: 0;
          background: #fff;
          min-width: 240px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
          border-radius: 6px;
          padding: 8px 0;
          opacity: 0;
          visibility: hidden;
          transform: translateY(10px);
          transition: .25s;
          z-index: 3000;
      }

      .dropdown-content a {
          display: block;
          padding: 12px 18px;
          text-decoration: none;
          color: #333;
          font-size: 14px;
      }

      .dropdown-content a:hover {
          background: #f4f4f4;
          color: var(--primary)
      }

      .dropdown:hover .dropdown-content,
      .dropdown-content:hover {
          opacity: 1;
          visibility: visible;
          transform: none;
      }

      /* BUTTON */
      .btn {
          background: var(--primary);
          color: #fff;
          padding: 12px 26px;
          border-radius: 4px;
          text-decoration: none;
          font-weight: 600;
      }

      .btn.small {
          margin-left: 20px
      }

      /* HERO */
      .hero {
          /* height: 100vh;
            position: relative;
            overflow: hidden */
          padding: 10px;
      }

      .hero-slide {
          height: 80vh;
          background-size: cover;
          background-position: center;
          position: relative;
      }

      .hero-overlay {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, .6);
          display: flex;
          align-items: center;
      }

      .hero-content {
          max-width: 1200px;
          margin: auto;
          padding: 20px;
          color: #fff;
      }

      .hero-content h1 {
          font-size: 48px;
          margin-bottom: 15px
      }

      .hero-content p {
          font-size: 18px;
          max-width: 650px;
          margin-bottom: 30px
      }

      /* HERO NAV */
      .hero-prev,
      .hero-next {
          color: #fff;
          width: 46px;
          height: 46px;
          background: rgba(0, 0, 0, .45);
          border-radius: 50%;
      }

      .hero-prev::after,
      .hero-next::after {
          font-size: 18px
      }

      .hero-prev {
          left: 30px
      }

      .hero-next {
          right: 30px
      }

      /* COMMON */
      section {
          padding: 90px 20px
      }

      .container {
          max-width: 1200px;
          margin: auto
      }

      .title {
          text-align: center;
          margin-bottom: 60px
      }

      .service-detail {
          margin-bottom: 60px;
          scroll-margin-top: 140px
      }

      /* GALLERY */
      .swiper-slide img {
          width: 100%;
          height: 240px;
          object-fit: cover;
          border-radius: 8px;
      }

      .swiper-button-next,
      .swiper-button-prev {
          color: var(--primary)
      }

      @media(max-width:768px) {
          .hero-content h1 {
              font-size: 34px
          }

          .hero-prev {
              left: 15px
          }

          .hero-next {
              right: 15px
          }
      }

      /* SERVICES SECTION */
      #services {
          background: #fff;
      }

      .service-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: 1.5px solid #888;
          padding: 30px;
          margin-bottom: 50px;
          gap: 40px;
      }

      .service-text {
          flex: 1;
      }

      .service-text h3 {
          font-size: 22px;
          margin-bottom: 15px;
          color: #111;
      }

      .service-text p {
          font-size: 16px;
          color: #444;
          max-width: 600px;
      }

      .service-image {
          flex: 0.8;
          text-align: right;
      }

      .service-image img {
          max-width: 100%;
          height: auto;
          border-radius: 4px;
      }

      /* MOBILE */
      @media (max-width: 768px) {
          .service-box {
              flex-direction: column;
              text-align: left;
          }

          .service-image {
              text-align: center;
          }
      }

      /* FOOTER */
      .footer {
          background: #f6f6dc;
          padding: 70px 20px 0;
          font-size: 15px;
      }

      .footer-grid {
          display: grid;
          grid-template-columns: 1.3fr 1fr 1fr 1.5fr 0.8fr;
          gap: 30px;
      }

      .footer-logo img {
          max-width: 100px;
          margin-bottom: 10px;
          border-radius: 50%;
      }

      .footer h4 {
          font-size: 18px;
          margin-bottom: 18px;
          color: #000;
      }

      .footer p {
          color: #333;
          line-height: 1.7;
      }

      .footer ul {
          list-style: none;
      }

      .footer ul li {
          margin-bottom: 10px;
          text-align: left;
      }

      .footer ul li a {
          text-decoration: none;
          color: #333;
      }

      .footer ul li a:hover {
          color: var(--primary);
      }

      /* SOCIAL */
      .footer-social {
          margin-top: 18px;
          display: flex;
          gap: 10px;
      }

      .footer-social a {
          width: 38px;
          height: 38px;
          border: 1px solid #000;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          color: #000;
          font-weight: bold;
      }

      /* FOOTER BOTTOM */
      .footer-bottom {
          margin-top: 50px;
          padding: 18px;
          border-top: 1px solid #000;
          text-align: center;
          font-size: 14px;
          color: #333;
      }

      /* SCROLL TOP */
      .scroll-top {
          position: fixed;
          right: 18px;
          bottom: 98px;
          background: var(--primary);
          color: #fff;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          text-align: center;
          line-height: 42px;
          text-decoration: none;
          font-size: 20px;
      }

      /* RESPONSIVE */
      @media (max-width: 992px) {
          .footer-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      @media (max-width: 600px) {
          .footer-grid {
              grid-template-columns: 1fr;
          }
      }

      #whatsApp-contact {
          position: fixed;
          right: 10px;
          bottom: 0px;
          font-size: 42px;
          color: green;
      }


      #call-contact {
          position: fixed;
          width: 50px;
          height: 50px;
          left: 10px;
          bottom: 14px;
          font-size: 28px;
          background-color: var(--primary);
          color: rgb(43, 44, 41);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;

      }

      #services {
          padding: 70px 20px;
          background: #f9f9f9;
      }

      .title h2 {
          text-align: center;
          font-size: 36px;
          margin-bottom: 40px;
          color: #0b3c49;
      }

      .services-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 25px;
      }

      .service-card {
          background: #fff;
          border-radius: 14px;
          overflow: hidden;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .service-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
      }

      .service-card img {
          width: 100%;
          height: 200px;
          object-fit: cover;
      }

      .card-content {
          padding: 20px;
      }

      .card-content h3 {
          font-size: 20px;
          margin-bottom: 10px;
          color: #222;
      }

      .card-content p {
          font-size: 15px;
          color: #555;
          line-height: 1.6;
      }

      .btn {
          display: inline-block;
          margin-top: 15px;
          padding: 10px 18px;
          background: #25d366;
          color: #fff;
          text-decoration: none;
          border-radius: 6px;
          font-weight: 500;
      }

      .btn:hover {
          background: #1ebd5a;
      }