.karla {
        font-family: "Karla", sans-serif;
        font-optical-sizing : auto;
        font-weight: 600;
        font-style: normal;
    }
    body{
        font-family: "Karla";
    }
    .hero-section {
      background: linear-gradient(to right, #f8f9fa, #e9f1ff);
      padding: 60px 0;
    }
    .hero-image {
      max-width: 100%;
      height: auto;
    }
    .btn-emergency {
      border: 1px solid #8BC34A;
      color: #4CAF50;
      font-weight: 600;
    }
    .btn-appointment {
      background-color: #3f51b5;
      color: white;
    }
    .carousel-bg {
      background: url('https://img.freepik.com/free-photo/group-doctors-standing-together-hospital-corridor_107420-84750.jpg') no-repeat center center;
      background-size: cover;
      background-attachment: fixed;
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      color: white;
    }

    .carousel-overlay {
      background-color: rgba(0, 0, 0, 0.6); /* dark overlay */
      width: 100%;
      padding: 60px 20px;
    }

    .carousel-indicators [data-bs-target] {
      background-color: white;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      opacity: 0.5;
      transition: opacity 0.3s;
    }

    .carousel-indicators .active {
      opacity: 1;
    }

    .feature-box {
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .feature-box:hover {
        background-color: #4577d6; /* light green */
        color:white;
    }

    .navbar-nav{
        font-size: 16px;
    }

    @media (min-width: 768px) {
      .carousel-content {
        max-width: 700px;
      }
    }