/*
* 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: #f9f9f9;
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: 15.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; }
}