/**
* MIDsource — services.css
* Save to: css/services.css
* Load in AFTER style-v2.css:
*
*
* Three services section options — switch by changing the
* class in index.html:
* services-section-light → Option A: white cards + hover bg image
* services-section-dark → Option B: dark navy glass cards
* services-section-grid → Option C: flush grid, no gap (active)
*
* WOW.js scroll animation delay helpers (used on all options):
* class="wow fadeInUp wd-1" through wd-8
*/
/* ══════════════════════════════════════
WOW STAGGER DELAYS
══════════════════════════════════════ */
.wd-1 { animation-delay: 0.05s !important; }
.wd-2 { animation-delay: 0.15s !important; }
.wd-3 { animation-delay: 0.25s !important; }
.wd-4 { animation-delay: 0.35s !important; }
.wd-5 { animation-delay: 0.45s !important; }
.wd-6 { animation-delay: 0.55s !important; }
.wd-7 { animation-delay: 0.65s !important; }
.wd-8 { animation-delay: 0.75s !important; }
/* ══════════════════════════════════════
SHARED SEC-TITLE OVERRIDES
(enhances the existing .sec-title from style-v2.css)
══════════════════════════════════════ */
.services-section-light .sec-title .title-bar,
.services-section-dark .sec-title .title-bar,
.services-section-grid .sec-title .title-bar {
display: inline-block;
width: 54px;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg, #0d70b7, #4eb3f8);
margin-bottom: 14px;
}
.services-section-dark .sec-title .title-bar {
background: linear-gradient(90deg, #4eb3f8, #5bc4ff);
}
.services-section-light .sec-title .subtitle,
.services-section-grid .sec-title .subtitle {
font-size: 15.5px;
font-weight: 400;
max-width: 540px;
margin: 0 auto;
line-height: 1.7;
color: #666;
}
.services-section-dark .sec-title .subtitle {
font-size: 15.5px;
font-weight: 400;
max-width: 540px;
margin: 0 auto;
line-height: 1.7;
color: rgba(255,255,255,0.52);
}
/* ══════════════════════════════════════════════════
OPTION A — LIGHT
White cards on #f7f9fc background.
On hover: background image fades in at 0.50 opacity
behind a navy tint, all text switches to white.
══════════════════════════════════════════════════ */
.services-section-light {
background: #f7f9fc;
padding: 90px 0 70px;
}
.services-section-light .sec-title h2 { color: #0f1e35; }
/* 2-column grid */
.services-section-light .svc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
margin-bottom: 26px;
}
/* Card base */
.svc-card-light {
background: #ffffff;
border: 1px solid #dde8f2;
border-radius: 12px;
padding: 36px 30px 32px;
text-align: left;
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
cursor: default;
}
/* Blue top-bar sweeps in on hover */
.svc-card-light::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #0d70b7, #4eb3f8);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.36s ease;
border-radius: 12px 12px 0 0;
z-index: 3;
}
/* Background image layer */
.svc-card-light::after {
content: '';
position: absolute;
inset: 0;
/* Replace this URL with your own image path e.g. url('../images/services-bg.jpg') */
background-image: url('https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=800&q=60&auto=format&fit=crop');
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 12px;
z-index: 1;
}
/* Navy tint at 0.50 opacity over the image */
.svc-card-light-overlay {
position: absolute;
inset: 0;
background: rgba(5, 18, 40, 0.50);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 12px;
z-index: 2;
pointer-events: none;
}
/* Hover */
.svc-card-light:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(13,112,183,0.15);
border-color: #9dcef5;
}
.svc-card-light:hover::before { transform: scaleX(1); }
.svc-card-light:hover::after { opacity: 1; }
.svc-card-light:hover .svc-card-light-overlay { opacity: 1; }
/* All content above overlay layers */
.svc-card-light .card-content { position: relative; z-index: 4; }
/* Icon */
.svc-card-light .icon-wrap {
width: 60px; height: 60px;
border-radius: 14px;
background: linear-gradient(135deg, #e8f3fc, #cce5f7);
border: 1px solid rgba(13,112,183,0.12);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
transition: background 0.32s ease, border-color 0.32s ease;
}
.svc-card-light:hover .icon-wrap { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.32); }
.svc-card-light .icon-wrap span,
.svc-card-light .icon-wrap i { font-size: 26px; color: #0d70b7; line-height: 1; transition: color 0.32s ease; }
.svc-card-light:hover .icon-wrap span,
.svc-card-light:hover .icon-wrap i { color: #ffffff; }
/* Heading */
.svc-card-light h3 { font-size: 17px; font-weight: 700; color: #0f1e35; margin-bottom: 10px; transition: color 0.22s; }
.svc-card-light:hover h3 { color: #ffffff; }
.svc-card-light h3 a { color: inherit; text-decoration: none; }
/* Divider */
.svc-card-light .divider {
width: 32px; height: 2px;
background: #0d70b7; border-radius: 2px; margin-bottom: 12px;
opacity: 0.38; transition: opacity 0.28s, width 0.28s, background 0.28s;
}
.svc-card-light:hover .divider { opacity: 1; width: 46px; background: #ffffff; }
/* Body text */
.svc-card-light p { font-size: 14.5px; color: #5a6472; line-height: 1.75; font-weight: 300; margin: 0; transition: color 0.22s; }
.svc-card-light:hover p { color: rgba(255,255,255,0.84); }
/* Read more link */
.svc-card-light .read-more {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 16px; font-size: 13px; font-weight: 600;
color: #0d70b7; text-decoration: none;
opacity: 0; transform: translateY(5px);
transition: opacity 0.25s, transform 0.25s, color 0.25s;
}
.svc-card-light:hover .read-more { opacity: 1; transform: translateY(0); color: #ffffff; }
/* CTA strip */
.svc-cta-light { text-align: center; padding: 44px 20px 0; }
.svc-cta-light .cta-btn {
display: inline-block; padding: 14px 38px; border-radius: 8px;
font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
text-decoration: none; background: #0d70b7; color: #fff;
box-shadow: 0 6px 20px rgba(13,112,183,0.28); transition: all 0.22s;
}
.svc-cta-light .cta-btn:hover { background: #0959a0; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,112,183,0.38); color: #fff; }
/* ══════════════════════════════════════════════════
OPTION B — DARK
Navy background, semi-transparent glass cards,
blue glow border and corner accent on hover.
══════════════════════════════════════════════════ */
.services-section-dark {
background: #071630;
padding: 90px 0 70px;
position: relative;
}
.services-section-dark .sec-title h2 { color: #ffffff; }
/* 2-column grid */
.services-section-dark .svc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
margin-bottom: 22px;
}
/* Card */
.svc-card-dark {
background: rgba(255,255,255,0.042);
border: 1px solid rgba(78,179,248,0.16);
border-radius: 14px; padding: 34px 28px 30px;
text-align: left; position: relative; overflow: hidden;
isolation: isolate;
transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease, border-color 0.28s ease;
cursor: default;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Corner glow */
.svc-card-dark::after {
content: '';
position: absolute; top: -50px; right: -50px;
width: 130px; height: 130px; border-radius: 50%;
background: radial-gradient(circle, rgba(78,179,248,0.16) 0%, transparent 70%);
opacity: 0; transition: opacity 0.36s; pointer-events: none; z-index: 0;
}
.svc-card-dark:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.068);
border-color: rgba(78,179,248,0.42);
box-shadow: 0 18px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(78,179,248,0.18);
}
.svc-card-dark:hover::after { opacity: 1; }
.svc-card-dark .card-content { position: relative; z-index: 1; }
/* Icon */
.svc-card-dark .icon-wrap {
width: 56px; height: 56px; border-radius: 12px;
background: rgba(78,179,248,0.09);
border: 1px solid rgba(78,179,248,0.22);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
transition: background 0.28s, border-color 0.28s;
}
.svc-card-dark:hover .icon-wrap { background: rgba(78,179,248,0.2); border-color: rgba(78,179,248,0.48); }
.svc-card-dark .icon-wrap span,
.svc-card-dark .icon-wrap i { font-size: 24px; color: #4eb3f8; line-height: 1; }
/* Heading */
.svc-card-dark h3 { font-size: 17px; font-weight: 700; color: #ffffff; margin-bottom: 10px; transition: color 0.2s; }
.svc-card-dark:hover h3 { color: #4eb3f8; }
.svc-card-dark h3 a { color: inherit; text-decoration: none; }
/* Divider */
.svc-card-dark .divider {
width: 32px; height: 2px;
background: linear-gradient(90deg, #4eb3f8, #5bc4ff);
border-radius: 2px; margin-bottom: 12px;
opacity: 0.42; transition: opacity 0.28s, width 0.28s;
}
.svc-card-dark:hover .divider { opacity: 1; width: 46px; }
/* Body text */
.svc-card-dark p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.75; font-weight: 300; margin: 0; transition: color 0.2s; }
.svc-card-dark:hover p { color: rgba(255,255,255,0.76); }
/* Read more */
.svc-card-dark .read-more {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 16px; font-size: 13px; font-weight: 600;
color: #4eb3f8; text-decoration: none;
opacity: 0; transform: translateY(5px);
transition: opacity 0.25s, transform 0.25s;
}
.svc-card-dark:hover .read-more { opacity: 1; transform: translateY(0); }
/* CTA */
.svc-cta-dark { text-align: center; padding: 44px 20px 0; }
.svc-cta-dark .cta-btn {
display: inline-block; padding: 14px 38px; border-radius: 8px;
font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
text-decoration: none; background: #4eb3f8; color: #071630;
box-shadow: 0 6px 20px rgba(78,179,248,0.28); transition: all 0.22s;
}
.svc-cta-dark .cta-btn:hover { background: #5bc4ff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(78,179,248,0.42); color: #071630; }
/* ══════════════════════════════════════════════════
OPTION C — FLUSH GRID ← ACTIVE IN index.html
No gap between cells — shared 1px borders.
Icon in absolute-positioned box on the left
(matches original services-block-two feel).
Blue left-edge bar slides up on hover.
══════════════════════════════════════════════════ */
.services-section-grid {
background: #ffffff;
padding: 80px 0 0;
}
.services-section-grid .sec-title h2 { color: #111820; }
/* Outer wrapper — carries the vertical centre line */
.svc-flush-wrap {
position: relative;
border: 1px solid #e0e8f0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 0;
}
/* Vertical centre divider line */
.svc-flush-wrap::before {
content: '';
position: absolute;
left: 50%; top: 0;
width: 1px; height: 100%;
background: #e0e8f0;
z-index: 1;
pointer-events: none;
}
/* Flush 2-col grid — gap:0 so rows share a single border */
.svc-flush-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
/* Each cell */
.svc-cell {
position: relative;
padding: 40px 36px 38px 92px;
border-bottom: 1px solid #e0e8f0;
overflow: hidden;
transition: background 0.28s ease;
cursor: default;
background: #ffffff;
}
/* Remove bottom border from last two cells */
.svc-flush-grid .svc-cell:nth-last-child(-n+2) { border-bottom: none; }
/* Blue left-edge accent bar — slides up on hover */
.svc-cell::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #0d70b7, #4eb3f8);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.32s ease;
z-index: 2;
}
.svc-cell:hover { background: #f4f8fd; }
.svc-cell:hover::before { transform: scaleY(1); }
/* Icon box — absolute left column */
.svc-cell .cell-icon {
position: absolute;
left: 22px; top: 40px;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #e4f0fb, #cce2f6);
border-radius: 12px;
border: 1px solid rgba(13,112,183,0.14);
transition: background 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
}
.svc-cell .cell-icon i,
.svc-cell .cell-icon span {
font-size: 22px;
color: #0d70b7;
line-height: 1;
transition: color 0.28s ease;
display: block;
}
.svc-cell:hover .cell-icon {
background: linear-gradient(135deg, #0d70b7, #1a88d4);
border-color: transparent;
transform: scale(1.08);
}
.svc-cell:hover .cell-icon i,
.svc-cell:hover .cell-icon span { color: #ffffff; }
/* Heading */
.svc-cell h3 {
font-size: 17px; font-weight: 700; color: #111820; margin-bottom: 6px; transition: color 0.22s;
}
.svc-cell:hover h3 { color: #0d70b7; }
.svc-cell h3 a { color: inherit; text-decoration: none; transition: color 0.22s; }
.svc-cell:hover h3 a { color: #0d70b7; }
/* Thin rule under heading */
.svc-cell .cell-rule {
width: 28px; height: 2px;
background: #0d70b7; border-radius: 2px; margin-bottom: 10px;
opacity: 0.3; transition: width 0.28s, opacity 0.28s;
}
.svc-cell:hover .cell-rule { width: 42px; opacity: 0.85; }
/* Body text */
.svc-cell p {
font-size: 14.5px; color: #707880; line-height: 1.75; font-weight: 300; margin: 0;
}
/* CTA strip below the grid */
.svc-grid-cta {
text-align: center;
padding: 48px 20px;
background: #f7f9fc;
border-top: 1px solid #e0e8f0;
}
.svc-grid-cta .cta-btn {
display: inline-block; padding: 13px 36px; border-radius: 7px;
font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
text-decoration: none; background: #0d70b7; color: #fff;
box-shadow: 0 5px 18px rgba(13,112,183,0.24); transition: all 0.22s;
}
.svc-grid-cta .cta-btn:hover { background: #0959a0; transform: translateY(-2px); box-shadow: 0 9px 26px rgba(13,112,183,0.34); color: #fff; }
/* ══════════════════════════════════════
RESPONSIVE — all options
══════════════════════════════════════ */
@media (max-width: 991px) {
.services-section-light .svc-grid,
.services-section-dark .svc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.svc-flush-wrap::before { display: none; }
.svc-flush-grid { grid-template-columns: 1fr; }
.svc-flush-grid .svc-cell:nth-last-child(-n+2) { border-bottom: 1px solid #e0e8f0; }
.svc-flush-grid .svc-cell:last-child { border-bottom: none; }
.svc-cell { padding-left: 84px; }
}
/* ══════════════════════════════════════
LEARN MORE LINK — Option C cells
══════════════════════════════════════ */
.svc-cell .svc-learn-more {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 12px;
font-size: 13px;
font-weight: 600;
color: #0d70b7;
text-decoration: none;
transition: color 0.22s, gap 0.22s;
}
.svc-cell .svc-learn-more i {
font-size: 11px;
transition: transform 0.22s;
}
.svc-cell:hover .svc-learn-more {
color: #0d70b7;
gap: 8px;
}
.svc-cell:hover .svc-learn-more i {
transform: translateX(3px);
}
/* ══════════════════════════════════════════════════
SERVICES PAGE — New Card Blocks
══════════════════════════════════════════════════ */
/* ── Scoped reset ── */
.ms-section *, .ms-section *::before, .ms-section *::after { box-sizing: border-box; }
/* ── Section: WHITE background ── */
.ms-section {
background: #ffffff;
padding: 80px 0 90px;
font-family: 'Inter', sans-serif;
}
.ms-container {
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
}
/* ── Section header ── */
.ms-header { text-align: center; margin-bottom: 56px; }
.ms-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a6bc4;
margin-bottom: 16px;
font-family: 'Inter', sans-serif;
}
.ms-eyebrow::before, .ms-eyebrow::after {
content: '';
display: block;
width: 28px;
height: 1px;
background: #1a6bc4;
}
/* h2 with blue underline bar — matches site sec-title style */
.ms-header h2 {
font-size: 46px;
font-weight: 700;
color: #0d1524;
letter-spacing: -0.02em;
line-height: 1.18;
margin-bottom: 0;
padding-bottom: 22px;
position: relative;
font-family: 'Inter', sans-serif;
}
.ms-header h2 span { color: #1a6bc4; }
/* Blue 4px bar, centered, below the heading, above the paragraph */
.ms-header h2::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 80px;
height: 4px;
background-color: #0d70b7;
border-radius: 2px;
}
.ms-header p {
max-width: 860px;
margin: 22px auto 0;
font-size: 16px;
color: #4a5568;
line-height: 1.7;
font-family: 'Inter', sans-serif;
padding: 4px 12px;
}
/* ── Grid ── */
.ms-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
/* ── Card ── */
.ms-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 8px 28px rgba(0,0,0,0.07);
transition: transform 0.28s cubic-bezier(.22,.68,0,1.2), box-shadow 0.28s ease;
text-decoration: none;
color: inherit;
position: relative;
opacity: 0;
font-family: 'Inter', sans-serif;
}
.ms-card.animated { opacity: 1; }
.ms-card:hover {
transform: translateY(-6px);
box-shadow: 0 4px 10px rgba(0,0,0,0.06), 0 20px 52px rgba(26,107,196,0.16);
}
/* ── Image area ── */
.ms-card-img {
position: relative;
height: 200px;
overflow: hidden;
flex-shrink: 0;
}
.ms-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
filter: brightness(0.88) saturate(1.05);
}
.ms-card:hover .ms-card-img img { transform: scale(1.06); }
/* Dark gradient at bottom — fades out when blue overlay appears */
.ms-card-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(10,18,35,0) 35%, rgba(10,18,35,0.62) 100%);
z-index: 1;
pointer-events: none;
transition: opacity 0.35s ease;
}
.ms-card:hover .ms-card-img::after { opacity: 0; }
/* Blue overlay — fades IN on hover, matching original overlay-box style */
.ms-card-overlay {
position: absolute;
inset: 0;
background: rgba(14, 90, 180, 0.85);
z-index: 2;
opacity: 0;
transition: opacity 0.35s ease;
display: flex;
align-items: center;
justify-content: center;
}
.ms-card:hover .ms-card-overlay { opacity: 1; }
/* Centered icomoon icon circle on hover */
.ms-overlay-icon {
width: 74px;
height: 74px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.88);
background: rgba(255,255,255,0.14);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.65);
transition: opacity 0.3s ease 0.06s, transform 0.32s cubic-bezier(.22,.68,0,1.4) 0.06s;
}
.ms-card:hover .ms-overlay-icon {
opacity: 1;
transform: scale(1);
}
.ms-overlay-icon .icon {
font-size: 32px;
color: #ffffff;
line-height: 1;
}
/* Category badge */
.ms-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
background: rgba(10,18,35,0.62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.18);
color: #e8edf5;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
font-family: 'Inter', sans-serif;
}
/* ── Card body ── */
.ms-card-body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
flex: 1;
background: #ffffff;
}
/* Title row */
.ms-card-title-row {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 10px;
}
/* Icon pill */
.ms-title-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
background: #e6f0fb;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.ms-card:hover .ms-title-icon {
background: #1a6bc4;
transform: scale(1.06);
box-shadow: 0 4px 14px rgba(26,107,196,0.35);
}
.ms-title-icon .icon {
font-size: 20px;
color: #1a6bc4;
line-height: 1;
transition: color 0.25s ease;
}
.ms-card:hover .ms-title-icon .icon { color: #ffffff; }
.ms-card-title {
font-size: 16px;
font-weight: 700;
color: #0d1524;
letter-spacing: -0.01em;
line-height: 1.3;
font-family: 'Inter', sans-serif;
}
/* Animated blue divider */
.ms-divider {
width: 32px;
height: 2px;
background: #1a6bc4;
border-radius: 2px;
margin-bottom: 12px;
transition: width 0.3s ease;
}
.ms-card:hover .ms-divider { width: 56px; }
.ms-card-text {
font-size: 14px;
color: #5a6478;
line-height: 1.7;
flex: 1;
margin-bottom: 18px;
font-family: 'Inter', sans-serif;
}
/* Read more arrow link */
.ms-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #1a6bc4;
text-decoration: none;
letter-spacing: 0.01em;
transition: gap 0.2s ease, color 0.2s ease;
font-family: 'Inter', sans-serif;
}
.ms-card-link svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.ms-card:hover .ms-card-link { gap: 10px; color: #0d4f9c; }
.ms-card:hover .ms-card-link svg { transform: translateX(3px); }
/* ── CTA Banner ── */
.ms-cta {
margin-top: 64px;
background: linear-gradient(135deg, #0d1524 0%, #12284a 50%, #0f1e3d 100%);
border-radius: 20px;
padding: 48px 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
position: relative;
overflow: hidden;
}
.ms-cta::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 240px; height: 240px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.06);
}
.ms-cta::after {
content: '';
position: absolute;
bottom: -40px; left: 40%;
width: 160px; height: 160px;
border-radius: 50%;
border: 1px solid rgba(26,107,196,0.25);
}
.ms-cta-text h3 {
font-size: 26px;
font-weight: 700;
color: #f0f4fc;
letter-spacing: -0.02em;
line-height: 1.25;
margin-bottom: 8px;
font-family: 'Inter', sans-serif;
}
.ms-cta-text p {
font-size: 15px;
color: #8a9bbf;
line-height: 1.55;
font-family: 'Inter', sans-serif;
}
.ms-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
background: #1a6bc4;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
padding: 16px 32px;
border-radius: 10px;
border: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 20px rgba(26,107,196,0.4);
position: relative; z-index: 1;
font-family: 'Inter', sans-serif;
}
.ms-cta-btn svg {
width: 16px; height: 16px;
stroke: #fff; fill: none;
stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
.ms-cta-btn:hover {
color: #1559a8;
background-color: aliceblue;
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(26,107,196,0.5);
}
.ms-cta-btn:hover svg {
width: 16px; height: 16px;
stroke: #1559a8; fill: none;
stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
/* ── Scroll animation ── */
@keyframes msSlideUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.ms-card.animated { animation: msSlideUp 0.55s cubic-bezier(.22,.68,0,1.05) forwards; }
/* ── Responsive ── */
@media (max-width: 991px) {
.ms-grid { grid-template-columns: repeat(2, 1fr); }
.ms-cta { flex-direction: column; text-align: center; padding: 40px 32px; }
}
@media (max-width: 600px) {
.ms-grid { grid-template-columns: 1fr; }
.ms-header h2 { font-size: 28px; }
.ms-section { padding: 56px 0 64px; }
}