body {
      background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
      color: #f1f1f1;
      font-family: 'Segoe UI', sans-serif;
      line-height: 1.8;
    }

    .about-container {
      padding: 60px 20px;
    }

    .about-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .about-header img {
      width: 80px;
      margin-bottom: 15px;
    }

    .about-header h1 {
      font-size: 2.5rem;
      color: #ffc107;
    }

    .about-header h5 {
      font-weight: 300;
      color: #ddd;
    }

    .section-title {
      color: #ffca28;
      margin-top: 40px;
      font-size: 1.5rem;
      border-bottom: 2px solid #ffca28;
      display: inline-block;
      padding-bottom: 5px;
    }

    .footer {
      background-color: #111;
      color: #bbb;
      text-align: center;
      padding: 15px 10px;
      font-size: 14px;
      border-top: 1px solid #444;
    }

    .footer a {
      color: #ffca28;
      text-decoration: none;
      margin: 0 10px;
    }

    .footer a:hover {
      text-decoration: underline;
    }

    .fade-in {
      animation: fadeIn 1.5s ease-in-out;
    }
    .hover1 a.text-light:hover {
      color: #ffc107 !important;
    }
    .hover1 a {
      color: #ffffff;
      text-decoration: none;
      position: relative;
      transition: color 0.3s ease;
    }

.hover1 a:hover {
  color: #ffc107; /* Bootstrap's yellow color */
}
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }