body {
      font-family: 'Segoe UI', sans-serif;

    }


    .top-bar {
      background: #3c5677;
      color: #fff;
      font-size: 14px;
      padding: 5px 0;
    }
    .top-bar a {
      color: #fff;
      text-decoration: none;
      margin-left: 10px;
    }
    .navbar-brand {
      font-weight: bold;
      font-size: 22px;
      color: #3c5677 !important;
    }


    .hero-edu
    {
      background: linear-gradient(0deg,#4d8876,#082014);      
    }

    
    .hero-edu h1 {
      font-size: 3rem;

      font-weight: 100;
    }

    .hero-edu p {
      font-size: 1.25rem;
      font-weight: 100;
      margin-top: 15px;
    }

    .hero-edu .btn {
      margin-top: 25px;
      font-size: 1.2rem;
      padding: 12px 30px;
      border-radius: 30px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .hero-edu h1 { font-size: 2.2rem; }
      .hero-edu p { font-size: 1rem; }
    }

     .btn-courses
    {
      background-color: rgb(172, 255, 113)!important;
    }

    .btn-courses:hover{
     color: green; 
     transition: transform 0.3s ease;
    }



  .btn-animate {
  display: inline-block;
  font-size: clamp(14px, 2vw, 20px); /* auto scale text */
  padding: 10px 20px;
  border-radius: 30px;
  animation: pulse 2.5s infinite;
  transition: transform 0.3s ease;
}

.btn-animate:hover {
  transform: scale(3.1); /* hover zoom effect */
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(212, 250, 107, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 20px 15px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}



.course-card {
  background: #fff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.course-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.course-description {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.course-btn {
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 30px;
  padding: 8px 18px;
}

.social-icons a {
  color: #ffffff;  /* Default icon color (white) */
  font-size: 1.0rem; /* Size of the icons */
  margin: 0 10px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #0d6efd; /* Hover color (Bootstrap primary blue) */
}