/* Explain: Layout utilities for sections, hero banners, and timelines. */
.arc-section {
    padding: 4.5rem 0;
}

@media (min-width: 768px) {
    .arc-section {
        padding: 6rem 0;
    }
}

.arc-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--primary-color);
    background-image: linear-gradient(110deg, rgba(8, 45, 80, 0.96) 0%, rgba(14, 76, 139, 0.88) 48%, rgba(14, 76, 139, 0.58) 100%), url('https://files.cdn-files-a.com/uploads/12469846/normal_gi-6ad2fb2c7e7c3.jpg?format=avif');
    background-size: cover;
    background-position: center;
}

.arc-stripe {
    height: 4px;
    width: 4rem;
    border-radius: 999px;
    background: var(--accent-color);
}

.arc-timeline {
    position: relative;
}

.arc-timeline::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--border-color);
}

@media (min-width: 1024px) {
    .arc-timeline::before {
        left: 0;
        right: 0;
        top: 1.5rem;
        bottom: auto;
        height: 1px;
        width: auto;
    }
}