body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f4f5f7;
    }

    .hero {
      background: linear-gradient(rgba(10, 0, 50, 0.6), rgba(0, 0, 50, 0.6)),
      url('../img/img1.png') no-repeat center center;
      background-size: cover;
      color: white;
      padding: 120px 20px;
      text-align: center;
    }

    .hero h1 {
      font-size: 3.5rem;
      font-weight: bold;
    }

    .btn-main {
      background-color: #0d6efd;
      border-radius: 50px;
      padding: 10px 30px;
      color: white;
      font-weight: bold;
    }

    .info-section {
      padding: 60px 0;
    }

    .card-benefit {
      background-color: white;
      border: none;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      border-radius: 1rem;
      padding: 25px;
      transition: transform 0.2s ease-in-out;
    }

    .card-benefit:hover {
      transform: translateY(-5px);
    }

    footer {
      background-color: #e2e3e5;
      padding: 30px 0;
      text-align: center;
    }

    .modal-header {
      background-color: #0d6efd;
      color: white;
    }