/* ===========================================
   SECTORS B SECTION  (5-column circular grid)
   =========================================== */

.sectors-a-eyebrow  { color: var(--Primary); letter-spacing: 1.2px; }
.sectors-a-intro-heading { color: var(--Foreground); }

/* ── Column ── */
.sectors-a-col { overflow: hidden; }

/* ── Circular image + overlapping icon ── */
.sectors-a-img-wrap { overflow: hidden; }
.sectors-a-img-wrap img { transition: transform 0.5s ease-in-out; }
.sectors-a-col:hover .sectors-a-img-wrap picture img { transform: scale(1.08); }
.sectors-a-icon-circle{background: var(--White); color: var(--Secondary); flex-shrink: 0; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); outline: 8px solid transparent; transition: var(--b-transition-5);}
.sectors-a-col:hover .sectors-a-icon-circle{outline: 8px solid rgba(0, 129, 255, 0.50);}
.sectors-a-icon-circle figure.object-fit{width: 40px; height: 40px; }
.sectors-a-icon-circle figure.object-fit img{object-fit: contain; vertical-align: initial;}

/* ── Vertical connector line ── */
.sectors-a-connector{width: 1px; background: rgba(0, 129, 255, 0.5); padding: 20px 0; z-index: 1; }

/* ── Text content ── */
.sectors-a-content { border-top: 1px solid rgba(0, 129, 255, 0.5); width: 100%; }
.sectors-a-title { color: var(--Foreground); margin-bottom: 0; font-size: 24px; line-height: 120%; }
.sectors-a-title a{ color: var(--Foreground);}
.sectors-a-col-description { color: var(--Foreground-Muted); }

.sectors-a-connector-inner{width: 1px; background: rgba(0, 129, 255, 0.5); height: calc(100% - 50%); position: absolute; bottom: 0; left: calc(50% - 1px); transform: translateX(-50%); }


h3.sectors-a-title a { color: var(--Foreground); text-decoration: none; }
h3.sectors-a-title a:hover { color: var(--Primary); }

@media only screen and (min-width: 1024px) {
    .sectors-a-section { padding: 80px 0; }
    .sectors-a-intro { gap: 24px; margin-bottom: 80px; }
    .sectors-a-intro-heading { max-width: 886px; }
    .sectors-a-grid{gap: 40px; align-items: flex-start; justify-content: center;}
    .sectors-a-col {width: calc(25% - 30px); max-width: 296px; gap: 0; }
    .sectors-a-img-wrap { width: 100%; aspect-ratio: 1; border-radius: 270px; }
    .sectors-a-icon-circle { width: 80px; height: 80px; font-size: 40px; border-radius: 40px; }
    .sectors-a-content { padding-top: 20px; gap: 20px; }
    h3.sectors-a-title {margin-top: 10px;}

}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .sectors-a-section{padding: 64px 0; }
    .sectors-a-intro{gap: 24px; margin-bottom: 64px; }
    .sectors-a-grid{gap: 60px; flex-wrap: wrap; justify-content: center; }
    .sectors-a-col{flex: 0 0 calc(50% - 14px); max-width: 280px; }
    .sectors-a-img-wrap { width: 100%; aspect-ratio: 1; border-radius: 200px; }
    .sectors-a-icon-circle { width: 64px; height: 64px; font-size: 28px; border-radius: 32px; }
    .sectors-a-content { padding-top: 16px; gap: 14px; }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .sectors-a-section{padding: 56px 0; }
    .sectors-a-intro{gap: 24px; margin-bottom: 56px;}
    .sectors-a-intro-heading{font-size: 24px; line-height: 130%; letter-spacing: normal; }
    .sectors-a-grid{display: block; width: 100%; padding: 0 21px;}
    .sectors-a-col{max-width: 100%; width: 100%; margin-bottom: 26px;}
    .sectors-a-col:last-child{margin-bottom: 0;}
    .sectors-a-img-wrap{width: 100%;  border-radius: 50%; }
    .sectors-a-icon-circle{width: 80px; height: 80px; font-size: 40px; border-radius: 40px; }
    .sectors-a-connector{padding: 20px 0; }
    .sectors-a-content{padding-top: 24px; gap: 16px;}
    .sectors-a-col-description{font-size: 16px; line-height: 24px; }
}
