html { scroll-behavior: smooth; }

    /* Hero */
    .hero {
      background: linear-gradient(to right, #0077b6, #00b4d8);
      color: white;
      padding: 80px 0;
    }

    .login-box {
      background: white;
      color: black;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    /* Cards */
    .card {
      border: none;
      border-radius: 12px;
    }

    .card:hover {
      transform: translateY(-8px);
      transition: 0.3s;
    }

    /* About Section */
    .about-section {
      background: #f8f9fa;
      position: relative;
    }

    .about-section::before {
      content: "";
      position: absolute;
      right: 0;
      top: 20%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(0,123,255,0.2) 1px, transparent 1px);
      background-size: 15px 15px;
      opacity: 0.5;
    }

    .about-content p {
      font-size: 15px;
      line-height: 1.8;
      color: #444;
    }

    .about-content strong {
      color: #007bff;
    }

    .about-section img {
      transition: 0.4s;
    }

    .about-section img:hover {
      transform: scale(1.05);
    }

    footer {
      background: #023e8a;
      color: white;
      padding: 15px;
      text-align: center;
    }