.esi-mission { --navy:#06182b; --navy2:#0b2944; --gold:#d8a33e; --gold2:#f0c56f; --ink:#071a2d; --muted:#657687; --line:#dce4ea; position:relative; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow:hidden; color:var(--ink); background:#ffffff; font-family: IRANSans, IRANSansWeb, Tahoma, sans-serif; } .esi-mission, .esi-mission * { box-sizing:border-box; } .esi-mission-container { width:min(1180px,88%); margin:0 auto; } .esi-mission-eyebrow, .esi-mission-section-label { display:flex; align-items:center; gap:12px; color:var(--gold); font-size:13px; font-weight:800; } .esi-mission-eyebrow::before, .esi-mission-section-label::before { content:""; width:32px; height:2px; flex:0 0 32px; background:currentColor; } .esi-mission-hero { position:relative; min-height:600px; display:flex; align-items:center; overflow:hidden; color:#ffffff; background: radial-gradient( circle at 10% 30%, rgba(216,163,62,.18), transparent 31% ), linear-gradient( 135deg, #061321, #0a2742 ); } .esi-mission-hero::before { content:""; position:absolute; inset:0; opacity:.055; background-image: linear-gradient( rgba(255,255,255,.6) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.6) 1px, transparent 1px ); background-size:58px 58px; } .esi-mission-hero__rings { position:absolute; left:-180px; top:50%; width:540px; height:540px; border: 1px solid rgba(216,163,62,.24); border-radius:50%; transform: translateY(-50%); box-shadow: 0 0 0 58px rgba(216,163,62,.035), 0 0 0 116px rgba(216,163,62,.025); } .esi-mission-hero__inner { position:relative; z-index:2; display:grid; grid-template-columns: 1.08fr .92fr; align-items:center; gap:80px; padding:86px 0; } .esi-mission-hero__content h1 { margin: 17px 0 19px; color:#ffffff; font-size: clamp( 31px, 3vw, 42px ); font-weight:900; line-height:1.6; } .esi-mission-hero__content p { max-width:680px; margin:0; color: rgba( 255, 255, 255, .77 ); font-size:15px; line-height:2.15; } .esi-mission-hero__principles { display:flex; flex-wrap:wrap; gap:9px; margin-top:27px; } .esi-mission-hero__principles span { display:inline-flex; align-items:center; min-height:34px; padding: 7px 13px; color: rgba( 255, 255, 255, .72 ); border: 1px solid rgba( 255, 255, 255, .14 ); border-radius:30px; background: rgba( 255, 255, 255, .035 ); font-size:10px; font-weight:700; } .esi-mission-hero__principles span::before { content:""; width:5px; height:5px; margin-left:7px; border-radius:50%; background: var(--gold); } .esi-mission-hero__visual { position:relative; width:100%; max-width:470px; height:360px; justify-self:center; overflow:hidden; border: 1px solid rgba( 255, 255, 255, .13 ); border-radius:22px; background: radial-gradient( circle at 50% 50%, rgba(216,163,62,.075), transparent 38% ), linear-gradient( 145deg, rgba(255,255,255,.045), rgba(255,255,255,.015) ); box-shadow: 0 30px 75px rgba( 0, 0, 0, .22 ); backdrop-filter: blur(8px); } .esi-mission-hero__visual::before { content:""; position:absolute; top:0; right:36px; width:92px; height:3px; background: linear-gradient( 90deg, transparent, var(--gold) ); } .esi-mission-hero__visual::after { content:""; position:absolute; left:-70px; bottom:-100px; width:260px; height:260px; border-radius:50%; background: rgba( 216, 163, 62, .035 ); } .esi-mission-visual__orbit { position:absolute; top:50%; left:50%; border-radius:50%; transform: translate(-50%,-50%); pointer-events:none; } .esi-mission-visual__orbit--outer { width:295px; height:295px; border: 1px solid rgba( 255, 255, 255, .10 ); } .esi-mission-visual__orbit--inner { width:205px; height:205px; border: 1px dashed rgba( 216, 163, 62, .27 ); } .esi-mission-visual__paths { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; } .esi-mission-visual__paths path { fill:none; stroke: rgba( 216, 163, 62, .62 ); stroke-width:1.35; stroke-dasharray: 4 4; } .esi-mission-visual__node { position:absolute; z-index:4; display:flex; width:126px; min-height:82px; flex-direction:column; justify-content:center; padding: 13px 15px; border: 1px solid rgba( 216, 163, 62, .34 ); border-radius:13px; background: rgba( 7, 31, 53, .93 ); box-shadow: 0 13px 32px rgba( 0, 0, 0, .17 ); } .esi-mission-visual__node-number { margin-bottom:4px; color: var(--gold); font-size:9px; font-weight:900; } .esi-mission-visual__node strong { color:#ffffff; font-size:13px; font-weight:900; } .esi-mission-visual__node small { margin-top:4px; color: rgba( 255, 255, 255, .48 ); font-size:8px; } .esi-mission-visual__node--knowledge { top:38px; right:31px; } .esi-mission-visual__node--decision { left:25px; bottom:39px; } .esi-mission-visual__node--impact { right:35px; bottom:31px; } .esi-mission-visual__center { position:absolute; z-index:5; top:50%; left:50%; display:flex; width:118px; height:118px; flex-direction:column; align-items:center; justify-content:center; text-align:center; border: 1px solid rgba( 216, 163, 62, .72 ); border-radius:50%; background: radial-gradient( circle, #0d3455, #09253f ); transform: translate(-50%,-50%); box-shadow: 0 0 0 9px rgba( 216, 163, 62, .04 ), 0 18px 38px rgba( 0, 0, 0, .22 ); } .esi-mission-visual__center span { color: var(--gold); font-size:10px; font-weight:800; } .esi-mission-visual__center strong { margin: 2px 0 4px; color:#ffffff; font-size:17px; font-weight:900; } .esi-mission-visual__center small { color: rgba( 255, 255, 255, .43 ); font-size:8px; } .esi-mission-visual__caption { position:absolute; z-index:4; top:25px; left:28px; display:flex; align-items:center; gap:8px; } .esi-mission-visual__caption span { width:25px; height:1px; background: var(--gold); } .esi-mission-visual__caption p { margin:0; color: rgba( 255, 255, 255, .48 ); font-size:8px; } .esi-mission-main { padding:105px 0; background:#ffffff; } .esi-mission-main__grid { display:grid; grid-template-columns: .30fr 1.70fr; gap:75px; align-items:start; } .esi-mission-index { display:flex; flex-direction:column; align-items:flex-start; } .esi-mission-index > span { color: var(--gold); font-size:48px; font-weight:900; line-height:1; } .esi-mission-index strong { margin-top:15px; color: var(--ink); font-size:20px; font-weight:900; } .esi-mission-index small { margin-top:5px; color:#9aa6b0; font-size:9px; letter-spacing:3px; } .esi-mission-content { max-width:835px; } .esi-mission-content h2, .esi-mission-heading h2 { margin: 13px 0 20px; color: var(--ink); font-size: clamp( 23px, 2.1vw, 30px ); font-weight:900; line-height:1.65; } .esi-mission-content p { margin: 0 0 17px; color:#526474; font-size:14px; line-height:2.2; } .esi-mission-content .esi-mission-lead { color: var(--ink); font-size:16px; font-weight:700; line-height:2.15; } .esi-mission-heading { max-width:790px; margin: 0 auto 46px; text-align:center; } .esi-mission-heading .esi-mission-section-label { justify-content:center; } .esi-mission-heading > p { margin:0; color: var(--muted); font-size:14px; line-height:2; } .esi-mission-pillars { padding:95px 0; background:#f3f6f8; } .esi-mission-pillars__grid { display:grid; grid-template-columns: repeat(4,1fr); gap:17px; } .esi-mission-pillars__grid article { position:relative; min-height:310px; padding: 28px 25px; overflow:hidden; border: 1px solid var(--line); border-radius:14px; background:#ffffff; box-shadow: 0 15px 40px rgba( 7, 26, 45, .045 ); transition: .27s ease; } .esi-mission-pillars__grid article::before { content:""; position:absolute; top:0; right:0; width:100%; height:4px; background: var(--navy); } .esi-mission-pillars__grid article:hover { transform: translateY(-6px); border-color: rgba( 216, 163, 62, .65 ); box-shadow: 0 22px 50px rgba( 7, 26, 45, .09 ); } .esi-mission-card-number { position:absolute; top:24px; left:24px; color: rgba( 7, 26, 45, .13 ); font-size:26px; font-weight:900; } .esi-mission-card-icon { display:flex; width:58px; height:58px; align-items:center; justify-content:center; margin: 5px 0 26px; color: var(--gold); border-radius:13px; background: var(--navy); } .esi-mission-card-icon svg { width:32px; height:32px; fill:none; stroke: currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .esi-mission-pillars__grid h3 { margin: 0 0 11px; color: var(--ink); font-size:17px; font-weight:900; line-height:1.7; } .esi-mission-pillars__grid p { margin:0; color:#637484; font-size:13px; line-height:2; } @media(max-width:980px) { .esi-mission-hero__inner, .esi-mission-main__grid { grid-template-columns:1fr; } .esi-mission-hero__visual { display:none; } .esi-mission-main__grid { gap:35px; } .esi-mission-pillars__grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:650px) { .esi-mission-container { width: min( 100% - 38px, 1180px ); } .esi-mission-hero { min-height:510px; } .esi-mission-hero__inner { padding:68px 0; } .esi-mission-hero__content h1 { font-size:27px; line-height:1.55; } .esi-mission-hero__content p { font-size:14px; } .esi-mission-hero__principles { margin-top:22px; } .esi-mission-main, .esi-mission-pillars { padding:70px 0; } .esi-mission-index > span { font-size:38px; } .esi-mission-heading { text-align:right; } .esi-mission-heading .esi-mission-section-label { justify-content:flex-start; } .esi-mission-pillars__grid { grid-template-columns:1fr; } }