/* =========================================================
   Service detail cards — shared by the 6 sub-service pages
   Navy + teal theme, matching the navbar and services page
   ========================================================= */

/* ---------- Scroll reveal (only when JS is running) ---------- */
.sc-js .sc-reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 650ms ease, transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--sc-delay, 0ms);
}
.sc-js .sc-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Grid section heading ---------- */
.sg-header h2 { position: relative; display: inline-block; }
.sg-header h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #0c233c, #10b981);
    transform: scaleX(0);
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.sg-header.is-in h2::after, .sg-header:not(.sc-reveal) h2::after { transform: scaleX(1); }

/* ---------- Small card (.m-card) ---------- */
.modern-grid .m-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px 30px 36px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 650ms ease,
                box-shadow 450ms ease,
                border-color 300ms ease;
    transition-delay: var(--sc-delay, 0ms);
}
.sc-js .modern-grid .m-card.sc-reveal:not(.is-in) { transform: translateY(30px) scale(0.98); }

/* navy panel that rises from the bottom on hover */
.modern-grid .m-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(140deg, #071426 0%, #0c233c 55%, #0d4248 100%);
    clip-path: circle(0% at var(--mx, 50%) var(--my, 100%));
    transition: clip-path 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* top accent line */
.modern-grid .m-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0d7a66, #10b981);
    transform: scaleX(0.18);
    transform-origin: left;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

/* small step counter in the corner */
.modern-grid .m-card .mc-num {
    position: absolute;
    top: 30px;
    right: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #94a3b8;
    transition: color 350ms ease;
}
.modern-grid .m-card .mc-num::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #e2e8f0;
    transition: width 450ms cubic-bezier(0.22, 1, 0.36, 1), background 350ms ease;
}

.modern-grid .m-card .mc-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #34d399;
    background: linear-gradient(135deg, #0c233c 0%, #0d4248 100%);
    box-shadow: 0 10px 20px -10px rgba(7, 20, 38, 0.6);
    transition: background 400ms ease, color 400ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modern-grid .m-card .mc-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 20px;
    border: 2px solid rgba(52, 211, 153, 0.5);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 300ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modern-grid .m-card .mc-icon i { transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1); }

.modern-grid .m-card .mc-title {
    color: #0f172a;
    transition: color 350ms ease;
}
.modern-grid .m-card .mc-desc {
    color: #64748b;
    transition: color 350ms ease;
}

/* hover / keyboard focus state */
.modern-grid .m-card:hover,
.modern-grid .m-card:focus-within,
.modern-grid .m-card.is-active {
    transform: translateY(-10px);
    border-color: transparent;
    box-shadow: 0 30px 50px -24px rgba(7, 20, 38, 0.55);
}
.modern-grid .m-card:hover::after,
.modern-grid .m-card.is-active::after { clip-path: circle(150% at var(--mx, 50%) var(--my, 100%)); }
.modern-grid .m-card:hover::before,
.modern-grid .m-card.is-active::before { transform: scaleX(1); }
.modern-grid .m-card:hover .mc-num,
.modern-grid .m-card.is-active .mc-num { color: #34d399; }
.modern-grid .m-card:hover .mc-num::before,
.modern-grid .m-card.is-active .mc-num::before { width: 34px; background: #34d399; }
.modern-grid .m-card:hover .mc-icon,
.modern-grid .m-card.is-active .mc-icon {
    background: linear-gradient(135deg, #0d7a66 0%, #10b981 100%);
    color: #ffffff;
    transform: translateY(-4px);
}
.modern-grid .m-card:hover .mc-icon::after,
.modern-grid .m-card.is-active .mc-icon::after { opacity: 1; transform: scale(1); }
.modern-grid .m-card:hover .mc-icon i,
.modern-grid .m-card.is-active .mc-icon i { transform: rotate(-12deg) scale(1.12); }
.modern-grid .m-card:hover .mc-title,
.modern-grid .m-card.is-active .mc-title { color: #ffffff; }
.modern-grid .m-card:hover .mc-desc,
.modern-grid .m-card.is-active .mc-desc { color: #cbd5e1; }

/* ---------- Training category card (.t-card) ---------- */
.training-grid .t-card {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), opacity 650ms ease, box-shadow 450ms ease, border-color 300ms ease;
    transition-delay: var(--sc-delay, 0ms);
}
.training-grid .t-card .t-card-header {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(140deg, #071426 0%, #0c233c 55%, #0d4248 100%) !important;
}
.training-grid .t-card:nth-child(3) .t-card-header {
    background:
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(140deg, #0b5f50 0%, #0d7a66 60%, #10b981 130%) !important;
}
/* light sweep across the header */
.training-grid .t-card .t-card-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-20deg);
    transition: left 800ms ease;
}
.training-grid .t-card .t-card-header i {
    color: #34d399 !important;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), background 300ms ease, color 300ms ease;
}
.training-grid .t-card:nth-child(3) .t-card-header i { color: #ffffff !important; }
.training-grid .t-card .t-card-subheader {
    background: #f1f5f9 !important;
    color: #0c233c !important;
    border-bottom: 1px solid #e2e8f0;
}
.training-grid .t-card .t-list li {
    border-radius: 8px;
    padding: 2px 6px;
    margin: 0 -6px;
    transition: background-color 200ms ease, color 200ms ease, transform 250ms ease;
}
.training-grid .t-card .t-list li i {
    color: #0d7a66;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.training-grid .t-card .t-list li:hover {
    background: #f1f5f9;
    color: #0c233c;
    transform: translateX(4px);
}
.training-grid .t-card .t-list li:hover i { transform: scale(1.35); }

.training-grid .t-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 30px 50px -24px rgba(7, 20, 38, 0.45);
}
.training-grid .t-card:hover .t-card-header::after { left: 130%; }
.training-grid .t-card:hover .t-card-header i {
    transform: rotate(-10deg) scale(1.08);
    background: rgba(52, 211, 153, 0.18);
}

/* ---------- Touch screens: no hover, so highlight the card in view ---------- */
@media (hover: none) {
    .modern-grid .m-card:hover:not(.is-active)::after { clip-path: circle(0% at 50% 100%); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sc-js .sc-reveal { opacity: 1 !important; transform: none !important; }
    .modern-grid .m-card, .modern-grid .m-card *, .modern-grid .m-card::before, .modern-grid .m-card::after,
    .training-grid .t-card, .training-grid .t-card *, .training-grid .t-card *::after {
        transition: none !important;
    }
}

/* "Why choose us" icons on the training page */
.training-grid .t-why-icon { transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1), background 300ms ease, color 300ms ease; }
.training-grid .t-why-icon + div { transition: transform 300ms ease; }
.training-grid div:hover > .t-why-icon {
    transform: rotate(-10deg) scale(1.1);
    background: linear-gradient(135deg, #0d7a66 0%, #10b981 100%) !important;
    color: #ffffff !important;
}
.training-grid div:hover > .t-why-icon + div { transform: translateX(4px); }