/* Explain: Layout structure, containers, and responsive utilities. - */
.section-pad {
    padding-top: clamp(4rem, 8vw, 6rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
}

.container-custom {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.hero-bg {
    background-color: var(--background-color);
    background-image: radial-gradient(circle at 100% 0%, rgba(15, 118, 110, 0.08) 0%, transparent 40%),
                      radial-gradient(circle at 0% 100%, rgba(30, 58, 138, 0.08) 0%, transparent 40%);
}