:root {
    --primary-color: #1e3a8a;
    --text-color: #333;
    --light-blue: #e5edff;
    --transition: all 0.3s ease;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    overflow-x: hidden;
}

.hero {
    background: linear-gradient(rgba(30, 58, 138, 0.9), rgba(30, 58, 138, 0.9)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80");
    background-size: cover;
    background-position: center;
    color: white;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
    position: relative;
    width: 100%;
}

.breadcrumb {
    margin-bottom: 2rem;
}

.breadcrumb a {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: var(--transition);
}

.breadcrumb a:hover {
    opacity: 1;
}

.breadcrumb span {
    margin: 0 0.5rem;
    opacity: 0.8;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
}
.carousel-caption {
  transition: all 0.4s ease;
}

.carousel-item img {
  filter: brightness(0.9);
  transition: transform 0.4s ease;
}

.carousel-item:hover img {
  transform: scale(1.02);
}