.dkx__section#dkx-process { padding-top: 54px !important; } .dkx__section#dkx-process .dkx__wrap { width: min(1360px, calc(100% - 34px)) !important; } .dkx__section#dkx-process .dkx__section-head { max-width: 1280px !important; margin: 0 auto 18px !important; text-align: center !important; } .dkx__section#dkx-process .dkx__section-title { margin: 0 0 10px !important; font-size: clamp(54px, 6.2vw, 98px) !important; line-height: .92 !important; letter-spacing:0 !important; font-weight: 950 !important; text-transform: uppercase !important; } .dkx__section#dkx-process .dkx__section-text { margin: 0 auto !important; max-width: 1040px !important; font-size: clamp(18px, 1.6vw, 24px) !important; line-height: 1.3 !important; color: rgba(26,24,24,.74) !important; font-weight: 500 !important; } .dkx__process { position: relative !important; padding: 252px 22px 28px !important; border-radius: 42px !important; overflow: visible !important; border: 1px solid rgba(255,84,84,.56) !important; background: radial-gradient(circle at 76% 10%, rgba(205,10,22,.16), transparent 34%), radial-gradient(circle at 24% 12%, rgba(252,246,245,.05), transparent 34%), linear-gradient(180deg, rgba(20,21,28,.90), rgba(6,6,9,.96)) !important; box-shadow: inset 0 0 0 1px rgba(252,246,245,.03), 0 0 0 1px rgba(153,0,17,.18), 0 0 28px rgba(153,0,17,.14), 0 24px 90px rgba(26,24,24,.70) !important; } .dkx__process::before { content: ""; position: absolute; inset: 6px; border-radius: 36px; border: 1px solid rgba(252,246,245,.04); pointer-events: none; } .dkx__process::after { content: ""; position: absolute; left: 50%; top: 46px; transform: translateX(-50%); width: min(400px, 48%); height: 116px; border-top: 1px solid rgba(153,0,17,.22); border-left: 1px solid rgba(153,0,17,.10); border-right: 1px solid rgba(153,0,17,.10); border-radius: 300px 300px 0 0; box-shadow: 0 0 22px rgba(153,0,17,.10); pointer-events: none; } .dkx__process-center { position: absolute !important; left: 50% !important; top: 22px !important; transform: translateX(-50%) !important; z-index: 5 !important; width: 208px !important; height: 208px !important; margin: 0 !important; border-radius: 50% !important; border: 2px solid rgba(252,246,245,.82) !important; background: radial-gradient(circle at 50% 20%, rgba(252,246,245,.12), transparent 34%), linear-gradient(180deg, #1a1818 0%, #1a1818 100%) !important; box-shadow: inset 0 0 0 10px rgba(26,24,24,.48), 0 0 0 10px rgba(153,0,17,.92), 0 0 0 18px rgba(153,0,17,.10), 0 0 34px rgba(153,0,17,.38), 0 18px 36px rgba(26,24,24,.42) !important; display: grid !important; place-items: center !important; text-align: center !important; animation: none !important; } .dkx__process-center::before, .dkx__process-center::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .dkx__process-center::before { inset: -10px; border: 1px solid rgba(153,0,17,.42); box-shadow: 0 0 20px rgba(153,0,17,.16); } .dkx__process-center::after { inset: -22px; border: 1px solid rgba(153,0,17,.12); box-shadow: 0 0 28px rgba(153,0,17,.08); } .dkx__process-center strong { display: block !important; font-size: 30px !important; line-height: .92 !important; letter-spacing:0 !important; font-weight: 950 !important; color: #FCF6F5 !important; text-transform: uppercase !important; text-shadow: 0 2px 8px rgba(26,24,24,.34) !important; } .dkx__process-center span { display: block !important; margin-top: 10px !important; font-size: 15px !important; line-height: 1 !important; letter-spacing:0 !important; font-weight: 900 !important; color: #990011 !important; text-transform: uppercase !important; text-shadow: 0 0 12px rgba(255,30,30,.22) !important; } .dkx__process-grid { position: relative !important; z-index: 2 !important; margin-top: 6px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } .dkx__process-item { position: relative !important; min-height: 148px !important; padding: 28px 24px 24px 126px !important; border-radius: 22px !important; overflow: hidden !important; border: 1px solid rgba(252,246,245,.16) !important; background: radial-gradient(circle at 50% 0%, rgba(252,246,245,.11), transparent 46%), linear-gradient(180deg, #990011 0%, #990011 42%, #1a1818 100%) !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.18), inset 0 -12px 22px rgba(120,0,0,.16), 0 0 20px rgba(153,0,17,.10), 0 12px 30px rgba(26,24,24,.28) !important; color: #FCF6F5 !important; transform: none !important; transition: transform .22s ease, box-shadow .22s ease !important; } .dkx__process-item:hover { transform: translateY(-3px) !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.20), inset 0 -12px 22px rgba(120,0,0,.16), 0 0 24px rgba(153,0,17,.14), 0 16px 36px rgba(26,24,24,.34) !important; } .dkx__process-item::before { content: attr(data-num) !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 58px !important; line-height: .8 !important; letter-spacing:0 !important; font-weight: 950 !important; color: #FCF6F5 !important; text-shadow: 0 2px 10px rgba(26,24,24,.12) !important; } .dkx__process-item::after { content: ""; position: absolute; left: 88px; top: 22%; bottom: 22%; width: 1px; background: rgba(252,246,245,.24); pointer-events: none; } .dkx__process-item h3 { margin: 0 0 8px !important; font-size: 22px !important; line-height: 1 !important; letter-spacing:0 !important; font-weight: 900 !important; text-transform: uppercase !important; color: #FCF6F5 !important; } .dkx__process-item p { margin: 0 !important; max-width: 290px !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 500 !important; color: rgba(252,246,245,.88) !important; } @media (max-width: 1180px) { .dkx__section#dkx-process .dkx__wrap { width: min(1360px, calc(100% - 24px)) !important; } .dkx__process { padding: 242px 18px 22px !important; } .dkx__process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .dkx__process-item { min-height: 140px !important; } } @media (max-width: 760px) { .dkx__section#dkx-process { padding-top: 34px !important; } .dkx__section#dkx-process .dkx__section-title { font-size: clamp(34px, 9.5vw, 58px) !important; } .dkx__section#dkx-process .dkx__section-text { font-size: 15px !important; } .dkx__process { padding: 194px 14px 14px !important; border-radius: 28px !important; } .dkx__process::before { inset: 5px; border-radius: 22px; } .dkx__process::after { top: 36px; width: min(240px, 68%); height: 82px; } .dkx__process-center { width: 160px !important; height: 160px !important; top: 18px !important; box-shadow: inset 0 0 0 8px rgba(26,24,24,.48), 0 0 0 8px rgba(153,0,17,.92), 0 0 0 14px rgba(153,0,17,.08), 0 0 24px rgba(153,0,17,.28), 0 14px 28px rgba(26,24,24,.38) !important; } .dkx__process-center::before { inset: -8px; } .dkx__process-center::after { inset: -16px; } .dkx__process-center strong { font-size: 24px !important; } .dkx__process-center span { font-size: 12px !important; margin-top: 8px !important; } .dkx__process-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 4px !important; } .dkx__process-item { min-height: 112px !important; padding: 18px 16px 16px 98px !important; border-radius: 18px !important; } .dkx__process-item::before { left: 16px !important; font-size: 44px !important; } .dkx__process-item::after { left: 72px; } .dkx__process-item h3 { font-size: 18px !important; margin-bottom: 6px !important; } .dkx__process-item p { font-size: 13px !important; line-height: 1.25 !important; } }