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

    body {
      font-family: 'Poppins', 'Comic Sans MS', cursive, sans-serif !important;
      background-color: FBF5DD !important;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .main-content {
      display: flex;
      flex: 1;
      width: 100%;
      align-items: center;
    }

    .image-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      padding: 20px;
    }

    .welcome-text {
      color: #306D29;
      font-style: italic;
      font-size: 2.5rem;
      font-weight: bold;
      letter-spacing: 2px;
      margin-bottom: 10px;
      text-align: center;
    }

    .welcome-text-mobile {
      color: #306D29;
      font-style: italic;
      font-size: 2.5rem;
      font-weight: bold;
      letter-spacing: 2px;
      margin-bottom: 20px;
      text-align: center;
      width: 100%;
    }

    .welcome-image {
      max-width: 100%;
      max-height: 400px;
      height: auto;
      mix-blend-mode: multiply;
      filter: contrast(1) saturate(0.7) brightness(1.2);
    }

    .login-wrapper {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 20px;
    }

    .login-container {
      border-color: #306D29 !important;
      background-color: #E7E1B1 !important;
      margin-right: 100px;
    }

    .login-container h1 {
      letter-spacing: 2px;
      color: #306D29;
      font-size: 2.5rem;
    }

    .form-control {
      border-color: #306D29 !important;
      background-color: rgba(255, 255, 255, 0.8) !important;
      font-size: 0.85rem !important;
      color: #2c2c2c !important;
    }

    .form-control::placeholder {
      font-size: 0.85rem;
      color: #999;
    }

    .form-control:focus {
      border-color: #2c2c2c !important;
      background-color: white !important;
      box-shadow: 0 0 10px rgba(48, 109, 41, 0.2) !important;
      color: #2c2c2c !important;
    }

    .login-btn {
      background-color: #306D29 !important;
      border-color: #306D29 !important;
      text-decoration: none;
    }
    .login-btn a{
      text-decoration: none;
      color: inherit;
    }

    .login-btn:hover {
      background-color: #245620 !important;
      border-color: #245620 !important;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(48, 109, 41, 0.3) !important;
    }

    .divider {
      height: 1px;
      background-color: #306D29;
    }

    .signup-btn {
      border-color: #306D29 !important;
      color: #306D29 !important;
    }

    .signup-btn:hover {
      background-color: #306D29 !important;
      color: #FBF5DD !important;
      border-color: #306D29 !important;
    }



    .scrolling-text {
      display: inline-block;
      animation: scroll-left 15s linear infinite;
      white-space: nowrap;
      letter-spacing: 2px;
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(100vw);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    @media (max-width: 1000px) {
      .main-content {
        flex-direction: column;
      }

      .image-container {
        display: none;
      }

      .welcome-text-mobile {
        display: block !important;
      }

      .login-wrapper {
        justify-content: center;
        align-items: center;
        padding: 20px !important;
        flex-direction: column;
        width: 100%;
      }

      .login-container {
        margin-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      .login-container h1 {
        font-size: 2rem;
      }

      .scrolling-text {
        animation: scroll-left 12s linear infinite;
      }
    }

    @media (max-width: 768px) {
      .login-container h1 {
        font-size: 1.75rem;
      }
    }

    @media (max-width: 480px) {
      .login-container h1 {
        font-size: 1.5rem;
      }

      .scrolling-text {
        font-size: 0.8rem;
      }
    }