.hero {
    background: center/cover no-repeat;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
  }
  
  .hero-text h1 {
    font-size: 3rem;
    font-weight: bold;
    color:#001842;
  }
  
  .hero-text p {
    font-size: 1.2rem;
    color:#001842;
  }

  .card-img-top {
    transition: transform 0.3s ease;
  }
  
  .card:hover .card-img-top {
    transform: scale(1.05);
  }

  .carousel-caption p {
    background: rgba(0, 24, 66, 0.7);
    padding: 10px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
  }

  body {
    background-color: #f5f7fa;
    background-image: 
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><polygon points='100,0 200,100 100,200 0,100' fill='%23e4ecf7' opacity='0.3'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><polygon points='100,0 200,100 100,200 0,100' fill='%23dbe3f5' opacity='0.2'/></svg>");
    background-repeat: no-repeat;
    background-position: top left, bottom right;
    background-size: 200px 200px;
    body {
      font-family: 'Inter', sans-serif;
    }
    
  }

  h1, h2, h3, .btn, .navbar-brand {
    font-weight: 500;
  }
  

  form label {
    color: #001842;
    font-weight: 500;
  }
  form .btn-primary {
    background-color: #001842;
    border: none;
  }
  form .btn-primary:hover {
    background-color: #003366;
  }