.esi-overview { --navy:#06182b; --navy2:#0b2741; --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:#fff; font-family: IRANSans, IRANSansWeb, Tahoma, sans-serif; } .esi-overview, .esi-overview * { box-sizing:border-box; } .esi-overview a { text-decoration:none!important; } .esi-overview-container { width:min(1180px,88%); margin:0 auto; } .esi-overview-eyebrow, .esi-overview-section-label { display:flex; align-items:center; gap:12px; color:var(--gold); font-size:13px; font-weight:800; } .esi-overview-eyebrow:before, .esi-overview-section-label:before { content:""; width:32px; height:2px; background:currentColor; } .esi-overview-hero { position:relative; min-height:610px; display:flex; align-items:center; overflow:hidden; color:#fff; background: radial-gradient( circle at 11% 28%, rgba(216,163,62,.18), transparent 30% ), linear-gradient( 135deg, #061321, #0a2742 ); } .esi-overview-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-overview-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-overview-hero__inner { position:relative; z-index:2; display:grid; grid-template-columns: 1.12fr .88fr; align-items:center; gap:75px; padding:88px 0; } .esi-overview-hero__content h1 { margin: 17px 0 20px; color:#fff; font-size: clamp( 39px, 5vw, 62px ); font-weight:900; line-height:1.45; } .esi-overview-hero__content p { max-width:680px; margin:0; color: rgba( 255, 255, 255, .78 ); font-size:16px; line-height:2.15; } .esi-overview-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; } .esi-overview-btn { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding: 11px 23px; border-radius:8px; font-size:14px; font-weight:800; transition: transform .25s ease, background .25s ease, border-color .25s ease; } .esi-overview-btn:hover { transform: translateY(-3px); } .esi-overview-btn--gold { color: var(--navy)!important; background: var(--gold); border: 1px solid var(--gold); } .esi-overview-btn--outline { color:#fff!important; background: rgba( 255, 255, 255, .04 ); border: 1px solid rgba( 255, 255, 255, .3 ); } .esi-overview-process { position:relative; display:grid; grid-template-columns: 1fr auto 1fr; gap: 18px 13px; align-items:center; padding:34px; border: 1px solid rgba( 255, 255, 255, .16 ); border-radius:50%; aspect-ratio:1; background: rgba( 4, 18, 32, .34 ); box-shadow: 0 28px 70px rgba( 0, 0, 0, .24 ); } .esi-overview-process__line { position:absolute; inset:68px; border: 1px dashed rgba( 216, 163, 62, .35 ); border-radius:50%; } .esi-overview-process__item { position:relative; z-index:2; display:flex; min-height:116px; flex-direction:column; align-items:center; justify-content:center; padding:15px; text-align:center; border: 1px solid rgba( 216, 163, 62, .38 ); border-radius:50%; background:#0b2944; } .esi-overview-process__item span { color:var(--gold); font-size:12px; font-weight:900; } .esi-overview-process__item strong { margin: 5px 0 2px; color:#fff; font-size:17px; } .esi-overview-process__item small { color: rgba( 255, 255, 255, .58 ); font-size:10px; } .esi-overview-process__arrow { position:relative; z-index:2; color:var(--gold); font-size:22px; font-weight:900; } .esi-overview-process__item:nth-of-type(6) { grid-column:2; } .esi-overview-process__item:nth-of-type(8) { grid-column:2; } .esi-overview-process__arrow:nth-of-type(7), .esi-overview-process__arrow:nth-of-type(9) { display:none; } .esi-overview-story { padding:100px 0; background:#fff; } .esi-overview-story__grid { display:grid; grid-template-columns: 1.35fr .65fr; gap:72px; align-items:start; } .esi-overview-story h2, .esi-overview-heading h2, .esi-overview-cta h2 { margin: 12px 0 18px; color:var(--ink); font-size: clamp( 29px, 3.6vw, 43px ); font-weight:900; line-height:1.55; } .esi-overview-story__content p { margin: 0 0 15px; color:#4e6173; font-size:15px; line-height:2.18; } .esi-overview-facts { overflow:hidden; border: 1px solid var(--line); border-radius:15px; background:#f7f9fb; box-shadow: 0 18px 45px rgba( 7, 26, 45, .07 ); } .esi-overview-facts__head { display:flex; align-items:center; gap:15px; padding: 23px 25px; color:#fff; background: var(--navy); } .esi-overview-facts__head svg { width:47px; height:47px; fill:none; stroke: var(--gold2); stroke-width:1.7; } .esi-overview-facts__head div { display:flex; flex-direction:column; gap:3px; } .esi-overview-facts__head span { color: var(--gold2); font-size:11px; font-weight:800; } .esi-overview-facts__head strong { font-size:19px; } .esi-overview-facts dl { margin:0; padding: 12px 24px 18px; } .esi-overview-facts dl div { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; border-bottom: 1px solid #e1e7ec; } .esi-overview-facts dl div:last-child { border:0; } .esi-overview-facts dt { color:#6a7a89; font-size:12px; } .esi-overview-facts dd { margin:0; color:var(--ink); font-size:13px; font-weight:900; text-align:left; } .esi-overview-why { padding:95px 0; background:#f3f6f8; } .esi-overview-heading { max-width:790px; margin: 0 auto 45px; text-align:center; } .esi-overview-heading .esi-overview-section-label { justify-content:center; } .esi-overview-heading p { margin:0; color: var(--muted); font-size:15px; line-height:2; } .esi-overview-why__grid { display:grid; grid-template-columns: repeat( 3, 1fr ); gap:20px; } .esi-overview-why-card { position:relative; min-height:320px; padding: 31px 28px 27px; overflow:hidden; border: 1px solid var(--line); border-radius:14px; background:#fff; box-shadow: 0 15px 40px rgba( 7, 26, 45, .055 ); transition: .27s ease; } .esi-overview-why-card:before { content:""; position:absolute; top:0; right:0; width:100%; height:5px; background: var(--navy); } .esi-overview-why-card:hover { transform: translateY(-7px); border-color: rgba( 216, 163, 62, .7 ); box-shadow: 0 24px 55px rgba( 7, 26, 45, .11 ); } .esi-overview-why-card__number { position:absolute; top:25px; left:25px; color: rgba( 7, 26, 45, .14 ); font-size:28px; font-weight:900; } .esi-overview-why-card__icon { display:flex; width:62px; height:62px; align-items:center; justify-content:center; margin: 5px 0 27px; color:var(--gold); border-radius:14px; background: var(--navy); } .esi-overview-why-card__icon svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .esi-overview-why-card h3 { margin: 0 0 12px; color: var(--ink); font-size:20px; font-weight:900; line-height:1.7; } .esi-overview-why-card p { margin:0; color:#637484; font-size:14px; line-height:2; } .esi-overview-model { padding:95px 0; color:#fff; background: linear-gradient( 130deg, #06182b, #0b2a46 ); } .esi-overview-heading--light h2 { color:#fff; } .esi-overview-heading--light p { color: rgba( 255, 255, 255, .65 ); } .esi-overview-model__grid { display:grid; grid-template-columns: repeat( 4, 1fr ); gap:16px; } .esi-overview-model-step { position:relative; min-height:220px; padding: 28px 23px; border: 1px solid rgba( 255, 255, 255, .15 ); border-radius:13px; background: rgba( 255, 255, 255, .045 ); transition: .25s ease; } .esi-overview-model-step:after { content:"←"; position:absolute; top:50%; left:-17px; color:var(--gold); font-size:20px; font-weight:900; transform: translateY(-50%); } .esi-overview-model-step:last-child:after { display:none; } .esi-overview-model-step:hover { transform: translateY(-6px); border-color: rgba( 216, 163, 62, .55 ); background: rgba( 255, 255, 255, .075 ); } .esi-overview-model-step span { display:inline-block; margin-bottom:28px; padding: 6px 11px; color: var(--gold2); border-radius:16px; background: rgba( 216, 163, 62, .11 ); font-size:11px; font-weight:800; } .esi-overview-model-step strong { display:block; margin-bottom:12px; color:#fff; font-size:19px; } .esi-overview-model-step p { margin:0; color: rgba( 255, 255, 255, .64 ); font-size:13px; line-height:2; } .esi-overview-model__action { display:flex; justify-content:center; margin-top:35px; } .esi-overview-principles { padding:95px 0; background:#fff; } .esi-overview-principles__grid { display:grid; grid-template-columns: repeat( 4, 1fr ); overflow:hidden; border: 1px solid var(--line); border-radius:15px; box-shadow: 0 18px 45px rgba( 7, 26, 45, .055 ); } .esi-overview-principles article { position:relative; min-height:230px; padding: 30px 25px; text-align:center; border-left: 1px solid #ead5aa; background:#fff; transition: .25s ease; } .esi-overview-principles article:last-child { border-left:0; } .esi-overview-principles article:hover { background: #fffaf0; } .esi-overview-principles b { display:flex; width:48px; height:48px; align-items:center; justify-content:center; margin: 0 auto 23px; color:var(--gold); border: 1px solid var(--gold); border-radius:50%; font-size:18px; } .esi-overview-principles strong { display:block; margin-bottom:10px; color:var(--ink); font-size:17px; } .esi-overview-principles p { margin:0; color:#667687; font-size:13px; line-height:1.9; } .esi-overview-cta { padding:76px 0; color:#fff; background:#f3f6f8; } .esi-overview-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:45px; padding: 42px 48px; border-radius:17px; background: linear-gradient( 125deg, #07182a, #0c2b46 ); box-shadow: 0 24px 60px rgba( 7, 26, 45, .15 ); } .esi-overview-cta h2 { margin-bottom:7px; color:#fff; font-size:34px; } .esi-overview-cta p { margin:0; color: rgba( 255, 255, 255, .7 ); font-size:14px; line-height:2; } .esi-overview-cta__links { display:flex; gap:9px; flex-shrink:0; } .esi-overview-cta__links a { padding: 13px 18px; color:#fff!important; border: 1px solid rgba( 255, 255, 255, .24 ); border-radius:8px; font-size:12px; font-weight:800; transition: .25s ease; } .esi-overview-cta__links a:first-child { color: var(--navy)!important; background: var(--gold); border-color: var(--gold); } .esi-overview-cta__links a:hover { transform: translateY(-3px); } @media(max-width:980px) { .esi-overview-hero__inner { grid-template-columns:1fr; } .esi-overview-process { display:none; } .esi-overview-story__grid { grid-template-columns:1fr; } .esi-overview-why__grid { grid-template-columns:1fr; } .esi-overview-model__grid, .esi-overview-principles__grid { grid-template-columns: repeat( 2, 1fr ); } .esi-overview-model-step:after { display:none; } .esi-overview-principles article:nth-child(2) { border-left:0; } .esi-overview-principles article:nth-child(-n+2) { border-bottom: 1px solid #ead5aa; } .esi-overview-cta__inner { align-items:flex-start; flex-direction:column; } } @media(max-width:650px) { .esi-overview-container { width: min( 100% - 38px, 1180px ); } .esi-overview-hero { min-height:540px; } .esi-overview-hero__inner { padding:68px 0; } .esi-overview-hero__content h1 { font-size:36px; } .esi-overview-hero__content p { font-size:15px; } .esi-overview-hero__actions, .esi-overview-cta__links { width:100%; flex-direction:column; } .esi-overview-btn, .esi-overview-cta__links a { width:100%; } .esi-overview-story, .esi-overview-why, .esi-overview-model, .esi-overview-principles { padding:70px 0; } .esi-overview-story__grid { gap:38px; } .esi-overview-heading { text-align:right; } .esi-overview-heading .esi-overview-section-label { justify-content:flex-start; } .esi-overview-model__grid, .esi-overview-principles__grid { grid-template-columns:1fr; } .esi-overview-principles article { border-left:0; border-bottom: 1px solid #ead5aa; } .esi-overview-principles article:last-child { border-bottom:0; } .esi-overview-cta { padding:55px 0; } .esi-overview-cta__inner { padding: 34px 24px; } .esi-overview-cta h2 { font-size:27px; } }