.esi-methodology { --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-methodology, .esi-methodology * { box-sizing: border-box; } .esi-methodology-container { width: min(1180px, 88%); margin: 0 auto; } .esi-methodology-eyebrow, .esi-methodology-section-label { display: flex; align-items: center; gap: 12px; color: var(--gold); font-size: 13px; font-weight: 800; } .esi-methodology-eyebrow::before, .esi-methodology-section-label::before { content: ""; width: 32px; height: 2px; flex: 0 0 32px; background: currentColor; } .esi-methodology-hero { position: relative; min-height: 590px; 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-methodology-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-methodology-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-methodology-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 75px; padding: 88px 0; } .esi-methodology-hero__content h1 { margin: 17px 0 20px; color: #ffffff; font-size: clamp( 31px, 3vw, 42px ); font-weight: 900; line-height: 1.6; } .esi-methodology-hero__content p { max-width: 680px; margin: 0; color: rgba( 255, 255, 255, .77 ); font-size: 15px; line-height: 2.15; } .esi-methodology-hero__framework { position: relative; padding: 30px; border: 1px solid rgba( 255, 255, 255, .16 ); border-radius: 18px; background: rgba( 4, 18, 32, .35 ); box-shadow: 0 28px 70px rgba( 0, 0, 0, .22 ); } .esi-methodology-framework__label { margin-bottom: 20px; color: var(--gold); font-size: 11px; font-weight: 800; } .esi-methodology-framework__main { padding: 20px; text-align: center; border: 1px solid rgba( 216, 163, 62, .45 ); border-radius: 12px; background: #0b2944; } .esi-methodology-framework__main strong { display: block; color: #ffffff; font-size: 20px; font-weight: 900; } .esi-methodology-framework__main span { display: block; margin-top: 5px; color: rgba( 255, 255, 255, .55 ); font-size: 10px; } .esi-methodology-framework__items { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 10px; } .esi-methodology-framework__items div { padding: 15px 12px; text-align: center; border: 1px solid rgba( 255, 255, 255, .12 ); border-radius: 10px; background: rgba( 255, 255, 255, .035 ); } .esi-methodology-framework__items b { display: block; color: var(--gold2); font-size: 13px; } .esi-methodology-framework__items small { display: block; margin-top: 5px; color: rgba( 255, 255, 255, .50 ); font-size: 9px; } .esi-methodology-intro { padding: 100px 0; background: #ffffff; } .esi-methodology-intro__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 85px; align-items: start; } .esi-methodology-intro__title h2, .esi-methodology-heading h2, .esi-methodology-output h2, .esi-methodology-final h2 { margin: 13px 0 20px; color: var(--ink); font-size: clamp( 23px, 2.1vw, 30px ); font-weight: 900; line-height: 1.65; } .esi-methodology-intro__content p { margin: 0 0 17px; color: #526474; font-size: 14px; line-height: 2.2; } .esi-methodology-heading { max-width: 790px; margin: 0 auto 46px; text-align: center; } .esi-methodology-heading .esi-methodology-section-label { justify-content: center; } .esi-methodology-heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 2; } .esi-methodology-principles { padding: 95px 0; background: #f3f6f8; } .esi-methodology-principles__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; } .esi-methodology-principles__grid article { position: relative; min-height: 260px; padding: 28px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #ffffff; transition: .25s ease; } .esi-methodology-principles__grid article::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 4px; background: var(--navy); } .esi-methodology-principles__grid article:hover { transform: translateY(-6px); border-color: rgba( 216, 163, 62, .65 ); box-shadow: 0 20px 40px rgba( 7, 26, 45, .08 ); } .esi-methodology-principle__number { color: var(--gold); font-size: 12px; font-weight: 900; } .esi-methodology-principles__grid h3 { margin: 25px 0 10px; color: var(--ink); font-size: 16px; font-weight: 900; line-height: 1.7; } .esi-methodology-principles__grid p { margin: 0; color: #667687; font-size: 13px; line-height: 2; } .esi-methodology-process { padding: 95px 0; color: #ffffff; background: linear-gradient( 130deg, #06182b, #0b2a46 ); } .esi-methodology-heading--light h2 { color: #ffffff; } .esi-methodology-heading--light > p { color: rgba( 255, 255, 255, .63 ); } .esi-methodology-process__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; } .esi-methodology-process__grid article { min-height: 230px; padding: 28px 24px; border: 1px solid rgba( 255, 255, 255, .14 ); border-radius: 13px; background: rgba( 255, 255, 255, .045 ); transition: .25s ease; } .esi-methodology-process__grid article:hover { transform: translateY(-5px); border-color: rgba( 216, 163, 62, .50 ); background: rgba( 255, 255, 255, .07 ); } .esi-methodology-process__number { display: flex; width: 45px; height: 45px; align-items: center; justify-content: center; margin-bottom: 25px; color: var(--gold); border: 1px solid rgba( 216, 163, 62, .55 ); border-radius: 50%; font-size: 11px; font-weight: 900; } .esi-methodology-process__grid h3 { margin: 0 0 10px; color: #ffffff; font-size: 17px; font-weight: 900; } .esi-methodology-process__grid p { margin: 0; color: rgba( 255, 255, 255, .62 ); font-size: 13px; line-height: 2; } .esi-methodology-quality { padding: 95px 0; background: #ffffff; } .esi-methodology-quality__grid { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #ffffff; box-shadow: 0 18px 45px rgba( 7, 26, 45, .055 ); } .esi-methodology-quality__grid article { min-height: 220px; padding: 28px 24px; text-align: center; border-left: 1px solid #ead5aa; } .esi-methodology-quality__grid article:last-child { border-left: 0; } .esi-methodology-quality__icon { display: flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin: 0 auto 22px; color: var(--gold); border: 1px solid var(--gold); border-radius: 50%; font-size: 11px; font-weight: 900; } .esi-methodology-quality__grid strong { display: block; margin-bottom: 10px; color: var(--ink); font-size: 15px; font-weight: 900; } .esi-methodology-quality__grid p { margin: 0; color: #667687; font-size: 13px; line-height: 2; } .esi-methodology-output { padding: 75px 0; background: #f3f6f8; } .esi-methodology-output__inner { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 65px; } .esi-methodology-output__content p { margin: 0; color: #667687; font-size: 14px; line-height: 2; } .esi-methodology-output__tags { display: flex; flex-wrap: wrap; gap: 10px; } .esi-methodology-output__tags span { padding: 11px 16px; color: var(--navy); border: 1px solid #d9e1e7; border-radius: 30px; background: #ffffff; font-size: 12px; font-weight: 800; } .esi-methodology-final { padding: 75px 0; background: #ffffff; } .esi-methodology-final__box { position: relative; padding: 46px 48px; overflow: hidden; border-radius: 17px; background: linear-gradient( 125deg, #07182a, #0c2b46 ); box-shadow: 0 24px 60px rgba( 7, 26, 45, .15 ); } .esi-methodology-final__box::after { content: ""; position: absolute; left: -70px; bottom: -110px; width: 250px; height: 250px; border: 1px solid rgba( 216, 163, 62, .20 ); border-radius: 50%; } .esi-methodology-final__label { color: var(--gold); font-size: 12px; font-weight: 800; } .esi-methodology-final h2 { max-width: 700px; color: #ffffff; } .esi-methodology-final p { position: relative; z-index: 2; max-width: 760px; margin: 0; color: rgba( 255, 255, 255, .68 ); font-size: 14px; line-height: 2; } @media (max-width: 980px) { .esi-methodology-hero__inner, .esi-methodology-intro__grid, .esi-methodology-output__inner { grid-template-columns: 1fr; } .esi-methodology-hero__framework { display: none; } .esi-methodology-principles__grid { grid-template-columns: repeat(2,1fr); } .esi-methodology-process__grid { grid-template-columns: repeat(2,1fr); } .esi-methodology-quality__grid { grid-template-columns: repeat(2,1fr); } .esi-methodology-quality__grid article { border-bottom: 1px solid #ead5aa; } } @media (max-width: 650px) { .esi-methodology-container { width: min( 100% - 38px, 1180px ); } .esi-methodology-hero { min-height: 510px; } .esi-methodology-hero__inner { padding: 68px 0; } .esi-methodology-hero__content h1 { font-size: 27px; line-height: 1.55; } .esi-methodology-hero__content p { font-size: 14px; } .esi-methodology-intro, .esi-methodology-principles, .esi-methodology-process, .esi-methodology-quality { padding: 70px 0; } .esi-methodology-heading { text-align: right; } .esi-methodology-heading .esi-methodology-section-label { justify-content: flex-start; } .esi-methodology-principles__grid, .esi-methodology-process__grid, .esi-methodology-quality__grid { grid-template-columns: 1fr; } .esi-methodology-quality__grid article { border-left: 0; } .esi-methodology-final__box { padding: 35px 25px; } }