body {
      scroll-behavior: smooth;
      font-family: 'Segoe UI', sans-serif;
    }

    .navbar {
      background-color: #fff;
    }

    .navbar-brand,
    .navbar-nav .nav-link {
      color: #333 !important;
    }

    .hero {
      background: url('../images/banner.jpg') no-repeat center center;
      background-size: cover;
      color: white;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
    }

    .hero::after {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
      z-index: 1;
    }

    .hero-content {
      z-index: 2;
      position: relative;
      padding: 0 20px;
    }

    footer {
      background: #222;
      color: #ccc;
      padding: 20px 0;
      text-align: center;
    }
/* Navbar gradient background */
    .navbar-custom {
      background: linear-gradient(90deg, #4e54c8, #8f94fb);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    /* Brand styling */
    .navbar-brand {
      font-weight: 700;
      color: #fff;
      font-size: 1.6rem;
      letter-spacing: 1.2px;
      transition: color 0.3s ease;
    }
    .navbar-brand:hover {
      color: #ffd700;
    }
    /* Nav links */
    .navbar-nav .nav-link {
      color: #e0e0ff;
      font-weight: 600;
      text-transform: uppercase;
      padding: 0.8rem 1.1rem;
      position: relative;
      transition: color 0.3s ease;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      color: #ffd700;
    }
    /* Underline animation */
    .navbar-nav .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      background: #ffd700;
      left: 50%;
      bottom: 8px;
      transition: width 0.3s ease, left 0.3s ease;
      border-radius: 2px;
    }
    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link.active::after {
      width: 100%;
      left: 0;
    }
    /* Dropdown styling */
    .dropdown-menu {
      background: #575fcf;
      border: none;
      border-radius: 0.4rem;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      min-width: 180px;
    }
    .dropdown-menu .dropdown-item {
      color: #e0e0ff;
      font-weight: 600;
      transition: background-color 0.3s ease, color 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dropdown-menu .dropdown-item:hover {
      background: #ffd700;
      color: #3b2e00;
      border-radius: 0.3rem;
    }
    /* Navbar toggler */
    .navbar-toggler {
      border: none;
      outline: none;
    }
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
      transition: transform 0.3s ease;
    }
    .navbar-toggler.collapsed .navbar-toggler-icon {
      transform: rotate(0deg);
    }
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
      transform: rotate(90deg);
    }

.page-header {
      background:  linear-gradient(rgba(10, 20, 60, 0.85), rgba(15, 30, 80, 0.85)),
  url('https://source.unsplash.com/1600x500/?education') center/cover no-repeat;;
      color: #fff;
      padding: 100px 0 60px;
      text-align: center;
    }

    .page-header h1 {
      font-size: 3rem;
      font-weight: 700;
    }

    .breadcrumb {
      background: transparent;
      justify-content: center;
    }

    .inner-content {
      padding: 60px 0;
    }

    .inner-content h2 {
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
    }

    .inner-content p {
      font-size: 1.05rem;
      color: #555;
      line-height: 1.8;
    }
h4{ color: #2a4d71; font-weight: 700;}
.bg-gradient-primary {
  background: linear-gradient(45deg, #1e3c72, #2a5298);
  color: #fff;
}

.bg-gradient-success {
  background: linear-gradient(45deg, #11998e, #38ef7d);
  color: #fff;
}

.bg-gradient-danger {
  background: linear-gradient(45deg, #cb2d3e, #ef473a);
  color: #fff;
}

.list-group-item {
  background-color: transparent;
  border: none;
  padding-left: 0;
}
.icon-circle {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.hover-effect:hover {
  transform: translateY(-5px);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

#gallery img {
    transition: transform 0.3s ease-in-out;
  }
  #gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }
.contact-box {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      padding: 40px;
    }

    .contact-info i {
      font-size: 1.3rem;
      color: #0d6efd;
      margin-right: 10px;
    }

    .form-control:focus {
      border-color: #0d6efd;
      box-shadow: none;
    }

    .map-responsive {
      overflow: hidden;
      padding-bottom: 56.25%;
      position: relative;
      height: 0;
      border-radius: 10px;
      margin-top: 40px;
    }

    .map-responsive iframe {
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      position: absolute;
      border: 0;
    }

    .btn-primary {
      background-color: #0d6efd;
      border: none;
    }

    .btn-primary:hover {
      background-color: #0a58ca;
    }

/* Container/card */
.iq-mtb-5 {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(25, 30, 40, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
  height: 100%; /* makes cards equal height inside Bootstrap columns */
  display: flex;
  flex-direction: column;
}

/* Lift effect on hover (desktop) */
.iq-mtb-5:hover,
.iq-mtb-5:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(25, 30, 40, 0.12);
}

/* Image - responsive and rounded */
.img-fluid.wd-full,
.iq-mtb-5 img.img-fluid.wd-full {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 14px;
}

/* Title */
.iq-mtb-5 h5 {
  margin: 6px 0 8px;
  font-size: 1.125rem; /* 18px */
  line-height: 1.25;
  color: #1f2937; /* dark slate */
  font-weight: 700;
}

/* Course list paragraph */
.iq-mtb-5 p {
  margin: 0 0 14px;
  color: #4b5563; /* subtle gray */
  font-size: 0.95rem;
}

/* Read more button wrapper */
.read-more {
  margin-top: auto; /* push button to bottom */
}

/* Read More link style */
.read-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #10b981 0%, #059669 100%); /* green gradient */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

/* Icon spacing */
.read-more a i {
  font-size: 0.95rem;
}

/* Button hover/focus */
.read-more a:hover,
.read-more a:focus {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(5, 150, 105, 0.18);
  opacity: 0.98;
  outline: none;
}

/* Small screens adjustments */
@media (max-width: 767.98px) {
  .iq-mtb-5 {
    padding: 14px;
    border-radius: 10px;
  }

  .iq-mtb-5 h5 {
    font-size: 1.05rem;
  }

  .read-more a {
    width: 100%;
    justify-content: center;
  }
}

/* Optional utility to ensure full-width images if .wd-full may be missing */
.wd-full { width: 100% !important; }

/* Accessibility: visible focus ring for keyboard users */
.read-more a:focus {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18), 0 6px 18px rgba(16, 185, 129, 0.12);
}