body {
      font-family: "Nunito Sans", sans-serif;
      scroll-behavior: smooth;
    }

    .slider {
      position: relative;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .slide.active {
      opacity: 1;
    }

    .slide span {
      font-family: "Dancing Script", cursive;
      display: inline-block;
    }

    .dancing-font {
      font-family: "Dancing Script", cursive;
    }

    .newclass {
      transform: translate(-50%, -50%);
    }

    .contact-modal.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .contact-modal.is-visible>div {
      transform: scale(1);
      opacity: 1;
    }

    /* Running progress border button */


    /* Gradient border animation */
    .btn-shimmer {
      position: relative;
      display: inline-block;
      padding: 12px 32px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 1px;
      background: #353535;
      border: 2px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    /* Shimmer effect */
    .btn-shimmer::after {
      content: '';
      position: absolute;
      top: 0;
      left: -75%;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0) 100%);
      transform: skewX(-20deg);
      pointer-events: none;
      animation: shimmer 2s linear infinite;
      /* continuous animation */
    }

    /* Animate shimmer on hover */
    .btn-shimmer:hover::after {
      animation: shimmer 1s linear infinite;
    }

    /* Hover background and shadow */
    .btn-shimmer:hover {
      background: #d6a760;
      color: #000;
      box-shadow: 0 0 15px rgba(214, 167, 96, 0.7), 0 0 25px rgba(214, 167, 96, 0.4);
    }

    /* Keyframes for shimmer */
    @keyframes shimmer {
      0% {
        left: -75%;
      }

      100% {
        left: 125%;
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fadeIn {
      animation: fadeIn 0.4s ease-in-out both;
    }

    .fade {
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.4s ease-in-out;
    }

    .fade.show {
      opacity: 1;
      transform: scale(1);
    }

    .toggle-slider {
      transition: transform 0.3s ease;
    }

    @media (max-width: 767px) {
      .tiles-view {
        max-height: 100vh;
        overflow: scroll;
      }

      .tiles-view .tile {
        flex: 0 0 auto;
        /* Keep width fixed and scrollable */
        width: 120px;
        /* Adjust tile width on mobile */
        height: 120px;
        /* Adjust tile height on mobile */
      }
    }