@layer base {
      :root {
        --background: 239 100% 97%; 
        --foreground: 240 10% 3.9%;
        --card: 239 100% 97%;
        --card-foreground: 240 10% 3.9%;
        --popover: 239 100% 97%;
        --popover-foreground: 240 10% 3.9%;
        --primary: 240 5.9% 10%;
        --primary-foreground: 239 100% 97%;
        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;
        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;
        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 239 100% 97%;
        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;
        --ring: 240 5.9% 10%;
        --radius: 0.5rem;
      }
      .dark {
        --background: 240 10% 3.9%;
        --foreground: 239 100% 97%;
        --card: 240 10% 3.9%;
        --card-foreground: 239 100% 97%;
        --popover: 240 10% 3.9%;
        --popover-foreground: 239 100% 97%;
        --primary: 239 100% 97%;
        --primary-foreground: 240 5.9% 10%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 239 100% 97%;
        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 240 3.7% 15.9%;
        --accent-foreground: 239 100% 97%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 239 100% 97%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 240 4.9% 83.9%;
      }
    }
    body {
      background: url('./public/bgwp2.png') no-repeat center center fixed;
      background-size: cover;
      height: 100%; 
      margin: 0; 
      padding: 0; 
    }
    

    .button-animation {
      transition: transform 0.3s ease;
    }

    .button-animation:hover {
      transform: scale(1.05);
    }

    .image-animation {
      transition: transform 0.3s ease;
    }

    .image-animation:hover {
      transform: scale(1.05);
    }

    .fade-in {
      animation: fadeIn 2s ease-in-out;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
    #animation-container1 {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 2px;
        left: 0px;
        border-radius: 50%;
        padding: 1px;
       
      }
      #animation-container2 {
        width: 100px;
        height: 100px;
        position: absolute;
        bottom: 3px;
        right: 3px;
        border-radius: 50%;
        padding: 1px;
       
      }
      #scroll-container {
        display: flex;
        overflow: hidden; 
        white-space: nowrap; 
      }
      
      .animate-scroll {
        animation: scroll 20s linear infinite;
        display: inline-block; 
        padding: 0 20px; 
      }
      
      @keyframes scroll {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      
      /* Responsive adjustments */
      @media (max-width: 768px) {
        .animate-scroll {
          animation-duration: 15s; 
          padding: 0 15px; 
        }
      }
      
      @media (max-width: 480px) {
        .animate-scroll {
          animation-duration: 10s; 
          padding: 0 10px; 
        }
      }
      #dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 5px); /* Position below the mobile menu button */
        left: 0;
        width: 200px; /* Adjust width as needed */
        background: linear-gradient(to bottom, #ffffff, #f0f0f0); /* Gradient background */
        border-radius: 8px;
        z-index: 1000; /* Ensure dropdown is above other content */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add box shadow */
      }
      
      @media (min-width: 768px) {
        #dropdown-menu {
          top: 100%; /* Reset top position for larger screens */
          width: auto; /* Reset width for larger screens */
          box-shadow: none; /* Reset box shadow for larger screens */
        }
      }
      
      #dropdown-menu.active {
        display: block;
      }