:root {
          --primary: #0b4c3e;
          --primary-foreground: #ffffff;
          --accent: #f3c026;
          --accent-foreground: #000000;
          --background: #ffffff;
          --foreground: #333333;
          --muted: #f4f4f4;
          --muted-foreground: #666666;
          --card: #ffffff;
          --card-foreground: #333333;
          --border: #e0e0e0;
          --radius-sm: 4px;
          --radius-md: 8px;
          --radius-lg: 16px;
          --radius-xl: 32px;
      }

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

      .export-wrapper {
          font-family: system-ui, -apple-system, sans-serif;
          color: var(--foreground);
          background: var(--background);
          line-height: 1.5;
          font-size: 15px;
      }

      a {
          text-decoration: none;
          color: inherit;
      }

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

      .section {
          padding: 80px 0;
      }

      .section-title {
          font-size: 32px;
          font-weight: 700;
          text-align: center;
          margin-bottom: 16px;
          color: var(--primary);
      }

      .section-subtitle {
          text-align: center;
          color: var(--muted-foreground);
          max-width: 600px;
          margin: 0 auto 48px;
      }

      .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 12px 24px;
          border-radius: var(--radius-xl);
          font-weight: 600;
          cursor: pointer;
          border: none;
      }

      .btn-primary {
          background: var(--primary);
          color: var(--primary-foreground);
      }

      .btn-accent {
          background: var(--accent);
          color: var(--accent-foreground);
      }

      .top-bar {
          background: var(--primary);
          color: var(--primary-foreground);
          padding: 8px 0;
          font-size: 13px;
      }

      .top-bar .container {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .top-bar-info {
          display: flex;
          gap: 24px;
      }

      .info-item {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .main-nav {
          background: var(--background);
          padding: 16px 0;
          border-bottom: 1px solid var(--border);
      }

      .main-nav .container {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .logo {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 24px;
          font-weight: 800;
          color: var(--primary);
      }

      .nav-links {
          display: flex;
          gap: 32px;
          align-items: center;
      }

      .nav-link {
          font-weight: 500;
          font-size: 14px;
          color: var(--foreground);
      }

      .hero {
          position: relative;
          height: 600px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          color: white;
          background: var(--primary);
      }

      .hero img.bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0.6;
          z-index: 0;
      }

      .hero video.bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0.6;
          z-index: 0;
      }

      .hero-content {
          position: relative;
          z-index: 1;
          max-width: 800px;
          padding: 0 24px;
      }

      .hero-title {
          font-size: 64px;
          font-weight: 700;
          color: var(--accent);
          margin-bottom: 24px;
          font-family: serif;
      }

      .hero-desc {
          font-size: 18px;
          margin-bottom: 32px;
      }

      .search-bar {
          position: relative;
          z-index: 2;
          background: white;
          padding: 16px;
          border-radius: var(--radius-xl);
          display: flex;
          gap: 16px;
          max-width: 1000px;
          margin: -40px auto 0;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }

      .search-input {
          flex: 1;
          padding: 12px 16px;
          border: 1px solid var(--border);
          border-radius: var(--radius-xl);
          background: var(--muted);
          color: var(--foreground);
      }

      .about-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 64px;
          align-items: center;
      }

      .about-images {
          position: relative;
      }

      .about-img-main {
          width: 100%;
          border-radius: var(--radius-lg);
          border: 8px solid var(--primary);
      }

      .about-content h2 {
          font-size: 40px;
          color: var(--primary);
          margin-bottom: 24px;
      }

      .about-content h3 {
          color: var(--accent);
          margin-bottom: 16px;
      }

      .about-content p {
          margin-bottom: 16px;
          color: var(--muted-foreground);
      }

      .package-card {
          display: flex;
          background: var(--primary);
          border-radius: var(--radius-lg);
          overflow: hidden;
          margin-bottom: 32px;
          color: white;
      }

      .package-info {
          flex: 1;
          padding: 40px;
      }

      .package-info h3 {
          font-size: 24px;
          color: var(--accent);
          margin-bottom: 16px;
      }

      .package-info p {
          margin-bottom: 24px;
          opacity: 0.9;
      }

      .package-features {
          display: flex;
          gap: 24px;
          margin-bottom: 32px;
      }

      .pkg-feature {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          font-size: 12px;
      }

      .package-img {
          width: 40%;
          position: relative;
      }

      .package-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .price-tag {
          position: absolute;
          top: 24px;
          right: 24px;
          background: var(--accent);
          color: var(--accent-foreground);
          padding: 8px 16px;
          border-radius: var(--radius-xl);
          font-weight: 700;
      }

      .services-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
      }

      .service-card {
          background: var(--primary);
          color: white;
          padding: 32px 24px;
          text-align: center;
          border-radius: var(--radius-md);
      }

      .service-card .icon {
          margin: 0 auto 16px;
          color: var(--accent);
      }

      .service-card h4 {
          margin-bottom: 8px;
          font-size: 18px;
      }

      .service-card p {
          font-size: 13px;
          opacity: 0.8;
      }

      .footer {
          background: var(--primary);
          color: white;
          padding: 64px 0 24px;
      }

      .footer-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1fr;
          gap: 48px;
          margin-bottom: 48px;
      }

      .footer h4 {
          font-size: 18px;
          margin-bottom: 24px;
          color: var(--accent);
      }

      .footer-links {
          list-style: none;
      }

      .footer-links li {
          margin-bottom: 12px;
          font-size: 14px;
          opacity: 0.8;
      }

      .footer-bottom {
          text-align: center;
          padding-top: 24px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          font-size: 13px;
          opacity: 0.7;
      }

      .section-pad {
          padding: 80px 0;
      }

      .sec-heading-wrapper {
          text-align: center;
          margin-bottom: 48px;
      }

      .sec-sub-title {
          font-family: "Brush Script MT", cursive, serif;
          font-size: 24px;
          color: var(--accent);
          margin-bottom: 8px;
      }

      .sec-main-title {
          font-size: 36px;
          font-weight: 800;
          color: var(--primary);
          margin-bottom: 16px;
      }

      .sec-main-title span {
          font-family: "Brush Script MT", cursive, serif;
          color: var(--accent);
          font-weight: 400;
      }

      .sec-desc {
          max-width: 800px;
          margin: 0 auto 24px;
          color: var(--muted-foreground);
          font-size: 14px;
      }

      .sec-divider {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 16px;
          margin: 24px 0;
      }

      .sec-divider::before,
      .sec-divider::after {
          content: "";
          height: 1px;
          width: 60px;
          background: var(--primary);
      }

      .btn-custom {
          display: inline-block;
          background: rgba(255, 255, 255, 0.1);
          color: var(--primary-foreground);
          border: 1px solid rgba(255, 255, 255, 0.3);
          padding: 12px 24px;
          border-radius: var(--radius-xl);
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 1px;
          text-transform: uppercase;
          cursor: pointer;
          margin-top: 16px;
      }

      .srv-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
      }

      .srv-card {
          background: var(--primary);
          border-radius: var(--radius-lg);
          padding: 32px 24px;
          text-align: center;
          color: var(--primary-foreground);
          display: flex;
          flex-direction: column;
          align-items: center;
      }

      .srv-icon-wrap {
          width: 64px;
          height: 64px;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
          border-radius: 50% 50% 0 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 24px;
          border: 1px solid var(--accent);
      }

      .srv-card h3 {
          font-size: 18px;
          margin-bottom: 12px;
      }

      .srv-card p {
          font-size: 13px;
          opacity: 0.85;
          line-height: 1.6;
      }

      @media (max-width: 991px) {
          .srv-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }

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

      .fd-section {
          background: var(--muted);
      }

      .fd-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
      }

      .fd-card {
          background: var(--card);
          border-radius: var(--radius-lg);
          padding: 24px;
          text-align: center;
          border: 1px solid var(--border);
      }

      .fd-img-wrap {
          position: relative;
          width: 100%;
          aspect-ratio: 1/1;
          margin-bottom: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .fd-img-border {
          position: absolute;
          width: 80%;
          height: 80%;
          border: 3px solid var(--primary);
          border-radius: var(--radius-sm);
          z-index: 1;
      }

      .fd-img-wrap img {
          position: relative;
          z-index: 2;
          width: 90%;
          height: 90%;
          object-fit: cover;
          clip-path: polygon(10% 0, 100% 5%, 95% 100%, 0 90%);
      }

      .fd-card h3 {
          font-size: 16px;
          color: var(--primary);
          font-weight: 700;
      }

      @media (max-width: 991px) {
          .fd-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }

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

      .pkg-card {
          display: flex;
          background: var(--primary);
          border-radius: var(--radius-lg);
          overflow: hidden;
          position: relative;
      }

      .pkg-content {
          flex: 1;
          padding: 48px;
          color: var(--primary-foreground);
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      .pkg-title {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 16px;
      }

      .pkg-title span {
          font-family: "Brush Script MT", cursive, serif;
          color: var(--accent);
          font-weight: 400;
      }

      .pkg-desc {
          font-size: 14px;
          opacity: 0.9;
          margin-bottom: 32px;
      }

      .pkg-icons {
          display: flex;
          gap: 24px;
          margin-bottom: 32px;
      }

      .pkg-icon-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          font-size: 11px;
          opacity: 0.8;
      }

      .pkg-image-wrap {
          width: 45%;
          position: relative;
      }

      .pkg-image-wrap img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .pkg-price {
          position: absolute;
          top: 24px;
          right: 24px;
          background: linear-gradient(180deg, #ffd700, #ff8c00);
          color: #000;
          padding: 12px 24px;
          border-radius: var(--radius-xl);
          font-weight: 800;
          font-size: 18px;
          z-index: 10;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      }

      @media (max-width: 991px) {
          .pkg-card {
              flex-direction: column;
          }

          .pkg-image-wrap {
              width: 100%;
              height: 300px;
              order: -1;
          }
      }

      /* Search Bar Responsive Styles */
      @media (max-width: 768px) {
          .search-bar {
              flex-direction: column;
              gap: 12px;
              padding: 20px;
              margin: -30px 15px 0 15px;
          }

          .search-input {
              width: 100%;
              flex: none;
          }

          .search-bar button {
              width: 100%;
              padding: 14px;
              font-size: 1rem;
          }
      }

      @media (max-width: 480px) {
          .search-bar {
              padding: 15px;
              margin: -20px 10px 0 10px;
          }

          .search-input {
              padding: 12px;
              font-size: 0.9rem;
          }

          .search-bar button {
              padding: 12px;
              font-size: 0.95rem;
          }
      }