body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif;
}

.hero-bg {
    /* Smooth gradient overlay over the background image to ensure text readability */
    background: linear-gradient(105deg, #eaf4f6 0%, #eaf4f6 45%, rgba(234, 244, 246, 0.4) 65%, rgba(234, 244, 246, 0) 100%),
        url('/assets/imgs/home/railhaul-logistics-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bottom-overlay {
    /* Gradient to fade out the bottom for the trusted logos */
    background: linear-gradient(to top, rgba(22, 74, 85, 0.85) 0%, rgba(22, 74, 85, 0) 100%);
}

/* Abstract arches behind the train (optional detail inspired by reference) */
.abstract-arches {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 50vw;
    height: 50vw;
    border: 15px solid rgba(5, 32, 66, 0.1);
    border-radius: 50%;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
    z-index: 0;
    pointer-events: none;
}

.abstract-arches::before {
    content: '';
    position: absolute;
    top: -35px;
    left: -35px;
    right: 15px;
    bottom: 15px;
    border: 15px solid rgba(5, 32, 66, 0.15);
    border-radius: 50%;
    border-bottom: none;
    border-right: none;
}

.abstract-arches::after {
    content: '';
    position: absolute;
    top: -70px;
    left: -70px;
    right: 30px;
    bottom: 30px;
    border: 15px solid rgba(5, 32, 66, 0.2);
    border-radius: 50%;
    border-bottom: none;
    border-right: none;
}