/*================================================== ABOUT RESPONSIVE ==================================================*/ /*================================================== 1200px ==================================================*/ @media (max-width:1200px){ /*================================================== ABOUT HERO ==================================================*/ .about-hero{ padding-top:160px; padding-bottom:100px; } /*================================================== HERO CONTENT ==================================================*/ .about-hero-content{ max-width:680px; } .hero-title{ font-size:4rem; max-width:800px; } /*================================================== STATISTICS ==================================================*/ .hero-stats{ max-width:680px; gap:20px; } .stat-card{ padding:30px; } /*================================================== COMPANY INTRODUCTION ==================================================*/ .about-intro-grid{ gap:60px; } /*================================================== DISPLAY SYSTEM ==================================================*/ .intro-display{ height:600px; } /*================================================== FOUNDER ==================================================*/ .founder-grid{ gap:70px; } /*================================================== FOUNDER DISPLAY ==================================================*/ .founder-display{ min-height:680px; } /*================================================== FOUNDER TERMINAL ==================================================*/ .founder-terminal{ width:420px; height:540px; } /*================================================== VISION & MISSION ==================================================*/ .vision-mission-grid{ gap:30px; grid-template-columns: 1fr 220px 1fr; } /*================================================== DIRECTION CARD ==================================================*/ .direction-card{ padding:45px 35px; } /*================================================== PRINCIPLES ==================================================*/ .principles-grid{ gap:20px; } /*================================================== VALUES ==================================================*/ .values-grid{ gap:22px; } /*================================================== WHY MEGATECH ==================================================*/ .why-megatech-grid{ gap:70px; } /*================================================== EXPERTISE ==================================================*/ .expertise-item{ grid-template-columns: 45px 60px 1fr 25px; gap:16px; padding:30px; } } /*================================================== 992px ==================================================*/ @media (max-width:992px){ /*================================================== ABOUT HERO ==================================================*/ .about-hero{ min-height:auto; padding-top:140px; padding-bottom:90px; } /*================================================== HERO CONTENT ==================================================*/ .about-hero-content{ max-width:100%; } .hero-title{ font-size:3.5rem; max-width:760px; } .hero-description{ max-width:650px; font-size:1rem; margin-bottom:38px; } /*================================================== HERO ACTIONS ==================================================*/ .hero-actions{ margin-bottom:55px; } /*================================================== STATISTICS ==================================================*/ .hero-stats{ max-width:100%; } /*================================================== COMPANY INTRODUCTION ==================================================*/ .about-intro-grid{ grid-template-columns:1fr; gap:50px; } /*================================================== DISPLAY SYSTEM ==================================================*/ .intro-display{ height:600px; order:2; } /*================================================== FOUNDER ==================================================*/ .founder-grid{ grid-template-columns:1fr; gap:60px; margin-top:60px; } /*================================================== FOUNDER DISPLAY ==================================================*/ .founder-display{ min-height:650px; order:2; } /*================================================== FOUNDER TERMINAL ==================================================*/ .founder-terminal{ width:420px; height:540px; } /*================================================== VISION & MISSION ==================================================*/ .vision-mission-grid{ grid-template-columns:1fr; gap:50px; margin-top:60px; } /*================================================== DIRECTION CARD ==================================================*/ .direction-card{ min-height:auto; padding:42px 35px; } /*================================================== CENTRAL CORE ==================================================*/ .direction-core{ width:200px; height:200px; } /*================================================== CORE ORBITS ==================================================*/ .orbit-one{ width:120px; height:120px; } .orbit-two{ width:160px; height:160px; } .orbit-three{ width:200px; height:200px; } /*================================================== MISSION PRINCIPLES ==================================================*/ .mission-principles{ margin-top:100px; } /*================================================== PRINCIPLES GRID ==================================================*/ .principles-grid{ grid-template-columns: repeat(2,1fr); gap:22px; } /*================================================== CORE VALUES ==================================================*/ .values-grid{ grid-template-columns: repeat(2,1fr); gap:24px; margin-top:60px; } /*================================================== VALUES STATEMENT ==================================================*/ .values-statement{ grid-template-columns: 80px 1fr; gap:25px; padding:35px; } /*================================================== COMPANY JOURNEY ==================================================*/ .journey-intro{ margin: 60px auto 80px; } /*================================================== TIMELINE ==================================================*/ .timeline{ max-width:900px; } /*================================================== WHY MEGATECH ==================================================*/ .why-megatech-grid{ grid-template-columns:1fr; gap:60px; } /*================================================== WHY VISUAL ==================================================*/ .why-visual{ min-height:560px; } /*================================================== WHY CONTENT ==================================================*/ .why-content{ max-width:800px; margin:auto; width:100%; } /*================================================== EXPERTISE ==================================================*/ .expertise-grid{ grid-template-columns:1fr; gap:2px; } } /*================================================== 768px ==================================================*/ @media (max-width:768px){ /*================================================== ABOUT HERO ==================================================*/ .about-hero{ padding-top:120px; padding-bottom:80px; } /*================================================== HERO TITLE ==================================================*/ .hero-title{ font-size:3rem; line-height:1.12; margin: 22px 0; } /*================================================== HERO DESCRIPTION ==================================================*/ .hero-description{ font-size:.98rem; line-height:1.8; margin-bottom:35px; } /*================================================== HERO ACTIONS ==================================================*/ .hero-actions{ gap:14px; margin-bottom:45px; } /*================================================== STATISTICS ==================================================*/ .hero-stats{ grid-template-columns: repeat(3,1fr); gap:15px; } .stat-card{ padding:25px 15px; border-radius:20px; } .stat-card h3{ font-size:2rem; } .stat-card span{ font-size:.9rem; } /*================================================== DISPLAY SYSTEM ==================================================*/ .intro-display{ height:520px; } /* IMPORTANT: No transform rules are added here. The following are controlled by JavaScript: .display-core .ring-1 .ring-2 .ring-3 .display-node .circuit-line .beam .packet .reactor-system */ /*================================================== FOUNDER ==================================================*/ .founder-display{ min-height:600px; } /*================================================== FOUNDER TERMINAL ==================================================*/ .founder-terminal{ width:390px; height:500px; border-radius:30px; } /*================================================== PORTRAIT ==================================================*/ .portrait-frame{ inset:18px; border-radius:24px; } /*================================================== TERMINAL RINGS ==================================================*/ .terminal-ring-1{ width:460px; height:460px; } .terminal-ring-2{ width:540px; height:540px; } .terminal-ring-3{ width:620px; height:620px; } /*================================================== VISION & MISSION ==================================================*/ .vision-mission-grid{ gap:40px; margin-top:50px; } /*================================================== DIRECTION CARD ==================================================*/ .direction-card{ padding:38px 30px; border-radius:26px; } /*================================================== DIRECTION ICON ==================================================*/ .direction-icon{ width:58px; height:58px; margin-bottom:25px; } /*================================================== DIRECTION CONTENT ==================================================*/ .direction-content h3{ font-size:1.6rem; } /*================================================== MISSION PRINCIPLES ==================================================*/ .mission-principles{ margin-top:80px; } /*================================================== PRINCIPLES HEADING ==================================================*/ .principles-heading{ margin-bottom:45px; } .principles-heading h3{ font-size:2.2rem; } /*================================================== PRINCIPLES GRID ==================================================*/ .principles-grid{ grid-template-columns:1fr; gap:18px; } /*================================================== PRINCIPLE CARD ==================================================*/ .principle-card{ min-height:auto; padding:30px 25px; } /*================================================== CORE VALUES ==================================================*/ .values-grid{ grid-template-columns:1fr; gap:20px; margin-top:50px; } /*================================================== VALUE CARD ==================================================*/ .value-card{ min-height:auto; padding:35px 28px; } /*================================================== VALUES STATEMENT ==================================================*/ .values-statement{ grid-template-columns:1fr; gap:22px; padding:32px; text-align:center; } /*================================================== STATEMENT ICON ==================================================*/ .values-statement-icon{ margin:auto; } /*================================================== COMPANY JOURNEY ==================================================*/ .journey-intro{ margin: 50px auto 65px; } /*================================================== TIMELINE ==================================================*/ .timeline{ padding: 20px 0 20px 35px; } /*================================================== TIMELINE CENTRAL LINE ==================================================*/ .timeline::before{ left:10px; transform:none; } /*================================================== TIMELINE ITEM ==================================================*/ .timeline-item, .timeline-item-reverse{ width:100%; margin-left:0; padding: 30px 0 55px 35px; } /*================================================== TIMELINE MARKER ==================================================*/ .timeline-marker, .timeline-item-reverse .timeline-marker{ left:-13px; right:auto; } /*================================================== TIMELINE CONTENT ==================================================*/ .timeline-content{ padding:30px; border-radius:22px; } /*================================================== JOURNEY CLOSING ==================================================*/ .journey-closing{ grid-template-columns:1fr; gap:22px; margin-top:65px; padding:32px; text-align:center; } /*================================================== CLOSING CORE ==================================================*/ .journey-closing-core{ margin:auto; } /*================================================== WHY MEGATECH ==================================================*/ .why-megatech-grid{ gap:40px; } /*================================================== WHY VISUAL ==================================================*/ .why-visual{ min-height:500px; } /*================================================== WHY CORE ==================================================*/ .why-core{ width:300px; height:300px; } /*================================================== CORE RINGS ==================================================*/ .ring-a{ width:190px; height:190px; } .ring-b{ width:250px; height:250px; } .ring-c{ width:300px; height:300px; } /*================================================== CORE CENTER ==================================================*/ .why-core-center{ width:135px; height:135px; } /*================================================== STATUS LABELS ==================================================*/ .why-status{ font-size:.72rem; padding:8px 12px; } /*================================================== STATUS POSITIONS ==================================================*/ .status-one{ top:14%; left:2%; } .status-two{ top:48%; right:0; } .status-three{ bottom:14%; left:5%; } /*================================================== WHY INTRO ==================================================*/ .why-intro{ margin-bottom:30px; } /*================================================== WHY FEATURES ==================================================*/ .why-feature{ gap:16px; padding:20px 0; } /*================================================== EXPERTISE ITEM ==================================================*/ .expertise-item{ grid-template-columns: 45px 58px 1fr 25px; gap:15px; padding:28px 24px; min-height:170px; } } /*================================================== 576px ==================================================*/ @media (max-width:576px){ /*================================================== ABOUT HERO ==================================================*/ .about-hero{ padding-top:105px; padding-bottom:70px; } /*================================================== HERO TITLE ==================================================*/ .hero-title{ font-size:2.5rem; line-height:1.15; margin:20px 0; } /*================================================== HERO DESCRIPTION ==================================================*/ .hero-description{ font-size:.94rem; line-height:1.75; margin-bottom:30px; } /*================================================== HERO ACTIONS ==================================================*/ .hero-actions{ flex-direction:column; align-items:stretch; gap:12px; } /*================================================== STATISTICS ==================================================*/ .hero-stats{ grid-template-columns:1fr; gap:12px; } .stat-card{ padding:22px; } .stat-card h3{ font-size:1.9rem; margin-bottom:7px; } /*================================================== DISPLAY SYSTEM ==================================================*/ .intro-display{ height:440px; } /*================================================== FOUNDER ==================================================*/ .founder-display{ min-height:520px; } /*================================================== FOUNDER TERMINAL ==================================================*/ .founder-terminal{ width:330px; height:440px; border-radius:26px; } /*================================================== PORTRAIT ==================================================*/ .portrait-frame{ inset:15px; border-radius:20px; } /*================================================== TERMINAL RINGS ==================================================*/ .terminal-ring-1{ width:390px; height:390px; } .terminal-ring-2{ width:460px; height:460px; } .terminal-ring-3{ width:530px; height:530px; } /*================================================== HUD CORNERS ==================================================*/ .corner{ width:26px; height:26px; } .tl{ top:14px; left:14px; } .tr{ top:14px; right:14px; } .bl{ bottom:14px; left:14px; } .br{ bottom:14px; right:14px; } /*================================================== HUD SQUARES ==================================================*/ .hud-square{ width:8px; height:8px; } .square-1{ left:-14px; } .square-2{ right:-14px; } .square-3{ left:-14px; } .square-4{ right:-14px; } /*================================================== VISION & MISSION ==================================================*/ .direction-card{ padding:32px 24px; } /*================================================== DIRECTION CONTENT ==================================================*/ .direction-content h3{ font-size:1.45rem; } .direction-content p{ font-size:.94rem; line-height:1.75; } /*================================================== CORE ==================================================*/ .direction-core{ width:180px; height:180px; } /*================================================== CORE ORBITS ==================================================*/ .orbit-one{ width:105px; height:105px; } .orbit-two{ width:145px; height:145px; } .orbit-three{ width:180px; height:180px; } /*================================================== CORE LIGHT ==================================================*/ .core-light{ width:70px; height:70px; font-size:22px; } /*================================================== MISSION PRINCIPLES ==================================================*/ .principles-heading h3{ font-size:2rem; } /*================================================== PRINCIPLE CARD ==================================================*/ .principle-card{ padding:28px 22px; } /*================================================== VALUES ==================================================*/ .value-card{ padding:30px 24px; } /*================================================== VALUES STATEMENT ==================================================*/ .values-statement{ padding:28px 22px; border-radius:24px; } /*================================================== COMPANY JOURNEY ==================================================*/ .journey-intro{ margin: 40px auto 55px; } /*================================================== TIMELINE ==================================================*/ .timeline{ padding-left:30px; } /*================================================== TIMELINE CENTRAL LINE ==================================================*/ .timeline::before{ left:8px; } /*================================================== TIMELINE ITEM ==================================================*/ .timeline-item, .timeline-item-reverse{ padding: 25px 0 45px 28px; } /*================================================== TIMELINE MARKER ==================================================*/ .timeline-marker, .timeline-item-reverse .timeline-marker{ left:-13px; width:40px; height:40px; } /*================================================== TIMELINE CONTENT ==================================================*/ .timeline-content{ padding:25px 22px; border-radius:20px; } /*================================================== TIMELINE TITLE ==================================================*/ .timeline-content h3{ font-size:1.25rem; } /*================================================== TIMELINE DESCRIPTION ==================================================*/ .timeline-content p{ font-size:.92rem; line-height:1.75; } /*================================================== JOURNEY CLOSING ==================================================*/ .journey-closing{ padding:28px 22px; } /*================================================== WHY VISUAL ==================================================*/ .why-visual{ min-height:420px; } /*================================================== WHY CORE ==================================================*/ .why-core{ width:250px; height:250px; } /*================================================== WHY CORE RINGS ==================================================*/ .ring-a{ width:160px; height:160px; } .ring-b{ width:210px; height:210px; } .ring-c{ width:250px; height:250px; } /*================================================== CORE CENTER ==================================================*/ .why-core-center{ width:115px; height:115px; gap:8px; } .why-core-center i{ font-size:2rem; } .why-core-center span{ font-size:.65rem; } /*================================================== STATUS LABELS ==================================================*/ .why-status{ padding:7px 10px; font-size:.68rem; gap:7px; } /*================================================== STATUS DOT ==================================================*/ .why-status span{ width:6px; height:6px; } /*================================================== STATUS POSITIONS ==================================================*/ .status-one{ left:0; } .status-two{ right:-5px; } .status-three{ left:2%; } /*================================================== EXPERTISE ITEM ==================================================*/ .expertise-item{ grid-template-columns: 40px 52px 1fr; gap:14px; padding:25px 20px; min-height:auto; } /*================================================== EXPERTISE ARROW ==================================================*/ .expertise-arrow{ display:none; } /*================================================== EXPERTISE ICON ==================================================*/ .expertise-icon{ width:52px; height:52px; } /*================================================== EXPERTISE CONTENT ==================================================*/ .expertise-content h3{ font-size:1.05rem; } .expertise-content p{ font-size:.86rem; } } /*================================================== 480px ==================================================*/ @media (max-width:480px){ /*================================================== ABOUT HERO ==================================================*/ .about-hero{ padding-top:95px; padding-bottom:60px; } /*================================================== HERO TITLE ==================================================*/ .hero-title{ font-size:2.15rem; line-height:1.18; } /*================================================== HERO DESCRIPTION ==================================================*/ .hero-description{ font-size:.9rem; } /*================================================== STAT CARD ==================================================*/ .stat-card{ padding:20px; border-radius:18px; } /*================================================== INTRO DISPLAY ==================================================*/ .intro-display{ height:390px; } /*================================================== FOUNDER DISPLAY ==================================================*/ .founder-display{ min-height:450px; } /*================================================== FOUNDER TERMINAL ==================================================*/ .founder-terminal{ width:290px; height:390px; border-radius:22px; } /*================================================== PORTRAIT ==================================================*/ .portrait-frame{ inset:12px; border-radius:17px; } /*================================================== TERMINAL RINGS ==================================================*/ .terminal-ring-1{ width:340px; height:340px; } .terminal-ring-2{ width:400px; height:400px; } .terminal-ring-3{ width:460px; height:460px; } /*================================================== TERMINAL GLOW ==================================================*/ .terminal-glow{ width:450px; height:450px; } /*================================================== DIRECTION CARD ==================================================*/ .direction-card{ padding:28px 20px; } /*================================================== DIRECTION ICON ==================================================*/ .direction-icon{ width:54px; height:54px; border-radius:15px; } /*================================================== DIRECTION CONTENT ==================================================*/ .direction-content h3{ font-size:1.3rem; } .direction-content p{ font-size:.9rem; } /*================================================== DIRECTION NUMBER ==================================================*/ .direction-number{ font-size:4rem; right:20px; bottom:15px; } /*================================================== CORE ==================================================*/ .direction-core{ width:160px; height:160px; } /*================================================== CORE ORBITS ==================================================*/ .orbit-one{ width:95px; height:95px; } .orbit-two{ width:125px; height:125px; } .orbit-three{ width:160px; height:160px; } /*================================================== CORE LIGHT ==================================================*/ .core-light{ width:62px; height:62px; font-size:20px; } /*================================================== CORE LABEL ==================================================*/ .core-label{ font-size:.58rem; letter-spacing:2px; bottom:-30px; } /*================================================== PRINCIPLES HEADING ==================================================*/ .principles-heading h3{ font-size:1.75rem; } /*================================================== VALUE CARD ==================================================*/ .value-card{ padding:28px 20px; } /*================================================== VALUE ICON ==================================================*/ .value-icon{ width:52px; height:52px; } /*================================================== VALUE TITLE ==================================================*/ .value-card h3{ font-size:1.2rem; } /*================================================== VALUE DESCRIPTION ==================================================*/ .value-card p{ font-size:.9rem; } /*================================================== TIMELINE ==================================================*/ .timeline{ padding-left:25px; } /*================================================== TIMELINE LINE ==================================================*/ .timeline::before{ left:6px; } /*================================================== TIMELINE ITEM ==================================================*/ .timeline-item, .timeline-item-reverse{ padding-left:25px; } /*================================================== TIMELINE MARKER ==================================================*/ .timeline-marker, .timeline-item-reverse .timeline-marker{ left:-12px; width:36px; height:36px; font-size:.65rem; } /*================================================== TIMELINE CONTENT ==================================================*/ .timeline-content{ padding:22px 18px; } /*================================================== JOURNEY CLOSING ==================================================*/ .journey-closing{ padding:25px 18px; } /*================================================== WHY VISUAL ==================================================*/ .why-visual{ min-height:360px; } /*================================================== WHY CORE ==================================================*/ .why-core{ width:210px; height:210px; } /*================================================== WHY RINGS ==================================================*/ .ring-a{ width:135px; height:135px; } .ring-b{ width:175px; height:175px; } .ring-c{ width:210px; height:210px; } /*================================================== WHY CENTER ==================================================*/ .why-core-center{ width:95px; height:95px; } .why-core-center i{ font-size:1.6rem; } .why-core-center span{ font-size:.55rem; letter-spacing:2px; } /*================================================== STATUS ==================================================*/ .why-status{ font-size:.6rem; padding:6px 8px; } /*================================================== EXPERTISE ==================================================*/ .expertise-item{ grid-template-columns: 36px 48px 1fr; gap:10px; padding:22px 16px; } /*================================================== EXPERTISE NUMBER ==================================================*/ .expertise-number{ font-size:.65rem; } /*================================================== EXPERTISE ICON ==================================================*/ .expertise-icon{ width:48px; height:48px; border-radius:13px; } /*================================================== EXPERTISE CONTENT ==================================================*/ .expertise-content h3{ font-size:.98rem; } .expertise-content p{ font-size:.82rem; line-height:1.65; } } /*================================================== 360px ==================================================*/ @media (max-width:360px){ /*================================================== ABOUT HERO ==================================================*/ .about-hero{ padding-top:90px; padding-bottom:55px; } /*================================================== HERO TITLE ==================================================*/ .hero-title{ font-size:1.9rem; } /*================================================== HERO DESCRIPTION ==================================================*/ .hero-description{ font-size:.86rem; } /*================================================== STAT CARD ==================================================*/ .stat-card{ padding:18px; } .stat-card h3{ font-size:1.7rem; } .stat-card span{ font-size:.82rem; } /*================================================== INTRO DISPLAY ==================================================*/ .intro-display{ height:340px; } /*================================================== FOUNDER DISPLAY ==================================================*/ .founder-display{ min-height:400px; } /*================================================== FOUNDER TERMINAL ==================================================*/ .founder-terminal{ width:260px; height:350px; } /*================================================== PORTRAIT ==================================================*/ .portrait-frame{ inset:10px; border-radius:15px; } /*================================================== TERMINAL RINGS ==================================================*/ .terminal-ring-1{ width:300px; height:300px; } .terminal-ring-2{ width:350px; height:350px; } .terminal-ring-3{ width:400px; height:400px; } /*================================================== DIRECTION CARD ==================================================*/ .direction-card{ padding:25px 18px; } /*================================================== DIRECTION CONTENT ==================================================*/ .direction-content h3{ font-size:1.2rem; } .direction-content p{ font-size:.86rem; } /*================================================== DIRECTION CORE ==================================================*/ .direction-core{ width:140px; height:140px; } /*================================================== ORBITS ==================================================*/ .orbit-one{ width:82px; height:82px; } .orbit-two{ width:110px; height:110px; } .orbit-three{ width:140px; height:140px; } /*================================================== CORE LIGHT ==================================================*/ .core-light{ width:55px; height:55px; font-size:18px; } /*================================================== CORE LABEL ==================================================*/ .core-label{ font-size:.52rem; letter-spacing:1.5px; } /*================================================== PRINCIPLE CARD ==================================================*/ .principle-card{ padding:25px 18px; } /*================================================== VALUE CARD ==================================================*/ .value-card{ padding:25px 18px; } /*================================================== VALUE ICON ==================================================*/ .value-icon{ width:48px; height:48px; font-size:19px; } /*================================================== VALUE TITLE ==================================================*/ .value-card h3{ font-size:1.1rem; } /*================================================== VALUE DESCRIPTION ==================================================*/ .value-card p{ font-size:.86rem; } /*================================================== TIMELINE ==================================================*/ .timeline{ padding-left:22px; } /*================================================== TIMELINE LINE ==================================================*/ .timeline::before{ left:5px; } /*================================================== TIMELINE ITEM ==================================================*/ .timeline-item, .timeline-item-reverse{ padding-left:22px; } /*================================================== TIMELINE MARKER ==================================================*/ .timeline-marker, .timeline-item-reverse .timeline-marker{ left:-11px; width:34px; height:34px; font-size:.6rem; } /*================================================== TIMELINE CONTENT ==================================================*/ .timeline-content{ padding:20px 16px; } /*================================================== TIMELINE TITLE ==================================================*/ .timeline-content h3{ font-size:1.15rem; } /*================================================== TIMELINE DESCRIPTION ==================================================*/ .timeline-content p{ font-size:.85rem; } /*================================================== WHY VISUAL ==================================================*/ .why-visual{ min-height:320px; } /*================================================== WHY CORE ==================================================*/ .why-core{ width:180px; height:180px; } /*================================================== WHY RINGS ==================================================*/ .ring-a{ width:115px; height:115px; } .ring-b{ width:150px; height:150px; } .ring-c{ width:180px; height:180px; } /*================================================== WHY CENTER ==================================================*/ .why-core-center{ width:82px; height:82px; } .why-core-center i{ font-size:1.4rem; } .why-core-center span{ font-size:.5rem; } /*================================================== STATUS LABELS ==================================================*/ .why-status{ font-size:.55rem; padding:5px 7px; gap:5px; } /*================================================== STATUS POSITIONS ==================================================*/ .status-one{ left:-2%; } .status-two{ right:-8%; } .status-three{ left:0; } /*================================================== EXPERTISE ITEM ==================================================*/ .expertise-item{ grid-template-columns: 32px 44px 1fr; gap:8px; padding:20px 12px; } /*================================================== EXPERTISE ICON ==================================================*/ .expertise-icon{ width:44px; height:44px; border-radius:12px; } .expertise-icon i{ font-size:1rem; } /*================================================== EXPERTISE CONTENT ==================================================*/ .expertise-content h3{ font-size:.9rem; } .expertise-content p{ font-size:.78rem; line-height:1.6; } /*================================================== EXPERTISE NUMBER ==================================================*/ .expertise-number{ font-size:.58rem; } }