﻿/* ── Breaker Section ── */
.breaker-overlay { background: linear-gradient(180deg, rgba(0, 78, 154, 0) 0%, rgba(0, 21, 55, 0.5) 100%); justify-content: flex-start; }
.breaker-overlay.bottom { justify-content: flex-end; }

.breaker-overlap { right: 0; top: 0; height: 50%; width: 1000%; left: -200%; z-index: -1; }
.breaker-overlap.bottom { top: auto; bottom: 0; }

.breaker-enviro .breaker-wrapper { background: var(--Secondary); }
.breaker-careers .breaker-wrapper { background: var(--Foreground); }

.breaker-section.no_image{min-height: 100%; background-color: var(--White);}
.breaker-section.no_image .breaker-overlay{position: relative; background: var(--White);}


@media only screen and (min-width: 1200px) {
 .breaker-content {flex: 0 0 800px;}


}

@media only screen and (min-width: 1024px) {
    .breaker-section { min-height: 720px; }
    .breaker-overlap { min-height: 85px; }
    .breaker-wrapper { padding: 40px 40px 40px 80px; gap: 24px; justify-content: space-between; }
    h2.breaker-title { margin-bottom: 0; }
    .breaker-content { gap: 4px; }
    .breaker-icon { flex: 0 0 80px; min-height: 80px; }
    .breaker-icon img { max-width: 40px; }
    picture.breaker-thumb img { min-height: 720px; }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .breaker-section { min-height: 520px; }
    .breaker-overlap { min-height: 60px; }

    .breaker-wrapper { padding: 28px 32px; gap: 20px; justify-content: space-between; }
    h2.breaker-title { margin-bottom: 0; }
    .breaker-content { gap: 4px; }
    .breaker-icon { flex: 0 0 64px; min-height: 64px; }
    .breaker-icon img { max-width: 32px; }
    picture.breaker-thumb img { min-height: 520px; }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .breaker-section { min-height: 600px; }
    .breaker-overlap { min-height: 115px; }

    .breaker-wrapper { flex-direction: column; align-items: flex-start; position: relative; padding: 26px; gap: 20px; max-width: 100%; border-radius: 20px; }
    h2.breaker-title { font-size: 22px; line-height: 26px; margin-bottom: 11px; padding-right: 60px; min-height: 52px;}
    .breaker-desc { font-size: 14px; line-height: 21px; }
    .breaker-content { gap: 8px; flex: none; width: 100%; }
    .breaker-icon { position: absolute; top: 26px; right: 26px; flex: none; width: 52px; min-height: 52px; }
    .breaker-icon img { max-width: 32px; }
    .breaker-section .container { padding: 0 20px; }
    picture.breaker-thumb img { min-height: 600px; }
}
