.elementor-9905 .elementor-element.elementor-element-695c919{--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-9905 .elementor-element.elementor-element-620df7b{--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-9905 .elementor-element.elementor-element-40276ac{--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 *//* ============================================================
BASE.CSS — CSS Variables + All Section Styles
OneLink Fleet Solution — ขนส่งทั่วไป
เพิ่มครั้งเดียวที่: Elementor → Site Settings → Custom CSS
============================================================
FONTS & ICONS — เพิ่มใน หรือ Site Settings → Custom Code:
============================================================ */
/* ============================================================
CSS VARIABLES
============================================================ */
:root {
/* Brand Colors */
--ol-green: #00A651;
--ol-green-dark: #007A3D;
--ol-green-light: #00C15E;
--ol-green-bg: #F0FAF4;
--ol-green-pale: #E8F7F0;
--ol-dark: #0B1A0E;
/* Neutral */
--ol-white: #ffffff;
--ol-gray-50: #F9FAFB;
--ol-gray-100: #F3F4F6;
--ol-gray-200: #E5E7EB;
--ol-gray-600: #6B7280;
--ol-gray-800: #374151;
--ol-gray-900: #111827;
/* Alert */
--ol-red: #EF4444;
--ol-red-light: #F87171;
--ol-green-neon: #4ADE80;
/* Typography */
--ol-font: 'Kanit', sans-serif;
/* Layout */
--ol-section-py: 80px;
--ol-section-px: 24px;
--ol-max-w: 1100px;
--ol-max-w-sm: 860px;
--ol-max-w-xs: 780px;
/* Radius */
--ol-radius-sm: 10px;
--ol-radius-md: 14px;
--ol-radius-lg: 18px;
--ol-radius-xl: 24px;
--ol-radius-pill: 50px;
/* Shadows */
--ol-shadow-sm: 0 2px 14px rgba(0,0,0,0.04);
--ol-shadow-md: 0 8px 40px rgba(0,0,0,0.08);
--ol-shadow-green: 0 8px 28px rgba(0,166,81,0.35);
--ol-shadow-card: 0 10px 32px rgba(0,166,81,0.10);
--ol-shadow-icon: 0 6px 20px rgba(0,166,81,0.28);
/* Gradients */
--ol-grad-green: linear-gradient(135deg, var(--ol-green), var(--ol-green-dark));
--ol-grad-dark: linear-gradient(135deg, var(--ol-green-dark), var(--ol-green));
--ol-grad-cta: linear-gradient(135deg, #006B32 0%, var(--ol-green) 55%, var(--ol-green-light) 100%);
--ol-grad-wide: linear-gradient(135deg, var(--ol-green-bg), var(--ol-green-pale));
/* Transition */
--ol-transition: all 0.3s ease;
}
/* ============================================================
SHARED COMPONENTS
============================================================ */
/* -- Section Header Container -- */
.ol4-sec-hd {
text-align: center;
margin-bottom: 48px;
}
/* -- Tag / Badge -- */
.ol4-tag {
display: inline-block;
background: rgba(0,166,81,0.10);
color: var(--ol-green-dark);
padding: 6px 18px;
border-radius: var(--ol-radius-pill);
font-family: var(--ol-font);
font-size: 13px;
font-weight: 600;
margin-bottom: 12px;
}
.ol4-tag--dark {
background: rgba(0,166,81,0.12);
color: var(--ol-green-neon);
}
.ol4-tag--red {
background: rgba(239,68,68,0.14);
color: var(--ol-red-light);
}
/* -- Section Heading -- */
.ol4-h2 {
font-family: var(--ol-font);
font-size: clamp(26px, 3.5vw, 42px);
font-weight: 700;
color: var(--ol-gray-900);
margin: 0 0 10px;
line-height: 1.25;
}
.ol4-h2 span { color: var(--ol-green); }
.ol4-h2--white { color: var(--ol-white); }
.ol4-h2--white span { color: var(--ol-white); }
/* -- Section Sub -- */
.ol4-sub {
font-family: var(--ol-font);
font-size: 16px;
color: var(--ol-gray-600);
margin: 0;
}
.ol4-sub--faded { color: rgba(255,255,255,0.55); }
/* -- Icon Box -- */
.ol4-ic-box {
display: flex;
align-items: center;
justify-content: center;
width: 54px; height: 54px;
min-width: 54px;
background: var(--ol-grad-green);
border-radius: 14px;
box-shadow: var(--ol-shadow-icon);
}
.ol4-ic-box i { color: var(--ol-white); font-size: 22px; }
.ol4-ic-box--sm { width: 44px; height: 44px; min-width: 44px; border-radius: var(--ol-radius-sm); }
.ol4-ic-box--lg { width: 56px; height: 56px; min-width: 56px; border-radius: 16px; }
.ol4-ic-box--lg i { font-size: 24px; }
.ol4-ic-box--red { background: rgba(239,68,68,0.14); box-shadow: none; }
.ol4-ic-box--red i { color: var(--ol-red-light); font-size: 18px; }
/* -- Buttons -- */
.ol4-btn-primary {
background: var(--ol-grad-green);
color: var(--ol-white) !important;
padding: 15px 36px;
border-radius: var(--ol-radius-pill);
font-family: var(--ol-font);
font-size: 16px;
font-weight: 600;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: var(--ol-shadow-green);
transition: var(--ol-transition);
}
.ol4-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(0,166,81,0.45);
}
.ol4-btn-outline {
background: transparent;
color: var(--ol-green) !important;
padding: 15px 36px;
border-radius: var(--ol-radius-pill);
font-family: var(--ol-font);
font-size: 16px;
font-weight: 600;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid var(--ol-green);
transition: var(--ol-transition);
}
.ol4-btn-outline:hover {
background: var(--ol-green);
color: var(--ol-white) !important;
transform: translateY(-2px);
}
.ol4-btn-wh {
background: var(--ol-white);
color: var(--ol-green-dark) !important;
padding: 15px 38px;
border-radius: var(--ol-radius-pill);
font-family: var(--ol-font);
font-size: 16px;
font-weight: 700;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 28px rgba(0,0,0,0.15);
transition: var(--ol-transition);
}
.ol4-btn-wh:hover {
transform: translateY(-2px);
box-shadow: 0 14px 38px rgba(0,0,0,0.22);
color: #006B32 !important;
}
.ol4-btn-ghost-wh {
background: transparent;
color: var(--ol-white) !important;
padding: 15px 38px;
border-radius: var(--ol-radius-pill);
font-family: var(--ol-font);
font-size: 16px;
font-weight: 600;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid rgba(255,255,255,0.65);
transition: var(--ol-transition);
}
.ol4-btn-ghost-wh:hover {
background: rgba(255,255,255,0.15);
border-color: var(--ol-white);
color: var(--ol-white) !important;
}
/* -- Pill Tag (inside cards) -- */
.ol4-pill {
display: inline-block;
background: rgba(0,166,81,0.09);
color: var(--ol-green-dark);
padding: 4px 12px;
border-radius: var(--ol-radius-pill);
font-size: 11.5px;
font-weight: 600;
margin-top: 14px;
}
/* ============================================================
SECTION 1 : HERO
============================================================ */
.ol4-hero {
font-family: var(--ol-font);
background: var(--ol-white);
position: relative;
overflow: hidden;
padding: 100px var(--ol-section-px) var(--ol-section-py);
text-align: center;
}
.ol4-hero::before {
content: '';
position: absolute;
top: -200px; right: -200px;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(0,166,81,0.13) 0%, transparent 65%);
pointer-events: none;
}
.ol4-hero::after {
content: '';
position: absolute;
bottom: -150px; left: -150px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(0,166,81,0.08) 0%, transparent 65%);
pointer-events: none;
}
.ol4-hero-inner {
max-width: 920px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.ol4-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0,166,81,0.09);
border: 1px solid rgba(0,166,81,0.22);
color: var(--ol-green-dark);
padding: 8px 20px;
border-radius: var(--ol-radius-pill);
font-size: 13.5px;
font-weight: 500;
margin-bottom: 28px;
}
.ol4-hero h1 {
font-family: var(--ol-font);
font-size: clamp(34px, 6vw, 62px);
font-weight: 800;
line-height: 1.15;
color: var(--ol-gray-900);
margin: 0 0 20px;
}
.ol4-hero h1 .green { color: var(--ol-green); }
.ol4-hero-sub {
font-family: var(--ol-font);
font-size: clamp(15px, 2.2vw, 18px);
font-weight: 400;
color: var(--ol-gray-600);
margin: 0 auto 40px;
line-height: 1.8;
max-width: 680px;
}
.ol4-hero-cta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 56px;
}
.ol4-hero-stats {
display: flex;
justify-content: center;
background: var(--ol-white);
border-radius: 20px;
box-shadow: var(--ol-shadow-md);
padding: 28px 32px;
border: 1px solid var(--ol-gray-200);
max-width: 720px;
margin: 0 auto;
flex-wrap: wrap;
}
.ol4-hero-stat {
flex: 1;
min-width: 130px;
text-align: center;
padding: 10px 16px;
position: relative;
}
.ol4-hero-stat:not(:last-child)::after {
content: '';
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
height: 44px; width: 1px;
background: var(--ol-gray-200);
}
.ol4-stat-num {
font-family: var(--ol-font);
font-size: 30px;
font-weight: 800;
color: var(--ol-green);
line-height: 1;
margin-bottom: 6px;
}
.ol4-stat-lbl {
font-family: var(--ol-font);
font-size: 13px;
color: var(--ol-gray-600);
}
/* ============================================================
SECTION 2 : ภาพรวมกลุ่มลูกค้า
============================================================ */
.ol4-s2 {
font-family: var(--ol-font);
background: var(--ol-gray-50);
padding: var(--ol-section-py) var(--ol-section-px);
}
.ol4-s2-inner { max-width: var(--ol-max-w); margin: 0 auto; }
.ol4-ov-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 22px;
}
.ol4-ov-card {
background: var(--ol-white);
border-radius: var(--ol-radius-lg);
padding: 32px 26px;
border: 1px solid var(--ol-gray-200);
border-top: 4px solid var(--ol-green);
box-shadow: var(--ol-shadow-sm);
transition: var(--ol-transition);
}
.ol4-ov-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 32px rgba(0,166,81,0.12);
}
.ol4-ov-lbl {
font-family: var(--ol-font);
font-size: 11px;
font-weight: 700;
color: var(--ol-green);
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 8px;
margin-top: 20px;
}
.ol4-ov-title {
font-family: var(--ol-font);
font-size: 17px;
font-weight: 700;
color: var(--ol-gray-900);
margin-bottom: 10px;
}
.ol4-ov-desc {
font-family: var(--ol-font);
font-size: 14px;
color: var(--ol-gray-600);
line-height: 1.75;
}
/* ============================================================
SECTION 3 : ปัญหาที่ลูกค้ากำลังเจอ (Dark)
============================================================ */
.ol4-s3 {
font-family: var(--ol-font);
background: var(--ol-dark);
padding: var(--ol-section-py) var(--ol-section-px);
position: relative;
overflow: hidden;
}
.ol4-s3::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 60%; height: 100%;
background: radial-gradient(ellipse at top right, rgba(0,166,81,0.18) 0%, transparent 60%);
pointer-events: none;
}
.ol4-s3-inner { max-width: var(--ol-max-w); margin: 0 auto; position: relative; z-index: 1; }
.ol4-pain-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 18px;
margin-bottom: 36px;
}
.ol4-pain-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-left: 3px solid var(--ol-red);
border-radius: var(--ol-radius-md);
padding: 26px 22px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: var(--ol-transition);
}
.ol4-pain-card:hover { background: rgba(255,255,255,0.07); }
.ol4-pain-title {
font-family: var(--ol-font);
font-size: 15px;
font-weight: 700;
color: var(--ol-white);
margin-bottom: 6px;
}
.ol4-pain-desc {
font-family: var(--ol-font);
font-size: 13.5px;
color: rgba(255,255,255,0.52);
line-height: 1.75;
}
.ol4-pain-quote {
background: rgba(0,166,81,0.10);
border: 1px solid rgba(0,166,81,0.28);
border-radius: var(--ol-radius-md);
padding: 24px 32px;
text-align: center;
}
.ol4-pain-quote p {
font-family: var(--ol-font);
color: var(--ol-green-neon);
font-size: 17px;
font-weight: 500;
margin: 0;
line-height: 1.65;
}
/* ============================================================
SECTION 4 : คุณสมบัติเด่น
============================================================ */
.ol4-s4 {
font-family: var(--ol-font);
background: var(--ol-white);
padding: var(--ol-section-py) var(--ol-section-px);
}
.ol4-s4-inner { max-width: var(--ol-max-w); margin: 0 auto; }
.ol4-feat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 22px;
}
.ol4-feat-card {
background: var(--ol-gray-50);
border-radius: var(--ol-radius-lg);
padding: 30px 26px;
border: 1px solid var(--ol-gray-200);
transition: var(--ol-transition);
position: relative;
overflow: hidden;
}
.ol4-feat-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--ol-green), var(--ol-green-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.ol4-feat-card:hover::after { transform: scaleX(1); }
.ol4-feat-card:hover {
background: var(--ol-white);
border-color: rgba(0,166,81,0.25);
box-shadow: var(--ol-shadow-card);
transform: translateY(-3px);
}
.ol4-feat-name {
font-family: var(--ol-font);
font-size: 17px;
font-weight: 700;
color: var(--ol-gray-900);
margin-bottom: 10px;
margin-top: 20px;
}
.ol4-feat-desc {
font-family: var(--ol-font);
font-size: 14px;
color: var(--ol-gray-600);
line-height: 1.8;
}
.ol4-feat-card-wide {
grid-column: 1 / -1;
background: var(--ol-grad-wide);
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.ol4-feat-card-wide::after { display: none; }
.ol4-feat-card-wide:hover { transform: none; }
/* ============================================================
SECTION 5 : เหตุผลที่ต้องเลือก OneLink
============================================================ */
.ol4-s5 {
font-family: var(--ol-font);
background: var(--ol-green-bg);
padding: var(--ol-section-py) var(--ol-section-px);
}
.ol4-s5-inner { max-width: var(--ol-max-w); margin: 0 auto; }
.ol4-why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
}
.ol4-why-item {
display: flex;
gap: 18px;
align-items: flex-start;
background: var(--ol-white);
border-radius: var(--ol-radius-md);
padding: 26px 22px;
border: 1px solid rgba(0,166,81,0.12);
transition: var(--ol-transition);
}
.ol4-why-item:hover {
box-shadow: 0 8px 28px rgba(0,166,81,0.12);
border-color: rgba(0,166,81,0.32);
transform: translateY(-2px);
}
.ol4-why-title {
font-family: var(--ol-font);
font-size: 16px;
font-weight: 700;
color: var(--ol-gray-900);
margin-bottom: 6px;
}
.ol4-why-desc {
font-family: var(--ol-font);
font-size: 14px;
color: var(--ol-gray-600);
line-height: 1.75;
}
/* ============================================================
SECTION 6 : ROI
============================================================ */
.ol4-s6 {
font-family: var(--ol-font);
background: var(--ol-white);
padding: var(--ol-section-py) var(--ol-section-px);
}
.ol4-s6-inner { max-width: var(--ol-max-w-sm); margin: 0 auto; }
.ol4-roi-tbl {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: var(--ol-radius-lg);
overflow: hidden;
box-shadow: var(--ol-shadow-md);
}
.ol4-roi-tbl thead tr { background: var(--ol-grad-dark); }
.ol4-roi-tbl thead th {
padding: 20px 28px;
color: var(--ol-white);
font-family: var(--ol-font);
font-size: 16px;
font-weight: 600;
text-align: left;
}
.ol4-roi-tbl thead th:first-child { width: 55%; }
.ol4-roi-tbl tbody tr {
border-bottom: 1px solid var(--ol-gray-100);
transition: background 0.2s;
}
.ol4-roi-tbl tbody tr:hover { background: var(--ol-green-bg); }
.ol4-roi-tbl tbody tr:last-child { border-bottom: none; }
.ol4-roi-tbl tbody td {
padding: 18px 28px;
font-family: var(--ol-font);
font-size: 15px;
color: var(--ol-gray-800);
vertical-align: middle;
background: var(--ol-white);
}
.ol4-roi-tbl tbody tr:hover td { background: var(--ol-green-bg); }
.ol4-roi-tbl tbody td:first-child { font-weight: 600; color: var(--ol-gray-900); }
.ol4-roi-tbl tbody td:last-child { color: var(--ol-green); font-weight: 700; font-size: 17px; }
.ol4-roi-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
background: rgba(0,166,81,0.10);
border-radius: 8px;
margin-right: 12px;
vertical-align: middle;
}
.ol4-roi-ic i { color: var(--ol-green); font-size: 14px; }
.ol4-payback {
background: var(--ol-grad-dark);
border-radius: var(--ol-radius-lg);
padding: 36px 40px;
text-align: center;
margin-top: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.ol4-payback-icon { font-size: 52px; color: rgba(255,255,255,0.3); }
.ol4-payback-lbl {
font-family: var(--ol-font);
font-size: 15px;
color: rgba(255,255,255,0.8);
margin-bottom: 6px;
}
.ol4-payback-val {
font-family: var(--ol-font);
font-size: 40px;
font-weight: 800;
color: var(--ol-white);
}
/* ============================================================
SECTION 7 : กรณีศึกษา (Dark)
============================================================ */
.ol4-s7 {
font-family: var(--ol-font);
background: var(--ol-dark);
padding: var(--ol-section-py) var(--ol-section-px);
position: relative;
overflow: hidden;
}
.ol4-s7::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 55%; height: 100%;
background: radial-gradient(ellipse at 80% 40%, rgba(0,166,81,0.20) 0%, transparent 60%);
pointer-events: none;
}
.ol4-s7-inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
.ol4-case-wrap {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: var(--ol-radius-xl);
padding: 48px;
display: grid;
grid-template-columns: 1fr 220px;
gap: 44px;
align-items: start;
}
@media (max-width: 720px) {
.ol4-case-wrap {
grid-template-columns: 1fr;
padding: 32px 24px;
}
}
.ol4-case-qmark {
font-size: 72px;
color: rgba(0,166,81,0.3);
line-height: 0.75;
margin-bottom: 18px;
font-family: Georgia, serif;
}
.ol4-case-co {
font-family: var(--ol-font);
font-size: 11.5px;
font-weight: 700;
color: var(--ol-green-neon);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 18px;
}
.ol4-case-story {
font-family: var(--ol-font);
font-size: 16.5px;
color: rgba(255,255,255,0.82);
line-height: 1.85;
margin: 0;
}
.ol4-case-stats { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 720px) {
.ol4-case-stats { flex-direction: row; flex-wrap: wrap; }
}
.ol4-cs-box {
background: rgba(0,166,81,0.11);
border: 1px solid rgba(0,166,81,0.25);
border-radius: var(--ol-radius-md);
padding: 22px 20px;
text-align: center;
}
.ol4-cs-num {
font-family: var(--ol-font);
font-size: 32px;
font-weight: 800;
color: var(--ol-green-neon);
line-height: 1;
margin-bottom: 8px;
}
.ol4-cs-lbl {
font-family: var(--ol-font);
font-size: 12.5px;
color: rgba(255,255,255,0.55);
line-height: 1.5;
}
/* ============================================================
SECTION 8 : FAQ
============================================================ */
.ol4-s8 {
font-family: var(--ol-font);
background: var(--ol-gray-50);
padding: var(--ol-section-py) var(--ol-section-px);
}
.ol4-s8-inner { max-width: var(--ol-max-w-xs); margin: 0 auto; }
.ol4-faq-list { display: flex; flex-direction: column; gap: 12px; }
.ol4-faq-item {
background: var(--ol-white);
border-radius: var(--ol-radius-md);
border: 1px solid var(--ol-gray-200);
overflow: hidden;
transition: box-shadow 0.3s, border-color 0.3s;
}
.ol4-faq-item:hover {
box-shadow: 0 4px 20px rgba(0,166,81,0.08);
border-color: rgba(0,166,81,0.2);
}
.ol4-faq-q {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
}
.ol4-faq-q-txt {
font-family: var(--ol-font);
font-size: 16px;
font-weight: 700;
color: var(--ol-gray-900);
}
.ol4-faq-a {
font-family: var(--ol-font);
padding: 0 24px 22px 78px;
font-size: 14.5px;
color: var(--ol-gray-600);
line-height: 1.8;
}
/* ============================================================
SECTION 9 : CTA
============================================================ */
.ol4-s9 {
font-family: var(--ol-font);
background: var(--ol-grad-cta);
padding: var(--ol-section-py) var(--ol-section-px);
position: relative;
overflow: hidden;
text-align: center;
}
.ol4-s9::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 420px; height: 420px;
background: rgba(255,255,255,0.05);
border-radius: 50%;
pointer-events: none;
}
.ol4-s9::after {
content: '';
position: absolute;
bottom: -160px; left: -80px;
width: 480px; height: 480px;
background: rgba(0,0,0,0.06);
border-radius: 50%;
pointer-events: none;
}
.ol4-s9-inner { max-width: var(--ol-max-w-sm); margin: 0 auto; position: relative; z-index: 1; }
.ol4-s9-h2 {
font-family: var(--ol-font);
font-size: clamp(28px, 4.5vw, 48px);
font-weight: 800;
color: var(--ol-white);
margin: 0 0 16px;
line-height: 1.2;
}
.ol4-s9-p {
font-family: var(--ol-font);
font-size: 17px;
color: rgba(255,255,255,0.85);
margin: 0 0 40px;
line-height: 1.75;
}
.ol4-s9-cta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 48px;
}
.ol4-contact-row {
display: flex;
justify-content: center;
gap: 28px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.ol4-contact-a {
font-family: var(--ol-font);
display: flex;
align-items: center;
gap: 9px;
color: rgba(255,255,255,0.88) !important;
font-size: 15px;
text-decoration: none !important;
transition: color 0.2s;
}
.ol4-contact-a:hover { color: var(--ol-white) !important; }
.ol4-contact-a i { font-size: 17px; opacity: 0.75; }
.ol4-s9-note {
font-family: var(--ol-font);
font-size: 13px;
color: rgba(255,255,255,0.55);
}
.ol4-s9-divider {
width: 60px; height: 3px;
background: rgba(255,255,255,0.25);
border-radius: 2px;
margin: 0 auto 36px;
}/* End custom CSS */