/* ── Sectors Intro Section ── */

.sectors-intro-eyebrow { color: var(--Primary); letter-spacing: 1.2px; margin-bottom: 21px; }
h2.sectors-intro-heading { color: var(--Foreground); }
.sectors-intro-card { border: 1px solid rgba(0, 129, 255, 0.15); }

.sectors-tile-overlay-content > p { opacity: 0.85; }
.sectors-tile-rule { background: var(--Tertiary); }
.sectors-tile-icon { background: var(--Foreground); color: var(--Secondary); }
.sectors-tile .sectors-icon-normal > img{transition: var(--b-transition);}
.sectors-tile:hover:has(.sectors-icon-hover) .sectors-icon-normal > img{opacity: 0;}
.sectors-icon-hover{top: 0; left: 0; opacity: 0; transition: var(--b-transition);}
.sectors-tile:hover .sectors-icon-hover{opacity: 1; transform: scale(1.15);}
.sectors-tile-icon img{width: 40px; height: 40px; object-fit: contain;}
.sectors-tile-ring { border: 2px solid rgba(255, 255, 255, 0.25); }

@media only screen and (min-width: 1024px) {
    .sectors-intro-bg { border-radius: 0 1440px 1440px 0; }
    h2.sectors-intro-heading { line-height: 41.6px; }
    .sectors-intro-main { padding: 80px 0; }
    .sectors-intro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .sectors-intro-card { gap: 24px; padding: 48px; 
        /* min-height: 560px;  */
    }
    .sectors-intro-desc { max-width: 344px; }
    /* .sectors-tile-media { min-height: 560px; } */
    .sectors-tile-overlay { background: rgba(0, 44, 79, 0.75); top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; transform: translate(-85%, 85%); transition: transform 0.5s ease-in-out; }
    .sectors-tile:hover .sectors-tile-overlay { transform: translate(0, 0); }
    .sectors-tile-media img {border-radius: 50%; transition: transform 0.5s ease-in-out; }
    .sectors-tile:hover .sectors-tile-media img { transform: scale(1.15); }
    .sectors-tile-circle { height: 100%; }
    .sectors-tile-icon { bottom: 16px; left: 16px; outline: 1px solid transparent; outline-offset: 0; transition: color 0.5s ease-in-out, outline-color 0.5s ease-in-out, outline-offset 0.5s ease-in-out; }
    .sectors-tile-ring { bottom: 16px; left: 16px; transition: border-color 0.5s ease-in-out; }
    .sectors-tile:hover .sectors-tile-icon { background: radial-gradient(circle at center, var(--Foreground) 50%, var(--Primary) 125%); color: var(--Tertiary); outline-color: var(--Tertiary); outline-offset: 8px; }
    .sectors-tile .sectors-tile-icon i{transition: var(--b-transition); }
    .sectors-tile:hover .sectors-tile-icon i{color: var(--Tertiary); transform: scale(1.15);}
    .sectors-tile:hover .sectors-tile-icon svg path {transform: scale(1.075); fill: var(--Tertiary); }
    .sectors-tile:hover .sectors-tile-ring { border-color: var(--White); }
    .sectors-tile-overlay-content { gap: 16px; max-width: 315px; }
    .sectors-tile-overlay-content h3:hover{color: var(--Secondary);}
    .sectors-tile-rule { min-height: 1px; width: 80px; }
    .sectors-tile-icon { width: 120px; min-height: 120px; }
    .sectors-tile-ring { width: 120px; min-height: 120px; }
    .sectors-tile-below { display: none; }
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
    .sectors-intro-main { padding: 64px 0; }
    .sectors-intro-bg { border-radius: 0 48px 48px 0; }
    .sectors-intro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
    .sectors-intro-card { padding: 24px; min-height: 340px; max-width: 340px; max-height: 340px; margin: 0 auto; }
    h2.sectors-intro-heading { font-size: 24px; line-height: 31px; }
    .sectors-tile { display: flex; flex-direction: column; align-items: center; gap: 24px; }
    .sectors-tile-circle { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
    .sectors-tile-media { min-height: 336px; width: 100%; }
    .sectors-tile-overlay { display: none; }
    .sectors-tile-icon { top: 50%; left: 50%; bottom: auto; transform: translate(-50%, -50%); width: 88px; min-height: 88px; background: var(--White); }
    .sectors-tile-ring { top: 50%; left: 50%; bottom: auto; transform: translate(-50%, -50%); width: 104px; min-height: 104px; }
    .sectors-tile-below { gap: 12px; padding: 0 12px; color: var(--Foreground); }
    h2.sectors-tile-name { color: var(--Foreground); }
    h2.sectors-tile-name:hover{color: var(--Secondary); }
    .sectors-tile-below .sectors-tile-rule { min-height: 1px; width: 80px; }
}
@media only screen and (max-width: 767px) and (min-width: 0px) {
    .sectors-intro-main { padding: 56px 0 56px; }
    .sectors-intro-eyebrow { margin-bottom: 16px; font-weight: 400; }
    .sectors-intro-bg { border-radius: 0 48px 48px 0; }
    .sectors-intro-grid { display: flex; flex-direction: column; flex-wrap: wrap; gap: 26px; }
    h2.sectors-intro-heading { font-size: 20px; line-height: 26px; font-weight: 400; }
    .sectors-intro-card { padding: 24px; min-height: 338px; max-width: 338px; margin-left: auto; margin-right: auto; }
    .sectors-tile { display: flex; flex-direction: column; align-items: center; gap: 32px; }
    .sectors-tile-circle { width: 100%; max-width: 338px; margin-left: auto; margin-right: auto; }
    .sectors-tile-media { min-height: 336px; width: 100%; }
    .sectors-tile-overlay { display: none; }
    .sectors-tile-icon { top: 50%; left: 50%; bottom: auto; transform: translate(-50%, -50%); width: 88px; min-height: 88px; background: var(--White); }
    .sectors-tile-ring { top: 50%; left: 50%; bottom: auto; transform: translate(-50%, -50%); width: 104px; min-height: 104px; border: 1px solid var(--Tertiary); z-index: 1; }
    .sectors-tile-below { gap: 12px; padding: 0 12px; color: var(--Foreground); }
    h2.sectors-tile-name { color: var(--Foreground); }
    h2.sectors-tile-name:hover{color: var(--Secondary); }
    .sectors-tile-below .sectors-tile-rule { min-height: 1px; width: 80px; }
}