.elementor-47 .elementor-element.elementor-element-30d2f25{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-47 .elementor-element.elementor-element-30d2f25:not(.elementor-motion-effects-element-type-background), .elementor-47 .elementor-element.elementor-element-30d2f25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#06172C;}.elementor-47 .elementor-element.elementor-element-093f467{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-47 .elementor-element.elementor-element-569898e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-47 .elementor-element.elementor-element-6a12721{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-47 .elementor-element.elementor-element-ac99d6a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-47 .elementor-element.elementor-element-46acf38{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-47 .elementor-element.elementor-element-2f1e26f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-47 .elementor-element.elementor-element-dbfa112{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-49f7932 *//* ========================================================= DIGISIGN GRAPHICS ABOUT PAGE — SECTION 01 ABOUT HERO ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .dg-about-hero{ position:relative; width:100%; padding:75px 0 80px; background: linear-gradient( 135deg, #06172c 0%, #081d38 55%, #102b4a 100% ); overflow:hidden; box-sizing:border-box; } /* ========================================================= BACKGROUND DECORATION ========================================================= */ .dg-about-hero-circle{ position:absolute; border-radius:50%; pointer-events:none; } /* Large top-right circle */ .dg-about-hero-circle-1{ width:520px; height:520px; top:-310px; right:-180px; background: radial-gradient( circle, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 70% ); } /* Bottom-left circle */ .dg-about-hero-circle-2{ width:350px; height:350px; left:-230px; bottom:-250px; border:1px solid rgba(255,123,0,.12); } /* ========================================================= CONTAINER ========================================================= */ .dg-about-hero-container{ position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:65px; box-sizing:border-box; } /* ========================================================= LEFT CONTENT ========================================================= */ .dg-about-hero-content{ min-width:0; max-width:650px; } /* ========================================================= BADGE ========================================================= */ .dg-about-hero-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; margin-bottom:22px; color:#ff8a16; background:rgba(255,123,0,.10); border:1px solid rgba(255,123,0,.35); border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; white-space:nowrap; box-sizing:border-box; } .dg-about-hero-badge-icon{ width:25px; height:25px; display:flex; align-items:center; justify-content:center; background:#ff7b00; color:#fff; border-radius:50%; flex-shrink:0; } .dg-about-hero-badge-icon svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= HEADING ========================================================= */ .dg-about-hero-title{ margin:0 0 22px; color:#fff; font-size:58px; font-weight:800; line-height:1.05; letter-spacing:-1.2px; } .dg-about-hero-title span{ display:block; color:#ff7b00; } /* ========================================================= DESCRIPTION ========================================================= */ .dg-about-hero-description{ max-width:620px; margin:0 0 13px; color:#c8d2df; font-size:18px; line-height:1.50; } .dg-about-hero-description strong{ color:#fff; font-weight:700; } .dg-about-hero-description-small{ margin-bottom:28px; color:#aebdcd; } /* ========================================================= BUTTONS ========================================================= */ .dg-about-hero-buttons{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .dg-about-hero-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:8px 10px 8px 20px; border-radius:12px; text-decoration:none; font-size:13px; font-weight:700; box-sizing:border-box; } /* Primary */ .dg-about-hero-btn-primary{ background: linear-gradient( 135deg, #ff7b00, #ff9700 ); color:#fff; } /* Secondary */ .dg-about-hero-btn-secondary{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; } /* Button arrow */ .dg-about-hero-btn-arrow{ width:31px; height:31px; display:flex; align-items:center; justify-content:center; background:#fff; color:#081526; border-radius:50%; flex-shrink:0; } .dg-about-hero-btn-arrow svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= RIGHT VISUAL ========================================================= */ .dg-about-hero-visual{ position:relative; width:100%; min-width:0; padding:18px 15px 18px 15px; box-sizing:border-box; } /* ========================================================= IMAGE ========================================================= */ .dg-about-hero-image-wrap{ position:relative; width:100%; aspect-ratio:4 / 4.5; overflow:hidden; border-radius:24px; border:1px solid rgba(255,255,255,.18); box-shadow: 0 25px 60px rgba(0,0,0,.30); } .dg-about-hero-image-wrap img{ width:100%; height:100%; display:block; object-fit:cover; } .dg-about-hero-image-overlay{ position:absolute; inset:0; background: linear-gradient( 180deg, rgba(6,23,44,.02) 35%, rgba(6,23,44,.72) 100% ); } /* ========================================================= IMAGE LABEL ========================================================= */ .dg-about-hero-image-label{ position:absolute; left:18px; right:18px; bottom:18px; display:flex; align-items:center; gap:8px; color:#fff; font-size:9px; font-weight:700; letter-spacing:.7px; } .dg-about-hero-image-dot{ width:8px; height:8px; background:#ff7b00; border-radius:50%; flex-shrink:0; } /* ========================================================= STAT CARDS ========================================================= */ .dg-about-hero-stat{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:12px 15px; background:#fff; border-radius:14px; box-shadow:0 15px 35px rgba(0,0,0,.25); box-sizing:border-box; } .dg-about-hero-stat-top{ top:0; left:-5px; } .dg-about-hero-stat-bottom{ right:-5px; bottom:0; } .dg-about-hero-stat-icon{ width:35px; height:35px; display:flex; align-items:center; justify-content:center; background:#fff4ea; color:#ff7b00; border-radius:10px; flex-shrink:0; } .dg-about-hero-stat-icon svg{ width:19px; height:19px; fill:none; stroke:#ff7b00; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .dg-about-hero-stat strong{ display:block; color:#081526; font-size:20px; font-weight:800; line-height:1.1; } .dg-about-hero-stat span{ display:block; margin-top:2px; color:#667085; font-size:10px; line-height:1.3; white-space:nowrap; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px){ .dg-about-hero{ padding:65px 0 70px; } .dg-about-hero-container{ grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap:40px; } .dg-about-hero-title{ font-size:46px; letter-spacing:-.8px; } .dg-about-hero-description{ font-size:15px; } .dg-about-hero-visual{ padding:15px 10px; } .dg-about-hero-stat{ padding:10px 12px; } .dg-about-hero-stat-top{ left:-8px; } .dg-about-hero-stat-bottom{ right:-8px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .dg-about-hero{ padding:50px 0 55px; text-align:center; } .dg-about-hero-container{ width:100%; display:flex; flex-direction:column; align-items:center; gap:40px; padding:0 16px; } /* Content */ .dg-about-hero-content{ width:100%; max-width:500px; display:flex; flex-direction:column; align-items:center; } /* Badge */ .dg-about-hero-badge{ margin:0 auto 18px; font-size:9.5px; padding:6px 12px; } /* Heading */ .dg-about-hero-title{ width:100%; max-width:400px; margin:0 auto 17px; font-size:36px; line-height:1.08; letter-spacing:-.5px; } /* Description */ .dg-about-hero-description{ width:100%; max-width:390px; margin:0 auto 11px; font-size:13.5px; line-height:1.65; text-align:center; } .dg-about-hero-description-small{ margin-bottom:22px; } /* Buttons */ .dg-about-hero-buttons{ width:100%; display:flex; justify-content:center; align-items:center; gap:9px; } .dg-about-hero-btn{ min-height:44px; padding:7px 8px 7px 15px; border-radius:11px; font-size:11px; } .dg-about-hero-btn-arrow{ width:27px; height:27px; } .dg-about-hero-btn-arrow svg{ width:12px; height:12px; } /* Visual */ .dg-about-hero-visual{ width:100%; max-width:430px; padding:12px 8px; } .dg-about-hero-image-wrap{ aspect-ratio:4 / 3.5; border-radius:20px; } /* Stats */ .dg-about-hero-stat{ padding:9px 11px; border-radius:12px; gap:8px; } .dg-about-hero-stat-top{ top:0; left:0; } .dg-about-hero-stat-bottom{ right:0; bottom:0; } .dg-about-hero-stat-icon{ width:30px; height:30px; border-radius:8px; } .dg-about-hero-stat-icon svg{ width:16px; height:16px; } .dg-about-hero-stat strong{ font-size:16px; } .dg-about-hero-stat span{ font-size:8.5px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:380px){ .dg-about-hero{ padding:42px 0 48px; } .dg-about-hero-container{ padding:0 13px; gap:34px; } .dg-about-hero-title{ font-size:31px; max-width:340px; } .dg-about-hero-description{ font-size:12.5px; max-width:330px; } .dg-about-hero-buttons{ flex-direction:column; width:100%; max-width:280px; gap:8px; } .dg-about-hero-btn{ width:100%; max-width:270px; } .dg-about-hero-visual{ max-width:340px; padding:10px 5px; } .dg-about-hero-stat{ padding:8px 9px; } .dg-about-hero-stat-top{ left:-3px; } .dg-about-hero-stat-bottom{ right:-3px; } .dg-about-hero-stat strong{ font-size:14px; } .dg-about-hero-stat span{ font-size:8px; } } /* ========================================================= VERY SMALL DEVICES ========================================================= */ @media (max-width:340px){ .dg-about-hero-title{ font-size:28px; } .dg-about-hero-description{ font-size:12px; } .dg-about-hero-stat{ padding:7px 8px; gap:6px; } .dg-about-hero-stat-icon{ width:27px; height:27px; } .dg-about-hero-stat strong{ font-size:13px; } .dg-about-hero-stat span{ font-size:7.5px; } } /* ========================================================= ELEMENTOR SAFETY ========================================================= */ .dg-about-hero, .dg-about-hero *, .dg-about-hero *::before, .dg-about-hero *::after{ box-sizing:border-box; } .dg-about-hero img{ max-width:100%; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bb6e468 *//* ========================================================= DIGISIGN GRAPHICS ABOUT PAGE — SECTION 02 WHO WE ARE Fully Responsive Desktop • Tablet • Mobile No Hover Animation ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .dg-about-who{ position:relative; width:100%; padding:40px 0; background:#ffffff; overflow:hidden; box-sizing:border-box; } /* ========================================================= CONTAINER ========================================================= */ .dg-about-who-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:70px; box-sizing:border-box; } /* ========================================================= LEFT VISUAL ========================================================= */ .dg-about-who-visual{ position:relative; width:100%; min-width:0; padding:15px 12px 18px; box-sizing:border-box; } /* ========================================================= IMAGE WRAPPER ========================================================= */ .dg-about-who-image-wrap{ position:relative; width:100%; aspect-ratio:1 / 1.05; overflow:hidden; border-radius:22px; background:#eef2f5; box-shadow: 0 18px 45px rgba(15,23,42,.12); } /* ========================================================= IMAGE ========================================================= */ .dg-about-who-image-wrap img{ width:100%; height:100%; display:block; object-fit:cover; } /* ========================================================= IMAGE OVERLAY ========================================================= */ .dg-about-who-image-overlay{ position:absolute; inset:0; background: linear-gradient( 180deg, rgba(6,23,44,0) 45%, rgba(6,23,44,.70) 100% ); pointer-events:none; } /* ========================================================= IMAGE LABEL ========================================================= */ .dg-about-who-image-label{ position:absolute; left:18px; right:18px; bottom:18px; display:flex; align-items:center; gap:8px; color:#ffffff; font-size:9px; font-weight:700; letter-spacing:.7px; line-height:1.3; } .dg-about-who-image-dot{ width:8px; height:8px; flex:0 0 8px; background:#ff7b00; border-radius:50%; } /* ========================================================= EXPERIENCE CARD ========================================================= */ .dg-about-who-experience{ position:absolute; right:-5px; bottom:0; z-index:3; display:flex; align-items:center; gap:10px; padding:13px 17px; background:#ffffff; border-radius:14px; box-shadow: 0 12px 30px rgba(15,23,42,.16); box-sizing:border-box; } /* ========================================================= EXPERIENCE ICON ========================================================= */ .dg-about-who-experience-icon{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff4ea; border-radius:10px; } .dg-about-who-experience-icon svg{ width:19px; height:19px; fill:none; stroke:#ff7b00; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= EXPERIENCE TEXT ========================================================= */ .dg-about-who-experience strong{ display:block; color:#081526; font-size:20px; font-weight:800; line-height:1.1; } .dg-about-who-experience span{ display:block; margin-top:2px; color:#667085; font-size:10px; line-height:1.3; white-space:nowrap; } /* ========================================================= RIGHT CONTENT ========================================================= */ .dg-about-who-content{ width:100%; min-width:0; max-width:620px; } /* ========================================================= BADGE ========================================================= */ .dg-about-who-badge{ display:inline-block; padding:7px 15px; margin-bottom:16px; background:#fff4ea; color:#ff7b00; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; } /* ========================================================= HEADING ========================================================= */ .dg-about-who-title{ margin:0 0 18px; color:#081526; font-size:43px; font-weight:800; line-height:1.12; letter-spacing:-.7px; } .dg-about-who-title span{ display:block; color:#ff7b00; } /* ========================================================= INTRO ========================================================= */ .dg-about-who-intro{ margin:0 0 13px; color:#4f5f73; font-size:16px; font-weight:600; line-height:1.7; } /* ========================================================= DESCRIPTION ========================================================= */ .dg-about-who-description{ margin:0 0 25px; color:#667085; font-size:14px; line-height:1.75; } /* ========================================================= FEATURE GRID ========================================================= */ .dg-about-who-features{ width:100%; display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:13px 25px; margin-bottom:28px; } /* ========================================================= FEATURE ========================================================= */ .dg-about-who-feature{ display:flex; align-items:center; gap:9px; min-width:0; color:#081526; font-size:13px; font-weight:600; line-height:1.4; } /* ========================================================= CHECK ICON ========================================================= */ .dg-about-who-check{ width:25px; height:25px; display:flex; align-items:center; justify-content:center; flex:0 0 25px; background:#ff7b00; border-radius:50%; } .dg-about-who-check svg{ width:13px; height:13px; fill:none; stroke:#ffffff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= CTA BUTTON ========================================================= */ .dg-about-who-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:46px; padding:7px 9px 7px 20px; background: linear-gradient( 135deg, #ff7b00, #ff9700 ); color:#ffffff; border-radius:11px; text-decoration:none; font-size:13px; font-weight:700; box-sizing:border-box; } /* ========================================================= CTA ARROW ========================================================= */ .dg-about-who-btn-arrow{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#ffffff; color:#081526; border-radius:50%; flex-shrink:0; } .dg-about-who-btn-arrow svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= TABLET 768px — 1024px ========================================================= */ @media (max-width:1024px){ .dg-about-who{ padding:65px 0; } .dg-about-who-container{ grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap:40px; } .dg-about-who-title{ font-size:36px; letter-spacing:-.5px; } .dg-about-who-intro{ font-size:15px; } .dg-about-who-description{ font-size:13.5px; } .dg-about-who-features{ gap:12px 16px; } .dg-about-who-feature{ font-size:12px; } .dg-about-who-experience{ right:-3px; padding:10px 13px; } } /* ========================================================= MOBILE Below 768px ========================================================= */ @media (max-width:767px){ .dg-about-who{ padding:55px 0; text-align:center; } .dg-about-who-container{ width:100%; display:flex; flex-direction:column; align-items:center; gap:38px; padding:0 16px; } /* ----------------------------------------- IMAGE ----------------------------------------- */ .dg-about-who-visual{ width:100%; max-width:440px; padding:10px 7px 15px; } .dg-about-who-image-wrap{ aspect-ratio:1 / .85; border-radius:19px; } .dg-about-who-image-label{ left:15px; right:15px; bottom:15px; font-size:8px; } /* ----------------------------------------- EXPERIENCE CARD ----------------------------------------- */ .dg-about-who-experience{ right:0; bottom:0; padding:9px 11px; border-radius:11px; gap:7px; } .dg-about-who-experience-icon{ width:30px; height:30px; border-radius:8px; } .dg-about-who-experience-icon svg{ width:16px; height:16px; } .dg-about-who-experience strong{ font-size:16px; } .dg-about-who-experience span{ font-size:8.5px; } /* ----------------------------------------- CONTENT ----------------------------------------- */ .dg-about-who-content{ width:100%; max-width:500px; display:flex; flex-direction:column; align-items:center; text-align:center; } /* ----------------------------------------- BADGE ----------------------------------------- */ .dg-about-who-badge{ margin:0 auto 13px; padding:6px 13px; font-size:9.5px; } /* ----------------------------------------- HEADING ----------------------------------------- */ .dg-about-who-title{ width:100%; max-width:420px; margin:0 auto 15px; font-size:31px; line-height:1.13; letter-spacing:-.4px; text-align:center; } .dg-about-who-title span{ display:block; } /* ----------------------------------------- TEXT ----------------------------------------- */ .dg-about-who-intro{ width:100%; max-width:400px; margin:0 auto 11px; font-size:13.5px; line-height:1.65; text-align:center; } .dg-about-who-description{ width:100%; max-width:400px; margin:0 auto 22px; font-size:12.5px; line-height:1.65; text-align:center; } /* ----------------------------------------- FEATURES ----------------------------------------- */ .dg-about-who-features{ width:100%; max-width:390px; grid-template-columns: repeat(2,minmax(0,1fr)); gap:13px 12px; margin:0 auto 24px; text-align:left; } .dg-about-who-feature{ gap:7px; font-size:11.5px; text-align:left; } .dg-about-who-check{ width:23px; height:23px; flex:0 0 23px; } .dg-about-who-check svg{ width:12px; height:12px; } /* ----------------------------------------- BUTTON ----------------------------------------- */ .dg-about-who-btn{ min-height:43px; padding:6px 8px 6px 16px; border-radius:10px; font-size:11px; } .dg-about-who-btn-arrow{ width:28px; height:28px; } .dg-about-who-btn-arrow svg{ width:12px; height:12px; } } /* ========================================================= SMALL MOBILE Below 380px ========================================================= */ @media (max-width:380px){ .dg-about-who{ padding:48px 0; } .dg-about-who-container{ padding:0 13px; gap:32px; } .dg-about-who-visual{ max-width:340px; padding:8px 5px 13px; } .dg-about-who-image-wrap{ border-radius:17px; } .dg-about-who-title{ max-width:340px; font-size:28px; } .dg-about-who-intro{ max-width:330px; font-size:12.5px; } .dg-about-who-description{ max-width:330px; font-size:12px; } .dg-about-who-features{ max-width:320px; gap:11px 8px; } .dg-about-who-feature{ font-size:10.5px; gap:6px; } .dg-about-who-check{ width:21px; height:21px; flex-basis:21px; } .dg-about-who-btn{ width:auto; min-height:41px; font-size:10.5px; } } /* ========================================================= VERY SMALL DEVICES Below 340px ========================================================= */ @media (max-width:340px){ .dg-about-who-container{ padding:0 11px; } .dg-about-who-title{ font-size:26px; } .dg-about-who-intro{ font-size:12px; } .dg-about-who-description{ font-size:11.5px; } .dg-about-who-features{ grid-template-columns:1fr; max-width:270px; gap:9px; } .dg-about-who-feature{ font-size:11px; } .dg-about-who-experience{ padding:7px 9px; } .dg-about-who-experience strong{ font-size:14px; } .dg-about-who-experience span{ font-size:7.5px; } } /* ========================================================= ELEMENTOR SAFETY ========================================================= */ .dg-about-who, .dg-about-who *, .dg-about-who *::before, .dg-about-who *::after{ box-sizing:border-box; } .dg-about-who img{ display:block; max-width:100%; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-08beeca *//* ========================================================= DIGISIGN GRAPHICS ABOUT PAGE — SECTION 03 OUR JOURNEY Responsive: Desktop • Tablet • Mobile No hover animation ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .dg-about-journey{ position:relative; width:100%; padding:40px 0 40px; background:#f8fafc; overflow:hidden; box-sizing:border-box; } /* ========================================================= CONTAINER ========================================================= */ .dg-about-journey-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; } /* ========================================================= HEADING ========================================================= */ .dg-about-journey-heading{ width:100%; max-width:760px; margin:0 auto 50px; text-align:center; } /* Badge */ .dg-about-journey-badge{ display:inline-block; padding:7px 15px; margin-bottom:15px; background:#fff4ea; color:#ff7b00; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; } /* Heading */ .dg-about-journey-heading h2{ margin:0 0 15px; color:#081526; font-size:43px; font-weight:800; line-height:1.15; letter-spacing:-.6px; } .dg-about-journey-heading h2 span{ color:#ff7b00; } /* Description */ .dg-about-journey-heading p{ max-width:680px; margin:0 auto; color:#667085; font-size:16px; line-height:1.75; } /* ========================================================= TIMELINE ========================================================= */ .dg-about-journey-timeline{ position:relative; display:grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap:16px; width:100%; } /* Connecting line */ .dg-about-journey-timeline::before{ content:""; position:absolute; top:28px; left:7%; right:7%; height:2px; background:#ffd7b3; z-index:0; } /* ========================================================= JOURNEY CARD ========================================================= */ .dg-about-journey-item{ position:relative; z-index:1; min-width:0; padding:20px 15px 19px; background:#ffffff; border:1px solid #edf0f3; border-radius:15px; box-shadow: 0 7px 20px rgba(15,23,42,.045); box-sizing:border-box; } /* ========================================================= TOP AREA ========================================================= */ .dg-about-journey-top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:16px; } /* Number */ .dg-about-journey-number{ color:#e8ecf1; font-size:27px; font-weight:800; line-height:1; } /* Icon */ .dg-about-journey-icon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex:0 0 38px; background:#fff4ea; color:#ff7b00; border:1px solid #ffe1c5; border-radius:50%; } .dg-about-journey-icon svg{ width:18px; height:18px; fill:none; stroke:#ff7b00; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= CARD CONTENT ========================================================= */ .dg-about-journey-content h3{ margin:0 0 8px; color:#081526; font-size:16px; font-weight:750; line-height:1.25; } .dg-about-journey-content p{ margin:0; color:#667085; font-size:14px; line-height:1.5; } /* ========================================================= BOTTOM MESSAGE ========================================================= */ .dg-about-journey-bottom{ max-width:700px; margin:32px auto 0; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; background:#ffffff; border:1px solid #edf0f3; border-radius:12px; box-shadow:0 6px 18px rgba(15,23,42,.035); box-sizing:border-box; } .dg-about-journey-bottom-icon{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex:0 0 28px; background:#ff7b00; color:#fff; border-radius:50%; } .dg-about-journey-bottom-icon svg{ width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; } .dg-about-journey-bottom p{ margin:0; color:#667085; font-size:12px; line-height:1.5; text-align:center; } .dg-about-journey-bottom strong{ color:#081526; font-weight:700; } /* ========================================================= TABLET 768px — 1024px ========================================================= */ @media (max-width:1024px){ .dg-about-journey{ padding:65px 0 70px; } .dg-about-journey-heading{ max-width:700px; margin-bottom:40px; } .dg-about-journey-heading h2{ font-size:37px; } .dg-about-journey-heading p{ font-size:13.5px; } /* 3 × 2 */ .dg-about-journey-timeline{ grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; } /* Hide desktop line */ .dg-about-journey-timeline::before{ display:none; } .dg-about-journey-item{ padding:18px 15px; } .dg-about-journey-content h3{ font-size:15px; } .dg-about-journey-content p{ font-size:11.5px; } } /* ========================================================= MOBILE Below 768px ========================================================= */ @media (max-width:767px){ .dg-about-journey{ padding:55px 0 60px; } .dg-about-journey-container{ padding:0 16px; } /* Heading */ .dg-about-journey-heading{ max-width:500px; margin-bottom:32px; } .dg-about-journey-badge{ padding:6px 13px; margin-bottom:13px; font-size:9.5px; } .dg-about-journey-heading h2{ max-width:400px; margin:0 auto 13px; font-size:31px; line-height:1.12; letter-spacing:-.3px; } .dg-about-journey-heading p{ max-width:390px; font-size:12.5px; line-height:1.65; } /* ===================================================== MOBILE TIMELINE ===================================================== */ .dg-about-journey-timeline{ position:relative; display:flex; flex-direction:column; gap:12px; width:100%; max-width:500px; margin:0 auto; padding-left:0; } /* Vertical line */ .dg-about-journey-timeline::before{ display:block; top:28px; bottom:28px; left:19px; right:auto; width:2px; height:auto; background:#ffd7b3; } /* Card */ .dg-about-journey-item{ width:100%; min-height:0; display:grid; grid-template-columns:46px minmax(0,1fr); align-items:start; gap:11px; padding:14px 15px 14px 10px; border-radius:13px; text-align:left; } /* Top */ .dg-about-journey-top{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; margin:0; } /* Number */ .dg-about-journey-number{ order:2; font-size:17px; line-height:1; color:#dfe5eb; } /* Icon */ .dg-about-journey-icon{ order:1; width:37px; height:37px; flex:0 0 37px; background:#fff4ea; } .dg-about-journey-icon svg{ width:17px; height:17px; } /* Content */ .dg-about-journey-content{ padding-top:2px; min-width:0; } .dg-about-journey-content h3{ margin:0 0 5px; font-size:14px; line-height:1.3; } .dg-about-journey-content p{ font-size:11px; line-height:1.6; } /* Bottom */ .dg-about-journey-bottom{ width:100%; max-width:500px; margin:25px auto 0; padding:11px 13px; gap:8px; } .dg-about-journey-bottom-icon{ width:26px; height:26px; flex-basis:26px; } .dg-about-journey-bottom p{ font-size:10.5px; line-height:1.5; } } /* ========================================================= SMALL MOBILE Below 380px ========================================================= */ @media (max-width:380px){ .dg-about-journey{ padding:48px 0 52px; } .dg-about-journey-container{ padding:0 13px; } .dg-about-journey-heading{ margin-bottom:27px; } .dg-about-journey-heading h2{ font-size:28px; max-width:340px; } .dg-about-journey-heading p{ max-width:330px; font-size:11.8px; } .dg-about-journey-timeline{ gap:10px; } .dg-about-journey-item{ grid-template-columns:41px minmax(0,1fr); gap:9px; padding:12px 11px 12px 8px; } .dg-about-journey-timeline::before{ left:17px; top:25px; bottom:25px; } .dg-about-journey-icon{ width:34px; height:34px; flex-basis:34px; } .dg-about-journey-icon svg{ width:15px; height:15px; } .dg-about-journey-number{ font-size:15px; } .dg-about-journey-content h3{ font-size:13px; } .dg-about-journey-content p{ font-size:10.5px; line-height:1.55; } .dg-about-journey-bottom{ margin-top:20px; padding:10px; } .dg-about-journey-bottom p{ font-size:9.8px; } } /* ========================================================= VERY SMALL DEVICES Below 340px ========================================================= */ @media (max-width:340px){ .dg-about-journey-container{ padding:0 11px; } .dg-about-journey-heading h2{ font-size:26px; } .dg-about-journey-heading p{ font-size:11.5px; } .dg-about-journey-item{ grid-template-columns:38px minmax(0,1fr); gap:8px; } .dg-about-journey-icon{ width:31px; height:31px; flex-basis:31px; } .dg-about-journey-icon svg{ width:14px; height:14px; } .dg-about-journey-number{ font-size:14px; } .dg-about-journey-content h3{ font-size:12.5px; } .dg-about-journey-content p{ font-size:10px; } } /* ========================================================= ELEMENTOR / GLOBAL SAFETY ========================================================= */ .dg-about-journey, .dg-about-journey *, .dg-about-journey *::before, .dg-about-journey *::after{ box-sizing:border-box; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-a90f70f *//* ========================================================= DIGISIGN GRAPHICS ABOUT PAGE — SECTION 04 WHY DIGISIGN GRAPHICS Desktop • Tablet • Mobile No Hover Animation Inline SVG Icons ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .dg-about-why{ position:relative; width:100%; padding:72px 0 75px; background: linear-gradient( 135deg, #06172c 0%, #081d38 55%, #102b4a 100% ); overflow:hidden; box-sizing:border-box; } /* ========================================================= BACKGROUND DECORATION ========================================================= */ .dg-about-why::before{ content:""; position:absolute; width:420px; height:420px; top:-260px; right:-150px; border-radius:50%; background: radial-gradient( circle, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 70% ); pointer-events:none; } .dg-about-why::after{ content:""; position:absolute; width:300px; height:300px; left:-220px; bottom:-210px; border-radius:50%; border:1px solid rgba(255,123,0,.09); pointer-events:none; } /* ========================================================= CONTAINER ========================================================= */ .dg-about-why-container{ position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; } /* ========================================================= HEADING ========================================================= */ .dg-about-why-heading{ width:100%; max-width:760px; margin:0 auto 42px; text-align:center; } /* Badge */ .dg-about-why-badge{ display:inline-block; padding:7px 15px; margin-bottom:15px; background:rgba(255,123,0,.10); border:1px solid rgba(255,123,0,.30); color:#ff8a16; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; } /* Heading */ .dg-about-why-heading h2{ margin:0 0 14px; color:#ffffff; font-size:43px; font-weight:800; line-height:1.15; letter-spacing:-.6px; } .dg-about-why-heading h2 span{ color:#ff7b00; } /* Description */ .dg-about-why-heading p{ max-width:680px; margin:0 auto; color:#b9c6d5; font-size:16px; line-height:1.75; } /* ========================================================= CARDS GRID ========================================================= */ .dg-about-why-grid{ width:100%; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; } /* ========================================================= CARD ========================================================= */ .dg-about-why-card{ min-width:0; padding:20px 20px 21px; background:#ffffff; border:1px solid rgba(255,255,255,.10); border-radius:16px; box-shadow: 0 10px 25px rgba(0,0,0,.12); box-sizing:border-box; } /* ========================================================= CARD TOP ========================================================= */ .dg-about-why-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; } /* Number */ .dg-about-why-number{ color:#e4e9ee; font-size:28px; font-weight:800; line-height:1; } /* ========================================================= ICON ========================================================= */ .dg-about-why-icon{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; flex:0 0 42px; background:#fff4ea; border:1px solid #ffe1c5; border-radius:11px; } .dg-about-why-icon svg{ width:21px; height:21px; fill:none; stroke:#ff7b00; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= CARD TITLE ========================================================= */ .dg-about-why-card h3{ margin:0 0 7px; color:#081526; font-size:17px; font-weight:750; line-height:1.3; } /* ========================================================= CARD DESCRIPTION ========================================================= */ .dg-about-why-card p{ margin:0; color:#667085; font-size:14px; line-height:1.50; } /* ========================================================= BOTTOM TRUST LINE ========================================================= */ .dg-about-why-bottom{ width:100%; max-width:700px; margin:28px auto 0; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; box-sizing:border-box; } .dg-about-why-bottom-icon{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex:0 0 28px; background:#ff7b00; color:#fff; border-radius:50%; } .dg-about-why-bottom-icon svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .dg-about-why-bottom p{ margin:0; color:#b9c6d5; font-size:11.5px; line-height:1.5; text-align:center; } .dg-about-why-bottom strong{ color:#ffffff; font-weight:700; } /* ========================================================= TABLET 768px — 1024px ========================================================= */ @media (max-width:1024px){ .dg-about-why{ padding:62px 0 65px; } .dg-about-why-heading{ max-width:700px; margin-bottom:35px; } .dg-about-why-heading h2{ font-size:37px; } .dg-about-why-heading p{ font-size:13.5px; } /* 2 columns */ .dg-about-why-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); gap:15px; } .dg-about-why-card{ padding:18px; } .dg-about-why-card h3{ font-size:16px; } .dg-about-why-card p{ font-size:11.5px; } } /* ========================================================= MOBILE Below 768px ========================================================= */ @media (max-width:767px){ .dg-about-why{ padding:54px 0 58px; text-align:center; } .dg-about-why-container{ padding:0 16px; } /* Heading */ .dg-about-why-heading{ max-width:500px; margin-bottom:30px; } .dg-about-why-badge{ padding:6px 13px; margin-bottom:13px; font-size:9.5px; } .dg-about-why-heading h2{ max-width:400px; margin:0 auto 12px; font-size:31px; line-height:1.12; letter-spacing:-.3px; } .dg-about-why-heading p{ max-width:390px; font-size:12.5px; line-height:1.65; } /* ========================================= CARDS — SINGLE COLUMN ========================================== */ .dg-about-why-grid{ width:100%; max-width:500px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:11px; } /* Card */ .dg-about-why-card{ width:100%; padding:15px 16px; border-radius:13px; text-align:left; } /* Top */ .dg-about-why-card-top{ margin-bottom:11px; } /* Number */ .dg-about-why-number{ font-size:22px; } /* Icon */ .dg-about-why-icon{ width:37px; height:37px; flex-basis:37px; border-radius:9px; } .dg-about-why-icon svg{ width:19px; height:19px; } /* Title */ .dg-about-why-card h3{ margin-bottom:5px; font-size:14px; line-height:1.3; } /* Description */ .dg-about-why-card p{ font-size:11px; line-height:1.6; } /* Bottom */ .dg-about-why-bottom{ max-width:500px; margin:22px auto 0; padding:10px 12px; gap:8px; } .dg-about-why-bottom-icon{ width:26px; height:26px; flex-basis:26px; } .dg-about-why-bottom-icon svg{ width:12px; height:12px; } .dg-about-why-bottom p{ font-size:10px; line-height:1.5; } } /* ========================================================= SMALL MOBILE Below 380px ========================================================= */ @media (max-width:380px){ .dg-about-why{ padding:48px 0 52px; } .dg-about-why-container{ padding:0 13px; } .dg-about-why-heading{ margin-bottom:26px; } .dg-about-why-heading h2{ max-width:340px; font-size:28px; } .dg-about-why-heading p{ max-width:330px; font-size:11.8px; } .dg-about-why-grid{ max-width:330px; gap:9px; } .dg-about-why-card{ padding:13px 14px; border-radius:12px; } .dg-about-why-card-top{ margin-bottom:9px; } .dg-about-why-number{ font-size:20px; } .dg-about-why-icon{ width:34px; height:34px; flex-basis:34px; } .dg-about-why-icon svg{ width:17px; height:17px; } .dg-about-why-card h3{ font-size:13px; } .dg-about-why-card p{ font-size:10.5px; line-height:1.55; } .dg-about-why-bottom{ max-width:330px; margin-top:18px; } .dg-about-why-bottom p{ font-size:9.5px; } } /* ========================================================= VERY SMALL DEVICES Below 340px ========================================================= */ @media (max-width:340px){ .dg-about-why-container{ padding:0 11px; } .dg-about-why-heading h2{ font-size:26px; } .dg-about-why-heading p{ font-size:11.5px; } .dg-about-why-grid{ max-width:290px; } .dg-about-why-card{ padding:12px; } .dg-about-why-card h3{ font-size:12.5px; } .dg-about-why-card p{ font-size:10px; } .dg-about-why-bottom{ max-width:290px; padding:9px; } .dg-about-why-bottom p{ font-size:9px; } } /* ========================================================= ELEMENTOR / GLOBAL SAFETY ========================================================= */ .dg-about-why, .dg-about-why *, .dg-about-why *::before, .dg-about-why *::after{ box-sizing:border-box; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-eb7f499 *//* ========================================================= DIGISIGN GRAPHICS ABOUT PAGE — SECTION 05 VISION & MISSION Desktop • Tablet • Mobile No Hover Animation Inline SVG Icons ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .dg-about-purpose{ position:relative; width:100%; padding:78px 0 80px; background: linear-gradient( 135deg, #06172c 0%, #081d38 55%, #102b4a 100% ); overflow:hidden; box-sizing:border-box; } /* ========================================================= DECORATIVE BACKGROUND ========================================================= */ .dg-about-purpose-circle{ position:absolute; border-radius:50%; pointer-events:none; } /* Top right */ .dg-about-purpose-circle-1{ width:500px; height:500px; top:-310px; right:-190px; background: radial-gradient( circle, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 70% ); } /* Bottom left */ .dg-about-purpose-circle-2{ width:360px; height:360px; left:-260px; bottom:-250px; border:1px solid rgba(255,123,0,.10); } /* ========================================================= CONTAINER ========================================================= */ .dg-about-purpose-container{ position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; } /* ========================================================= HEADING ========================================================= */ .dg-about-purpose-heading{ width:100%; max-width:780px; margin:0 auto 45px; text-align:center; } /* Badge */ .dg-about-purpose-badge{ display:inline-block; padding:7px 15px; margin-bottom:15px; background:rgba(255,123,0,.10); border:1px solid rgba(255,123,0,.30); color:#ff8a16; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; } /* Heading */ .dg-about-purpose-heading h2{ margin:0 0 14px; color:#ffffff; font-size:43px; font-weight:800; line-height:1.15; letter-spacing:-.7px; } .dg-about-purpose-heading h2 span{ color:#ff7b00; } /* Description */ .dg-about-purpose-heading p{ max-width:680px; margin:0 auto; color:#b9c6d5; font-size:14px; line-height:1.75; } /* ========================================================= VISION & MISSION GRID ========================================================= */ .dg-about-purpose-grid{ width:100%; display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:20px; } /* ========================================================= CARD ========================================================= */ .dg-about-purpose-card{ min-width:0; padding:28px 30px; background:#ffffff; border-radius:19px; border:1px solid rgba(255,255,255,.12); box-shadow: 0 15px 35px rgba(0,0,0,.14); box-sizing:border-box; } /* ========================================================= CARD TOP ========================================================= */ .dg-about-purpose-card-top{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; } /* ========================================================= ICON ========================================================= */ .dg-about-purpose-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#fff4ea; border:1px solid #ffe1c5; border-radius:13px; flex-shrink:0; } .dg-about-purpose-icon svg{ width:24px; height:24px; fill:none; stroke:#ff7b00; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= CARD NUMBER ========================================================= */ .dg-about-purpose-card-number{ color:#e7ebef; font-size:42px; font-weight:800; line-height:1; } /* ========================================================= LABEL ========================================================= */ .dg-about-purpose-card-label{ display:block; margin-bottom:10px; color:#ff7b00; font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; } /* ========================================================= CARD HEADING ========================================================= */ .dg-about-purpose-card h3{ margin:0 0 15px; color:#081526; font-size:25px; font-weight:800; line-height:1.2; letter-spacing:-.3px; } .dg-about-purpose-card h3 span{ display:block; color:#ff7b00; } /* ========================================================= MAIN TEXT ========================================================= */ .dg-about-purpose-main-text{ margin:0 0 12px; color:#4f5f73; font-size:14px; font-weight:600; line-height:1.5; } /* ========================================================= SUPPORTING TEXT ========================================================= */ .dg-about-purpose-support-text{ margin:0 0 20px; color:#667085; font-size:14px; line-height:1.5; } /* ========================================================= CARD POINTS ========================================================= */ .dg-about-purpose-points{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-top:16px; border-top:1px solid #edf0f3; } .dg-about-purpose-points span{ display:inline-flex; align-items:center; gap:5px; color:#081526; font-size:11px; font-weight:700; white-space:nowrap; } .dg-about-purpose-points svg{ width:15px; height:15px; padding:2px; background:#ff7b00; border-radius:50%; fill:none; stroke:#ffffff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= BOTTOM STATEMENT ========================================================= */ .dg-about-purpose-bottom{ display:flex; align-items:center; justify-content:center; gap:16px; max-width:900px; margin:30px auto 0; } .dg-about-purpose-bottom-line{ width:70px; height:1px; flex-shrink:0; background:rgba(255,255,255,.18); } .dg-about-purpose-bottom p{ margin:0; color:#b9c6d5; font-size:12px; line-height:1.5; text-align:center; } .dg-about-purpose-bottom strong{ color:#ffffff; font-weight:700; } /* ========================================================= TABLET 768px — 1024px ========================================================= */ @media (max-width:1024px){ .dg-about-purpose{ padding:65px 0 68px; } .dg-about-purpose-heading{ max-width:700px; margin-bottom:37px; } .dg-about-purpose-heading h2{ font-size:37px; } .dg-about-purpose-heading p{ font-size:13.5px; } .dg-about-purpose-grid{ gap:16px; } .dg-about-purpose-card{ padding:23px 22px; } .dg-about-purpose-card h3{ font-size:22px; } .dg-about-purpose-main-text{ font-size:13px; } .dg-about-purpose-support-text{ font-size:11.5px; } } /* ========================================================= MOBILE Below 768px ========================================================= */ @media (max-width:767px){ .dg-about-purpose{ padding:55px 0 58px; text-align:center; } .dg-about-purpose-container{ padding:0 16px; } /* ----------------------------------------- HEADING ----------------------------------------- */ .dg-about-purpose-heading{ max-width:500px; margin-bottom:30px; } .dg-about-purpose-badge{ padding:6px 13px; margin-bottom:13px; font-size:9.5px; } .dg-about-purpose-heading h2{ max-width:400px; margin:0 auto 12px; font-size:31px; line-height:1.12; letter-spacing:-.3px; } .dg-about-purpose-heading p{ max-width:390px; font-size:12.5px; line-height:1.65; } /* ----------------------------------------- GRID ----------------------------------------- */ .dg-about-purpose-grid{ width:100%; max-width:500px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:13px; } /* ----------------------------------------- CARD ----------------------------------------- */ .dg-about-purpose-card{ width:100%; padding:20px 18px; border-radius:15px; text-align:left; } /* ----------------------------------------- CARD TOP ----------------------------------------- */ .dg-about-purpose-card-top{ margin-bottom:14px; } .dg-about-purpose-icon{ width:40px; height:40px; border-radius:10px; } .dg-about-purpose-icon svg{ width:20px; height:20px; } .dg-about-purpose-card-number{ font-size:32px; } /* ----------------------------------------- LABEL ----------------------------------------- */ .dg-about-purpose-card-label{ margin-bottom:8px; font-size:9.5px; } /* ----------------------------------------- TITLE ----------------------------------------- */ .dg-about-purpose-card h3{ margin-bottom:12px; font-size:20px; line-height:1.2; } /* ----------------------------------------- TEXT ----------------------------------------- */ .dg-about-purpose-main-text{ margin-bottom:10px; font-size:12px; line-height:1.65; } .dg-about-purpose-support-text{ margin-bottom:17px; font-size:11px; line-height:1.65; } /* ----------------------------------------- POINTS ----------------------------------------- */ .dg-about-purpose-points{ gap:7px; padding-top:13px; } .dg-about-purpose-points span{ font-size:10px; } .dg-about-purpose-points svg{ width:14px; height:14px; } /* ----------------------------------------- BOTTOM ----------------------------------------- */ .dg-about-purpose-bottom{ max-width:500px; margin:22px auto 0; gap:9px; } .dg-about-purpose-bottom-line{ display:none; } .dg-about-purpose-bottom p{ max-width:390px; font-size:10px; line-height:1.55; } } /* ========================================================= SMALL MOBILE Below 380px ========================================================= */ @media (max-width:380px){ .dg-about-purpose{ padding:48px 0 52px; } .dg-about-purpose-container{ padding:0 13px; } .dg-about-purpose-heading{ margin-bottom:26px; } .dg-about-purpose-heading h2{ max-width:340px; font-size:28px; } .dg-about-purpose-heading p{ max-width:330px; font-size:11.8px; } .dg-about-purpose-grid{ max-width:330px; gap:10px; } .dg-about-purpose-card{ padding:17px 15px; border-radius:13px; } .dg-about-purpose-icon{ width:36px; height:36px; border-radius:9px; } .dg-about-purpose-icon svg{ width:18px; height:18px; } .dg-about-purpose-card-number{ font-size:29px; } .dg-about-purpose-card-label{ font-size:9px; } .dg-about-purpose-card h3{ font-size:18px; margin-bottom:10px; } .dg-about-purpose-main-text{ font-size:11.5px; } .dg-about-purpose-support-text{ font-size:10.5px; } .dg-about-purpose-points{ gap:6px; } .dg-about-purpose-points span{ font-size:9.5px; } .dg-about-purpose-bottom{ max-width:330px; } .dg-about-purpose-bottom p{ font-size:9.5px; } } /* ========================================================= VERY SMALL DEVICES Below 340px ========================================================= */ @media (max-width:340px){ .dg-about-purpose-container{ padding:0 11px; } .dg-about-purpose-heading h2{ font-size:26px; } .dg-about-purpose-heading p{ font-size:11.5px; } .dg-about-purpose-grid{ max-width:290px; } .dg-about-purpose-card{ padding:15px 13px; } .dg-about-purpose-card h3{ font-size:17px; } .dg-about-purpose-main-text{ font-size:11px; } .dg-about-purpose-support-text{ font-size:10px; } .dg-about-purpose-points span{ font-size:9px; } .dg-about-purpose-bottom{ max-width:290px; } .dg-about-purpose-bottom p{ font-size:9px; } } /* ========================================================= ELEMENTOR / GLOBAL SAFETY ========================================================= */ .dg-about-purpose, .dg-about-purpose *, .dg-about-purpose *::before, .dg-about-purpose *::after{ box-sizing:border-box; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bedb108 *//* ========================================================= DIGISIGN GRAPHICS ABOUT PAGE — SECTION 06 OUR CORE VALUES Desktop • Tablet • Mobile No Hover Animation Inline SVG Icons ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .dg-about-values{ position:relative; width:100%; padding:40px 0 40px; background:#ffffff; overflow:hidden; box-sizing:border-box; } /* ========================================================= CONTAINER ========================================================= */ .dg-about-values-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; } /* ========================================================= HEADING ========================================================= */ .dg-about-values-heading{ width:100%; max-width:760px; margin:0 auto 43px; text-align:center; } /* ========================================================= BADGE ========================================================= */ .dg-about-values-badge{ display:inline-block; padding:7px 15px; margin-bottom:15px; background:#fff4ea; color:#ff7b00; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; } /* ========================================================= HEADING ========================================================= */ .dg-about-values-heading h2{ margin:0 0 14px; color:#081526; font-size:43px; font-weight:800; line-height:1.15; letter-spacing:-.6px; } .dg-about-values-heading h2 span{ color:#ff7b00; } /* ========================================================= DESCRIPTION ========================================================= */ .dg-about-values-heading p{ max-width:680px; margin:0 auto; color:#667085; font-size:16px; line-height:1.5; } /* ========================================================= VALUES GRID ========================================================= */ .dg-about-values-grid{ width:100%; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:17px; } /* ========================================================= VALUE CARD ========================================================= */ .dg-about-values-card{ min-width:0; padding:21px 21px 18px; background:#ffffff; border:1px solid #e9edf1; border-radius:16px; box-shadow: 0 8px 25px rgba(15,23,42,.045); box-sizing:border-box; } /* ========================================================= CARD TOP ========================================================= */ .dg-about-values-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:15px; } /* ========================================================= NUMBER ========================================================= */ .dg-about-values-number{ color:#e7ebef; font-size:28px; font-weight:800; line-height:1; } /* ========================================================= ICON ========================================================= */ .dg-about-values-icon{ width:41px; height:41px; display:flex; align-items:center; justify-content:center; flex:0 0 41px; background:#fff4ea; border:1px solid #ffe1c5; border-radius:11px; } .dg-about-values-icon svg{ width:20px; height:20px; fill:none; stroke:#ff7b00; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= CARD TITLE ========================================================= */ .dg-about-values-card h3{ margin:0 0 7px; color:#081526; font-size:17px; font-weight:750; line-height:1.3; } /* ========================================================= CARD DESCRIPTION ========================================================= */ .dg-about-values-card p{ margin:0; color:#667085; font-size:14px; line-height:1.5; } /* ========================================================= CARD BOTTOM LINE ========================================================= */ .dg-about-values-line{ width:100%; height:1px; margin:15px 0 10px; background:#edf0f3; } /* ========================================================= KEYWORD ========================================================= */ .dg-about-values-keyword{ color:#ff7b00; font-size:9px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; } /* ========================================================= BOTTOM STATEMENT ========================================================= */ .dg-about-values-bottom{ width:100%; max-width:760px; margin:29px auto 0; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; background:#f8fafc; border:1px solid #edf0f3; border-radius:12px; box-sizing:border-box; } .dg-about-values-bottom-icon{ width:27px; height:27px; display:flex; align-items:center; justify-content:center; flex:0 0 27px; background:#ff7b00; color:#ffffff; border-radius:50%; } .dg-about-values-bottom-icon svg{ width:13px; height:13px; fill:none; stroke:#ffffff; stroke-width:2; stroke-linecap:round; } .dg-about-values-bottom p{ margin:0; color:#667085; font-size:11.5px; line-height:1.5; text-align:center; } .dg-about-values-bottom strong{ color:#081526; font-weight:700; } /* ========================================================= TABLET 768px — 1024px ========================================================= */ @media (max-width:1024px){ .dg-about-values{ padding:63px 0 68px; } .dg-about-values-heading{ max-width:700px; margin-bottom:36px; } .dg-about-values-heading h2{ font-size:37px; } .dg-about-values-heading p{ font-size:13.5px; } /* 2 columns */ .dg-about-values-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); gap:15px; } .dg-about-values-card{ padding:18px; } .dg-about-values-card h3{ font-size:16px; } .dg-about-values-card p{ font-size:11.5px; } } /* ========================================================= MOBILE Below 768px ========================================================= */ @media (max-width:767px){ .dg-about-values{ padding:54px 0 58px; text-align:center; } .dg-about-values-container{ padding:0 16px; } /* Heading */ .dg-about-values-heading{ max-width:500px; margin-bottom:29px; } .dg-about-values-badge{ padding:6px 13px; margin-bottom:13px; font-size:9.5px; } .dg-about-values-heading h2{ max-width:400px; margin:0 auto 12px; font-size:31px; line-height:1.12; letter-spacing:-.3px; } .dg-about-values-heading p{ max-width:390px; font-size:12.5px; line-height:1.65; } /* ========================================= GRID ========================================== */ .dg-about-values-grid{ width:100%; max-width:500px; margin:0 auto; grid-template-columns:1fr; gap:10px; } /* ========================================= CARD ========================================== */ .dg-about-values-card{ width:100%; padding:16px 16px 14px; border-radius:13px; text-align:left; } .dg-about-values-card-top{ margin-bottom:11px; } /* Number */ .dg-about-values-number{ font-size:22px; } /* Icon */ .dg-about-values-icon{ width:37px; height:37px; flex-basis:37px; border-radius:9px; } .dg-about-values-icon svg{ width:18px; height:18px; } /* Title */ .dg-about-values-card h3{ margin-bottom:5px; font-size:14px; line-height:1.3; } /* Description */ .dg-about-values-card p{ font-size:11px; line-height:1.6; } /* Bottom */ .dg-about-values-line{ margin:11px 0 8px; } .dg-about-values-keyword{ font-size:8.5px; } /* Bottom statement */ .dg-about-values-bottom{ max-width:500px; margin:20px auto 0; padding:10px 12px; gap:8px; } .dg-about-values-bottom-icon{ width:25px; height:25px; flex-basis:25px; } .dg-about-values-bottom-icon svg{ width:12px; height:12px; } .dg-about-values-bottom p{ font-size:10px; line-height:1.5; } } /* ========================================================= SMALL MOBILE Below 380px ========================================================= */ @media (max-width:380px){ .dg-about-values{ padding:48px 0 52px; } .dg-about-values-container{ padding:0 13px; } .dg-about-values-heading{ margin-bottom:25px; } .dg-about-values-heading h2{ max-width:340px; font-size:28px; } .dg-about-values-heading p{ max-width:330px; font-size:11.8px; } .dg-about-values-grid{ max-width:330px; gap:8px; } .dg-about-values-card{ padding:14px 14px 12px; border-radius:12px; } .dg-about-values-number{ font-size:20px; } .dg-about-values-icon{ width:34px; height:34px; flex-basis:34px; } .dg-about-values-icon svg{ width:16px; height:16px; } .dg-about-values-card h3{ font-size:13px; } .dg-about-values-card p{ font-size:10.5px; line-height:1.55; } .dg-about-values-keyword{ font-size:8px; } .dg-about-values-bottom{ max-width:330px; margin-top:17px; } .dg-about-values-bottom p{ font-size:9.5px; } } /* ========================================================= VERY SMALL DEVICES Below 340px ========================================================= */ @media (max-width:340px){ .dg-about-values-container{ padding:0 11px; } .dg-about-values-heading h2{ font-size:26px; } .dg-about-values-heading p{ font-size:11.5px; } .dg-about-values-grid{ max-width:290px; } .dg-about-values-card{ padding:13px; } .dg-about-values-card h3{ font-size:12.5px; } .dg-about-values-card p{ font-size:10px; } .dg-about-values-bottom{ max-width:290px; padding:9px; } .dg-about-values-bottom p{ font-size:9px; } } /* ========================================================= ELEMENTOR / GLOBAL SAFETY ========================================================= */ .dg-about-values, .dg-about-values *, .dg-about-values *::before, .dg-about-values *::after{ box-sizing:border-box; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7d3e8a1 *//* ========================================================= DIGISIGN GRAPHICS ABOUT PAGE — SECTION 07 OUR COMMITMENT Desktop • Tablet • Mobile No Hover Animation Inline SVG Icons ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .dg-about-commitment{ position:relative; width:100%; padding:45px 0 40px; background:#fffaf5; overflow:hidden; box-sizing:border-box; } /* ========================================================= BACKGROUND DECORATION ========================================================= */ .dg-about-commitment::before{ content:""; position:absolute; width:420px; height:420px; right:-260px; top:-220px; border-radius:50%; background: radial-gradient( circle, rgba(255,123,0,.08) 0%, rgba(255,123,0,0) 70% ); pointer-events:none; } .dg-about-commitment::after{ content:""; position:absolute; width:280px; height:280px; left:-210px; bottom:-200px; border:1px solid rgba(255,123,0,.08); border-radius:50%; pointer-events:none; } /* ========================================================= MAIN CONTAINER ========================================================= */ .dg-about-commitment-container{ position:relative; z-index:2; width:100%; max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:65px; box-sizing:border-box; } /* ========================================================= LEFT CONTENT ========================================================= */ .dg-about-commitment-content{ width:100%; max-width:510px; min-width:0; } /* ========================================================= BADGE ========================================================= */ .dg-about-commitment-badge{ display:inline-block; padding:7px 15px; margin-bottom:16px; background:#fff0e3; color:#ff7b00; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; } /* ========================================================= HEADING ========================================================= */ .dg-about-commitment-content h2{ margin:0 0 18px; color:#081526; font-size:42px; font-weight:800; line-height:1.13; letter-spacing:-.6px; } .dg-about-commitment-content h2 span{ display:block; color:#ff7b00; } /* ========================================================= INTRO ========================================================= */ .dg-about-commitment-intro{ margin:0 0 13px; color:#4f5f73; font-size:15px; font-weight:600; line-height:1.7; } /* ========================================================= DESCRIPTION ========================================================= */ .dg-about-commitment-description{ margin:0 0 25px; color:#667085; font-size:13px; line-height:1.75; } /* ========================================================= BUTTON ========================================================= */ .dg-about-commitment-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:6px 8px 6px 18px; background: linear-gradient( 135deg, #ff7b00, #ff9700 ); color:#ffffff; border-radius:10px; text-decoration:none; font-size:12px; font-weight:700; box-sizing:border-box; } .dg-about-commitment-btn-icon{ width:29px; height:29px; display:flex; align-items:center; justify-content:center; background:#ffffff; color:#081526; border-radius:50%; flex:0 0 29px; } .dg-about-commitment-btn-icon svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= COMMITMENT GRID ========================================================= */ .dg-about-commitment-grid{ width:100%; min-width:0; display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px; } /* ========================================================= COMMITMENT CARD ========================================================= */ .dg-about-commitment-card{ display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; gap:13px; min-width:0; padding:20px 18px; background:#ffffff; border:1px solid #f0e8df; border-radius:15px; box-shadow: 0 8px 22px rgba(15,23,42,.045); box-sizing:border-box; } /* ========================================================= ICON ========================================================= */ .dg-about-commitment-icon{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:#fff4ea; border:1px solid #ffe1c5; border-radius:11px; flex:0 0 42px; } .dg-about-commitment-icon svg{ width:20px; height:20px; fill:none; stroke:#ff7b00; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= NUMBER ========================================================= */ .dg-about-commitment-number{ display:block; margin-bottom:4px; color:#ff7b00; font-size:12px; font-weight:800; letter-spacing:.7px; } /* ========================================================= CARD TITLE ========================================================= */ .dg-about-commitment-card h3{ margin:0 0 6px; color:#081526; font-size:16px; font-weight:750; line-height:1.3; } /* ========================================================= CARD DESCRIPTION ========================================================= */ .dg-about-commitment-card p{ margin:0; color:#667085; font-size:14px; line-height:1.5; } /* ========================================================= TRUST STATEMENT ========================================================= */ .dg-about-commitment-trust{ position:relative; z-index:2; width:100%; max-width:760px; margin:30px auto 0; padding:12px 18px; display:flex; align-items:center; justify-content:center; gap:10px; background:#ffffff; border:1px solid #f0e8df; border-radius:12px; box-shadow: 0 7px 20px rgba(15,23,42,.04); box-sizing:border-box; } .dg-about-commitment-trust-icon{ width:27px; height:27px; display:flex; align-items:center; justify-content:center; flex:0 0 27px; background:#ff7b00; border-radius:50%; } .dg-about-commitment-trust-icon svg{ width:13px; height:13px; fill:none; stroke:#ffffff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .dg-about-commitment-trust p{ margin:0; color:#667085; font-size:11px; line-height:1.5; text-align:center; } .dg-about-commitment-trust strong{ color:#081526; font-weight:700; } /* ========================================================= TABLET 768px — 1024px ========================================================= */ @media (max-width:1024px){ .dg-about-commitment{ padding:63px 0 38px; } .dg-about-commitment-container{ gap:40px; } .dg-about-commitment-content h2{ font-size:36px; } .dg-about-commitment-intro{ font-size:14px; } .dg-about-commitment-description{ font-size:12.5px; } .dg-about-commitment-grid{ gap:12px; } .dg-about-commitment-card{ grid-template-columns:36px minmax(0,1fr); gap:10px; padding:17px 15px; } .dg-about-commitment-icon{ width:36px; height:36px; flex-basis:36px; border-radius:9px; } .dg-about-commitment-icon svg{ width:18px; height:18px; } .dg-about-commitment-card h3{ font-size:14px; } .dg-about-commitment-card p{ font-size:10.5px; } } /* ========================================================= MOBILE Below 768px ========================================================= */ @media (max-width:767px){ .dg-about-commitment{ padding:54px 0 34px; text-align:center; } .dg-about-commitment-container{ display:flex; flex-direction:column; align-items:center; gap:30px; padding:0 16px; } /* ----------------------------------------- LEFT CONTENT ----------------------------------------- */ .dg-about-commitment-content{ max-width:500px; display:flex; flex-direction:column; align-items:center; text-align:center; } .dg-about-commitment-badge{ padding:6px 13px; margin-bottom:13px; font-size:9.5px; } .dg-about-commitment-content h2{ max-width:420px; margin:0 auto 14px; font-size:31px; line-height:1.12; letter-spacing:-.3px; } .dg-about-commitment-content h2 span{ display:block; } .dg-about-commitment-intro{ max-width:400px; margin:0 auto 10px; font-size:12.5px; line-height:1.65; } .dg-about-commitment-description{ max-width:400px; margin:0 auto 21px; font-size:11.5px; line-height:1.65; } /* ----------------------------------------- BUTTON ----------------------------------------- */ .dg-about-commitment-btn{ min-height:42px; padding:6px 7px 6px 15px; border-radius:9px; font-size:10.5px; } .dg-about-commitment-btn-icon{ width:27px; height:27px; flex-basis:27px; } .dg-about-commitment-btn-icon svg{ width:12px; height:12px; } /* ----------------------------------------- CARDS ----------------------------------------- */ .dg-about-commitment-grid{ width:100%; max-width:500px; grid-template-columns:1fr; gap:9px; } .dg-about-commitment-card{ width:100%; grid-template-columns:38px minmax(0,1fr); gap:10px; padding:14px; border-radius:12px; text-align:left; } .dg-about-commitment-icon{ width:38px; height:38px; flex-basis:38px; border-radius:9px; } .dg-about-commitment-icon svg{ width:18px; height:18px; } .dg-about-commitment-number{ margin-bottom:3px; font-size:7.5px; } .dg-about-commitment-card h3{ margin-bottom:4px; font-size:13px; } .dg-about-commitment-card p{ font-size:10.5px; line-height:1.55; } /* ----------------------------------------- TRUST ----------------------------------------- */ .dg-about-commitment-trust{ max-width:500px; margin:20px 16px 0; padding:10px 12px; gap:8px; } .dg-about-commitment-trust-icon{ width:25px; height:25px; flex-basis:25px; } .dg-about-commitment-trust-icon svg{ width:12px; height:12px; } .dg-about-commitment-trust p{ font-size:9.5px; line-height:1.5; } } /* ========================================================= SMALL MOBILE Below 380px ========================================================= */ @media (max-width:380px){ .dg-about-commitment{ padding:48px 0 30px; } .dg-about-commitment-container{ padding:0 13px; gap:26px; } .dg-about-commitment-content h2{ max-width:340px; font-size:28px; } .dg-about-commitment-intro{ max-width:330px; font-size:11.8px; } .dg-about-commitment-description{ max-width:330px; font-size:11px; } .dg-about-commitment-grid{ max-width:330px; gap:8px; } .dg-about-commitment-card{ grid-template-columns:34px minmax(0,1fr); gap:9px; padding:12px; border-radius:11px; } .dg-about-commitment-icon{ width:34px; height:34px; flex-basis:34px; } .dg-about-commitment-icon svg{ width:16px; height:16px; } .dg-about-commitment-card h3{ font-size:12.5px; } .dg-about-commitment-card p{ font-size:10px; line-height:1.5; } .dg-about-commitment-trust{ margin-left:13px; margin-right:13px; max-width:330px; } .dg-about-commitment-trust p{ font-size:9px; } } /* ========================================================= VERY SMALL DEVICES Below 340px ========================================================= */ @media (max-width:340px){ .dg-about-commitment-container{ padding:0 11px; } .dg-about-commitment-content h2{ font-size:26px; } .dg-about-commitment-intro{ font-size:11.5px; } .dg-about-commitment-description{ font-size:10.5px; } .dg-about-commitment-grid{ max-width:290px; } .dg-about-commitment-card{ grid-template-columns:31px minmax(0,1fr); gap:8px; padding:11px; } .dg-about-commitment-icon{ width:31px; height:31px; flex-basis:31px; } .dg-about-commitment-icon svg{ width:15px; height:15px; } .dg-about-commitment-card h3{ font-size:12px; } .dg-about-commitment-card p{ font-size:9.5px; } .dg-about-commitment-trust{ max-width:290px; padding:9px; } .dg-about-commitment-trust p{ font-size:8.7px; } } /* ========================================================= ELEMENTOR / GLOBAL SAFETY ========================================================= */ .dg-about-commitment, .dg-about-commitment *, .dg-about-commitment *::before, .dg-about-commitment *::after{ box-sizing:border-box; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-54fcdf8 *//* ========================================================= DIGISIGN GRAPHICS ABOUT PAGE — SECTION 08 FINAL CTA Desktop • Tablet • Mobile No Hover Animation Inline SVG Icons ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .dg-about-final-cta{ position:relative; width:100%; padding:40px 0 45px; background: linear-gradient( 135deg, #06172c 0%, #081d38 55%, #102b4a 100% ); overflow:hidden; box-sizing:border-box; } /* ========================================================= DECORATIVE CIRCLES ========================================================= */ .dg-about-final-circle{ position:absolute; border-radius:50%; pointer-events:none; } /* Orange glow */ .dg-about-final-circle-1{ width:520px; height:520px; top:-350px; right:-180px; background: radial-gradient( circle, rgba(255,123,0,.12) 0%, rgba(255,123,0,0) 70% ); } /* White glow */ .dg-about-final-circle-2{ width:420px; height:420px; left:-300px; bottom:-300px; border:1px solid rgba(255,255,255,.07); } /* ========================================================= CONTAINER ========================================================= */ .dg-about-final-container{ position:relative; z-index:2; width:100%; max-width:1000px; margin:0 auto; padding:0 20px; box-sizing:border-box; } /* ========================================================= CONTENT ========================================================= */ .dg-about-final-content{ width:100%; max-width:780px; margin:0 auto; text-align:center; } /* ========================================================= BADGE ========================================================= */ .dg-about-final-badge{ display:inline-block; padding:7px 16px; margin-bottom:17px; background:rgba(255,123,0,.11); border:1px solid rgba(255,123,0,.30); color:#ff8a16; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; } /* ========================================================= HEADING ========================================================= */ .dg-about-final-content h2{ margin:0 0 17px; color:#ffffff; font-size:47px; font-weight:800; line-height:1.12; letter-spacing:-.8px; } .dg-about-final-content h2 span{ color:#ff7b00; } /* ========================================================= DESCRIPTION ========================================================= */ .dg-about-final-content > p{ max-width:680px; margin:0 auto; color:#b9c6d5; font-size:16px; line-height:1.5; } /* ========================================================= CTA ACTIONS ========================================================= */ .dg-about-final-actions{ display:flex; align-items:center; justify-content:center; gap:11px; margin-top:28px; } /* ========================================================= COMMON BUTTON ========================================================= */ .dg-about-final-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:45px; padding:6px 8px 6px 18px; border-radius:10px; text-decoration:none; font-size:12px; font-weight:700; box-sizing:border-box; } /* ========================================================= PRIMARY BUTTON ========================================================= */ .dg-about-final-btn-primary{ background: linear-gradient( 135deg, #ff7b00, #ff9700 ); color:#ffffff; } /* ========================================================= PRIMARY ICON ========================================================= */ .dg-about-final-btn-icon{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#ffffff; color:#081526; border-radius:50%; flex:0 0 30px; } .dg-about-final-btn-icon svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= SECONDARY BUTTON ========================================================= */ .dg-about-final-btn-secondary{ padding-left:15px; padding-right:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color:#ffffff; } /* ========================================================= PHONE ICON ========================================================= */ .dg-about-final-phone-icon{ width:29px; height:29px; display:flex; align-items:center; justify-content:center; background:rgba(255,123,0,.16); color:#ff8a16; border-radius:50%; flex:0 0 29px; } .dg-about-final-phone-icon svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= TRUST POINTS ========================================================= */ .dg-about-final-trust{ width:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 25px; margin-top:34px; padding-top:21px; border-top:1px solid rgba(255,255,255,.10); } /* ========================================================= TRUST ITEM ========================================================= */ .dg-about-final-trust-item{ display:flex; align-items:center; gap:7px; color:#c3ceda; font-size:10.5px; font-weight:600; white-space:nowrap; } /* ========================================================= TRUST ICON ========================================================= */ .dg-about-final-trust-icon{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:#ff7b00; border-radius:50%; flex:0 0 20px; } .dg-about-final-trust-icon svg{ width:10px; height:10px; fill:none; stroke:#ffffff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= BOTTOM MESSAGE ========================================================= */ .dg-about-final-bottom{ display:flex; align-items:center; justify-content:center; gap:13px; margin-top:26px; color:#8291a2; font-size:12px; line-height:1.5; text-align:center; } .dg-about-final-bottom-line{ width:55px; height:1px; flex-shrink:0; background:rgba(255,255,255,.15); } /* ========================================================= TABLET 768px — 1024px ========================================================= */ @media (max-width:1024px){ .dg-about-final-cta{ padding:65px 0 40px; } .dg-about-final-content{ max-width:700px; } .dg-about-final-content h2{ font-size:40px; } .dg-about-final-content > p{ font-size:13.5px; } .dg-about-final-trust{ gap:10px 18px; } } /* ========================================================= MOBILE Below 768px ========================================================= */ @media (max-width:767px){ .dg-about-final-cta{ padding:54px 0 34px; text-align:center; } .dg-about-final-container{ padding:0 16px; } /* ----------------------------------------- CONTENT ----------------------------------------- */ .dg-about-final-content{ max-width:500px; } .dg-about-final-badge{ padding:6px 13px; margin-bottom:13px; font-size:9.5px; } .dg-about-final-content h2{ max-width:430px; margin:0 auto 13px; font-size:31px; line-height:1.12; letter-spacing:-.3px; } .dg-about-final-content > p{ max-width:400px; font-size:12px; line-height:1.65; } /* ----------------------------------------- BUTTONS ----------------------------------------- */ .dg-about-final-actions{ width:100%; flex-direction:column; gap:9px; margin-top:22px; } .dg-about-final-btn{ min-height:42px; font-size:10.5px; border-radius:9px; } .dg-about-final-btn-primary{ padding-left:16px; } .dg-about-final-btn-icon{ width:27px; height:27px; flex-basis:27px; } .dg-about-final-btn-secondary{ padding-left:14px; padding-right:16px; } .dg-about-final-phone-icon{ width:26px; height:26px; flex-basis:26px; } .dg-about-final-btn-icon svg{ width:12px; height:12px; } .dg-about-final-phone-icon svg{ width:12px; height:12px; } /* ----------------------------------------- TRUST ----------------------------------------- */ .dg-about-final-trust{ max-width:440px; margin:25px auto 0; padding-top:17px; display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px 8px; } .dg-about-final-trust-item{ justify-content:flex-start; font-size:9px; white-space:normal; text-align:left; } .dg-about-final-trust-icon{ width:19px; height:19px; flex-basis:19px; } .dg-about-final-trust-icon svg{ width:9px; height:9px; } /* ----------------------------------------- BOTTOM ----------------------------------------- */ .dg-about-final-bottom{ margin-top:20px; font-size:9px; gap:8px; } .dg-about-final-bottom-line{ width:25px; } } /* ========================================================= SMALL MOBILE Below 380px ========================================================= */ @media (max-width:380px){ .dg-about-final-cta{ padding:48px 0 30px; } .dg-about-final-container{ padding:0 13px; } .dg-about-final-content h2{ max-width:340px; font-size:28px; } .dg-about-final-content > p{ max-width:330px; font-size:11.5px; } .dg-about-final-actions{ margin-top:19px; } .dg-about-final-trust{ max-width:330px; gap:8px 6px; } .dg-about-final-trust-item{ font-size:8.5px; gap:5px; } .dg-about-final-trust-icon{ width:18px; height:18px; flex-basis:18px; } .dg-about-final-bottom{ font-size:8.5px; } .dg-about-final-bottom-line{ width:18px; } } /* ========================================================= VERY SMALL DEVICES Below 340px ========================================================= */ @media (max-width:340px){ .dg-about-final-container{ padding:0 11px; } .dg-about-final-content h2{ font-size:26px; } .dg-about-final-content > p{ font-size:11px; } .dg-about-final-trust{ max-width:290px; grid-template-columns:1fr; gap:7px; } .dg-about-final-trust-item{ font-size:9px; } .dg-about-final-bottom{ max-width:290px; margin-left:auto; margin-right:auto; font-size:8px; } .dg-about-final-bottom-line{ display:none; } } /* ========================================================= ELEMENTOR / GLOBAL SAFETY ========================================================= */ .dg-about-final-cta, .dg-about-final-cta *, .dg-about-final-cta *::before, .dg-about-final-cta *::after{ box-sizing:border-box; }/* End custom CSS */