/* ========================================================= SERVICE SUPPORT HERO MAIN UNIQUE CLASS ========================================================= */ .serviceSupportPageHero{ --service-green:#77AF25; --service-green-dark:#5D8D18; --service-green-light:#9CD24E; --service-navy:#07172F; --service-navy-2:#0A2142; --service-white:#FFFFFF; --service-text:#A8B4C4; --service-form-text:#16213A; position:relative; width:100%; min-height:740px; display:flex; align-items:center; overflow:hidden; isolation:isolate; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 78% 12%, rgba(119,175,37,.12), transparent 25% ), linear-gradient( 120deg, #06142A 0%, #071C3B 52%, #07162E 100% ); } .serviceSupportPageHero, .serviceSupportPageHero *, .serviceSupportPageHero *::before, .serviceSupportPageHero *::after{ box-sizing:border-box; } /* ========================================================= BACKGROUND ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__bg{ position:absolute; inset:0; z-index:-10; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.10; filter: brightness(.68) saturate(.55) contrast(1.08); transform:scale(1.05); animation: serviceSupportBgMove 24s ease-in-out infinite alternate; } @keyframes serviceSupportBgMove{ to{ transform: scale(1.11) translateX(-12px); } } .serviceSupportPageHero .serviceSupportPageHero__overlay{ position:absolute; inset:0; z-index:-9; background: linear-gradient( 90deg, rgba(5,16,35,.99) 0%, rgba(6,23,50,.96) 43%, rgba(7,25,51,.88) 68%, rgba(5,17,37,.80) 100% ); } .serviceSupportPageHero .serviceSupportPageHero__glow{ position:absolute; width:620px; height:620px; right:-190px; top:-190px; z-index:-8; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.18), rgba(119,175,37,.04) 46%, transparent 72% ); filter:blur(8px); animation: serviceSupportGlowMove 10s ease-in-out infinite alternate; } @keyframes serviceSupportGlowMove{ to{ transform: translate(-50px,40px) scale(1.08); } } /* ========================================================= CONTAINER ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__container{ position:relative; z-index:5; width:min(1360px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); gap:clamp(50px,6vw,90px); align-items:center; padding: clamp(76px,7vw,105px) 0; } /* ========================================================= LEFT CONTENT ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__content{ min-width:0; max-width:670px; } .serviceSupportPageHero .serviceSupportPageHero__breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:18px; color:rgba(255,255,255,.46); font-size:9px; opacity:0; transform:translateY(-28px); animation: serviceSupportFromTop 1.1s .08s cubic-bezier(.16,1,.3,1) forwards; } .serviceSupportPageHero .serviceSupportPageHero__breadcrumb a{ color:rgba(255,255,255,.48); text-decoration:none; } .serviceSupportPageHero .serviceSupportPageHero__breadcrumb strong{ color:var(--service-green-light); } .serviceSupportPageHero .serviceSupportPageHero__badge{ display:inline-flex; align-items:center; gap:9px; min-height:38px; padding:0 14px; margin-bottom:19px; border-radius:999px; color:var(--service-green-light); background: rgba(119,175,37,.07); border: 1px solid rgba(119,175,37,.27); font-size:11px; font-weight:700; opacity:0; transform: translateX(-38px) rotateY(-15deg); animation: serviceSupportFromLeft 1.25s .24s cubic-bezier(.16,1,.3,1) forwards; } .serviceSupportPageHero .serviceSupportPageHero__badgeDot{ width:8px; height:8px; border-radius:50%; background:var(--service-green); box-shadow: 0 0 0 5px rgba(119,175,37,.09), 0 0 14px rgba(119,175,37,.55); } /* ========================================================= TITLE ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__title{ margin:0; max-width:730px; color:#fff; font-size: clamp(30px,4.45vw,38px); line-height:1.035; font-weight:800; letter-spacing: clamp(-2px,-.15vw,-.7px); } .serviceSupportPageHero .serviceSupportPageHero__titleLine{ display:block; overflow:hidden; } .serviceSupportPageHero .serviceSupportPageHero__titleLine span{ display:block; opacity:0; } .serviceSupportPageHero .serviceSupportPageHero__titleLine:nth-child(1) span{ transform: translateY(115%) rotateX(-20deg); animation: serviceSupportTitleBottom 1.45s .42s cubic-bezier(.16,1,.3,1) forwards; } .serviceSupportPageHero .serviceSupportPageHero__titleLine:nth-child(2) span{ transform: translateY(-115%) rotateX(20deg); animation: serviceSupportTitleTop 1.45s .66s cubic-bezier(.16,1,.3,1) forwards; } .serviceSupportPageHero .serviceSupportPageHero__green{ color:var(--service-green); } .serviceSupportPageHero .serviceSupportPageHero__description{ max-width:610px; margin:21px 0 0; color:var(--service-text); font-size:14px; line-height:1.8; opacity:0; transform:translateY(28px); animation: serviceSupportFromBottom 1.25s .90s cubic-bezier(.16,1,.3,1) forwards; } /* ========================================================= FEATURES ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__features{ display:flex; flex-wrap:wrap; gap:16px; margin-top:25px; } .serviceSupportPageHero .serviceSupportPageHero__feature{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.80); font-size:10px; font-weight:600; opacity:0; } .serviceSupportPageHero .serviceSupportPageHero__feature:nth-child(1){ transform:translateY(-24px); animation: serviceSupportFromTop 1.05s 1.12s ease forwards; } .serviceSupportPageHero .serviceSupportPageHero__feature:nth-child(2){ transform:translateY(24px); animation: serviceSupportFromBottom 1.05s 1.26s ease forwards; } .serviceSupportPageHero .serviceSupportPageHero__feature:nth-child(3){ transform:translateX(-26px); animation: serviceSupportFromLeft 1.05s 1.40s ease forwards; } .serviceSupportPageHero .serviceSupportPageHero__featureIcon{ width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:50%; background: rgba(119,175,37,.08); border: 1px solid rgba(119,175,37,.22); } .serviceSupportPageHero .serviceSupportPageHero__featureIcon svg{ width:12px; height:12px; fill:none; stroke:var(--service-green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= TRUST ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__trust{ width:max-content; max-width:100%; margin-top:25px; padding:12px 14px; display:flex; align-items:center; gap:11px; border-radius:11px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.075); opacity:0; transform: translateX(-40px) translateY(22px); animation: serviceSupportFromLeft 1.2s 1.56s ease forwards; } .serviceSupportPageHero .serviceSupportPageHero__trustIcon{ width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:10px; background: rgba(119,175,37,.10); } .serviceSupportPageHero .serviceSupportPageHero__trustIcon svg{ width:18px; height:18px; fill:none; stroke:var(--service-green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .serviceSupportPageHero .serviceSupportPageHero__trust small{ display:block; margin-bottom:4px; color:rgba(255,255,255,.42); font-size:8px; } .serviceSupportPageHero .serviceSupportPageHero__trust strong{ display:block; color:#fff; font-size:10px; } /* ========================================================= RIGHT SIDE ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__right{ position:relative; width:100%; min-width:0; display:flex; justify-content:center; } /* ========================================================= FORM ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__formCard{ position:relative; width:100%; max-width:465px; min-width:0; padding:26px; border-radius:19px; background: linear-gradient( 180deg, #FFFFFF 0%, #F9FBF7 100% ); box-shadow: 0 38px 90px rgba(0,0,0,.34); opacity:0; transform: translateX(145px) translateY(60px) rotateY(62deg) rotateX(-14deg) scale(.77); animation: serviceSupportFormIn 1.9s .52s cubic-bezier(.16,1,.3,1) forwards; } .serviceSupportPageHero .serviceSupportPageHero__formCard::before{ content:""; position:absolute; top:0; right:0; width:88px; height:88px; border-radius: 0 19px 0 88px; background: linear-gradient( 145deg, rgba(119,175,37,.14), rgba(119,175,37,.02) ); } .serviceSupportPageHero .serviceSupportPageHero__formHeader{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; margin-bottom:14px; opacity:0; transform:translateY(-24px); animation: serviceSupportFromTop 1s 1.34s ease forwards; } .serviceSupportPageHero .serviceSupportPageHero__formIcon{ width:45px; height:45px; flex:0 0 45px; display:grid; place-items:center; border-radius:11px; background:#081934; } .serviceSupportPageHero .serviceSupportPageHero__formIcon svg{ width:21px; height:21px; fill:none; stroke:var(--service-green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .serviceSupportPageHero .serviceSupportPageHero__formEyebrow{ display:block; margin-bottom:4px; color:var(--service-green-dark); font-size:8px; font-weight:800; letter-spacing:1px; text-transform:uppercase; } .serviceSupportPageHero .serviceSupportPageHero__formTitle{ margin:0; color:#111C33; font-size:22px; line-height:1.15; } .serviceSupportPageHero .serviceSupportPageHero__status{ min-height:36px; display:flex; align-items:center; gap:8px; padding:0 12px; margin-bottom:15px; border-radius:8px; color:#557D5C; background: rgba(119,175,37,.065); border: 1px solid rgba(119,175,37,.13); font-size:9px; font-weight:600; } .serviceSupportPageHero .serviceSupportPageHero__statusDot{ width:7px; height:7px; border-radius:50%; background:#69C67C; } /* ========================================================= FIELDS ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__field{ width:100%; margin-bottom:11px; } .serviceSupportPageHero .serviceSupportPageHero__field label{ display:block; margin-bottom:6px; color:#1D2940; font-size:8px; font-weight:700; } .serviceSupportPageHero .serviceSupportPageHero__field input, .serviceSupportPageHero .serviceSupportPageHero__field textarea{ display:block; width:100%; outline:none; border: 1px solid #DEE5EC; border-radius:9px; background:#fff; color:var(--service-form-text); font-family:inherit; font-size:11px; } .serviceSupportPageHero .serviceSupportPageHero__field input{ height:44px; padding:0 13px; } .serviceSupportPageHero .serviceSupportPageHero__field textarea{ min-height:78px; padding:12px 13px; resize:vertical; } .serviceSupportPageHero .serviceSupportPageHero__field input:focus, .serviceSupportPageHero .serviceSupportPageHero__field textarea:focus{ border-color: rgba(119,175,37,.55); box-shadow: 0 0 0 3px rgba(119,175,37,.075); } /* ========================================================= CUSTOM RESPONSIVE DROPDOWN ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__customSelect{ position:relative; width:100%; } .serviceSupportPageHero .serviceSupportPageHero__selectButton{ width:100%; min-height:44px; padding: 0 12px 0 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; border: 1px solid #DEE5EC; border-radius:9px; background:#fff; color:#7B8795; font-family:inherit; font-size:11px; cursor:pointer; text-align:left; transition: border-color .3s ease, box-shadow .3s ease; } .serviceSupportPageHero .serviceSupportPageHero__customSelect.is-open .serviceSupportPageHero__selectButton{ border-color: rgba(119,175,37,.55); box-shadow: 0 0 0 3px rgba(119,175,37,.075); } .serviceSupportPageHero .serviceSupportPageHero__selectArrow{ width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:7px; background: rgba(119,175,37,.08); transition: transform .3s ease; } .serviceSupportPageHero .serviceSupportPageHero__customSelect.is-open .serviceSupportPageHero__selectArrow{ transform:rotate(180deg); } .serviceSupportPageHero .serviceSupportPageHero__selectArrow svg{ width:11px; height:11px; fill:none; stroke:var(--service-green-dark); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* DROPDOWN MENU */ .serviceSupportPageHero .serviceSupportPageHero__selectMenu{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:100; width:100%; max-width:100%; padding:6px; margin:0; list-style:none; border: 1px solid #DFE6DD; border-radius:10px; background:#fff; box-shadow: 0 18px 40px rgba(11,25,38,.16); opacity:0; visibility:hidden; transform: translateY(-8px) scale(.985); transform-origin:top; transition: opacity .22s ease, transform .22s ease, visibility .22s ease; max-height:245px; overflow-y:auto; overflow-x:hidden; } .serviceSupportPageHero .serviceSupportPageHero__customSelect.is-open .serviceSupportPageHero__selectMenu{ opacity:1; visibility:visible; transform:none; } .serviceSupportPageHero .serviceSupportPageHero__selectOption{ width:100%; padding:10px 11px; display:flex; align-items:center; gap:8px; border:0; border-radius:7px; background:transparent; color:#182238; font-family:inherit; font-size:10px; cursor:pointer; text-align:left; transition: background .2s ease, color .2s ease; } .serviceSupportPageHero .serviceSupportPageHero__selectOption:hover, .serviceSupportPageHero .serviceSupportPageHero__selectOption.is-selected{ background: rgba(119,175,37,.09); color: var(--service-green-dark); } /* ========================================================= SUBMIT ========================================================= */ .serviceSupportPageHero .serviceSupportPageHero__submit{ width:100%; min-height:46px; padding: 0 9px 0 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; border-radius:9px; background: linear-gradient( 90deg, #69A217, #85BD2D ); color:#fff; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; box-shadow: 0 12px 29px rgba(119,175,37,.23); } .serviceSupportPageHero .serviceSupportPageHero__submitIcon{ width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; border-radius:7px; background: rgba(255,255,255,.15); } .serviceSupportPageHero .serviceSupportPageHero__submitIcon svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .serviceSupportPageHero .serviceSupportPageHero__privacy{ margin-top:10px; color:#939EAA; font-size:8px; line-height:1.5; text-align:center; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes serviceSupportFromTop{ to{ opacity:1; transform:none; } } @keyframes serviceSupportFromBottom{ to{ opacity:1; transform:none; } } @keyframes serviceSupportFromLeft{ to{ opacity:1; transform:none; } } @keyframes serviceSupportTitleBottom{ to{ opacity:1; transform:none; } } @keyframes serviceSupportTitleTop{ to{ opacity:1; transform:none; } } @keyframes serviceSupportFormIn{ 0%{ opacity:0; transform: translateX(145px) translateY(60px) rotateY(62deg) rotateX(-14deg) scale(.77); } 65%{ opacity:1; transform: translateX(-10px) translateY(-7px) rotateY(-5deg) rotateX(3deg) scale(1.015); } 100%{ opacity:1; transform:none; } } /* ========================================================= TABLET ========================================================= */ @media(max-width:900px){ .serviceSupportPageHero{ min-height:auto; } .serviceSupportPageHero .serviceSupportPageHero__container{ width:min(760px,90%); grid-template-columns:1fr; gap:50px; padding: 68px 0 60px; } .serviceSupportPageHero .serviceSupportPageHero__content{ max-width:690px; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .serviceSupportPageHero .serviceSupportPageHero__breadcrumb, .serviceSupportPageHero .serviceSupportPageHero__features{ justify-content:center; } .serviceSupportPageHero .serviceSupportPageHero__right{ width:100%; max-width:540px; margin:auto; } .serviceSupportPageHero .serviceSupportPageHero__formCard{ width:100%; max-width:465px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .serviceSupportPageHero .serviceSupportPageHero__container{ width:90%; gap:36px; padding: 54px 0; } .serviceSupportPageHero .serviceSupportPageHero__breadcrumb{ justify-content:center; font-size:8px; } .serviceSupportPageHero .serviceSupportPageHero__badge{ min-height:34px; font-size:9px; } .serviceSupportPageHero .serviceSupportPageHero__title{ font-size: clamp(31px,9vw,40px); } .serviceSupportPageHero .serviceSupportPageHero__description{ font-size:13px; line-height:1.7; } .serviceSupportPageHero .serviceSupportPageHero__features{ width:100%; display:grid; grid-template-columns:1fr; gap:10px; text-align:left; } .serviceSupportPageHero .serviceSupportPageHero__trust{ width:100%; text-align:left; } .serviceSupportPageHero .serviceSupportPageHero__right{ max-width:none; width:100%; } .serviceSupportPageHero .serviceSupportPageHero__formCard{ width:100%; max-width:none; padding:20px 15px; border-radius:16px; animation: serviceSupportMobileForm 1.6s .45s cubic-bezier(.16,1,.3,1) forwards; } .serviceSupportPageHero .serviceSupportPageHero__formCard::before{ width:68px; height:68px; border-radius: 0 16px 0 68px; } .serviceSupportPageHero .serviceSupportPageHero__formTitle{ font-size:19px; } .serviceSupportPageHero .serviceSupportPageHero__field input, .serviceSupportPageHero .serviceSupportPageHero__selectButton{ height:44px; font-size:11px; } .serviceSupportPageHero .serviceSupportPageHero__field textarea{ min-height:76px; } /* IMPORTANT: dropdown stays inside form/mobile viewport */ .serviceSupportPageHero .serviceSupportPageHero__selectMenu{ left:0; right:0; width:100%; max-width:100%; max-height:210px; } .serviceSupportPageHero .serviceSupportPageHero__selectOption{ padding:10px; font-size:10px; } } @keyframes serviceSupportMobileForm{ 0%{ opacity:0; transform: translateY(60px) rotateX(-15deg) scale(.93); } 70%{ opacity:1; transform: translateY(-6px) rotateX(2deg) scale(1.01); } 100%{ opacity:1; transform:none; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media(max-width:400px){ .serviceSupportPageHero .serviceSupportPageHero__container{ width:92%; } .serviceSupportPageHero .serviceSupportPageHero__title{ font-size:29px; } .serviceSupportPageHero .serviceSupportPageHero__formCard{ padding:18px 13px; } .serviceSupportPageHero .serviceSupportPageHero__selectOption{ font-size:9.5px; } } /* ============================================================ COMPUTER SUPPORT SOLUTIONS UNIQUE MAIN CLASS: .serviceSupportSolutions ============================================================ */ .serviceSupportSolutions{ --ss-green:#77AF25; --ss-green-dark:#5D8D18; --ss-green-light:#9AD04B; --ss-dark:#17202A; --ss-text:#68737A; --ss-border:#E6EBE2; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:55px 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 88% 14%, rgba(119,175,37,.10), transparent 22% ), radial-gradient( circle at 7% 88%, rgba(119,175,37,.055), transparent 24% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FAF6 56%, #F2F7ED 100% ); } .serviceSupportSolutions, .serviceSupportSolutions *, .serviceSupportSolutions *::before, .serviceSupportSolutions *::after{ box-sizing:border-box; } /* ============================================================ BACKGROUND ============================================================ */ .serviceSupportSolutions .serviceSupportSolutions__grid{ position:absolute; inset:0; z-index:-5; opacity:.45; background-image: linear-gradient( rgba(119,175,37,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.04) 1px, transparent 1px ); background-size:72px 72px; -webkit-mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); } .serviceSupportSolutions .serviceSupportSolutions__glow{ position:absolute; width:500px; height:500px; right:-190px; top:-170px; z-index:-4; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.14), rgba(119,175,37,.035) 48%, transparent 72% ); animation: serviceSupportSolutionsGlow 10s ease-in-out infinite alternate; } @keyframes serviceSupportSolutionsGlow{ to{ transform: translate(-55px,42px) scale(1.08); } } /* ============================================================ CONTAINER ============================================================ */ .serviceSupportSolutions .serviceSupportSolutions__container{ position:relative; z-index:2; width:min(1360px,92%); margin:0 auto; } /* ============================================================ HEADER ============================================================ */ .serviceSupportSolutions .serviceSupportSolutions__header{ display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(35px,6vw,90px); align-items:end; margin-bottom:clamp(42px,5vw,65px); } /* LEFT HEADER */ .serviceSupportSolutions .serviceSupportSolutions__headerLeft{ min-width:0; } .serviceSupportSolutions .serviceSupportSolutions__label{ display:inline-flex; align-items:center; gap:9px; margin-bottom:16px; color:var(--ss-green-dark); font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:0; transform: translateY(-30px) rotateX(10deg); transition: opacity 1.05s .08s ease, transform 1.35s .08s cubic-bezier(.16,1,.3,1); } .serviceSupportSolutions.is-visible .serviceSupportSolutions__label{ opacity:1; transform:none; } .serviceSupportSolutions .serviceSupportSolutions__label::before{ content:""; width:30px; height:2px; background:var(--ss-green); } /* TITLE */ .serviceSupportSolutions .serviceSupportSolutions__title{ margin:0; color:var(--ss-dark); font-size: clamp(34px,3.6vw,30px); line-height:1.07; font-weight:800; letter-spacing: clamp(-1.7px,-.13vw,-.7px); } .serviceSupportSolutions .serviceSupportSolutions__titleLine{ display:block; overflow:hidden; } .serviceSupportSolutions .serviceSupportSolutions__titleLine > span{ display:block; opacity:0; transform-style:preserve-3d; } .serviceSupportSolutions .serviceSupportSolutions__titleLine:nth-child(1) > span{ transform: translateY(110%) rotateX(-20deg); transition: opacity 1.15s .25s ease, transform 1.5s .25s cubic-bezier(.16,1,.3,1); } .serviceSupportSolutions .serviceSupportSolutions__titleLine:nth-child(2) > span{ transform: translateY(-110%) rotateX(20deg); transition: opacity 1.15s .45s ease, transform 1.5s .45s cubic-bezier(.16,1,.3,1); } .serviceSupportSolutions.is-visible .serviceSupportSolutions__titleLine > span{ opacity:1; transform:none; } .serviceSupportSolutions .serviceSupportSolutions__green{ color:var(--ss-green); } /* RIGHT INTRO */ .serviceSupportSolutions .serviceSupportSolutions__intro{ max-width:630px; margin:0 0 3px auto; color:var(--ss-text); font-size:14px; line-height:1.8; opacity:0; transform: translateX(42px) translateY(15px); transition: opacity 1.1s .68s ease, transform 1.35s .68s cubic-bezier(.16,1,.3,1); } .serviceSupportSolutions.is-visible .serviceSupportSolutions__intro{ opacity:1; transform:none; } /* ============================================================ CARDS GRID ============================================================ */ .serviceSupportSolutions .serviceSupportSolutions__gridCards{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; perspective:1800px; } /* ============================================================ CARD ============================================================ */ .serviceSupportSolutions .serviceSupportSolutions__card{ position:relative; min-width:0; /* min-height:285px; */ padding:27px 24px 24px; overflow:hidden; border-radius:18px; background: rgba(255,255,255,.88); border: 1px solid var(--ss-border); box-shadow: 0 14px 38px rgba(43,63,31,.055); opacity:0; transform-style:preserve-3d; transition: opacity 1.1s ease, transform 1.45s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease, background .35s ease; } /* DIFFERENT ENTRY DIRECTIONS */ .serviceSupportSolutions .serviceSupportSolutions__card:nth-child(1){ transform: translateX(-70px) translateY(-28px) rotateY(-24deg) scale(.91); transition-delay:.75s; } .serviceSupportSolutions .serviceSupportSolutions__card:nth-child(2){ transform: translateY(65px) rotateX(-22deg) scale(.91); transition-delay:.88s; } .serviceSupportSolutions .serviceSupportSolutions__card:nth-child(3){ transform: translateX(70px) translateY(-28px) rotateY(24deg) scale(.91); transition-delay:1.01s; } .serviceSupportSolutions .serviceSupportSolutions__card:nth-child(4){ transform: translateX(-70px) translateY(28px) rotateY(-24deg) scale(.91); transition-delay:1.14s; } .serviceSupportSolutions .serviceSupportSolutions__card:nth-child(5){ transform: translateY(-65px) rotateX(22deg) scale(.91); transition-delay:1.27s; } .serviceSupportSolutions .serviceSupportSolutions__card:nth-child(6){ transform: translateX(70px) translateY(28px) rotateY(24deg) scale(.91); transition-delay:1.40s; } .serviceSupportSolutions.is-visible .serviceSupportSolutions__card{ opacity:1; transform: translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1); } /* CARD GLOW */ .serviceSupportSolutions .serviceSupportSolutions__card::before{ content:""; position:absolute; width:180px; height:180px; right:-115px; top:-115px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.16), transparent 70% ); transform:scale(.75); transition: transform .5s ease, opacity .5s ease; } /* GREEN BOTTOM LINE */ .serviceSupportSolutions .serviceSupportSolutions__card::after{ content:""; position:absolute; left:24px; right:24px; bottom:0; height:3px; border-radius:10px 10px 0 0; background: linear-gradient( 90deg, transparent, var(--ss-green), var(--ss-green-light), transparent ); transform:scaleX(0); transition: transform .45s ease; } .serviceSupportSolutions .serviceSupportSolutions__card:hover{ transform: translateY(-8px) rotateX(1deg); border-color: rgba(119,175,37,.25); background:#fff; box-shadow: 0 24px 55px rgba(53,75,38,.11); } .serviceSupportSolutions .serviceSupportSolutions__card:hover::before{ transform:scale(1.45); } .serviceSupportSolutions .serviceSupportSolutions__card:hover::after{ transform:scaleX(1); } /* ============================================================ TOP ROW ============================================================ */ .serviceSupportSolutions .serviceSupportSolutions__cardTop{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:24px; } /* ICON */ .serviceSupportSolutions .serviceSupportSolutions__icon{ width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:14px; color:var(--ss-green-dark); background: linear-gradient( 145deg, #EFF6E7, #E4F0D8 ); border: 1px solid rgba(119,175,37,.13); transition: transform .4s cubic-bezier(.16,1,.3,1), background .35s ease; } .serviceSupportSolutions .serviceSupportSolutions__icon svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .serviceSupportSolutions .serviceSupportSolutions__card:hover .serviceSupportSolutions__icon{ transform: translateY(-4px) rotate(5deg) scale(1.04); color:#fff; } /* NUMBER */ .serviceSupportSolutions .serviceSupportSolutions__number{ color: rgba(23,32,42,.09); font-size:31px; font-weight:800; line-height:1; transition: color .3s ease, transform .3s ease; } .serviceSupportSolutions .serviceSupportSolutions__card:hover .serviceSupportSolutions__number{ color: rgba(119,175,37,.18); transform:translateY(-3px); } /* ============================================================ CONTENT ============================================================ */ .serviceSupportSolutions .serviceSupportSolutions__card h3{ position:relative; z-index:2; margin: 0 0 10px; color:var(--ss-dark); font-size:18px; line-height:1.3; } .serviceSupportSolutions .serviceSupportSolutions__card p{ position:relative; z-index:2; margin:0; color:#737E84; font-size:11px; line-height:1.7; } /* SMALL LINK */ .serviceSupportSolutions .serviceSupportSolutions__more{ position:absolute; left:24px; bottom:23px; z-index:3; display:inline-flex; align-items:center; gap:7px; color:var(--ss-green-dark); text-decoration:none; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; } .serviceSupportSolutions .serviceSupportSolutions__more svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition: transform .3s ease; } .serviceSupportSolutions .serviceSupportSolutions__more:hover svg{ transform:translateX(4px); } /* ============================================================ TABLET ============================================================ */ @media(max-width:1050px){ .serviceSupportSolutions .serviceSupportSolutions__gridCards{ grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ============================================================ SMALL TABLET ============================================================ */ @media(max-width:800px){ .serviceSupportSolutions{ padding:75px 0; } .serviceSupportSolutions .serviceSupportSolutions__container{ width:90%; } .serviceSupportSolutions .serviceSupportSolutions__header{ grid-template-columns:1fr; gap:20px; text-align:center; } .serviceSupportSolutions .serviceSupportSolutions__label{ justify-content:center; } .serviceSupportSolutions .serviceSupportSolutions__intro{ margin: 0 auto; max-width:650px; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ .serviceSupportSolutions{ padding:62px 0; } .serviceSupportSolutions .serviceSupportSolutions__container{ width:90%; } .serviceSupportSolutions .serviceSupportSolutions__title{ font-size: clamp(29px,8.5vw,38px); } .serviceSupportSolutions .serviceSupportSolutions__intro{ font-size:13px; line-height:1.7; } .serviceSupportSolutions .serviceSupportSolutions__gridCards{ grid-template-columns:1fr; gap:13px; } /* MOBILE SIMPLE BUT SMOOTH */ .serviceSupportSolutions .serviceSupportSolutions__card:nth-child(n){ min-height:250px; transform: translateY(50px) rotateX(-12deg) scale(.95); } .serviceSupportSolutions.is-visible .serviceSupportSolutions__card:nth-child(n){ transform:none; } .serviceSupportSolutions .serviceSupportSolutions__card{ padding: 22px 19px; border-radius:16px; } .serviceSupportSolutions .serviceSupportSolutions__cardTop{ margin-bottom:19px; } .serviceSupportSolutions .serviceSupportSolutions__icon{ width:47px; height:47px; flex-basis:47px; } .serviceSupportSolutions .serviceSupportSolutions__icon svg{ width:21px; height:21px; } .serviceSupportSolutions .serviceSupportSolutions__card h3{ font-size:17px; } .serviceSupportSolutions .serviceSupportSolutions__card p{ font-size:10.5px; } .serviceSupportSolutions .serviceSupportSolutions__more{ left:19px; bottom:19px; } } /* ============================================================ VERY SMALL ============================================================ */ @media(max-width:400px){ .serviceSupportSolutions .serviceSupportSolutions__container{ width:92%; } .serviceSupportSolutions .serviceSupportSolutions__title{ font-size:28px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media(prefers-reduced-motion:reduce){ .serviceSupportSolutions *, .serviceSupportSolutions *::before, .serviceSupportSolutions *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ============================================================ WHY YOU MAY NEED COMPUTER SUPPORT MAIN UNIQUE CLASS: .serviceSupportNeed ============================================================ */ .serviceSupportNeed{ --ssn-green:#77AF25; --ssn-green-dark:#5D8D18; --ssn-green-light:#9AD04B; --ssn-navy:#07162E; --ssn-navy-2:#0A2142; --ssn-white:#FFFFFF; --ssn-muted:#A7B2C1; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:55px 0; font-family: Arial, Helvetica, sans-serif; background: radial-gradient( circle at 82% 18%, rgba(119,175,37,.12), transparent 24% ), radial-gradient( circle at 8% 85%, rgba(119,175,37,.055), transparent 23% ), linear-gradient( 120deg, #06142A 0%, #081C38 50%, #07152D 100% ); } .serviceSupportNeed, .serviceSupportNeed *, .serviceSupportNeed *::before, .serviceSupportNeed *::after{ box-sizing:border-box; } /* ============================================================ BACKGROUND IMAGE ============================================================ */ .serviceSupportNeed .serviceSupportNeed__bg{ position:absolute; inset:0; z-index:-10; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.08; filter: brightness(.60) saturate(.55) contrast(1.08); transform:scale(1.06); animation: serviceSupportNeedBgMove 24s ease-in-out infinite alternate; } @keyframes serviceSupportNeedBgMove{ to{ transform: scale(1.12) translateX(-14px); } } /* ============================================================ OVERLAY ============================================================ */ .serviceSupportNeed .serviceSupportNeed__overlay{ position:absolute; inset:0; z-index:-9; background: linear-gradient( 90deg, rgba(5,16,35,.98), rgba(6,22,46,.94) 48%, rgba(6,18,38,.91) ); } /* ============================================================ GRID ============================================================ */ .serviceSupportNeed .serviceSupportNeed__grid{ position:absolute; inset:0; z-index:-8; opacity:.15; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 72px 72px; -webkit-mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); } /* ============================================================ GLOW ============================================================ */ .serviceSupportNeed .serviceSupportNeed__glow{ position:absolute; width:600px; height:600px; right:-230px; top:-180px; z-index:-7; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.18), rgba(119,175,37,.04) 45%, transparent 72% ); filter:blur(8px); animation: serviceSupportNeedGlow 10s ease-in-out infinite alternate; } @keyframes serviceSupportNeedGlow{ to{ transform: translate(-55px,45px) scale(1.08); } } /* ============================================================ CONTAINER ============================================================ */ .serviceSupportNeed .serviceSupportNeed__container{ position:relative; z-index:3; width:min(1360px,92%); margin:0 auto; } /* ============================================================ HEADER ============================================================ */ .serviceSupportNeed .serviceSupportNeed__header{ max-width:780px; margin: 0 auto clamp(50px,5vw,70px); text-align:center; } .serviceSupportNeed .serviceSupportNeed__label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:17px; color: var(--ssn-green-light); font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:0; transform: translateY(-30px) rotateX(10deg); transition: opacity 1.05s .08s ease, transform 1.35s .08s cubic-bezier(.16,1,.3,1); } .serviceSupportNeed .serviceSupportNeed__label::before, .serviceSupportNeed .serviceSupportNeed__label::after{ content:""; width:27px; height:1px; background: rgba(119,175,37,.55); } .serviceSupportNeed.is-visible .serviceSupportNeed__label{ opacity:1; transform:none; } /* ============================================================ TITLE ============================================================ */ .serviceSupportNeed .serviceSupportNeed__title{ margin:0; color:#fff; font-size: clamp(31px,3.6vw,35px); line-height:1.07; font-weight:800; letter-spacing: clamp(-1.7px,-.13vw,-.7px); } .serviceSupportNeed .serviceSupportNeed__titleLine{ display:block; overflow:hidden; } .serviceSupportNeed .serviceSupportNeed__titleLine > span{ display:block; opacity:0; } .serviceSupportNeed .serviceSupportNeed__titleLine:nth-child(1) > span{ transform: translateY(110%) rotateX(-20deg); transition: opacity 1.15s .25s ease, transform 1.5s .25s cubic-bezier(.16,1,.3,1); } .serviceSupportNeed .serviceSupportNeed__titleLine:nth-child(2) > span{ transform: translateY(-110%) rotateX(20deg); transition: opacity 1.15s .47s ease, transform 1.5s .47s cubic-bezier(.16,1,.3,1); } .serviceSupportNeed.is-visible .serviceSupportNeed__titleLine > span{ opacity:1; transform:none; } .serviceSupportNeed .serviceSupportNeed__green{ color: var(--ssn-green); } /* ============================================================ INTRO ============================================================ */ .serviceSupportNeed .serviceSupportNeed__intro{ max-width:680px; margin: 20px auto 0; color: var(--ssn-muted); font-size:14px; line-height:1.8; opacity:0; transform: translateY(26px); transition: opacity 1.1s .70s ease, transform 1.35s .70s cubic-bezier(.16,1,.3,1); } .serviceSupportNeed.is-visible .serviceSupportNeed__intro{ opacity:1; transform:none; } /* ============================================================ PATH ============================================================ */ .serviceSupportNeed .serviceSupportNeed__path{ position:relative; max-width:1100px; margin:0 auto; } /* CENTER LINE */ .serviceSupportNeed .serviceSupportNeed__line{ position:absolute; top:0; bottom:0; left:50%; width:1px; background: rgba(119,175,37,.12); transform: translateX(-50%); overflow:hidden; } .serviceSupportNeed .serviceSupportNeed__line::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient( 180deg, transparent, var(--ssn-green), var(--ssn-green-light), var(--ssn-green), transparent ); transform: scaleY(0); transform-origin:top; transition: transform 2s .72s cubic-bezier(.16,1,.3,1); } .serviceSupportNeed.is-visible .serviceSupportNeed__line::after{ transform:scaleY(1); } /* ============================================================ ROW ============================================================ */ .serviceSupportNeed .serviceSupportNeed__row{ position:relative; display:grid; grid-template-columns: 1fr 80px 1fr; align-items:center; min-height:180px; perspective:1500px; } /* ============================================================ NODE ============================================================ */ .serviceSupportNeed .serviceSupportNeed__nodeWrap{ position:relative; z-index:5; grid-column:2; display:flex; justify-content:center; } .serviceSupportNeed .serviceSupportNeed__node{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#0C2342; border: 1px solid rgba(119,175,37,.30); color: var(--ssn-green-light); font-size:10px; font-weight:800; box-shadow: 0 0 0 8px rgba(119,175,37,.045); opacity:0; transform: scale(.45) rotate(-35deg); transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1); } .serviceSupportNeed .serviceSupportNeed__row:nth-child(2) .serviceSupportNeed__node{ transition-delay:.90s; } .serviceSupportNeed .serviceSupportNeed__row:nth-child(3) .serviceSupportNeed__node{ transition-delay:1.10s; } .serviceSupportNeed .serviceSupportNeed__row:nth-child(4) .serviceSupportNeed__node{ transition-delay:1.30s; } .serviceSupportNeed .serviceSupportNeed__row:nth-child(5) .serviceSupportNeed__node{ transition-delay:1.50s; } .serviceSupportNeed.is-visible .serviceSupportNeed__node{ opacity:1; transform: scale(1) rotate(0); } /* ============================================================ CARD ============================================================ */ .serviceSupportNeed .serviceSupportNeed__card{ position:relative; min-width:0; padding:23px; border-radius:16px; background: rgba(255,255,255,.038); border: 1px solid rgba(255,255,255,.075); backdrop-filter: blur(8px); box-shadow: 0 18px 45px rgba(0,0,0,.13); opacity:0; transition: opacity 1.05s ease, transform 1.45s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease, box-shadow .35s ease; } /* LEFT ROWS */ .serviceSupportNeed .serviceSupportNeed__row--left .serviceSupportNeed__card{ grid-column:1; transform: translateX(-80px) translateY(-25px) rotateY(-25deg) scale(.91); } /* RIGHT ROWS */ .serviceSupportNeed .serviceSupportNeed__row--right .serviceSupportNeed__card{ grid-column:3; transform: translateX(80px) translateY(25px) rotateY(25deg) scale(.91); } /* STAGGER */ .serviceSupportNeed .serviceSupportNeed__row:nth-child(2) .serviceSupportNeed__card{ transition-delay:.82s; } .serviceSupportNeed .serviceSupportNeed__row:nth-child(3) .serviceSupportNeed__card{ transition-delay:1.02s; } .serviceSupportNeed .serviceSupportNeed__row:nth-child(4) .serviceSupportNeed__card{ transition-delay:1.22s; } .serviceSupportNeed .serviceSupportNeed__row:nth-child(5) .serviceSupportNeed__card{ transition-delay:1.42s; } .serviceSupportNeed.is-visible .serviceSupportNeed__card{ opacity:1; transform: translateX(0) translateY(0) rotateY(0) scale(1); } /* ============================================================ CARD HOVER ============================================================ */ .serviceSupportNeed .serviceSupportNeed__card::before{ content:""; position:absolute; width:150px; height:150px; top:-100px; right:-100px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.16), transparent 70% ); transition: transform .5s ease; } .serviceSupportNeed .serviceSupportNeed__card:hover{ transform: translateY(-6px); background: rgba(255,255,255,.055); border-color: rgba(119,175,37,.24); box-shadow: 0 25px 55px rgba(0,0,0,.20); } .serviceSupportNeed .serviceSupportNeed__card:hover::before{ transform: scale(1.6); } /* ============================================================ ICON ============================================================ */ .serviceSupportNeed .serviceSupportNeed__icon{ position:relative; z-index:2; width:46px; height:46px; display:grid; place-items:center; margin-bottom:16px; border-radius:12px; background: rgba(119,175,37,.10); border: 1px solid rgba(119,175,37,.16); color: var(--ssn-green-light); transition: transform .35s ease, background .35s ease, color .35s ease; } .serviceSupportNeed .serviceSupportNeed__icon svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .serviceSupportNeed .serviceSupportNeed__card:hover .serviceSupportNeed__icon{ transform: translateY(-3px) rotate(5deg); /* background: var(--ssn-green); */ color:#fff; } /* ============================================================ CARD TEXT ============================================================ */ .serviceSupportNeed .serviceSupportNeed__card h3{ position:relative; z-index:2; margin: 0 0 9px; color:#fff; font-size:18px; line-height:1.3; } .serviceSupportNeed .serviceSupportNeed__card p{ position:relative; z-index:2; margin:0; color:#9DA9B8; font-size:11px; line-height:1.7; } /* ============================================================ CARD META ============================================================ */ .serviceSupportNeed .serviceSupportNeed__meta{ position:relative; z-index:2; display:flex; align-items:center; gap:7px; margin-top:15px; color: var(--ssn-green-light); font-size:8px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; } .serviceSupportNeed .serviceSupportNeed__meta::before{ content:""; width:18px; height:1px; background: var(--ssn-green); } /* ============================================================ TABLET ============================================================ */ @media(max-width:850px){ .serviceSupportNeed{ padding:75px 0; } .serviceSupportNeed .serviceSupportNeed__container{ width:90%; } .serviceSupportNeed .serviceSupportNeed__path{ max-width:680px; } .serviceSupportNeed .serviceSupportNeed__line{ left:23px; } .serviceSupportNeed .serviceSupportNeed__row{ grid-template-columns: 46px 1fr; min-height:auto; gap:18px; margin-bottom:20px; } .serviceSupportNeed .serviceSupportNeed__nodeWrap{ grid-column:1; } .serviceSupportNeed .serviceSupportNeed__row--left .serviceSupportNeed__card, .serviceSupportNeed .serviceSupportNeed__row--right .serviceSupportNeed__card{ grid-column:2; transform: translateY(45px) rotateX(-12deg) scale(.94); } .serviceSupportNeed.is-visible .serviceSupportNeed__card{ transform:none; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ .serviceSupportNeed{ padding:62px 0; } .serviceSupportNeed .serviceSupportNeed__container{ width:90%; } .serviceSupportNeed .serviceSupportNeed__header{ margin-bottom:42px; } .serviceSupportNeed .serviceSupportNeed__label{ font-size:8px; } .serviceSupportNeed .serviceSupportNeed__label::before, .serviceSupportNeed .serviceSupportNeed__label::after{ width:20px; } .serviceSupportNeed .serviceSupportNeed__title{ font-size: clamp(29px,8.5vw,38px); } .serviceSupportNeed .serviceSupportNeed__intro{ font-size:13px; line-height:1.7; } .serviceSupportNeed .serviceSupportNeed__row{ grid-template-columns: 38px minmax(0,1fr); gap:13px; margin-bottom:15px; } .serviceSupportNeed .serviceSupportNeed__line{ left:19px; } .serviceSupportNeed .serviceSupportNeed__node{ width:38px; height:38px; font-size:8px; box-shadow: 0 0 0 5px rgba(119,175,37,.045); } .serviceSupportNeed .serviceSupportNeed__card{ padding:19px 17px; border-radius:14px; } .serviceSupportNeed .serviceSupportNeed__icon{ width:42px; height:42px; margin-bottom:14px; } .serviceSupportNeed .serviceSupportNeed__icon svg{ width:19px; height:19px; } .serviceSupportNeed .serviceSupportNeed__card h3{ font-size:16px; } .serviceSupportNeed .serviceSupportNeed__card p{ font-size:10.5px; } } /* ============================================================ VERY SMALL MOBILE ============================================================ */ @media(max-width:400px){ .serviceSupportNeed .serviceSupportNeed__container{ width:92%; } .serviceSupportNeed .serviceSupportNeed__title{ font-size:28px; } .serviceSupportNeed .serviceSupportNeed__row{ grid-template-columns: 34px minmax(0,1fr); gap:10px; } .serviceSupportNeed .serviceSupportNeed__line{ left:17px; } .serviceSupportNeed .serviceSupportNeed__node{ width:34px; height:34px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media(prefers-reduced-motion:reduce){ .serviceSupportNeed *, .serviceSupportNeed *::before, .serviceSupportNeed *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ========================================================== UNIQUE SERVICE INCLUDED SECTION MAIN CLASS: serviceCircleSupport ========================================================== */ .serviceCircleSupport{ --service-green:#77AF25; --service-green-dark:#5D8D18; --service-green-light:#9BD04C; --service-dark:#17202A; --service-text:#68737A; --service-soft:#EFF6E7; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:55px 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 86% 28%, rgba(119,175,37,.11), transparent 26% ), radial-gradient( circle at 8% 88%, rgba(119,175,37,.055), transparent 24% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FAF6 55%, #F1F6EB 100% ); } .serviceCircleSupport, .serviceCircleSupport *, .serviceCircleSupport *::before, .serviceCircleSupport *::after{ box-sizing:border-box; } /* ========================================================== BACKGROUND ========================================================== */ .serviceCircleSupport .serviceCircleSupport__grid{ position:absolute; inset:0; z-index:-5; opacity:.42; background-image: linear-gradient( rgba(119,175,37,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.04) 1px, transparent 1px ); background-size:72px 72px; mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); } .serviceCircleSupport .serviceCircleSupport__glow{ position:absolute; width:540px; height:540px; right:-180px; top:-130px; z-index:-4; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.15), rgba(119,175,37,.035) 47%, transparent 72% ); animation: serviceCircleGlowMove 10s ease-in-out infinite alternate; } @keyframes serviceCircleGlowMove{ to{ transform: translate(-55px,40px) scale(1.08); } } /* ========================================================== CONTAINER ========================================================== */ .serviceCircleSupport .serviceCircleSupport__container{ position:relative; z-index:3; width:min(1360px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(55px,7vw,110px); align-items:center; perspective:1800px; } /* ========================================================== LEFT CONTENT ========================================================== */ .serviceCircleSupport .serviceCircleSupport__content{ min-width:0; max-width:610px; } /* LABEL */ .serviceCircleSupport .serviceCircleSupport__label{ display:inline-flex; align-items:center; gap:9px; margin-bottom:17px; color:var(--service-green-dark); font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; opacity:0; transform: translateY(-32px) rotateX(12deg); transition: opacity 1s .08s ease, transform 1.4s .08s cubic-bezier(.16,1,.3,1); } .serviceCircleSupport .serviceCircleSupport__label::before{ content:""; width:32px; height:2px; background:var(--service-green); } .serviceCircleSupport.is-visible .serviceCircleSupport__label{ opacity:1; transform:none; } /* ========================================================== HEADING ========================================================== */ .serviceCircleSupport .serviceCircleSupport__title{ margin:0; color:var(--service-dark); font-size: clamp(36px,3.8vw,40px); line-height:1.06; font-weight:800; letter-spacing: clamp(-1.8px,-.13vw,-.7px); } .serviceCircleSupport .serviceCircleSupport__titleLine{ display:block; overflow:hidden; padding-bottom:3px; } .serviceCircleSupport .serviceCircleSupport__titleLine > span{ display:block; opacity:0; } .serviceCircleSupport .serviceCircleSupport__titleLine:nth-child(1) > span{ transform: translateY(110%) rotateX(-20deg); transition: opacity 1.15s .27s ease, transform 1.5s .27s cubic-bezier(.16,1,.3,1); } .serviceCircleSupport .serviceCircleSupport__titleLine:nth-child(2) > span{ transform: translateY(-110%) rotateX(20deg); transition: opacity 1.15s .50s ease, transform 1.5s .50s cubic-bezier(.16,1,.3,1); } .serviceCircleSupport.is-visible .serviceCircleSupport__titleLine > span{ opacity:1; transform:none; } .serviceCircleSupport .serviceCircleSupport__green{ color:var(--service-green); } /* ========================================================== DESCRIPTION ========================================================== */ .serviceCircleSupport .serviceCircleSupport__description{ margin:21px 0 0; color:var(--service-text); font-size:14px; line-height:1.8; opacity:0; transform: translateX(-42px) translateY(12px); transition: opacity 1.05s .72s ease, transform 1.35s .72s cubic-bezier(.16,1,.3,1); } .serviceCircleSupport.is-visible .serviceCircleSupport__description{ opacity:1; transform:none; } /* ========================================================== SMALL POINTS ========================================================== */ .serviceCircleSupport .serviceCircleSupport__points{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:11px 16px; margin-top:28px; } .serviceCircleSupport .serviceCircleSupport__point{ display:flex; align-items:center; gap:9px; color:#39434A; font-size:11px; font-weight:600; opacity:0; transition: opacity .95s ease, transform 1.2s cubic-bezier(.16,1,.3,1); } .serviceCircleSupport .serviceCircleSupport__point:nth-child(1){ transform:translateY(-24px); transition-delay:.96s; } .serviceCircleSupport .serviceCircleSupport__point:nth-child(2){ transform:translateX(28px); transition-delay:1.08s; } .serviceCircleSupport .serviceCircleSupport__point:nth-child(3){ transform:translateX(-28px); transition-delay:1.20s; } .serviceCircleSupport .serviceCircleSupport__point:nth-child(4){ transform:translateY(24px); transition-delay:1.32s; } .serviceCircleSupport.is-visible .serviceCircleSupport__point{ opacity:1; transform:none; } .serviceCircleSupport .serviceCircleSupport__pointIcon{ width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center; border-radius:8px; background:var(--service-soft); color:var(--service-green-dark); } .serviceCircleSupport .serviceCircleSupport__pointIcon svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================== CTA NOTE ========================================================== */ .serviceCircleSupport .serviceCircleSupport__note{ position:relative; margin-top:28px; padding:15px 16px 15px 19px; display:flex; align-items:center; gap:12px; border-radius:12px; background:#fff; border: 1px solid rgba(119,175,37,.15); box-shadow: 0 13px 32px rgba(52,72,39,.06); opacity:0; transform: translateY(35px) rotateX(-10deg); transition: opacity 1s 1.45s ease, transform 1.3s 1.45s cubic-bezier(.16,1,.3,1); } .serviceCircleSupport.is-visible .serviceCircleSupport__note{ opacity:1; transform:none; } .serviceCircleSupport .serviceCircleSupport__note::before{ content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px; border-radius:5px; background:var(--service-green); } .serviceCircleSupport .serviceCircleSupport__noteIcon{ width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:10px; color:#fff; background: linear-gradient( 145deg, var(--service-green), var(--service-green-light) ); } .serviceCircleSupport .serviceCircleSupport__noteIcon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .serviceCircleSupport .serviceCircleSupport__note small{ display:block; margin-bottom:4px; color:#89938C; font-size:8px; } .serviceCircleSupport .serviceCircleSupport__note strong{ display:block; color:var(--service-dark); font-size:11px; line-height:1.45; } /* ========================================================== RIGHT ORBIT AREA ========================================================== */ .serviceCircleSupport .serviceCircleSupport__visual{ position:relative; width:100%; min-width:0; min-height:610px; display:flex; align-items:center; justify-content:center; perspective:1800px; transform-style:preserve-3d; } /* ========================================================== ORBIT WRAPPER ========================================================== */ .serviceCircleSupport .serviceCircleSupport__orbit{ position:relative; width:520px; height:520px; max-width:100%; transform-style:preserve-3d; opacity:0; transform: translateY(70px) rotateX(28deg) rotateY(-20deg) scale(.82); transition: opacity 1.25s .25s ease, transform 1.8s .25s cubic-bezier(.16,1,.3,1); } .serviceCircleSupport.is-visible .serviceCircleSupport__orbit{ opacity:1; transform: translateY(0) rotateX(0) rotateY(0) scale(1); } /* ========================================================== RINGS ========================================================== */ .serviceCircleSupport .serviceCircleSupport__ring{ position:absolute; top:50%; left:50%; border-radius:50%; transform: translate(-50%,-50%); pointer-events:none; } /* OUTER */ .serviceCircleSupport .serviceCircleSupport__ring--outer{ width:450px; height:450px; border: 1px dashed rgba(119,175,37,.28); animation: serviceCircleRingRotate 28s linear infinite; } /* MID */ .serviceCircleSupport .serviceCircleSupport__ring--middle{ width:335px; height:335px; border: 1px solid rgba(119,175,37,.16); box-shadow: inset 0 0 45px rgba(119,175,37,.035); animation: serviceCircleRingRotateReverse 22s linear infinite; } /* INNER */ .serviceCircleSupport .serviceCircleSupport__ring--inner{ width:225px; height:225px; border: 1px dashed rgba(23,32,42,.10); animation: serviceCircleRingRotate 18s linear infinite; } @keyframes serviceCircleRingRotate{ from{ transform: translate(-50%,-50%) rotate(0deg); } to{ transform: translate(-50%,-50%) rotate(360deg); } } @keyframes serviceCircleRingRotateReverse{ from{ transform: translate(-50%,-50%) rotate(360deg); } to{ transform: translate(-50%,-50%) rotate(0deg); } } /* ========================================================== ORBIT DOTS ========================================================== */ .serviceCircleSupport .serviceCircleSupport__movingDot{ position:absolute; top:50%; left:50%; width:450px; height:450px; margin: -225px 0 0 -225px; border-radius:50%; pointer-events:none; } .serviceCircleSupport .serviceCircleSupport__movingDot::before{ content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--service-green); box-shadow: 0 0 0 5px rgba(119,175,37,.10), 0 0 17px rgba(119,175,37,.48); } .serviceCircleSupport .serviceCircleSupport__movingDot--one{ animation: serviceMovingDot 11s linear infinite; } .serviceCircleSupport .serviceCircleSupport__movingDot--two{ transform:rotate(180deg); animation: serviceMovingDotTwo 15s linear infinite; } @keyframes serviceMovingDot{ to{ transform:rotate(360deg); } } @keyframes serviceMovingDotTwo{ from{ transform:rotate(180deg); } to{ transform:rotate(-180deg); } } /* ========================================================== SMALL STATIC DOTS ========================================================== */ .serviceCircleSupport .serviceCircleSupport__staticDot{ position:absolute; width:7px; height:7px; border-radius:50%; background: rgba(119,175,37,.50); animation: serviceStaticDotPulse 2.4s ease-in-out infinite; } .serviceCircleSupport .serviceCircleSupport__staticDot--1{ left:83px; top:100px; } .serviceCircleSupport .serviceCircleSupport__staticDot--2{ right:74px; top:155px; animation-delay:.5s; } .serviceCircleSupport .serviceCircleSupport__staticDot--3{ left:105px; bottom:80px; animation-delay:1s; } .serviceCircleSupport .serviceCircleSupport__staticDot--4{ right:95px; bottom:90px; animation-delay:1.5s; } @keyframes serviceStaticDotPulse{ 50%{ transform:scale(1.8); opacity:.3; } } /* ========================================================== CENTER CORE ========================================================== */ .serviceCircleSupport .serviceCircleSupport__core{ position:absolute; z-index:10; top:50%; left:50%; width:185px; height:185px; transform: translate(-50%,-50%); border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; background: linear-gradient( 145deg, #19232C, #0B1218 ); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 25px 65px rgba(25,39,18,.25), 0 0 0 12px rgba(119,175,37,.035); opacity:0; transform: translate(-50%,-50%) scale(.45) rotate(-40deg); transition: opacity .95s .75s ease, transform 1.35s .75s cubic-bezier(.16,1,.3,1); } .serviceCircleSupport.is-visible .serviceCircleSupport__core{ opacity:1; transform: translate(-50%,-50%) scale(1) rotate(0); } /* INNER CORE */ .serviceCircleSupport .serviceCircleSupport__coreInner{ width:135px; height:135px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.13), rgba(119,175,37,.025) 62%, transparent 63% ); } .serviceCircleSupport .serviceCircleSupport__coreIcon{ width:48px; height:48px; display:grid; place-items:center; margin-bottom:10px; border-radius:14px; color:var(--service-green); background: rgba(119,175,37,.10); border: 1px solid rgba(119,175,37,.16); } .serviceCircleSupport .serviceCircleSupport__coreIcon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .serviceCircleSupport .serviceCircleSupport__core small{ display:block; color:#79858D; font-size:7px; text-transform:uppercase; letter-spacing:1px; } .serviceCircleSupport .serviceCircleSupport__core strong{ display:block; margin-top:4px; color:#fff; font-size:12px; } /* ========================================================== SERVICE OPTION BUBBLES ========================================================== */ .serviceCircleSupport .serviceCircleSupport__option{ position:absolute; z-index:12; width:150px; min-height:78px; padding:11px; display:flex; align-items:center; gap:10px; border-radius:14px; background: rgba(255,255,255,.96); border: 1px solid rgba(119,175,37,.14); box-shadow: 0 15px 38px rgba(42,63,29,.10); opacity:0; transition: opacity .9s ease, transform 1.25s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; } /* OPTION POSITIONS */ .serviceCircleSupport .serviceCircleSupport__option--1{ left:50%; top:7px; transform: translateX(-50%) translateY(-55px) rotateX(20deg) scale(.80); transition-delay:1.02s; } .serviceCircleSupport .serviceCircleSupport__option--2{ right:-4px; top:145px; transform: translateX(60px) rotateY(25deg) scale(.80); transition-delay:1.16s; } .serviceCircleSupport .serviceCircleSupport__option--3{ right:20px; bottom:85px; transform: translateX(60px) translateY(35px) rotateY(25deg) scale(.80); transition-delay:1.30s; } .serviceCircleSupport .serviceCircleSupport__option--4{ left:20px; bottom:85px; transform: translateX(-60px) translateY(35px) rotateY(-25deg) scale(.80); transition-delay:1.44s; } .serviceCircleSupport .serviceCircleSupport__option--5{ left:-5px; top:145px; transform: translateX(-60px) rotateY(-25deg) scale(.80); transition-delay:1.58s; } .serviceCircleSupport.is-visible .serviceCircleSupport__option{ opacity:1; } /* FINAL POSITIONS */ .serviceCircleSupport.is-visible .serviceCircleSupport__option--1{ transform: translateX(-50%) translateY(0) rotateX(0) scale(1); } .serviceCircleSupport.is-visible .serviceCircleSupport__option--2, .serviceCircleSupport.is-visible .serviceCircleSupport__option--3, .serviceCircleSupport.is-visible .serviceCircleSupport__option--4, .serviceCircleSupport.is-visible .serviceCircleSupport__option--5{ transform:none; } /* HOVER */ .serviceCircleSupport .serviceCircleSupport__option:hover{ border-color: rgba(119,175,37,.32); box-shadow: 0 20px 45px rgba(52,75,36,.15); } .serviceCircleSupport .serviceCircleSupport__optionIcon{ width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:10px; color:var(--service-green-dark); background:var(--service-soft); transition: transform .35s ease, background .35s ease, color .35s ease; } .serviceCircleSupport .serviceCircleSupport__option:hover .serviceCircleSupport__optionIcon{ transform: rotate(6deg) scale(1.05); color:#fff; background:var(--service-green); } .serviceCircleSupport .serviceCircleSupport__optionIcon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .serviceCircleSupport .serviceCircleSupport__optionText{ min-width:0; } .serviceCircleSupport .serviceCircleSupport__optionText strong{ display:block; margin-bottom:4px; color:var(--service-dark); font-size:10px; line-height:1.25; } .serviceCircleSupport .serviceCircleSupport__optionText span{ display:block; color:#848E88; font-size:7.5px; line-height:1.4; } /* ========================================================== MOBILE / TABLET ========================================================== */ @media(max-width:1000px){ .serviceCircleSupport .serviceCircleSupport__container{ width:min(760px,90%); grid-template-columns:1fr; gap:55px; } .serviceCircleSupport .serviceCircleSupport__content{ max-width:680px; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .serviceCircleSupport .serviceCircleSupport__label{ justify-content:center; } .serviceCircleSupport .serviceCircleSupport__points{ width:100%; } .serviceCircleSupport .serviceCircleSupport__note{ width:100%; text-align:left; } .serviceCircleSupport .serviceCircleSupport__visual{ max-width:620px; margin:auto; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .serviceCircleSupport{ padding:62px 0; } .serviceCircleSupport .serviceCircleSupport__container{ width:90%; gap:40px; } .serviceCircleSupport .serviceCircleSupport__title{ font-size: clamp(30px,8.6vw,39px); } .serviceCircleSupport .serviceCircleSupport__description{ font-size:13px; line-height:1.7; } .serviceCircleSupport .serviceCircleSupport__points{ grid-template-columns:1fr; gap:9px; text-align:left; } .serviceCircleSupport .serviceCircleSupport__visual{ min-height:auto; } .serviceCircleSupport .serviceCircleSupport__orbit{ width:100%; height:auto; min-height:610px; display:flex; flex-direction:column; align-items:stretch; padding-top:210px; transform: translateY(55px) scale(.94); } .serviceCircleSupport.is-visible .serviceCircleSupport__orbit{ transform:none; } /* CIRCLE SMALLER ON MOBILE */ .serviceCircleSupport .serviceCircleSupport__ring--outer{ width:300px; height:300px; top:155px; } .serviceCircleSupport .serviceCircleSupport__ring--middle{ width:225px; height:225px; top:155px; } .serviceCircleSupport .serviceCircleSupport__ring--inner{ width:150px; height:150px; top:155px; } .serviceCircleSupport .serviceCircleSupport__movingDot{ width:300px; height:300px; top:155px; margin: -150px 0 0 -150px; } .serviceCircleSupport .serviceCircleSupport__core{ width:135px; height:135px; top:155px; } .serviceCircleSupport .serviceCircleSupport__coreInner{ width:105px; height:105px; } .serviceCircleSupport .serviceCircleSupport__coreIcon{ width:38px; height:38px; margin-bottom:6px; } .serviceCircleSupport .serviceCircleSupport__coreIcon svg{ width:19px; height:19px; } .serviceCircleSupport .serviceCircleSupport__core strong{ font-size:10px; } /* MOBILE OPTIONS BECOME CLEAN LIST */ .serviceCircleSupport .serviceCircleSupport__option{ position:relative; top:auto; left:auto; right:auto; bottom:auto; width:100%; min-height:70px; margin-bottom:9px; transform: translateY(35px) scale(.95) !important; } .serviceCircleSupport.is-visible .serviceCircleSupport__option{ transform:none !important; } .serviceCircleSupport .serviceCircleSupport__staticDot{ display:none; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media(max-width:400px){ .serviceCircleSupport .serviceCircleSupport__container{ width:92%; } .serviceCircleSupport .serviceCircleSupport__title{ font-size:28px; } .serviceCircleSupport .serviceCircleSupport__ring--outer{ width:270px; height:270px; } .serviceCircleSupport .serviceCircleSupport__movingDot{ width:270px; height:270px; margin: -135px 0 0 -135px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .serviceCircleSupport *, .serviceCircleSupport *::before, .serviceCircleSupport *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ============================================================ WHY CHOOSE COMPUTER SERVICES MAIN CLASS: .serviceWhyChooseSupport ============================================================ */ .serviceWhyChooseSupport{ --swc-green:#77AF25; --swc-green-dark:#5D8D18; --swc-green-light:#9AD04B; --swc-dark:#17202A; --swc-text:#68737A; --swc-soft:#EFF6E7; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:55px 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 14% 20%, rgba(119,175,37,.09), transparent 24% ), radial-gradient( circle at 88% 82%, rgba(119,175,37,.055), transparent 24% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FAF6 55%, #F2F7ED 100% ); } .serviceWhyChooseSupport, .serviceWhyChooseSupport *, .serviceWhyChooseSupport *::before, .serviceWhyChooseSupport *::after{ box-sizing:border-box; } /* ============================================================ BACKGROUND ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__grid{ position:absolute; inset:0; z-index:-6; opacity:.42; background-image: linear-gradient( rgba(119,175,37,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.04) 1px, transparent 1px ); background-size:72px 72px; } .serviceWhyChooseSupport .serviceWhyChooseSupport__glow{ position:absolute; width:520px; height:520px; left:-200px; bottom:-180px; z-index:-5; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.15), rgba(119,175,37,.035) 47%, transparent 72% ); animation: serviceWhyChooseGlow 10s ease-in-out infinite alternate; } @keyframes serviceWhyChooseGlow{ to{ transform: translate(55px,-40px) scale(1.08); } } /* ============================================================ CONTAINER ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__container{ position:relative; z-index:3; width:min(1360px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(60px,7vw,105px); align-items:center; perspective:1800px; } /* ============================================================ LEFT VISUAL ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__visual{ position:relative; min-height:590px; perspective:1700px; transform-style:preserve-3d; } /* BIG BACK SHAPE */ .serviceWhyChooseSupport .serviceWhyChooseSupport__backShape{ position:absolute; width:73%; height:440px; left:12%; top:70px; border-radius:28px; background: linear-gradient( 145deg, rgba(119,175,37,.11), rgba(119,175,37,.02) ); border: 1px solid rgba(119,175,37,.13); opacity:0; transform: translateY(-70px) rotateX(18deg) rotateZ(-4deg) scale(.84); transition: opacity 1.2s .3s ease, transform 1.7s .3s cubic-bezier(.16,1,.3,1); } .serviceWhyChooseSupport.is-visible .serviceWhyChooseSupport__backShape{ opacity:1; transform: translateY(0) rotateX(0) rotateZ(-2deg) scale(1); } /* ============================================================ TRUST STACK ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__stack{ position:absolute; left:8%; top:60px; width:78%; display:flex; flex-direction:column; gap:13px; transform-style:preserve-3d; } /* TRUST ITEM */ .serviceWhyChooseSupport .serviceWhyChooseSupport__item{ position:relative; min-height:92px; padding:15px 17px; display:flex; align-items:center; gap:14px; border-radius:15px; background: rgba(255,255,255,.94); border: 1px solid rgba(63,78,51,.08); box-shadow: 0 16px 42px rgba(51,72,37,.08); opacity:0; transition: opacity 1s ease, transform 1.35s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease; } /* DIFFERENT ENTRANCE */ .serviceWhyChooseSupport .serviceWhyChooseSupport__item:nth-child(1){ transform: translateX(-70px) translateY(-25px) rotateY(-24deg) scale(.88); transition-delay:.62s; } .serviceWhyChooseSupport .serviceWhyChooseSupport__item:nth-child(2){ transform: translateX(70px) rotateY(24deg) scale(.88); transition-delay:.78s; } .serviceWhyChooseSupport .serviceWhyChooseSupport__item:nth-child(3){ transform: translateX(-70px) rotateY(-24deg) scale(.88); transition-delay:.94s; } .serviceWhyChooseSupport .serviceWhyChooseSupport__item:nth-child(4){ transform: translateX(70px) translateY(25px) rotateY(24deg) scale(.88); transition-delay:1.10s; } .serviceWhyChooseSupport.is-visible .serviceWhyChooseSupport__item{ opacity:1; transform:none; } /* HOVER */ .serviceWhyChooseSupport .serviceWhyChooseSupport__item:hover{ transform: translateY(-5px) translateX(6px); border-color: rgba(119,175,37,.24); box-shadow: 0 22px 50px rgba(51,73,36,.12); } /* ICON */ .serviceWhyChooseSupport .serviceWhyChooseSupport__icon{ width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:13px; color: var(--swc-green-dark); background: var(--swc-soft); transition: transform .35s ease, background .35s ease, color .35s ease; } .serviceWhyChooseSupport .serviceWhyChooseSupport__item:hover .serviceWhyChooseSupport__icon{ transform: rotate(5deg) scale(1.05); color:#fff; background: var(--swc-green); } .serviceWhyChooseSupport .serviceWhyChooseSupport__icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ITEM TEXT */ .serviceWhyChooseSupport .serviceWhyChooseSupport__itemText{ min-width:0; } .serviceWhyChooseSupport .serviceWhyChooseSupport__itemText strong{ display:block; margin-bottom:5px; color: var(--swc-dark); font-size:17px; } .serviceWhyChooseSupport .serviceWhyChooseSupport__itemText span{ display:block; color:#7C868B; font-size:10px; line-height:1.5; } /* ITEM NUMBER */ .serviceWhyChooseSupport .serviceWhyChooseSupport__number{ margin-left:auto; color: rgba(23,32,42,.08); font-size:28px; font-weight:800; } /* ============================================================ MOVING DOT PATH ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__dotPath{ position:absolute; right:2%; top:40px; width:120px; height:480px; pointer-events:none; } .serviceWhyChooseSupport .serviceWhyChooseSupport__dot{ position:absolute; width:8px; height:8px; border-radius:50%; background: var(--swc-green); box-shadow: 0 0 0 5px rgba(119,175,37,.08), 0 0 15px rgba(119,175,37,.38); } .serviceWhyChooseSupport .serviceWhyChooseSupport__dot--1{ top:20px; left:30px; animation: serviceWhyChooseDotOne 5.5s ease-in-out infinite alternate; } .serviceWhyChooseSupport .serviceWhyChooseSupport__dot--2{ bottom:60px; right:20px; animation: serviceWhyChooseDotTwo 6.5s ease-in-out infinite alternate; } @keyframes serviceWhyChooseDotOne{ to{ transform: translate(45px,250px) scale(.7); opacity:.35; } } @keyframes serviceWhyChooseDotTwo{ to{ transform: translate(-45px,-220px) scale(1.4); opacity:.45; } } /* ============================================================ RIGHT CONTENT ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__content{ min-width:0; max-width:620px; } /* LABEL */ .serviceWhyChooseSupport .serviceWhyChooseSupport__label{ display:inline-flex; align-items:center; gap:9px; margin-bottom:17px; color: var(--swc-green-dark); font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:0; transform: translateY(-30px) rotateX(10deg); transition: opacity 1s .08s ease, transform 1.35s .08s cubic-bezier(.16,1,.3,1); } .serviceWhyChooseSupport .serviceWhyChooseSupport__label::before{ content:""; width:30px; height:2px; background: var(--swc-green); } .serviceWhyChooseSupport.is-visible .serviceWhyChooseSupport__label{ opacity:1; transform:none; } /* ============================================================ TITLE ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__title{ margin:0; color: var(--swc-dark); font-size: clamp(25px,3.8vw,28px); line-height:1.06; font-weight:800; letter-spacing: clamp(-1.8px,-.13vw,-.7px); } .serviceWhyChooseSupport .serviceWhyChooseSupport__titleLine{ display:block; overflow:hidden; } .serviceWhyChooseSupport .serviceWhyChooseSupport__titleLine > span{ display:block; opacity:0; } .serviceWhyChooseSupport .serviceWhyChooseSupport__titleLine:nth-child(1) > span{ transform: translateY(110%) rotateX(-20deg); transition: opacity 1.15s .28s ease, transform 1.5s .28s cubic-bezier(.16,1,.3,1); } .serviceWhyChooseSupport .serviceWhyChooseSupport__titleLine:nth-child(2) > span{ transform: translateY(-110%) rotateX(20deg); transition: opacity 1.15s .50s ease, transform 1.5s .50s cubic-bezier(.16,1,.3,1); } .serviceWhyChooseSupport.is-visible .serviceWhyChooseSupport__titleLine > span{ opacity:1; transform:none; } .serviceWhyChooseSupport .serviceWhyChooseSupport__green{ color: var(--swc-green); } /* ============================================================ TEXT ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__text{ margin:21px 0 0; color: var(--swc-text); font-size:14px; line-height:1.8; opacity:0; transform: translateX(40px) translateY(12px); transition: opacity 1.05s .72s ease, transform 1.35s .72s cubic-bezier(.16,1,.3,1); } .serviceWhyChooseSupport.is-visible .serviceWhyChooseSupport__text{ opacity:1; transform:none; } /* ============================================================ MINI BENEFITS ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__mini{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; margin-top:27px; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniItem{ min-height:74px; padding:13px; display:flex; align-items:flex-start; gap:9px; border-radius:12px; background: rgba(255,255,255,.76); border: 1px solid rgba(56,74,44,.08); opacity:0; transition: opacity .9s ease, transform 1.15s cubic-bezier(.16,1,.3,1), border-color .3s ease; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniItem:nth-child(1){ transform:translateY(-26px); transition-delay:.95s; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniItem:nth-child(2){ transform:translateX(30px); transition-delay:1.08s; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniItem:nth-child(3){ transform:translateX(-30px); transition-delay:1.21s; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniItem:nth-child(4){ transform:translateY(26px); transition-delay:1.34s; } .serviceWhyChooseSupport.is-visible .serviceWhyChooseSupport__miniItem{ opacity:1; transform:none; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniIcon{ width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:7px; background: var(--swc-soft); color: var(--swc-green-dark); } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniIcon svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniItem strong{ display:block; margin-bottom:3px; color: var(--swc-dark); font-size:13px; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniItem span{ /* display:block; */ color:#7D878C; font-size:10px; line-height:1.45; } /* ============================================================ CTA ============================================================ */ .serviceWhyChooseSupport .serviceWhyChooseSupport__cta{ margin-top:28px; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding: 0 16px; border-radius:9px; color:#fff; text-decoration:none; background: linear-gradient( 90deg, #69A217, #85BD2D ); font-size:11px; font-weight:700; box-shadow: 0 12px 28px rgba(119,175,37,.20); opacity:0; transform: translateY(28px) scale(.96); transition: opacity 1s 1.48s ease, transform 1.25s 1.48s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } .serviceWhyChooseSupport.is-visible .serviceWhyChooseSupport__cta{ opacity:1; transform:none; } .serviceWhyChooseSupport .serviceWhyChooseSupport__cta:hover{ transform: translateY(-3px); box-shadow: 0 17px 38px rgba(119,175,37,.30); } .serviceWhyChooseSupport .serviceWhyChooseSupport__cta svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ============================================================ TABLET ============================================================ */ @media(max-width:950px){ .serviceWhyChooseSupport .serviceWhyChooseSupport__container{ width:min(760px,90%); grid-template-columns:1fr; gap:55px; } .serviceWhyChooseSupport .serviceWhyChooseSupport__visual{ width:min(650px,100%); min-height:570px; margin:auto; } .serviceWhyChooseSupport .serviceWhyChooseSupport__content{ max-width:680px; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .serviceWhyChooseSupport .serviceWhyChooseSupport__label{ justify-content:center; } .serviceWhyChooseSupport .serviceWhyChooseSupport__mini{ width:100%; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ .serviceWhyChooseSupport{ padding:62px 0; } .serviceWhyChooseSupport .serviceWhyChooseSupport__container{ width:90%; gap:40px; } .serviceWhyChooseSupport .serviceWhyChooseSupport__visual{ min-height:auto; } .serviceWhyChooseSupport .serviceWhyChooseSupport__backShape, .serviceWhyChooseSupport .serviceWhyChooseSupport__dotPath{ display:none; } .serviceWhyChooseSupport .serviceWhyChooseSupport__stack{ position:relative; left:auto; top:auto; width:100%; } .serviceWhyChooseSupport .serviceWhyChooseSupport__item{ min-height:auto; padding:14px; transform: translateY(42px) rotateX(-12deg) scale(.95) !important; } .serviceWhyChooseSupport.is-visible .serviceWhyChooseSupport__item{ transform:none !important; } .serviceWhyChooseSupport .serviceWhyChooseSupport__title{ font-size: clamp(30px,8.6vw,39px); } .serviceWhyChooseSupport .serviceWhyChooseSupport__text{ font-size:13px; line-height:1.7; } .serviceWhyChooseSupport .serviceWhyChooseSupport__mini{ grid-template-columns:1fr; gap:8px; } .serviceWhyChooseSupport .serviceWhyChooseSupport__miniItem{ text-align:left; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media(max-width:400px){ .serviceWhyChooseSupport .serviceWhyChooseSupport__container{ width:92%; } .serviceWhyChooseSupport .serviceWhyChooseSupport__title{ font-size:28px; } .serviceWhyChooseSupport .serviceWhyChooseSupport__icon{ width:44px; height:44px; flex-basis:44px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media(prefers-reduced-motion:reduce){ .serviceWhyChooseSupport *, .serviceWhyChooseSupport *::before, .serviceWhyChooseSupport *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ============================================================ SUPPORT PROCESS SECTION MAIN CLASS: .serviceSupportProcess ============================================================ */ .serviceSupportProcess{ --ssp-green:#77AF25; --ssp-green-dark:#5D8D18; --ssp-green-light:#9AD04B; --ssp-navy:#07162E; --ssp-navy-2:#0A2142; --ssp-white:#FFFFFF; --ssp-muted:#A7B2C1; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:55px 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 82% 18%, rgba(119,175,37,.12), transparent 24% ), radial-gradient( circle at 8% 84%, rgba(119,175,37,.055), transparent 23% ), linear-gradient( 120deg, #06142A 0%, #081C38 50%, #07152D 100% ); } .serviceSupportProcess, .serviceSupportProcess *, .serviceSupportProcess *::before, .serviceSupportProcess *::after{ box-sizing:border-box; } /* ============================================================ BACKGROUND ============================================================ */ .serviceSupportProcess .serviceSupportProcess__grid{ position:absolute; inset:0; z-index:-7; opacity:.15; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:72px 72px; -webkit-mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); } .serviceSupportProcess .serviceSupportProcess__glow{ position:absolute; width:600px; height:600px; right:-220px; top:-180px; z-index:-6; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.18), rgba(119,175,37,.04) 45%, transparent 72% ); filter:blur(8px); animation: serviceSupportProcessGlow 10s ease-in-out infinite alternate; } @keyframes serviceSupportProcessGlow{ to{ transform: translate(-55px,45px) scale(1.08); } } /* ============================================================ CONTAINER ============================================================ */ .serviceSupportProcess .serviceSupportProcess__container{ position:relative; z-index:3; width:min(1360px,92%); margin:0 auto; } /* ============================================================ HEADER ============================================================ */ .serviceSupportProcess .serviceSupportProcess__header{ max-width:820px; margin: 0 auto clamp(50px,5vw,72px); text-align:center; } .serviceSupportProcess .serviceSupportProcess__label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:17px; color:var(--ssp-green-light); font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:0; transform: translateY(-30px) rotateX(10deg); transition: opacity 1.05s .08s ease, transform 1.35s .08s cubic-bezier(.16,1,.3,1); } .serviceSupportProcess .serviceSupportProcess__label::before, .serviceSupportProcess .serviceSupportProcess__label::after{ content:""; width:28px; height:1px; background: rgba(119,175,37,.55); } .serviceSupportProcess.is-visible .serviceSupportProcess__label{ opacity:1; transform:none; } /* ============================================================ TITLE ============================================================ */ .serviceSupportProcess .serviceSupportProcess__title{ margin:0; color:#fff; font-size: clamp(28px,3.7vw,30px); line-height:1.07; font-weight:800; letter-spacing: clamp(-1.8px,-.13vw,-.7px); } .serviceSupportProcess .serviceSupportProcess__titleLine{ display:block; overflow:hidden; } .serviceSupportProcess .serviceSupportProcess__titleLine > span{ display:block; opacity:0; } .serviceSupportProcess .serviceSupportProcess__titleLine:nth-child(1) > span{ transform: translateY(110%) rotateX(-20deg); transition: opacity 1.15s .25s ease, transform 1.5s .25s cubic-bezier(.16,1,.3,1); } .serviceSupportProcess .serviceSupportProcess__titleLine:nth-child(2) > span{ transform: translateY(-110%) rotateX(20deg); transition: opacity 1.15s .47s ease, transform 1.5s .47s cubic-bezier(.16,1,.3,1); } .serviceSupportProcess.is-visible .serviceSupportProcess__titleLine > span{ opacity:1; transform:none; } .serviceSupportProcess .serviceSupportProcess__green{ color:var(--ssp-green); } .serviceSupportProcess .serviceSupportProcess__intro{ max-width:680px; margin:20px auto 0; color:var(--ssp-muted); font-size:14px; line-height:1.8; opacity:0; transform:translateY(24px); transition: opacity 1.05s .70s ease, transform 1.35s .70s cubic-bezier(.16,1,.3,1); } .serviceSupportProcess.is-visible .serviceSupportProcess__intro{ opacity:1; transform:none; } /* ============================================================ PROCESS WRAPPER ============================================================ */ .serviceSupportProcess .serviceSupportProcess__track{ position:relative; display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:18px; perspective:1800px; } /* ============================================================ CONNECTOR LINE ============================================================ */ .serviceSupportProcess .serviceSupportProcess__connector{ position:absolute; top:59px; left:7%; right:7%; height:2px; z-index:0; background: rgba(119,175,37,.10); overflow:hidden; } .serviceSupportProcess .serviceSupportProcess__connector::after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, var(--ssp-green), var(--ssp-green-light), var(--ssp-green) ); transform:scaleX(0); transform-origin:left; transition: transform 2s .82s cubic-bezier(.16,1,.3,1); } .serviceSupportProcess.is-visible .serviceSupportProcess__connector::after{ transform:scaleX(1); } /* ============================================================ STEP ============================================================ */ .serviceSupportProcess .serviceSupportProcess__step{ position:relative; z-index:2; min-height:360px; padding-top:0; opacity:0; transform-style:preserve-3d; transition: opacity 1.05s ease, transform 1.55s cubic-bezier(.16,1,.3,1); } .serviceSupportProcess .serviceSupportProcess__step:nth-child(2){ transform: translateX(-80px) translateY(-35px) rotateY(-28deg) scale(.89); transition-delay:.82s; } .serviceSupportProcess .serviceSupportProcess__step:nth-child(3){ transform: translateY(75px) rotateX(-25deg) scale(.89); transition-delay:1.00s; } .serviceSupportProcess .serviceSupportProcess__step:nth-child(4){ transform: translateY(-75px) rotateX(25deg) scale(.89); transition-delay:1.18s; } .serviceSupportProcess .serviceSupportProcess__step:nth-child(5){ transform: translateX(80px) translateY(35px) rotateY(28deg) scale(.89); transition-delay:1.36s; } .serviceSupportProcess.is-visible .serviceSupportProcess__step{ opacity:1; transform:none; } /* ============================================================ STEP NUMBER ============================================================ */ .serviceSupportProcess .serviceSupportProcess__numberWrap{ position:relative; z-index:5; width:64px; height:64px; margin: 0 auto 22px; display:grid; place-items:center; border-radius:50%; background:#0B2241; border: 1px solid rgba(119,175,37,.30); box-shadow: 0 0 0 9px rgba(119,175,37,.045); transition: transform .35s ease, background .35s ease, box-shadow .35s ease; } .serviceSupportProcess .serviceSupportProcess__numberWrap strong{ color:var(--ssp-green-light); font-size:13px; font-weight:800; } .serviceSupportProcess .serviceSupportProcess__step:hover .serviceSupportProcess__numberWrap{ transform: translateY(-5px) scale(1.05); background:var(--ssp-green); box-shadow: 0 0 0 9px rgba(119,175,37,.08), 0 15px 35px rgba(0,0,0,.18); } .serviceSupportProcess .serviceSupportProcess__step:hover .serviceSupportProcess__numberWrap strong{ color:#fff; } /* ============================================================ CARD ============================================================ */ .serviceSupportProcess .serviceSupportProcess__card{ position:relative; min-height:260px; padding:25px 22px; overflow:hidden; border-radius:17px; text-align:center; background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.025) ); border: 1px solid rgba(255,255,255,.075); box-shadow: 0 18px 45px rgba(0,0,0,.13); backdrop-filter:blur(8px); transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .35s ease, background .35s ease, box-shadow .35s ease; } .serviceSupportProcess .serviceSupportProcess__card::before{ content:""; position:absolute; width:170px; height:170px; right:-110px; top:-110px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.16), transparent 70% ); transition: transform .5s ease; } .serviceSupportProcess .serviceSupportProcess__step:hover .serviceSupportProcess__card{ transform:translateY(-7px); border-color: rgba(119,175,37,.24); background: rgba(255,255,255,.06); box-shadow: 0 26px 58px rgba(0,0,0,.22); } .serviceSupportProcess .serviceSupportProcess__step:hover .serviceSupportProcess__card::before{ transform:scale(1.6); } /* ============================================================ ICON ============================================================ */ .serviceSupportProcess .serviceSupportProcess__icon{ position:relative; z-index:2; width:50px; height:50px; margin: 0 auto 18px; display:grid; place-items:center; border-radius:14px; color:var(--ssp-green-light); background: rgba(119,175,37,.10); border: 1px solid rgba(119,175,37,.15); transition: transform .35s ease, background .35s ease, color .35s ease; } .serviceSupportProcess .serviceSupportProcess__icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .serviceSupportProcess .serviceSupportProcess__step:hover .serviceSupportProcess__icon{ transform: translateY(-4px) rotate(5deg) scale(1.04); color:#fff; background:var(--ssp-green); } /* ============================================================ TEXT ============================================================ */ .serviceSupportProcess .serviceSupportProcess__card h3{ position:relative; z-index:2; margin: 0 0 10px; color:#fff; font-size:18px; line-height:1.3; } .serviceSupportProcess .serviceSupportProcess__card p{ position:relative; z-index:2; margin:0; color:#9EA9B7; font-size:11px; line-height:1.7; } .serviceSupportProcess .serviceSupportProcess__meta{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--ssp-green-light); font-size:8px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; } .serviceSupportProcess .serviceSupportProcess__meta::before{ content:""; width:16px; height:1px; background:var(--ssp-green); } /* ============================================================ TABLET ============================================================ */ @media(max-width:1000px){ .serviceSupportProcess .serviceSupportProcess__track{ grid-template-columns: repeat(2,minmax(0,1fr)); gap:26px 18px; } .serviceSupportProcess .serviceSupportProcess__connector{ display:none; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ .serviceSupportProcess{ padding:62px 0; } .serviceSupportProcess .serviceSupportProcess__container{ width:90%; } .serviceSupportProcess .serviceSupportProcess__header{ margin-bottom:42px; } .serviceSupportProcess .serviceSupportProcess__title{ font-size: clamp(30px,8.6vw,39px); } .serviceSupportProcess .serviceSupportProcess__intro{ font-size:13px; line-height:1.7; } .serviceSupportProcess .serviceSupportProcess__track{ grid-template-columns:1fr; gap:15px; } .serviceSupportProcess .serviceSupportProcess__step:nth-child(n){ min-height:auto; transform: translateY(50px) rotateX(-13deg) scale(.94); } .serviceSupportProcess.is-visible .serviceSupportProcess__step:nth-child(n){ transform:none; } .serviceSupportProcess .serviceSupportProcess__numberWrap{ width:56px; height:56px; margin-bottom:17px; } .serviceSupportProcess .serviceSupportProcess__card{ min-height:auto; padding:22px 18px; border-radius:15px; } .serviceSupportProcess .serviceSupportProcess__card h3{ font-size:17px; } .serviceSupportProcess .serviceSupportProcess__card p{ font-size:10.5px; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media(max-width:400px){ .serviceSupportProcess .serviceSupportProcess__container{ width:92%; } .serviceSupportProcess .serviceSupportProcess__title{ font-size:28px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media(prefers-reduced-motion:reduce){ .serviceSupportProcess *, .serviceSupportProcess *::before, .serviceSupportProcess *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } .serviceTechSupportFaqSimple{ --green:#77AF25; --green-dark:#5F8F19; --green-light:#98CF48; --dark:#17202A; --text:#6B757B; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:55px 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient(circle at 12% 18%, rgba(119,175,37,.10), transparent 24%), radial-gradient(circle at 90% 82%, rgba(119,175,37,.055), transparent 24%), linear-gradient(135deg,#fff 0%,#F8FAF6 55%,#F1F6EC 100%); } .serviceTechSupportFaqSimple, .serviceTechSupportFaqSimple *, .serviceTechSupportFaqSimple *::before, .serviceTechSupportFaqSimple *::after{ box-sizing:border-box; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__grid{ position:absolute; inset:0; z-index:-5; opacity:.4; background-image: linear-gradient(rgba(119,175,37,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(119,175,37,.04) 1px,transparent 1px); background-size:72px 72px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__container{ position:relative; z-index:3; width:min(1320px,92%); margin:auto; display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(55px,6vw,90px); align-items:start; } /* LEFT */ .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__left{ max-width:500px; position:sticky; top:35px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__label{ display:inline-flex; align-items:center; gap:9px; margin-bottom:16px; color:var(--green-dark); font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; opacity:0; transform:translateY(-30px); transition: opacity 1s .1s ease, transform 1.3s .1s cubic-bezier(.16,1,.3,1); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__label::before{ content:""; width:30px; height:2px; background:var(--green); } .serviceTechSupportFaqSimple.is-visible .serviceTechSupportFaqSimple__label{ opacity:1; transform:none; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__title{ margin:0; color:var(--dark); font-size:clamp(36px,3.8vw,33px); line-height:1.07; font-weight:800; letter-spacing:-1.4px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__titleLine{ display:block; overflow:hidden; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__titleLine > span{ display:block; opacity:0; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__titleLine:nth-child(1) > span{ transform:translateY(110%) rotateX(-18deg); transition: opacity 1.1s .28s ease, transform 1.5s .28s cubic-bezier(.16,1,.3,1); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__titleLine:nth-child(2) > span{ transform:translateY(-110%) rotateX(18deg); transition: opacity 1.1s .5s ease, transform 1.5s .5s cubic-bezier(.16,1,.3,1); } .serviceTechSupportFaqSimple.is-visible .serviceTechSupportFaqSimple__titleLine > span{ opacity:1; transform:none; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__green{ color:var(--green); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__desc{ margin:20px 0 0; color:var(--text); font-size:14px; line-height:1.8; opacity:0; transform:translateX(-35px); transition: opacity 1.1s .72s ease, transform 1.35s .72s cubic-bezier(.16,1,.3,1); } .serviceTechSupportFaqSimple.is-visible .serviceTechSupportFaqSimple__desc{ opacity:1; transform:none; } /* SMALL CTA */ .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__help{ margin-top:26px; padding:17px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-radius:14px; background:linear-gradient(145deg,#17202A,#0F161B); border:1px solid rgba(255,255,255,.07); box-shadow:0 17px 38px rgba(30,42,25,.13); opacity:0; transform:translateY(35px) rotateX(-10deg); transition: opacity 1.1s .92s ease, transform 1.4s .92s cubic-bezier(.16,1,.3,1); } .serviceTechSupportFaqSimple.is-visible .serviceTechSupportFaqSimple__help{ opacity:1; transform:none; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__help small{ display:block; margin-bottom:4px; color:#818D93; font-size:8px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__help strong{ color:#fff; font-size:11px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__help a{ width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:10px; background:var(--green); transition:transform .3s ease,background .3s ease; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__help a:hover{ transform:translateX(3px); background:var(--green-dark); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__help svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* FAQ RIGHT */ .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__list{ display:grid; gap:12px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item{ overflow:hidden; border-radius:14px; background:rgba(255,255,255,.92); border:1px solid #E3E8DF; box-shadow:0 12px 30px rgba(55,72,44,.05); opacity:0; transition: opacity 1s ease, transform 1.3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item:nth-child(1){ transform:translateY(-35px); transition-delay:.5s; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item:nth-child(2){ transform:translateX(42px); transition-delay:.63s; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item:nth-child(3){ transform:translateX(-42px); transition-delay:.76s; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item:nth-child(4){ transform:translateY(35px); transition-delay:.89s; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item:nth-child(5){ transform:translateX(42px); transition-delay:1.02s; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item:nth-child(6){ transform:translateY(35px); transition-delay:1.15s; } .serviceTechSupportFaqSimple.is-visible .serviceTechSupportFaqSimple__item{ opacity:1; transform:none; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item:hover{ border-color:rgba(119,175,37,.25); box-shadow:0 18px 42px rgba(55,77,39,.08); } /* QUESTION */ .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__question{ width:100%; min-height:74px; padding:17px 18px; display:flex; align-items:center; gap:13px; border:0; outline:0; background:transparent; cursor:pointer; text-align:left; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__number{ width:39px; height:39px; flex:0 0 39px; display:grid; place-items:center; border-radius:10px; background:#EFF6E7; color:var(--green-dark); font-size:10px; font-weight:800; transition:.3s; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__questionText{ flex:1; min-width:0; color:var(--dark); font-size:14px; font-weight:700; line-height:1.45; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__toggle{ width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:50%; background:rgba(119,175,37,.07); border:1px solid rgba(119,175,37,.14); transition:.4s; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__toggle svg{ width:16px; height:16px; fill:none; stroke:var(--green-dark); stroke-width:2; stroke-linecap:round; } /* OPEN */ .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item.is-open{ border-color:rgba(119,175,37,.30); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item.is-open .serviceTechSupportFaqSimple__number{ color:#fff; background:var(--green); transform:rotate(-4deg); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item.is-open .serviceTechSupportFaqSimple__toggle{ background:var(--green); transform:rotate(45deg); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item.is-open .serviceTechSupportFaqSimple__toggle svg{ stroke:#fff; } /* ANSWER */ .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__answer{ max-height:0; overflow:hidden; transition:max-height .55s cubic-bezier(.16,1,.3,1); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__answerInner{ padding:0 70px 20px; color:#707A80; font-size:12px; line-height:1.75; opacity:0; transform:translateY(-8px); transition:opacity .35s ease,transform .4s ease; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__item.is-open .serviceTechSupportFaqSimple__answerInner{ opacity:1; transform:none; } /* RESPONSIVE */ @media(max-width:950px){ .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__container{ grid-template-columns:1fr; gap:40px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__left{ position:relative; top:auto; max-width:700px; margin:auto; text-align:center; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__help{ max-width:500px; margin:25px auto 0; text-align:left; } } @media(max-width:600px){ .serviceTechSupportFaqSimple{ padding:62px 0; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__container{ width:90%; gap:34px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__title{ font-size:clamp(30px,8.5vw,39px); } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__desc{ font-size:13px; line-height:1.7; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__question{ min-height:68px; padding:14px; gap:10px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__number{ width:34px; height:34px; flex-basis:34px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__questionText{ font-size:12px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__toggle{ width:32px; height:32px; flex-basis:32px; } .serviceTechSupportFaqSimple .serviceTechSupportFaqSimple__answerInner{ padding:0 14px 18px 58px; font-size:11px; } }