/*
Theme Name: Shyamsharanam
Author: Shyamsharanam
Description: Professional responsive WordPress theme for Shyamsharanam Skills & Livelihood Foundation.
Version: 16.0.0
Text Domain: shyamsharanam
*/
.sslf-lead .msg-photo
:root{
--sslf-navy:#0F3D75;
--sslf-navy-dark:#092a55;
--sslf-navy-light:#1b5aa8;
--sslf-orange:#F58220;
--sslf-orange-dark:#d96f14;
--sslf-green:#2E7D32;
--sslf-green-dark:#1f5c22;
--sslf-yellow:#facc15;
--sslf-red:#dc2626;
--sslf-purple:#7c3aed;
--sslf-pink:#ec4899;
--sslf-teal:#0d9488;
--sslf-bg:#F7F9FC;
--sslf-bg-soft:#F7F9FC;
--sslf-text:#1f2937;
--sslf-muted:#6b7280;
--sslf-border:#e5e7eb;
--shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
--shadow-md:0 8px 20px rgba(15,23,42,.08);
--shadow-lg:0 24px 50px -18px rgba(15,23,42,.25);
--radius:12px;
--transition:.28s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;color:var(--sslf-text);background:#fff;margin:0;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:color var(--transition)}
img{max-width:100%;height:auto;display:block}
.container{max-width:1240px;margin:0 auto;padding:0 20px;width:100%}
.section{padding:70px 0}
h1,h2,h3,h4,h5,h6{font-family:"Poppins","Inter",sans-serif;color:var(--sslf-navy);margin:0 0 12px;line-height:1.2}
.section-title{font-weight:800;color:var(--sslf-navy);margin:6px 0 10px;font-size:38px}
.section-head{text-align:center;margin-bottom:44px;max-width:820px;margin-left:auto;margin-right:auto}
.section-head p{color:var(--sslf-muted);font-size:16px}
.section-head .divider{display:inline-flex;align-items:center;gap:10px;color:var(--sslf-orange);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.section-head .divider::before,.section-head .divider::after{content:"";width:44px;height:2px;background:var(--sslf-orange)}
.section-head .under{display:block;width:120px;height:4px;background:linear-gradient(90deg,var(--sslf-navy) 50%,var(--sslf-orange) 50%,var(--sslf-green) 100%);margin:14px auto 0;border-radius:2px}
/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:600;font-size:14px;border:2px solid transparent;cursor:pointer;transition:all var(--transition);text-decoration:none;line-height:1.2;white-space:nowrap;position:relative;overflow:hidden}
.btn:focus-visible{outline:3px solid rgba(30,58,138,.35);outline-offset:2px}
.btn i{font-size:14px}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.15);transform:translateX(-100%);transition:transform var(--transition)}
.btn:hover::after{transform:translateX(0)}
.btn-orange{background:linear-gradient(135deg,var(--sslf-orange),#f9a95c);color:#fff;box-shadow:0 6px 18px rgba(249,115,22,.35)}
.btn-orange:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(249,115,22,.45);color:#fff}
.btn-navy{background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light));color:#fff;box-shadow:0 6px 18px rgba(30,58,138,.28)}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,58,138,.4);color:#fff}
.btn-green{background:linear-gradient(135deg,var(--sslf-green),#43a047);color:#fff;box-shadow:0 6px 18px rgba(22,163,74,.32)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,163,74,.42);color:#fff}
.btn-outline-navy{background:#fff;color:var(--sslf-navy);border-color:var(--sslf-navy)}
.btn-outline-navy:hover{background:var(--sslf-navy);color:#fff}
.btn-outline-orange{background:#fff;color:var(--sslf-orange);border-color:var(--sslf-orange)}
.btn-outline-orange:hover{background:var(--sslf-orange);color:#fff}
.btn-ghost{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff;color:var(--sslf-navy)}
.btn-sm{padding:8px 14px;font-size:12px}
.btn-lg{padding:16px 30px;font-size:15px}
.w-100{width:100%}
.d-flex{display:flex}
.d-inline-flex{display:inline-flex}
.gap-2{gap:8px}
.gap-3{gap:12px}
.flex-wrap{flex-wrap:wrap}
.justify-content-center{justify-content:center}
.mt-3{margin-top:12px}
.mt-4{margin-top:18px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:18px}
.text-center{text-align:center}
/* ---------- TOPBAR ---------- */
.sslf-topbar{background:linear-gradient(90deg,var(--sslf-navy),var(--sslf-navy-light));color:#fff;font-size:13px;padding:8px 0}
.sslf-topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sslf-topbar .top-left{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.sslf-topbar .top-left span{display:inline-flex;align-items:center;gap:6px}
.sslf-topbar i{color:var(--sslf-yellow)}
.sslf-topbar a{color:#fff}
.sslf-topbar .top-right{display:flex;gap:10px}
.sslf-topbar .top-right a{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);display:inline-grid;place-items:center;font-size:11px;transition:all var(--transition)}
.sslf-topbar .top-right a:hover{background:var(--sslf-orange);transform:translateY(-2px)}
/* ---------- HEADER ---------- */
.sslf-header{background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.06);position:sticky;top:0;z-index:1030;transition:all var(--transition)}
.sslf-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:18px}
.sslf-logo{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--sslf-navy);font-size:18px;flex-shrink:0}
.sslf-logo img{height:100px;width:auto}
.sslf-logo .logo-badge{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-orange));color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:var(--shadow-md)}
.sslf-logo .logo-text{display:flex;flex-direction:column;line-height:1.15}
.sslf-logo .ln1{font-size:18px;font-weight:800;color:var(--sslf-navy)}
.sslf-logo .ln2{font-size:11px;font-weight:600;color:var(--sslf-muted);letter-spacing:.3px}
.sslf-menu{display:flex;list-style:none;margin:0;padding:0;align-items:center;gap:4px}
.sslf-menu .menu-item>a {
color: #1f2937;
font-weight: 600;
font-size: 13.5px;
padding: 10px 6px;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 8px;
transition: all var(--transition);
position: relative;
}
.sslf-menu .menu-item>a .mi-ico{font-size:12px;color:var(--sslf-orange);opacity:.85}
.sslf-menu .menu-item>a .caret{font-size:9px;margin-left:2px;transition:transform var(--transition)}
.sslf-menu .menu-item:hover>a{color:var(--sslf-navy);background:rgba(30,58,138,.06)}
.sslf-menu .menu-item:hover>a .caret{transform:rotate(180deg)}
.sslf-menu .has-child{position:relative}
.sslf-menu .sub-menu{position:absolute;top:calc(100% + 10px);left:0;background:#fff;box-shadow:0 20px 50px rgba(15,23,42,.18);min-width:260px;padding:10px;border-radius:14px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:all var(--transition);border-top:3px solid var(--sslf-orange);z-index:100}
.sslf-menu .has-child:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sslf-menu .sub-menu li{list-style:none}
.sslf-menu .sub-menu a{padding:10px 14px;display:flex;gap:12px;align-items:center;font-size:13.5px;color:#374151;border-radius:8px;font-weight:500;transition:all var(--transition)}
.sslf-menu .sub-menu a i{width:28px;height:28px;border-radius:8px;background:rgba(30,58,138,.08);color:var(--sslf-navy);display:grid;place-items:center;font-size:12px;transition:all var(--transition)}
.sslf-menu .sub-menu a:hover{background:linear-gradient(90deg,rgba(249,115,22,.08),transparent);color:var(--sslf-navy);padding-left:18px}
.sslf-menu .sub-menu a:hover i{background:var(--sslf-orange);color:#fff}
.header-cta{display:flex;gap:10px;align-items:center;flex-shrink:0}
.mobile-toggle{display:none;background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light));color:#fff;border:0;width:44px;height:44px;border-radius:10px;font-size:18px;cursor:pointer;box-shadow:var(--shadow-md)}
/* ---------- OFF-CANVAS ---------- */
.sslf-offcanvas-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:all var(--transition);z-index:1050}
.sslf-offcanvas-backdrop.open{opacity:1;visibility:visible}
.sslf-offcanvas{position:fixed;top:0;right:-360px;width:340px;max-width:88vw;height:100vh;background:#fff;box-shadow:-10px 0 40px rgba(15,23,42,.15);z-index:1055;display:flex;flex-direction:column;transition:right .38s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sslf-offcanvas.open{right:0}
.oc-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light));color:#fff;flex-shrink:0}
.oc-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:18px}
.oc-logo img{height:38px;background:#fff;padding:4px;border-radius:8px}
.oc-logo i{font-size:22px;color:var(--sslf-yellow)}
.oc-close{background:rgba(255,255,255,.2);border:0;color:#fff;width:36px;height:36px;border-radius:8px;font-size:16px;cursor:pointer;transition:all var(--transition)}
.oc-close:hover{background:var(--sslf-orange);transform:rotate(90deg)}
.oc-body{flex:1;overflow-y:auto;padding:12px 0}
.oc-menu{list-style:none;margin:0;padding:0}
.oc-menu li{border-bottom:1px solid #f1f5f9}
.oc-link{display:flex;align-items:center;gap:14px;padding:14px 20px;color:#1f2937;font-weight:600;font-size:14px}
.oc-link i:first-child{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,rgba(30,58,138,.1),rgba(249,115,22,.1));color:var(--sslf-navy);display:grid;place-items:center;font-size:13px}
.oc-link span{flex:1}
.oc-caret{transition:transform var(--transition);color:var(--sslf-muted);font-size:11px}
.oc-menu .has-child.open>.oc-link .oc-caret{transform:rotate(180deg);color:var(--sslf-orange)}
.oc-sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;background:#F7F9FC;transition:max-height .35s ease}
.oc-menu .has-child.open>.oc-sub{max-height:600px}
.oc-sub a{display:flex;align-items:center;gap:10px;padding:11px 20px 11px 44px;font-size:13.5px;color:#374151;border-left:3px solid transparent}
.oc-sub a:hover{background:#fff;border-left-color:var(--sslf-orange);color:var(--sslf-navy)}
.oc-sub a i{color:var(--sslf-orange);font-size:11px;width:16px;text-align:center}
.oc-cta{padding:18px 20px;display:flex;flex-direction:column;gap:10px;background:#F7F9FC}
.oc-contact{padding:14px 20px;background:#0f1e4d;color:#c7d2fe;font-size:13px}
.oc-contact div{display:flex;align-items:center;gap:8px;margin:4px 0}
.oc-contact i{color:var(--sslf-orange);width:16px}
/* Focus strip under hero */
.focus-strip{background:#fff;padding:22px 0;border-bottom:1px solid #eef1f6}
.focus-strip .strip-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:14px;text-align:center}
.focus-strip .strip-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-right:1px solid #eef1f6}
.focus-strip .strip-item:last-child{border-right:0}
.focus-strip .strip-item i{font-size:22px}
.focus-strip .strip-item span{font-size:11.5px;font-weight:600;color:var(--sslf-navy);line-height:1.3}
/* ---------- CARDS / SECTIONS ---------- */
.card-grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.focus-tile{background:#fff;border:1px solid #eef1f6;border-radius:16px;padding:26px 20px;text-align:center;transition:all var(--transition);height:100%;position:relative;overflow:hidden}
.focus-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(249,115,22,.06));opacity:0;transition:all var(--transition)}
.focus-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--sslf-orange)}
.focus-tile:hover::before{opacity:1}
.focus-tile .ficon{width:78px;height:78px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto 14px;font-size:32px;box-shadow:0 6px 18px rgba(0,0,0,.06);position:relative;z-index:1}
.focus-tile h5{font-family:"Inter",system-ui,sans-serif;color:var(--sslf-navy);font-weight:800;margin:0 0 8px;font-size:15px;position:relative;z-index:1}
.focus-tile p{font-size:13px;margin:0;position:relative;z-index:1}
.focus-tile.c1 .ficon{color:var(--sslf-navy);background:#eef2ff}
.focus-tile.c2 .ficon{color:var(--sslf-purple);background:#f3e8ff}
.focus-tile.c3 .ficon{color:var(--sslf-green);background:#dcfce7}
.focus-tile.c4 .ficon{color:var(--sslf-orange);background:#ffedd5}
.focus-tile.c5 .ficon{color:var(--sslf-pink);background:#fce7f3}
.focus-tile.c6 .ficon{color:var(--sslf-teal);background:#ccfbf1}
.focus-tile.c7 .ficon{color:#2563eb;background:#dbeafe}
.focus-tile.c8 .ficon{color:#059669;background:#d1fae5}
.focus-tile.c9 .ficon{color:#f59e0b;background:#fef3c7}
.focus-tile.c10 .ficon{color:#2E7D32;background:#dcfce7}
/* Programs cards */
.program-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid #eef1f6;transition:all var(--transition);height:100%;display:flex;flex-direction:column}
.program-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.program-card .pc-visual{position:relative;height:180px;overflow:hidden;background:linear-gradient(135deg,#eef2ff,#dbeafe)}
.program-card .pc-visual img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.program-card:hover .pc-visual img{transform:scale(1.06)}
.program-card .pc-badge{position:absolute;top:12px;left:12px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:var(--shadow-md)}
.program-card .body{padding:20px;flex:1;display:flex;flex-direction:column}
.program-card h6{color:var(--sslf-navy);font-weight:800;margin:0 0 8px;font-size:16px;font-family:"Inter",system-ui,sans-serif}
.program-card p{color:#4b5563;font-size:13.5px;margin:0 0 14px;flex:1}
.program-card .know-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;color:#fff;font-weight:600;font-size:13px;transition:all var(--transition);align-self:flex-start}
.program-card .know-more:hover{transform:translateX(4px)}
/* Leadership */
.leader-card{background:#fff;border-radius:20px;padding:26px 22px;text-align:center;box-shadow:var(--shadow-sm);border:1px solid #eef1f6;transition:all var(--transition);height:100%}
.leader-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.leader-card .avatar{width:160px;height:160px;border-radius:50%;overflow:hidden;margin:0 auto 16px;border:4px solid #fff;box-shadow:0 8px 24px rgba(30,58,138,.15);position:relative}
.leader-card .avatar img{
object-position: top;
width:100%;height:100%;object-fit:cover}
.leader-card h4{color:var(--sslf-navy);font-weight:800;margin:0 0 4px;font-size:22px;font-family:"Playfair Display",serif}
.leader-card .role{color:var(--sslf-orange);font-weight:700;font-size:14px;margin-bottom:12px;position:relative;padding-bottom:10px}
.leader-card .role::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:40px;height:2px;background:var(--sslf-orange)}
.leader-card p{color:#4b5563;font-size:13.5px;margin:0 0 16px}
.leader-card .l-contact{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.leader-card .l-contact a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#eef2ff;color:var(--sslf-navy);border-radius:8px;font-size:12px;font-weight:600;transition:all var(--transition)}
.leader-card .l-contact a:hover{background:var(--sslf-navy);color:#fff}
/* Why partner - Partnership */
.why-card{background:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow-sm);border:1px solid #eef1f6;height:100%;position:relative;transition:all var(--transition);display:flex;gap:16px;align-items:flex-start}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.why-card .wi{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:26px;flex-shrink:0}
.why-card .wi.i1{background:#dbeafe;color:var(--sslf-navy)}
.why-card .wi.i2{background:#dcfce7;color:var(--sslf-green)}
.why-card .wi.i3{background:#ffedd5;color:var(--sslf-orange)}
.why-card .wi.i4{background:#dbeafe;color:#2563eb}
.why-card .wi.i5{background:#ccfbf1;color:var(--sslf-teal)}
.why-card .wi.i6{background:#f3e8ff;color:var(--sslf-purple)}
.why-card .wn{color:var(--sslf-muted);font-weight:700;font-size:13px;margin-bottom:6px}
.why-card h5{color:var(--sslf-navy);font-weight:800;margin:0 0 8px;font-size:17px;font-family:"Inter",system-ui,sans-serif}
.why-card p{color:#4b5563;font-size:13.5px;margin:0}
/* Partners */
.partner-block{margin-bottom:34px}
.partner-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:1px dashed #d1d5db}
.partner-block-head h4{display:flex;align-items:center;gap:12px;color:var(--sslf-navy);font-weight:800;margin:0;font-size:19px;font-family:"Inter",system-ui,sans-serif}
.partner-block-head h4 .pbi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:16px}
.partner-block-head a{color:var(--sslf-navy);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.partner-block-head a:hover{color:var(--sslf-orange)}
.partner-card{background:#fff;border:1px solid #eef1f6;border-radius:12px;padding:16px;text-align:center;transition:all var(--transition);height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.partner-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--sslf-navy)}
.partner-card .plogo{height:60px;display:grid;place-items:center;padding:6px}
.partner-card .plogo img{max-height:56px;max-width:100%;object-fit:contain}
.partner-card h6{color:var(--sslf-navy);font-weight:700;margin:0;font-size:13px}
.partner-card .ptype{color:var(--sslf-muted);font-size:11px}
.partner-card .pstatus{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;margin-top:auto;align-self:center}
.pstatus.empanelled{background:#dcfce7;color:#166534}
.pstatus.under-process{background:#dcfce7;color:#166534}
.pstatus.applied{background:#fef3c7;color:#92400e}
.pstatus.academic{background:#dcfce7;color:#166534}
.pstatus.training{background:#e0e7ff;color:#3730a3}
.pstatus.csr{background:#dcfce7;color:#166534}
.pstatus.industry{background:#fce7f3;color:#9f1239}
.pstatus.placement{background:#fef3c7;color:#92400e}
/* News */
.news-featured{background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-dark));border-radius:20px;overflow:hidden;color:#fff;position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:340px;margin-bottom:36px}
.news-featured .nf-body{padding:36px}
.news-featured .nf-badge{display:inline-flex;align-items:center;gap:6px;background:var(--sslf-green);padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;margin-bottom:14px}
.news-featured h3{color:#fff;font-size:26px;font-weight:800;margin:0 0 12px;font-family:"Inter",system-ui,sans-serif}
.news-featured p{color:#c7d2fe;margin-bottom:22px;font-size:14px}
.news-featured .nf-img{position:relative;overflow:hidden}
.news-featured .nf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.news-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.news-tab{padding:10px 16px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:#374151;font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all var(--transition)}
.news-tab i{color:var(--sslf-orange)}
.news-tab.active,.news-tab:hover{background:var(--sslf-navy);color:#fff;border-color:var(--sslf-navy)}
.news-tab.active i,.news-tab:hover i{color:#fff}
.news-card{background:#fff;border:1px solid #eef1f6;border-radius:16px;overflow:hidden;transition:all var(--transition);height:100%;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.news-card .nc-img{height:160px;overflow:hidden}
.news-card .nc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news-card:hover .nc-img img{transform:scale(1.06)}
.news-card .nc-body{padding:18px;flex:1;display:flex;flex-direction:column}
.news-card .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;color:var(--sslf-navy)}
.news-card .tag.partnership{color:#2563eb}
.news-card .tag.academic{color:var(--sslf-green)}
.news-card .tag.upcoming{color:var(--sslf-orange)}
.news-card h6{color:var(--sslf-navy);font-weight:800;margin:0 0 8px;font-size:16px;font-family:"Inter",system-ui,sans-serif}
.news-card p{color:#4b5563;font-size:13px;margin:0 0 12px;flex:1}
.news-card .nc-foot{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid #f1f5f9}
.news-card .nc-foot .date{color:var(--sslf-muted);font-size:12px;display:flex;align-items:center;gap:6px}
.news-card .nc-foot a{color:var(--sslf-navy);font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.news-card .nc-foot a:hover{color:var(--sslf-orange)}
/* Impact strip / stats */
.stat-strip{background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light));color:#fff;padding:50px 0;position:relative;overflow:hidden}
.stat-strip::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,");opacity:.4}
.stat-strip .container{position:relative}
.stat-item{text-align:center}
.stat-item .num{font-size:42px;font-weight:800;color:var(--sslf-yellow);font-family:"Playfair Display",serif;line-height:1}
.stat-item .lbl{font-size:14px;color:#c7d2fe;margin-top:6px;font-weight:600}
/* Page banner */
.page-banner{background:linear-gradient(135deg,var(--sslf-navy) 0%,var(--sslf-navy-light) 100%);color:#fff;padding:70px 0 60px;position:relative;overflow:hidden}
.page-banner::before{content:"";position:absolute;right:-100px;top:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(249,115,22,.35),transparent);border-radius:50%}
.page-banner .container{position:relative}
.page-banner .eyebrow{color:var(--sslf-yellow);font-weight:700;letter-spacing:2px;font-size:12px;text-transform:uppercase;margin-bottom:10px;display:inline-block}
.page-banner h1{color:#fff;font-weight:800;font-size:42px;margin:0 0 12px}
.page-banner p{color:#dbeafe;max-width:720px;margin:0;font-size:16px}
.page-banner .breadcrumb{margin-top:14px;font-size:13px;color:#c7d2fe}
.page-banner .breadcrumb a{color:#fff}
/* Forms */
.sslf-form{background:#fff;padding:32px;border-radius:16px;box-shadow:var(--shadow-md);border:1px solid #eef1f6}
.sslf-form fieldset{border:1px solid #e5e7eb;border-radius:12px;padding:20px;margin-bottom:22px}
.sslf-form fieldset legend{padding:0 10px;font-weight:700;color:var(--sslf-navy);font-size:15px;display:inline-flex;align-items:center;gap:8px}
.sslf-form fieldset legend i{color:var(--sslf-orange)}
.sslf-form label{font-weight:600;color:#374151;font-size:13.5px;margin-bottom:6px;display:block}
.sslf-form .form-control,.sslf-form .form-select,.sslf-form textarea,.sslf-form input[type="text"],.sslf-form input[type="email"],.sslf-form input[type="tel"],.sslf-form input[type="number"],.sslf-form input[type="url"],.sslf-form input[type="date"],.sslf-form input[type="file"]{border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;width:100%;font-size:14px;font-family:inherit;transition:all var(--transition);background:#fff}
.sslf-form .form-control:focus,.sslf-form .form-select:focus,.sslf-form textarea:focus,.sslf-form input:focus{outline:none;border-color:var(--sslf-orange);box-shadow:0 0 0 4px rgba(249,115,22,.12)}
.sslf-form .form-group{margin-bottom:16px}
.sslf-form .req{color:#dc2626}
.sslf-form .col-md-6{grid-column:span 6}
.sslf-form .col-md-4{grid-column:span 4}
.sslf-form .col-md-3{grid-column:span 3}
.sslf-form .col-12{grid-column:span 12}
.sslf-form .checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sslf-form .checks label{display:flex;align-items:center;gap:8px;font-weight:500;padding:8px 10px;background:#F7F9FC;border-radius:8px;cursor:pointer;font-size:13px}
.sslf-form .checks label:hover{background:#eef2ff}
.sslf-form-msg{padding:14px 18px;border-radius:8px;margin-bottom:18px;display:none;font-weight:600}
.sslf-form-msg.success{background:#dcfce7;color:#166534;display:block;border-left:4px solid var(--sslf-green)}
.sslf-form-msg.error{background:#fee2e2;color:#991b1b;display:block;border-left:4px solid var(--sslf-red)}
/* Donate */
.donate-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:26px}
.donate-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-md);padding:30px;border:1px solid #eef1f6}
.donate-card h3{font-weight:800;margin:0 0 16px;font-family:"Inter",system-ui,sans-serif}
.amount-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.chip{padding:10px 20px;border:2px solid #e5e7eb;border-radius:10px;font-weight:700;color:var(--sslf-navy);background:#fff;cursor:pointer;transition:all var(--transition)}
.chip:hover,.chip.active{border-color:var(--sslf-orange);background:linear-gradient(135deg,var(--sslf-orange),#f9a95c);color:#fff;transform:translateY(-2px);box-shadow:0 6px 14px rgba(249,115,22,.35)}
.pay-tabs{display:flex;gap:0;background:#f1f5f9;padding:6px;border-radius:12px;margin:20px 0}
.pay-tab{flex:1;padding:12px;text-align:center;font-weight:700;color:#64748b;border-radius:8px;cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pay-tab.active{background:#fff;color:var(--sslf-navy);box-shadow:var(--shadow-sm)}
.pay-tab i{font-size:16px}
.qr-box{text-align:center;padding:20px;background:#F7F9FC;border-radius:12px}
.qr-box img{max-width:240px;margin:0 auto 12px;border:6px solid #fff;border-radius:12px;box-shadow:var(--shadow-md)}
.qr-box .upi-id{font-family:monospace;background:#fff;padding:8px 14px;border-radius:8px;font-weight:700;color:var(--sslf-navy);display:inline-block;border:1px dashed var(--sslf-orange)}
.trust-row{display:flex;gap:14px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:6px;color:var(--sslf-muted);font-size:12px;font-weight:600}
.trust-item i{color:var(--sslf-green)}
/* Footer & CTA */
.cta-band{background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light));color:#fff;padding:44px 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;left:-100px;bottom:-100px;width:340px;height:340px;background:radial-gradient(circle,rgba(249,115,22,.25),transparent);border-radius:50%}
.cta-band .cta-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;position:relative}
.cta-band h4{margin:0 0 6px;font-weight:800;font-size:26px;color:#fff}
.cta-band p{margin:0;color:#c7d2fe}
.sslf-footer{background:#0f1e4d;color:#e5e7eb;padding:60px 0 0;position:relative;overflow:hidden}
.sslf-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sslf-navy),var(--sslf-orange),var(--sslf-green))}
.sslf-footer h6{color:#fff;font-weight:700;margin-bottom:16px;font-size:15px;text-transform:uppercase;letter-spacing:1px;position:relative;padding-bottom:8px}
.sslf-footer h6::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--sslf-orange)}
.sslf-footer a{color:#c7d2fe;display:block;margin-bottom:8px;font-size:13.5px;transition:all var(--transition)}
.sslf-footer a:hover{color:var(--sslf-orange);padding-left:6px}
.sslf-footer .row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 2fr;gap:30px}
.sslf-footer .social{display:flex;gap:10px;margin:14px 0}
.sslf-footer .social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;margin:0;color:#fff;transition:all var(--transition)}
.sslf-footer .social a:hover{background:var(--sslf-orange);transform:translateY(-3px);padding-left:0}
.sslf-footer .foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding:20px 0;font-size:13px;color:#9ca3af;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.newsletter input{width:100%;padding:11px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;margin-bottom:10px;font-size:13px}
.newsletter input::placeholder{color:#9ca3af}
/* ----- Responsive Fixes ----- */
/* Utility */
.bg-soft{background:var(--sslf-bg-soft)}
.text-muted{color:var(--sslf-muted)}
.row-grid{display:grid;gap:20px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pill-orange{background:rgba(249,115,22,.12);color:var(--sslf-orange)}
.pill-green{background:rgba(22,163,74,.12);color:var(--sslf-green)}
.pill-navy{background:rgba(30,58,138,.1);color:var(--sslf-navy)}
/* animation on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:all .6s ease}
.reveal.in{opacity:1;transform:none}
.foot-bottom div{
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
}
/* ================= SSLF v9 — Brand refresh & new home sections ================= */
:root{
--sslf-grey:#F7F9FC;
}
h1,h2,h3,h4,h5,h6{font-family:"Poppins","Inter",sans-serif;font-weight:700}
.btn{font-family:"Poppins","Inter",sans-serif;font-weight:600}
.bg-grey{background:var(--sslf-grey)}
/* Core values */
.value-card{background:#fff;border:1px solid var(--sslf-border);border-radius:16px;padding:28px 24px;box-shadow:var(--shadow-sm);transition:all var(--transition);height:100%}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--sslf-orange)}
.value-card .vi{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin-bottom:16px;background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light))}
.value-card:nth-child(2) .vi{background:linear-gradient(135deg,var(--sslf-orange),#f9a95c)}
.value-card:nth-child(3) .vi{background:linear-gradient(135deg,var(--sslf-green),#43a047)}
.value-card:nth-child(4) .vi{background:linear-gradient(135deg,#0d9488,#22a6a0)}
.value-card h5{font-size:17px;margin:0 0 8px}
.value-card p{color:var(--sslf-muted);font-size:14px;margin:0}
/* Compliance cards */
.comp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.comp-card{background:#fff;border:1px solid var(--sslf-border);border-radius:14px;padding:22px 18px;text-align:center;transition:all var(--transition)}
.comp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--sslf-green)}
.comp-card i{font-size:24px;color:var(--sslf-green);margin-bottom:10px;display:block}
.comp-card b{display:block;font-family:"Poppins",sans-serif;color:var(--sslf-navy);font-size:15px}
.comp-card small{color:var(--sslf-muted)}
/* Why partner list */
.why-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--sslf-border);border-radius:12px;padding:18px;transition:all var(--transition)}
.why-item:hover{border-color:var(--sslf-orange);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.why-item i{color:var(--sslf-orange);font-size:18px;margin-top:2px}
.why-item span{font-weight:600;color:var(--sslf-navy);font-family:"Poppins",sans-serif;font-size:14px}
/* Leadership quote cards */
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lead-quote{background:#fff;border-radius:18px;padding:30px;box-shadow:var(--shadow-md);position:relative;border-bottom:5px solid var(--sslf-orange)}
.lead-quote .qmark{font-size:34px;color:rgba(15,61,117,.12);position:absolute;top:16px;right:20px}
.lead-quote p{color:var(--sslf-text);font-size:14.5px;line-height:1.85;font-style:italic}
.lead-quote h6{font-family:"Poppins",sans-serif;color:var(--sslf-navy);margin:16px 0 2px;font-size:16px}
.lead-quote small{color:var(--sslf-orange);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
/* Coming soon panel */
.coming-panel{background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light));color:#fff;border-radius:20px;padding:48px 38px;text-align:center}
.coming-panel p{color:#dbeafe;max-width:820px;margin:0 auto 16px}
.coming-badge{display:inline-block;background:var(--sslf-orange);color:#fff;font-weight:700;padding:6px 16px;border-radius:20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
/* Newsletter */
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input{flex:1;min-width:180px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff}
.nl-form input::placeholder{color:#c7d2fe}
/* blog deatil page css start */
/* =========================================
SSLF BLOG / PROGRAM DETAIL - GLOBAL
========================================= */
.entry-content {
max-width: 1000px;
margin: 0 auto;
color: var(--sslf-text);
font-size: 16px;
line-height: 1.8;
}
/* Headings
----------------------------------------- */
.entry-content h1 {
margin: 0 0 20px;
color: var(--sslf-navy);
font-size: 38px;
line-height: 1.2;
font-weight: 800;
}
.entry-content h2 {
position: relative;
margin: 45px 0 18px;
padding-left: 15px;
color: var(--sslf-navy);
font-size: 27px;
line-height: 1.3;
font-weight: 700;
}
.entry-content h2::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 4px;
height: calc(100% - 8px);
background: var(--sslf-orange);
border-radius: 10px;
}
.entry-content h3 {
margin: 30px 0 12px;
color: var(--sslf-navy-dark);
font-size: 21px;
line-height: 1.4;
font-weight: 700;
}
/* Paragraph
----------------------------------------- */
.entry-content p {
margin: 0 0 18px;
color: var(--sslf-text);
font-size: 16px;
line-height: 1.85;
}
.entry-content p:last-child {
margin-bottom: 0;
}
/* Strong
----------------------------------------- */
.entry-content strong {
color: var(--sslf-navy-dark);
font-weight: 700;
}
/* Lists
----------------------------------------- */
.entry-content ul,
.entry-content ol {
margin: 20px 0 30px;
padding-left: 0;
list-style: none;
}
.entry-content ul li,
.entry-content ol li {
position: relative;
margin-bottom: 10px;
padding: 14px 18px 14px 45px;
background: #fff;
border: 1px solid var(--sslf-border);
border-radius: 10px;
color: var(--sslf-text);
font-size: 15px;
line-height: 1.6;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.entry-content ul li::before {
content: "✓";
position: absolute;
left: 15px;
top: 50%;
width: 21px;
height: 21px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
background: rgba(46,125,50,.10);
color: var(--sslf-green);
border-radius: 50%;
font-size: 12px;
font-weight: 800;
}
.entry-content ul li:hover {
transform: translateY(-2px);
border-color: rgba(15,61,117,.18);
box-shadow: var(--shadow-md);
}
/* Ordered List */
.entry-content ol {
list-style: decimal;
padding-left: 25px;
}
.entry-content ol li {
padding-left: 15px;
}
.entry-content ol li::before {
display: none;
}
/* Links
----------------------------------------- */
.entry-content a {
color: var(--sslf-navy);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(15,61,117,.3);
text-underline-offset: 3px;
transition: var(--transition);
}
.entry-content a:hover {
color: var(--sslf-orange);
text-decoration-color: var(--sslf-orange);
}
/* Blockquote
----------------------------------------- */
.entry-content blockquote {
margin: 30px 0;
padding: 25px 30px;
background: var(--sslf-bg-soft);
border-left: 5px solid var(--sslf-orange);
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--sslf-navy-dark);
font-size: 18px;
font-weight: 500;
}
/* Images
----------------------------------------- */
.entry-content img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
}
/* Tables
----------------------------------------- */
.entry-content table {
width: 100%;
margin: 30px 0;
border-collapse: collapse;
overflow: hidden;
border: 1px solid var(--sslf-border);
border-radius: var(--radius);
}
.entry-content th {
padding: 14px 16px;
background: var(--sslf-navy);
color: #fff;
text-align: left;
font-weight: 700;
}
.entry-content td {
padding: 13px 16px;
border-bottom: 1px solid var(--sslf-border);
}
/* Horizontal Line
----------------------------------------- */
.entry-content hr {
margin: 40px 0;
border: 0;
border-top: 1px solid var(--sslf-border);
}
/* =========================================
FIRST PARAGRAPH / TAGLINE
========================================= */
.entry-content > p:first-child {
margin-bottom: 35px;
padding: 28px 32px;
background: linear-gradient(
135deg,
var(--sslf-navy),
var(--sslf-navy-light)
);
border-radius: var(--radius);
color: #fff;
font-size: 23px;
line-height: 1.5;
font-weight: 700;
box-shadow: var(--shadow-md);
}
.entry-content > p:first-child strong {
color: #fff;
}
/* =========================================
SDG SECTION
Normal Editor Content:
SDG Alignment
========================================= */
.entry-content p:has(+ ul) {
margin-bottom: 15px;
}
/* SDG heading - detected by text */
.entry-content p:has(+ ul) strong {
color: var(--sslf-navy);
}
/* Last paragraph = closing message */
.entry-content > p:last-child {
margin-top: 45px;
padding: 30px 35px;
background: var(--sslf-navy);
border-radius: var(--radius);
color: #fff;
font-size: 18px;
line-height: 1.7;
text-align: center;
font-weight: 600;
}
.entry-content > p:last-child strong {
color: #fff;
}
/* =========================================
RESPONSIVE
========================================= */
.program-sidebar{
position: sticky;
top: 0px;
}
/* blog deatil spage css end */
/*
Theme Name: Shyamsharanam
Author: Shyamsharanam
Description: Responsive WordPress theme with reusable components and centralized form submissions.
Version: 2.0.0
Text Domain: shyamsharanam
*/
:root{--ss-primary:#0f2747;--ss-secondary:#1f6f4a;--ss-accent:#d69e2e;--ss-text:#172033;--ss-muted:#64748b;--ss-border:#e5e7eb;--ss-radius:14px;--ss-shadow:0 10px 30px rgba(15,39,71,.08)}
body{margin:0;color:var(--ss-text);line-height:1.6}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
.ss-section{padding:clamp(48px,7vw,96px) 0}
.ss-container{width:min(1180px,calc(100% - 32px));margin-inline:auto}
.ss-section-title{max-width:760px;margin:0 auto 40px;text-align:center}
.ss-eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ss-secondary);margin-bottom:8px}
.ss-card{height:100%;background:#fff;border:1px solid var(--ss-border);border-radius:var(--ss-radius);box-shadow:var(--ss-shadow);overflow:hidden}
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:8px;border:1px solid transparent;background:var(--ss-primary);color:#fff;font-weight:600;cursor:pointer;transition:.2s}
.ss-btn:hover{transform:translateY(-1px);opacity:.94}
.ss-form{background:#fff;border:1px solid var(--ss-border);border-radius:var(--ss-radius);padding:clamp(20px,4vw,36px);box-shadow:var(--ss-shadow)}
.ss-form label{display:block;font-weight:600;margin-bottom:6px}
.ss-form input,.ss-form select,.ss-form textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;padding:11px 13px;background:#fff;color:var(--ss-text)}
.ss-form textarea{min-height:130px;resize:vertical}
.ss-form .form-group{margin-bottom:18px}
.ss-grid{display:grid;gap:24px}
.ss-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ss-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ss-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ===== Extracted from final-impact-page.php ===== */
/* =========================================================
GLOBAL SITE CSS (as supplied — unchanged)
========================================================= */
.impact-hero{
background-image: url(https://shyamsharanam.org/wp-content/uploads/2026/08/Final-Impact-page-banner.webp);
background-size: cover;
background-position: center;
}
/* =========================================================
PAGE-SPECIFIC CSS — Impact page (no header/footer)
========================================================= */
/* ---------- PAGE HERO ---------- */
.impact-hero{position:relative;overflow:hidden;padding:56px 0 90px}
.impact-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center}
.impact-hero h1{font-size:44px;font-weight:800;color:var(--sslf-text);margin-bottom:6px}
.impact-hero h1 .accent{color:var(--sslf-green);display:block}
.impact-hero .rule{width:70px;height:3px;background:var(--sslf-orange);border:none;margin:20px 0}
.impact-hero p.lead{color:var(--sslf-muted);font-size:15.5px;max-width:460px}
.impact-hero-media{position:relative;border-radius:28px 28px 28px 90px;overflow:hidden;box-shadow:var(--shadow-lg);height:360px;background-image:url("https://shyamsharanam.org/wp-content/uploads/2026/08/Final-Impact-page-banner.webp");background-size:cover;background-position:center}
.impact-hero-badge{position:absolute;right:22px;bottom:22px;background:var(--sslf-navy-dark);color:#fff;border-radius:14px;padding:16px 20px;max-width:230px;box-shadow:var(--shadow-md);display:flex;gap:12px;align-items:flex-start}
.impact-hero-badge i{color:var(--sslf-orange);font-size:20px;margin-top:2px}
.impact-hero-badge p{margin:0;font-size:13px;line-height:1.5;color:#eef2f7}
/* ---------- IMPACT AREAS ---------- */
.bg-soft{background:var(--sslf-bg)}
.areas-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.area-card{background:#fff;border:1px solid var(--sslf-border);border-radius:var(--radius);padding:26px 18px;text-align:center;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}
.area-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.area-icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px}
.area-icon.green{background:rgba(46,125,50,.1);color:var(--sslf-green)}
.area-icon.orange{background:rgba(245,130,32,.1);color:var(--sslf-orange)}
.area-card h3{font-size:16px;margin-bottom:8px}
.area-card p{font-size:13px;color:var(--sslf-muted);margin:0}
/* ---------- HOW WE CREATE IMPACT (timeline) ---------- */
.timeline-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;position:relative}
.timeline-step{text-align:center;position:relative;padding:0 6px}
.timeline-step .step-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:24px;position:relative;z-index:2}
.timeline-step .step-icon.green{background:rgba(46,125,50,.1);color:var(--sslf-green)}
.timeline-step .step-icon.orange{background:rgba(245,130,32,.1);color:var(--sslf-orange)}
.timeline-step h4{font-size:14.5px;color:var(--sslf-navy);margin-bottom:6px;font-weight:700}
.timeline-step p{font-size:12.5px;color:var(--sslf-muted);margin:0}
.timeline-row::before{content:"";position:absolute;top:32px;left:9%;right:9%;height:2px;background:repeating-linear-gradient(90deg,var(--sslf-border) 0 8px,transparent 8px 14px);z-index:1}
/* ---------- COMMITMENT ROW ---------- */
.commit-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.commit-card{text-align:center;padding:8px}
.commit-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:19px}
.commit-icon.green{background:rgba(46,125,50,.1);color:var(--sslf-green)}
.commit-icon.orange{background:rgba(245,130,32,.1);color:var(--sslf-orange)}
.commit-card h4{font-size:14.5px;color:var(--sslf-navy);margin-bottom:8px;font-weight:700}
.commit-card p{font-size:12.5px;color:var(--sslf-muted);margin:0}
/* ---------- GROWING OUR IMPACT BANNER ---------- */
.growing-banner{background:linear-gradient(90deg,#eef3ee,#f7f9fc);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:320px 1fr;align-items:stretch;position:relative;border:1px solid var(--sslf-border)}
.growing-banner img{height:100%;width:100%;object-fit:cover;min-height:190px}
.growing-banner-text{padding:38px 44px;position:relative;z-index:2}
.growing-banner-text h3{font-size:26px;margin-bottom:12px}
.growing-banner-text p{color:var(--sslf-muted);font-size:15px;max-width:560px;margin:0}
.growing-banner-leaf{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:120px;color:rgba(46,125,50,.08);z-index:1}
/* ---------- IMPACT REPORTS ---------- */
.reports-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.report-card{background:#fff;border:1px solid var(--sslf-border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform var(--transition),box-shadow var(--transition)}
.report-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.report-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:19px}
.report-icon.green{background:rgba(46,125,50,.1);color:var(--sslf-green)}
.report-icon.orange{background:rgba(245,130,32,.1);color:var(--sslf-orange)}
.report-card h4{font-size:15.5px;margin-bottom:10px;min-height:42px}
.report-meta{font-size:12px;color:var(--sslf-muted);margin-bottom:12px}
.report-meta strong{color:var(--sslf-text)}
.report-card p.desc{font-size:13px;color:var(--sslf-muted);flex-grow:1;margin-bottom:18px}
.report-actions{display:flex;flex-direction:column;gap:10px}
.report-actions .btn{width:100%;justify-content:space-between;font-size:12.5px;padding:10px 16px}
.report-note{text-align:center;font-size:13px;color:var(--sslf-muted);margin-top:26px}
.report-note i{color:var(--sslf-green);margin-right:6px}
/* ---------- CTA BAR ---------- */
.cta-bar{background:linear-gradient(120deg,var(--sslf-navy-dark),var(--sslf-green-dark));border-radius:var(--radius);padding:34px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;color:#fff}
.cta-bar-left{display:flex;align-items:center;gap:18px}
.cta-bar-icon{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--sslf-green);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.cta-bar h3{color:#fff;font-size:21px;margin-bottom:6px}
.cta-bar p{color:#dfe8f5;font-size:13.5px;margin:0;max-width:420px}
.cta-bar-actions{display:flex;gap:14px;flex-wrap:wrap}
/* ===== Extracted from front-page.php ===== */
:root{
--sslf-navy:#0F3D75; --sslf-green:#2E7D32; --sslf-orange:#F58220;
--sslf-muted:#5b6472; --sslf-grey:#f6f8fb; --sslf-border:#e6eaf1;
}
/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;background:#fff}
.hero-swiper{overflow:hidden}
.hero-slide-bg{position:relative;width:100%; height:600px;display:flex;align-items:center;background-size:cover;background-position:center right}
.hero-slide-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 32%,rgba(255,255,255,.88) 46%,rgba(255,255,255,.18) 64%,rgba(255,255,255,0) 80%)}
.hero .container{position:relative;z-index:2}
.hero-content{max-width:620px;padding:64px 0}
.hero-badge{display:inline-block;background:#e8f1e9;color:#2E7D32;font-weight:700;font-size:12px;letter-spacing:.5px;padding:6px 14px;border-radius:20px;margin-bottom:16px;font-family:"Poppins",sans-serif}
.hero h1{font-size:40px;line-height:1.2;font-weight:800;color:#0F3D75;margin:0 0 16px}
.hero h1 .hl{color:#2E7D32}
.hero p.hero-desc{color:#4a5568;font-size:15.5px;line-height:1.75;margin-bottom:24px;max-width:540px}
.hero-stats{display:flex;gap:30px;margin-bottom:26px;flex-wrap:wrap}
.hero-stats .stat{display:flex;align-items:center;gap:10px}
.hero-stats .icon{width:40px;height:40px;border-radius:10px;background:#eef3fb;display:flex;align-items:center;justify-content:center;color:#0F3D75}
.hero-stats .num{font-weight:800;font-size:17px;color:#0F3D75;font-family:"Poppins",sans-serif}
.hero-stats .lbl{font-size:12px;color:#6b7280}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-swiper .swiper-button-next,.hero-swiper .swiper-button-prev{width:42px;height:42px;background:#fff;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.15);color:#0F3D75;top:50%;margin-top:-21px;z-index:5}
.hero-swiper .swiper-button-next:after,.hero-swiper .swiper-button-prev:after{font-size:14px;font-weight:800}
.hero-swiper .swiper-pagination{bottom:16px}
.hero-swiper .swiper-pagination-bullet{width:9px;height:9px;background:#c7d2e0;opacity:1}
.hero-swiper .swiper-pagination-bullet-active{background:#F58220;width:24px;border-radius:5px}
/* ===== ABOUT + CORE VALUES (combined, side by side) ===== */
.about-combo{display:flex;gap:56px;align-items:flex-start}
.about-text{flex:0 0 30%}
.about-text h2{font-size:28px;font-weight:800;color:var(--sslf-navy);margin:0 0 16px}
.about-text p{color:var(--sslf-muted);font-size:15.5px;line-height:1.85;margin-bottom:16px}
.value-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
flex: 0 0 70%;
}
.value-card {
background: #fff;
border: 1px solid var(--sslf-border);
border-radius: 14px;
padding: 26px 22px;
justify-content: center;
margin: auto;
text-align: center;
}
.value-card .vi {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 14px;
margin-left: auto;
margin-right: auto;
}
.vm-card i{
font-size: 75px;
}
.value-card:nth-child(1) .vi{background:#e9edfb;color:#3b4fd6}
.value-card:nth-child(2) .vi{background:#fdece1;color:var(--sslf-orange)}
.value-card:nth-child(3) .vi{background:#e9f6ea;color:var(--sslf-green)}
.value-card:nth-child(4) .vi{background:#f2ecfb;color:#7a4fd6}
.value-card h5{font-size:15.5px;font-weight:700;color:var(--sslf-navy);margin:0 0 8px}
.value-card p{font-size:13.5px;color:var(--sslf-muted);line-height:1.6;margin:0}
/* ===== VISION / LOGO / MISSION ===== */
.vlm{display:flex;align-items:stretch;gap:0;background:var(--sslf-grey);border-radius:16px;overflow:hidden}
.vm-card {
flex: 1;
padding: 40px 34px;
display: flex;
gap: 50px;
}
.vm-card h4{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--sslf-navy);margin:0 0 14px}
.vm-card p{color:var(--sslf-muted);font-size:14.5px;line-height:1.8;margin:0}
.vm-logo{flex:0 0 220px;display:flex;align-items:center;justify-content:center;}
.vm-logo img{max-width:210px;margin-bottom:10px}
.vm-logo span{display:block;color:#fff;font-weight:800;letter-spacing:1px}
/* ===== FOCUS AREAS (image-backed tiles) ===== */
.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.focus-tile{display:block;background:#fff;border:1px solid var(--sslf-border);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.focus-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,61,117,.12)}
.focus-tile .ficon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--sslf-grey);
color: var(--sslf-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
margin: 22px 22px 14px;
margin-left: auto;
margin-right: auto;
}
/* ===== WHY PARTNER (single row strip) ===== */
.why-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--sslf-grey);border-radius:16px;padding:26px 30px;flex-wrap:wrap}
.why-strip .why-item{display:flex;align-items:center;gap:12px;flex:1 1 160px}
.why-strip .why-item i{width:38px;height:38px;border-radius:10px;background:#fff;color:var(--sslf-navy);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.why-strip .why-item span{font-size:13.5px;font-weight:700;color:var(--sslf-navy);line-height:1.35}
/* ===== REGISTRATION & COMPLIANCE ===== */
.comp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.comp-card{background:#fff;border:1px solid var(--sslf-border);border-radius:14px;padding:24px 14px;text-align:center}
.comp-card i{font-size:22px;color:var(--sslf-navy);margin-bottom:12px;display:block}
.comp-card b{display:block;font-size:13.5px;color:var(--sslf-navy);margin-bottom:10px;min-height:34px}
.comp-card .badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px}
.comp-card .badge.ok{background:#e6f4e8;color:var(--sslf-green)}
.comp-card .badge.pending{background:#fdece1;color:var(--sslf-orange)}
/* ===== COMING SOON PANEL ===== */
.coming-panel{background:var(--sslf-grey);border-radius:16px;padding:54px 30px;text-align:center}
.coming-panel .cp-icon{font-size:44px;color:var(--sslf-navy);margin-bottom:18px}
.coming-panel .coming-badge{display:inline-block;background:#fdece1;color:var(--sslf-orange);font-weight:700;font-size:12px;padding:6px 16px;border-radius:20px;margin-bottom:14px}
/* ===== LEADERSHIP (photo cards) ===== */
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lead-card{display:flex;gap:16px;background:#fff;border:1px solid var(--sslf-border);border-radius:14px;padding:22px}
.lead-card .photo{flex:0 0 78px;height:78px;border-radius:12px;overflow:hidden}
.lead-card .photo img{width:100%;height:100%;object-fit:cover;display:block}
.lead-card .body h6{font-size:14.5px;font-weight:800;color:var(--sslf-navy);margin:0 0 8px}
.lead-card .body p{font-size:13px;color:var(--sslf-muted);line-height:1.65;margin:0 0 8px}
.lead-card .body small{color:var(--sslf-navy);font-weight:700}
/* ===== NEWS ===== */
.news-card{display:block;background:#fff;border:1px solid var(--sslf-border);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.news-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,61,117,.12)}
.news-card .nc-visual{position:relative}
.news-card .nc-visual img{width:100%;height:150px;object-fit:cover;display:block}
.news-card .nc-tag{position:absolute;top:12px;left:12px;background:var(--sslf-orange);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:20px;text-transform:uppercase}
.news-card .body{padding:18px}
.news-card h6{font-size:14.5px;font-weight:800;color:var(--sslf-navy);margin:10px 0 8px}
.news-card p{font-size:13px;color:var(--sslf-muted);line-height:1.6;margin:0}
.news-card .date{font-size:12px;color:var(--sslf-muted)}
.news-card .date i{margin-right:5px}
/* ===== Extracted from header.php ===== */
.menu-item .fa-solid{
display: none;
}
/* ===== Extracted from our presence.php ===== */
/* =========================================================
SSLF — Our Presence section
Uses the brand token system already defined site-wide.
Fallbacks included here so this section is safe to preview standalone.
========================================================= */
.sslf-presence *{box-sizing:border-box;}
.sslf-presence{
background:var(--sslf-bg);
color:var(--sslf-text);
padding:72px 24px 56px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.sslf-presence .sslf-wrap{
max-width:1280px;
margin:0 auto;
}
/* ---------- Top grid: copy | map ---------- */
.sslf-presence .sslf-top{
display:grid;
grid-template-columns:minmax(320px,420px) 1fr;
gap:40px;
align-items:start;
}
.sslf-eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
color:var(--sslf-orange);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
font-size:.8rem;
margin-bottom:14px;
}
.sslf-eyebrow::after{
content:"";
width:36px;
height:2px;
background:var(--sslf-orange);
display:inline-block;
}
.sslf-presence h1{
font-size:clamp(1.9rem,3.2vw,2.6rem);
line-height:1.18;
font-weight:800;
margin:0 0 18px;
letter-spacing:-.01em;
}
.sslf-presence h1 .line-navy{color:var(--sslf-navy);}
.sslf-presence h1 .line-green{color:var(--sslf-green);}
.sslf-presence h1 .line-orange{color:var(--sslf-orange);}
.sslf-presence .sslf-lede{
color:var(--sslf-muted);
font-size:1rem;
line-height:1.7;
max-width:44ch;
margin:0 0 28px;
}
/* current presence card */
.sslf-current-card{
background:#fff;
border:1px solid var(--sslf-border);
border-radius:var(--radius);
box-shadow:var(--shadow-md);
overflow:hidden;
margin-bottom:24px;
}
.sslf-current-card .tag{
font-size:.72rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--sslf-navy);
padding:14px 18px 0;
display:block;
}
.sslf-current-card .body{
display:grid;
grid-template-columns:1fr 128px;
gap:16px;
padding:12px 18px 18px;
align-items:start;
}
.sslf-current-card .loc-icon{
width:38px;height:38px;border-radius:50%;
background:var(--sslf-navy);
color:#fff;
display:flex;align-items:center;justify-content:center;
margin-bottom:10px;
flex-shrink:0;
}
.sslf-current-card .loc-icon svg{width:18px;height:18px;}
.sslf-current-card .place{
font-weight:800;
font-size:1.05rem;
color:var(--sslf-navy-dark);
line-height:1.3;
margin:0 0 8px;
}
.sslf-current-card .place small{display:block;font-weight:600;color:var(--sslf-muted);font-size:.85rem;}
.sslf-current-card p{
font-size:.85rem;
color:var(--sslf-muted);
line-height:1.55;
margin:0;
}
.sslf-current-card .thumb{
width:100%;
height:112px;
object-fit:cover;
border-radius:10px;
display:block;
}
.sslf-cta-row{display:flex;flex-wrap:wrap;gap:12px;}
.sslf-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:13px 20px;
border-radius:9px;
font-weight:700;
font-size:.88rem;
text-decoration:none;
cursor:pointer;
border:1px solid transparent;
transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.sslf-btn:hover{transform:translateY(-2px);}
.sslf-btn-primary{background:var(--sslf-navy);color:#fff;box-shadow:var(--shadow-sm);}
.sslf-btn-primary:hover{background:var(--sslf-navy-dark);box-shadow:var(--shadow-md);}
.sslf-btn-ghost{background:#fff;color:var(--sslf-text);border-color:var(--sslf-border);}
.sslf-btn-ghost:hover{border-color:var(--sslf-navy);box-shadow:var(--shadow-sm);}
.sslf-btn-ghost[aria-disabled="true"]{opacity:.7;cursor:default;}
/* ---------- Map column ---------- */
.sslf-map-col{position:relative;}
.sslf-map-frame{
position:relative;
border-radius:18px;
overflow:hidden;
background:linear-gradient(160deg,#eaf1fb 0%,#f7f9fc 55%,#fdf3e8 100%);
border:1px solid var(--sslf-border);
box-shadow:var(--shadow-lg);
padding:18px;
}
.sslf-map-svg-wrap{position:relative;width:100%;}
.sslf-map-svg-wrap svg{width:100%;height:auto;display:block;}
.sslf-state{
fill:#d7dce3;
stroke:#fff;
stroke-width:1;
transition:fill .2s ease,filter .2s ease;
cursor:pointer;
outline:none;
}
.sslf-state:hover,
.sslf-state:focus-visible{
filter:brightness(1.06);
}
.sslf-state.is-current{fill:var(--sslf-navy);}
.sslf-state.is-current:hover{fill:var(--sslf-navy-light);}
.sslf-state.is-future{fill:var(--sslf-orange);}
.sslf-state.is-future:hover{fill:var(--sslf-orange-dark);}
/* Prayagraj pin */
.sslf-pin{
position:absolute;
transform:translate(-50%,-100%);
display:flex;
flex-direction:column;
align-items:center;
pointer-events:none;
z-index:5;
}
.sslf-pin .pin-badge{
pointer-events:auto;
cursor:pointer;
background:var(--sslf-navy);
color:#fff;
font-size:.72rem;
font-weight:700;
padding:6px 10px;
border-radius:7px;
white-space:nowrap;
box-shadow:var(--shadow-md);
margin-bottom:6px;
line-height:1.25;
}
.sslf-pin .pin-badge small{display:block;font-weight:500;opacity:.85;font-size:.65rem;}
.sslf-pin .pin-badge::after{
content:"";
position:absolute;
left:50%;bottom:-5px;
transform:translateX(-50%);
border:5px solid transparent;
border-top-color:var(--sslf-navy);
}
.sslf-pin .pin-dot{
width:16px;height:16px;
border-radius:50%;
background:var(--sslf-navy);
border:3px solid #fff;
box-shadow:0 0 0 4px rgba(15,61,117,.25);
position:relative;
}
.sslf-pin .pin-dot::before{
content:"";
position:absolute;
inset:-9px;
border-radius:50%;
border:2px solid var(--sslf-navy);
opacity:.55;
animation:sslf-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes sslf-ping{
0%{transform:scale(.6);opacity:.6;}
75%,100%{transform:scale(2.1);opacity:0;}
}
/* hover tooltip that follows a hovered state */
.sslf-tooltip{
position:absolute;
pointer-events:none;
background:#111827;
color:#fff;
font-size:.78rem;
font-weight:600;
padding:6px 10px;
border-radius:6px;
white-space:nowrap;
transform:translate(-50%,-130%);
opacity:0;
transition:opacity .12s ease;
z-index:6;
}
.sslf-tooltip.is-visible{opacity:1;}
.sslf-tooltip .tt-tag{
display:inline-block;
margin-left:6px;
padding:1px 6px;
border-radius:4px;
font-size:.65rem;
font-weight:700;
text-transform:uppercase;
}
.sslf-tooltip .tt-tag.current{background:var(--sslf-navy-light);}
.sslf-tooltip .tt-tag.future{background:var(--sslf-orange);}
/* growing-presence info card (top-right) */
.sslf-growing{
position:absolute;
top:16px;right:16px;
max-width:250px;
background:rgba(255,255,255,.94);
backdrop-filter:blur(4px);
border:1px solid var(--sslf-border);
border-radius:12px;
padding:14px 16px;
box-shadow:var(--shadow-sm);
}
.sslf-growing h4{
margin:0 0 6px;
font-size:.82rem;
font-weight:800;
color:var(--sslf-green-dark);
text-transform:uppercase;
letter-spacing:.03em;
}
.sslf-growing .growing-body{display:flex;gap:10px;align-items:flex-start;}
.sslf-growing .growing-icon{
width:30px;height:30px;flex-shrink:0;
border-radius:50%;
border:2px solid var(--sslf-orange);
color:var(--sslf-orange);
display:flex;align-items:center;justify-content:center;
}
.sslf-growing .growing-icon svg{width:15px;height:15px;}
.sslf-growing p{margin:0;font-size:.76rem;line-height:1.5;color:var(--sslf-muted);}
/* future expansion legend (bottom-right) */
.sslf-legend{
position:absolute;
bottom:16px;right:16px;
max-width:240px;
background:#fff;
border:1px solid var(--sslf-border);
border-radius:12px;
padding:14px 16px;
box-shadow:var(--shadow-md);
}
.sslf-legend .legend-title{
display:flex;align-items:center;gap:8px;
font-size:.76rem;font-weight:800;
color:var(--sslf-orange-dark);
text-transform:uppercase;letter-spacing:.03em;
margin-bottom:8px;
}
.sslf-legend .legend-title .swatch{
width:12px;height:12px;border-radius:3px;
background:var(--sslf-orange);
flex-shrink:0;
}
.sslf-legend p{margin:0;font-size:.8rem;line-height:1.55;color:var(--sslf-text);}
/* ---------- Bottom 4-up commitment cards ---------- */
.sslf-cards{
margin-top:44px;
background:#fff;
border:1px solid var(--sslf-border);
border-radius:16px;
box-shadow:var(--shadow-md);
padding:32px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
.sslf-card .icon-circle{
width:44px;height:44px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;
margin-bottom:14px;
}
.sslf-card .icon-circle svg{width:20px;height:20px;}
.sslf-card h3{
font-size:.98rem;font-weight:800;margin:0 0 8px;color:var(--sslf-text);
}
.sslf-card p{
font-size:.85rem;line-height:1.6;color:var(--sslf-muted);margin:0 0 12px;
}
.sslf-card .rule{width:34px;height:3px;border-radius:2px;}
.c1 .icon-circle{background:var(--sslf-navy);}
.c1 .rule{background:var(--sslf-navy);}
.c2 .icon-circle{background:var(--sslf-green);}
.c2 .rule{background:var(--sslf-green);}
.c3 .icon-circle{background:var(--sslf-orange);}
.c3 .rule{background:var(--sslf-orange);}
.c4 .icon-circle{background:var(--sslf-teal);}
.c4 .rule{background:var(--sslf-teal);}
/* ---------- Responsive ---------- */
/* ===== Extracted from our-leadership.php ===== */
:root{
--sslf-navy:#0F3D75;--sslf-navy-dark:#092a55;--sslf-navy-light:#1b5aa8;
--sslf-orange:#F58220;--sslf-orange-dark:#d96f14;
--sslf-green:#2E7D32;--sslf-green-dark:#1f5c22;
--sslf-yellow:#facc15;--sslf-red:#dc2626;--sslf-purple:#7c3aed;--sslf-pink:#ec4899;--sslf-teal:#0d9488;
--sslf-bg:#F7F9FC;--sslf-bg-soft:#F7F9FC;--sslf-text:#1f2937;--sslf-muted:#6b7280;--sslf-border:#e5e7eb;
--shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
--shadow-md:0 8px 20px rgba(15,23,42,.08);
--shadow-lg:0 24px 50px -18px rgba(15,23,42,.25);
--radius:12px;--transition:.28s cubic-bezier(.4,0,.2,1);
}
.sslf-lead *{box-sizing:border-box}
.sslf-lead{font-family:"Inter",system-ui,sans-serif;color:var(--sslf-text);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.sslf-lead a{text-decoration:none;color:inherit;transition:color var(--transition)}
.sslf-lead img{max-width:100%;height:auto;display:block}
.sslf-lead .container{max-width:1240px;margin:0 auto;padding:0 20px;width:100%}
.sslf-lead .section{padding:70px 0}
.sslf-lead h1,.sslf-lead h2,.sslf-lead h3,.sslf-lead h4,.sslf-lead h5,.sslf-lead h6{font-family:"Poppins","Inter",sans-serif;color:var(--sslf-navy);margin:0 0 12px;line-height:1.2}
.sslf-lead .section-title{font-weight:800;color:var(--sslf-navy);margin:6px 0 10px;font-size:38px}
.sslf-lead .section-head{text-align:center;margin-bottom:44px;max-width:820px;margin-left:auto;margin-right:auto}
.sslf-lead .section-head p{color:var(--sslf-muted);font-size:16px}
.sslf-lead .section-head .divider{display:inline-flex;align-items:center;gap:10px;color:var(--sslf-orange);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.sslf-lead .section-head .divider::before,.sslf-lead .section-head .divider::after{content:"";width:44px;height:2px;background:var(--sslf-orange)}
.sslf-lead .section-head .under{display:block;width:120px;height:4px;background:linear-gradient(90deg,var(--sslf-navy) 50%,var(--sslf-orange) 50%,var(--sslf-green) 100%);margin:14px auto 0;border-radius:2px}
.sslf-lead .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:600;font-size:14px;border:2px solid transparent;cursor:pointer;transition:all var(--transition);text-decoration:none;line-height:1.2;white-space:nowrap;position:relative;overflow:hidden}
.sslf-lead .btn:focus-visible{outline:3px solid rgba(30,58,138,.35);outline-offset:2px}
.sslf-lead .btn i{font-size:14px}
.sslf-lead .btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.15);transform:translateX(-100%);transition:transform var(--transition)}
.sslf-lead .btn:hover::after{transform:translateX(0)}
.sslf-lead .btn-orange{background:linear-gradient(135deg,var(--sslf-orange),#f9a95c);color:#fff;box-shadow:0 6px 18px rgba(249,115,22,.35)}
.sslf-lead .btn-orange:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(249,115,22,.45);color:#fff}
.sslf-lead .btn-navy{background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light));color:#fff;box-shadow:0 6px 18px rgba(30,58,138,.28)}
.sslf-lead .btn-navy:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,58,138,.4);color:#fff}
.sslf-lead .btn-green{background:linear-gradient(135deg,var(--sslf-green),#43a047);color:#fff;box-shadow:0 6px 18px rgba(22,163,74,.32)}
.sslf-lead .btn-green:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,163,74,.42);color:#fff}
.sslf-lead .btn-outline-navy{background:#fff;color:var(--sslf-navy);border-color:var(--sslf-navy)}
.sslf-lead .btn-outline-navy:hover{background:var(--sslf-navy);color:#fff}
.sslf-lead .btn-outline-orange{background:#fff;color:var(--sslf-orange);border-color:var(--sslf-orange)}
.sslf-lead .btn-outline-orange:hover{background:var(--sslf-orange);color:#fff}
.sslf-lead .btn-ghost{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.sslf-lead .btn-ghost:hover{background:#fff;color:var(--sslf-navy)}
.sslf-lead .btn-sm{padding:8px 14px;font-size:12px}
.sslf-lead .btn-lg{padding:16px 30px;font-size:15px}
/* ---------- PAGE SPECIFIC ---------- */
.sslf-lead .page-hero{padding:56px 0 10px;text-align:center;background:linear-gradient(180deg,#fff,var(--sslf-bg))}
.sslf-lead .page-hero h1{font-size:46px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.sslf-lead .page-hero .dot-rule{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 14px}
.sslf-lead .page-hero .dot-rule span{height:2px;width:40px;background:var(--sslf-orange)}
.sslf-lead .page-hero .dot-rule i{width:9px;height:9px;border-radius:50%;background:var(--sslf-orange);display:block}
.sslf-lead .page-hero p{color:var(--sslf-muted);font-size:17px;margin:0}
.sslf-lead .msg-card{background:#fff;border:1px solid var(--sslf-border);border-radius:16px;box-shadow:var(--shadow-md);overflow:hidden;margin-bottom:26px}
.sslf-lead .msg-card.tint-green{background:linear-gradient(180deg,#f4faf5,#fff)}
.sslf-lead .msg-card.tint-orange{background:linear-gradient(180deg,#fff7f0,#fff)}
.sslf-lead .msg-photo{background:radial-gradient(circle at 50% 40%,#eef4ee,#f7f9fc);display:flex;align-items:center;justify-content:center;min-height:100%;padding:18px}
.sslf-lead .msg-photo img{border-radius:14px}
.sslf-lead .msg-body{padding:30px 32px}
.sslf-lead .msg-name{font-size:27px;font-weight:800;margin-bottom:4px}
.sslf-lead .msg-role{color:var(--sslf-orange);font-weight:700;font-size:15px;margin-bottom:14px;display:inline-block;border-bottom:2px solid var(--sslf-orange);padding-bottom:6px}
.sslf-lead .msg-body p{margin:0 0 12px;font-size:15px}
.sslf-lead .quote-mark{color:var(--sslf-green);font-size:26px;line-height:1;float:left;margin:2px 10px 0 0}
.sslf-lead .pull-quote{background:#eaf3ec;border-left:4px solid var(--sslf-green);border-radius:10px;padding:14px 18px;font-style:italic;color:var(--sslf-green-dark);font-weight:600;margin:6px 0 14px}
.sslf-lead .msg-tagline{color:var(--sslf-green);font-weight:800;font-size:17px;margin-top:14px}
.sslf-lead .team-card{
margin: 10px;
background:#fff;border:1px solid var(--sslf-border);border-radius:16px;box-shadow:var(--shadow-sm);padding:24px;height:100%;display:flex;flex-direction:column;transition:all var(--transition)}
.sslf-lead .team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.sslf-lead .team-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #eef2f7;background:#f1f5f9}
.sslf-lead .team-name{font-size:19px;font-weight:800;margin-bottom:2px}
.sslf-lead .team-role{color:var(--sslf-orange);font-weight:700;font-size:14px}
.sslf-lead .team-points{list-style:none;padding:0;margin:18px 0 22px}
.sslf-lead .team-points li{display:flex;gap:10px;font-size:13.5px;color:var(--sslf-text);margin-bottom:12px}
.sslf-lead .team-points li i{color:var(--sslf-green);font-size:15px;flex:0 0 auto;margin-top:2px}
.sslf-lead .team-card .btn{margin-top:auto}
.sslf-lead .gov-wrap{background:var(--sslf-bg);border:1px solid var(--sslf-border);border-radius:16px;padding:30px 10px}
.sslf-lead .gov-item{display:flex;gap:14px;align-items:flex-start;padding:6px 16px}
.sslf-lead .gov-ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;flex:0 0 auto}
.sslf-lead .gov-ico.navy{background:var(--sslf-navy)}
.sslf-lead .gov-ico.orange{background:var(--sslf-orange)}
.sslf-lead .gov-ico.green{background:var(--sslf-green)}
.sslf-lead .gov-item h4{font-size:17px;margin-bottom:4px}
.sslf-lead .gov-item.alt h4{color:var(--sslf-orange)}
.sslf-lead .gov-item p{font-size:13.5px;color:var(--sslf-muted);margin:0}
/* ---------- MODAL / PROFILE ---------- */
.sslf-lead .sslf-modal-content{
border: 0;
border-radius: 16px;
overflow-y: scroll;
background: var(--sslf-bg);
height: 700px;
}
.sslf-lead .sslf-modal-header{background:#fff;border-bottom:1px solid var(--sslf-border);padding:16px 22px}
.sslf-lead .sslf-modal-title{font-size:19px;font-weight:800;margin:0}
.sslf-lead .sslf-modal-body{padding:20px}
.sslf-lead .p-card{
background: #fff;
border: 1px solid var(--sslf-border);
border-radius: 14px;
box-shadow: var(--shadow-sm);
padding: 20px;
height: 442px;
margin: 20px 10px;
overflow-y: scroll;
}
.sslf-lead .p-card h3{font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sslf-lead .p-card h3 i{color:var(--sslf-green)}
.sslf-lead .p-card p{font-size:13.5px;margin:0 0 10px}
.sslf-lead .p-name{font-size:32px;font-weight:800;margin-bottom:2px}
.sslf-lead .p-role{color:var(--sslf-orange);font-weight:700;font-size:18px;margin-bottom:6px}
.sslf-lead .p-org{font-size:15px;color:var(--sslf-text);margin-bottom:10px}
.sslf-lead .p-rule{width:60px;height:3px;background:var(--sslf-orange);border-radius:2px;margin-bottom:14px}
.sslf-lead .p-intro{font-size:14.5px;color:var(--sslf-text)}
.sslf-lead .p-photo{background:#f3f5f0;border:1px solid var(--sslf-border);border-radius:14px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--sslf-muted)}
.sslf-lead .p-photo .silhouette{width:150px;height:150px;border-radius:50%;background:#dfe3dc;border:2px dashed #c7cec4;display:flex;align-items:center;justify-content:center;font-size:58px;color:#b6bdb2;margin-bottom:14px}
.sslf-lead .p-photo strong{display:block;font-size:13px;letter-spacing:.5px;color:var(--sslf-text);text-transform:uppercase}
.sslf-lead .p-photo span{font-size:12px}
.sslf-lead .p-photo img{border-radius:12px}
.sslf-lead .stat-strip{background:#fff;border:1px solid var(--sslf-border);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}
.sslf-lead .stat{display:flex;gap:10px;align-items:flex-start;padding:6px 12px;border-right:1px solid var(--sslf-border)}
.sslf-lead .stat:last-child{border-right:0}
.sslf-lead .stat i{color:var(--sslf-navy);font-size:22px}
.sslf-lead .stat b{display:block;font-size:14px;color:var(--sslf-navy);line-height:1.25}
.sslf-lead .stat small{color:var(--sslf-muted);font-size:12.5px;display:block}
.sslf-lead ul.tick,.sslf-lead ul.dot,.sslf-lead ul.arrow,.sslf-lead ul.star{list-style:none;padding:0;margin:0}
.sslf-lead ul.tick li,.sslf-lead ul.dot li,.sslf-lead ul.arrow li,.sslf-lead ul.star li{position:relative;padding-left:22px;font-size:13.5px;margin-bottom:9px}
.sslf-lead ul.tick li::before{content:"";font-family:"bootstrap-icons";position:absolute;left:0;top:0;color:var(--sslf-green)}
.sslf-lead ul.dot li::before{content:"";position:absolute;left:6px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--sslf-orange)}
.sslf-lead ul.arrow li::before{content:"";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:0;color:var(--sslf-navy)}
.sslf-lead ul.star li::before{content:"";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:0;color:var(--sslf-navy)}
.sslf-lead .p-quote{background:#f2f6f2;border-radius:12px;padding:18px 22px;font-style:italic;color:var(--sslf-text);font-size:13.5px;position:relative}
.sslf-lead .p-quote i.fa-quote-left{color:var(--sslf-muted);font-size:20px}
.sslf-lead .p-footer{background:#fff;border:1px solid var(--sslf-border);border-radius:14px;padding:16px;margin-top:4px}
/* ---------- LAYOUT UTILITIES (custom, no framework) ---------- */
.sslf-lead .d-flex{display:flex}
.sslf-lead .d-inline-flex{display:inline-flex}
.sslf-lead .flex-wrap{flex-wrap:wrap}
.sslf-lead .align-items-center{align-items:center}
.sslf-lead .align-items-stretch{align-items:stretch}
.sslf-lead .align-items-start{align-items:flex-start}
.sslf-lead .justify-content-center{justify-content:center}
.sslf-lead .text-center{text-align:center}
.sslf-lead .w-100{width:100%}
.sslf-lead .gap-2{gap:8px}
.sslf-lead .gap-3{gap:12px}
.sslf-lead .mt-1{margin-top:4px}
.sslf-lead .mt-2{margin-top:8px}
.sslf-lead .mt-3{margin-top:12px}
.sslf-lead .mt-4{margin-top:18px}
.sslf-lead .mb-3{margin-bottom:12px}
.sslf-lead .mb-4{margin-bottom:18px}
.sslf-lead .rounded-3{border-radius:12px}
.sslf-lead small{font-size:12px}
/* 12-column responsive grid */
.sslf-lead .row{display:flex;flex-wrap:wrap;--gx:0px;--gy:0px;margin-left:calc(var(--gx) / -2);margin-right:calc(var(--gx) / -2)}
.sslf-lead .row{margin-top:calc(var(--gy) * -1)}
.sslf-lead .row.g-0{--gx:0px;--gy:0px}
.sslf-lead .row.g-2{--gx:8px;--gy:8px}
.sslf-lead .row.g-3{--gx:16px;--gy:16px}
.sslf-lead .row.g-4{--gx:24px;--gy:24px}
.sslf-lead .col-6{width:50%}
.sslf-lead .col-12{width:100%}
/* ---------- CUSTOM MODAL ---------- */
.sslf-modal{position:fixed;inset:0;z-index:9999;display:none;padding:24px 16px;overflow-y:auto;background:rgba(9,42,85,.55);backdrop-filter:blur(2px)}
.sslf-modal.is-open{display:block;animation:sslfFade .2s ease}
@keyframes sslfFade{from{opacity:0}to{opacity:1}}
.sslf-modal-dialog{max-width:1140px;margin:0 auto;animation:sslfUp .25s cubic-bezier(.4,0,.2,1)}
@keyframes sslfUp{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.sslf-modal-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sslf-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--sslf-border);background:#fff;color:var(--sslf-navy);font-size:16px;line-height:1;cursor:pointer;flex:0 0 auto;transition:all var(--transition)}
.sslf-modal-close::before{content:"×";font-size:22px}
.sslf-modal-close:hover{background:var(--sslf-navy);color:#fff;border-color:var(--sslf-navy)}
/* ===== Extracted from our-work.php ===== */
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--sslf-orange-dark);
background:rgba(245,130,32,.1);
padding:6px 14px;border-radius:999px;
margin-bottom:18px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sslf-orange);}
.section-head{text-align:center;max-width:680px;margin:0 auto 48px;}
.section-head h2{
font-size:clamp(26px,3.4vw,36px);
color:var(--sslf-navy);
font-weight:800;
margin-bottom:12px;
letter-spacing:-.01em;
}
.section-head p{color:var(--sslf-muted);font-size:16px;}
.section-head .divider{
display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px;
}
.section-head .divider span{height:3px;width:44px;border-radius:2px;background:linear-gradient(90deg,var(--sslf-orange),var(--sslf-navy));}
/* =========================================================
HERO BANNER
========================================================= */
.hero {
position: relative;
width: 100%;
min-height: 600px;
background-image: url("https://shyamsharanam.org/wp-content/uploads/2026/09/Our-work.webp");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.hero .container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}
/* =========================================================
CONTENT
========================================================= */
.hero-content {
width: 50%;
padding-top: 55px;
padding-bottom: 45px;
position: relative;
z-index: 2;
}
/* =========================================================
BADGE
========================================================= */
.hero-badge {
display: inline-flex;
align-items: center;
margin-bottom: 18px;
padding: 6px 16px;
background: #087b42;
color: #ffffff;
border-radius: 30px;
font-size: 10px;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .2px;
}
/* =========================================================
HEADING
========================================================= */
.hero h1 {
margin: 0 0 20px;
max-width: 650px;
font-size: clamp(42px, 3vw, 62px);
line-height: 1.04;
font-weight: 700;
color: #102d73 !important;
}
.hero h1 span {
display: block;
color: #102d73;
}
.hero h1 .green {
color: #087b42 !important;
}
.hero h1 .orange {
color: #f15b20 !important;
}
/* =========================================================
DESCRIPTION
========================================================= */
.hero p {
max-width: 580px;
margin: 0 0 28px;
color: #19386a !important;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
FEATURES
========================================================= */
.hero-features {
display: flex;
align-items: flex-start;
gap: 42px;
}
.hero-feature {
width: 75px;
text-align: center;
}
.feature-icon {
width: 48px;
height: 48px;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ffffff;
font-size: 19px;
}
.hero-feature span {
display: block;
color: #102d73 !important;
font-size: 11px;
line-height: 1.25;
font-weight: 600;
}
/* =========================================================
ICON COLORS
========================================================= */
.orange-icon {
background: #ff7010;
}
.green-icon {
background: #087b42;
}
.blue-icon {
background: #183f8f;
}
.purple-icon {
background: #63359a;
}
/* =========================================================
TABLET
========================================================= */
/* =========================================================
MOBILE
========================================================= */
/* OPPORTUNITIES / IMAGE SECTION */
.opportunities{
background:#fff;
}
.opp-grid{
display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.opp-grid .img-wrap{
position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
aspect-ratio:4/3.1;
}
.opp-grid .img-wrap img{width:100%;height:100%;object-fit:contain;}
.opp-grid .img-wrap::after{
content:"";position:absolute;inset:0;
background:linear-gradient(0deg, rgba(15,61,117,.55), transparent 55%);
}
.opp-badge-float{
position:absolute;left:22px;bottom:22px;z-index:2;
background:#fff;color:var(--sslf-navy);
padding:12px 18px;border-radius:10px;box-shadow:var(--shadow-md);
font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px;
}
.opp-badge-float .dot{width:10px;height:10px;border-radius:50%;background:var(--sslf-orange);}
.opp-text h2{
font-size:clamp(24px,3vw,32px);color:var(--sslf-navy);font-weight:800;margin-bottom:18px;letter-spacing:-.01em;
}
.opp-text p{color:var(--sslf-muted);margin-bottom:16px;font-size:15.5px;}
.opp-stats{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap;}
.opp-stats div{border-left:3px solid var(--sslf-orange);padding-left:12px;}
.opp-stats strong{display:block;font-size:22px;color:var(--sslf-navy);font-weight:800;}
.opp-stats span{font-size:13px;color:var(--sslf-muted);}
/* AREAS OF WORK */
.areas-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:22px;
}
.area-card{
background:#fff;border:1px solid var(--sslf-border);border-radius:var(--radius);
padding:28px 22px;transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
position:relative;
}
.area-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.area-icon{
width:54px;height:54px;border-radius:14px;
display:flex;align-items:center;justify-content:center;
margin-bottom:18px;color:#fff;
}
.area-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;}
.area-card h3{font-size:16.5px;color:var(--sslf-navy);font-weight:700;margin-bottom:10px;}
.area-card p{font-size:13.8px;color:var(--sslf-muted);margin-bottom:14px;}
.area-link{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.area-link svg{width:14px;height:14px;transition:transform var(--transition);}
.area-card:hover .area-link svg{transform:translateX(4px);}
.c1{background:var(--sslf-green);color:var(--sslf-green);}
.c2{background:var(--sslf-navy);color:var(--sslf-navy);}
.c3{background:var(--sslf-purple);color:var(--sslf-purple);}
.c4{background:var(--sslf-pink);color:var(--sslf-pink);}
.c5{background:var(--sslf-orange);color:var(--sslf-orange-dark);}
.c6{background:var(--sslf-teal);color:var(--sslf-teal);}
.c7{background:var(--sslf-navy-light);color:var(--sslf-navy);}
.c8{background:var(--sslf-orange-dark);color:var(--sslf-orange-dark);}
.c9{background:var(--sslf-green-dark);color:var(--sslf-green-dark);}
.c10{background:#16a34a;color:#16a34a;}
.area-link{color:var(--sslf-navy);}
/* HOW WE WORK */
.steps-wrap{position:relative;}
.steps-line{
position:absolute;top:34px;left:6%;right:6%;height:2px;
background:repeating-linear-gradient(90deg, var(--sslf-border) 0 10px, transparent 10px 18px);
z-index:0;
}
.steps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative;z-index:1;}
.step-card{text-align:center;padding:0 6px;}
.step-num{
width:68px;height:68px;border-radius:50%;margin:0 auto 18px;
background:#fff;border:2px solid var(--sslf-orange);
display:flex;align-items:center;justify-content:center;
color:var(--sslf-navy);font-weight:800;font-size:20px;
box-shadow:var(--shadow-sm);
}
.step-card h4{font-size:14.5px;color:var(--sslf-navy);font-weight:700;margin-bottom:8px;}
.step-card p{font-size:12.8px;color:var(--sslf-muted);}
/* APPROACH + WORK WITH + SDGs (3 panels in one row, matches reference) */
.triple-grid{display:grid;grid-template-columns:.85fr .85fr 1.3fr;gap:24px;align-items:start;}
.panel{
background:#fff;border:1px solid var(--sslf-border);border-radius:var(--radius);
padding:30px 26px;box-shadow:var(--shadow-sm);height:100%;
}
.panel h3{color:var(--sslf-navy);font-size:17px;font-weight:800;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.panel h3::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--sslf-orange);flex:none;}
/* icon + title + description list style used in Approach / Work With panels */
.desc-list{list-style:none;margin:0;padding:0;}
.desc-list li{
display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--sslf-border);
}
.desc-list li:last-child{border-bottom:none;}
.desc-list .icon-wrap{
flex:none;width:32px;height:32px;border-radius:8px;
background:rgba(15,61,117,.08);display:flex;align-items:center;justify-content:center;
color:var(--sslf-navy);font-size:13px;
}
.desc-list .txt strong{display:block;font-size:14px;color:var(--sslf-navy);font-weight:700;margin-bottom:2px;}
.desc-list .txt span{display:block;font-size:12.3px;color:var(--sslf-muted);line-height:1.4;}
/* SDGs mini panel */
.sdg-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.sdg-mini-tile{
aspect-ratio:1/1;border-radius:9px;color:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
padding:6px 4px;box-shadow:var(--shadow-sm);transition:transform var(--transition);
}
.sdg-mini-tile:hover{transform:translateY(-3px) scale(1.03);}
.sdg-mini-tile i{font-size:16px;margin-bottom:4px;}
.sdg-mini-tile .num{font-size:12px;font-weight:800;line-height:1;}
.sdg-mini-tile .label{font-size:8px;text-transform:uppercase;letter-spacing:.02em;margin-top:3px;line-height:1.15;}
.sdg-mini-note{font-size:12.8px;color:var(--sslf-muted);margin:0;line-height:1.5;}
/* IMPACT */
.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.impact-card{
background:#fff;border:1px solid var(--sslf-border);border-radius:var(--radius);
padding:26px;display:flex;gap:16px;align-items:flex-start;
transition:box-shadow var(--transition), transform var(--transition);
}
.impact-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.impact-icon{
flex:none;width:44px;height:44px;border-radius:10px;
background:rgba(15,61,117,.08);display:flex;align-items:center;justify-content:center;color:var(--sslf-navy);
}
.impact-icon svg{width:22px;height:22px;stroke-width:1.8;fill:none;}
.impact-card h4{font-size:15px;color:var(--sslf-navy);font-weight:700;margin-bottom:6px;}
.impact-card p{font-size:13.3px;color:var(--sslf-muted);}
/* CTA */
.cta-banner{
background:linear-gradient(120deg, var(--sslf-navy-dark), var(--sslf-navy) 60%, var(--sslf-navy-light));
border-radius:var(--radius);color:#fff;
padding:40px 44px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;
box-shadow:var(--shadow-lg);
}
.cta-left h3{font-size:22px;font-weight:800;margin-bottom:8px;}
.cta-left p{color:#dbe6f6;font-size:14.5px;max-width:480px;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;}
.btn-white{background:#fff;color:var(--sslf-navy);}
.btn-white:hover{background:#eef3fa;}
/* RESPONSIVE */
.hero h1{
color: white;
}
.cta-banner h3{
color: white;
}
/* ===== Extracted from page-about.php ===== */
.sslf-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* ---------- Hero ---------- */
.sslf-hero{padding:56px 0 40px}
.sslf-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sslf-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--sslf-green);font-weight:800;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.sslf-eyebrow::after{content:"";width:46px;height:2px;background:var(--sslf-green);display:inline-block}
.sslf-hero h1{font-size:2.5rem;line-height:1.18;margin:0 0 10px;font-weight:800}
.sslf-hero h1 .line1{color:var(--sslf-navy);display:block}
.sslf-hero h1 .line2{color:var(--sslf-orange);display:block}
.sslf-hero .subhead{color:var(--sslf-green);font-weight:700;font-size:1.02rem;margin:6px 0 20px}
.sslf-hero p{color:var(--sslf-muted);font-size:15px;margin:0 0 16px}
.sslf-hero-img{position:relative;border-radius:20px;overflow:hidden}
.sslf-hero-img img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.sslf-hero-img::before{content:"";position:absolute;left:-40px;bottom:-30px;width:220px;height:220px;border-radius:50%;background:linear-gradient(135deg,var(--sslf-green),transparent 70%);opacity:.18;z-index:0}
/* ---------- Two-box section (Who we are / Why exists) ---------- */
.sslf-twobox{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:44px 0}
.sslf-card{border:1px solid var(--sslf-border);border-radius:var(--radius);padding:28px;background:#fff;box-shadow:var(--shadow-sm)}
.sslf-card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sslf-icon-circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sslf-card h3{margin:0;font-size:1.25rem;color:var(--sslf-navy);font-weight:800}
.sslf-card p{color:var(--sslf-muted);font-size:14.5px;margin:0 0 12px}
.sslf-card p:last-child{margin-bottom:0}
/* ---------- Section heading ---------- */
.sslf-section-title{text-align:center;font-size:1.55rem;font-weight:800;color:var(--sslf-navy);margin:52px 0 26px;position:relative;letter-spacing:.3px}
.sslf-section-title::after{content:"";display:block;width:36px;height:3px;background:var(--sslf-orange);margin:10px auto 0;border-radius:2px}
/* ---------- Areas of work ---------- */
.sslf-areas-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:16px}
.sslf-area-card{border:1px solid var(--sslf-border);border-radius:var(--radius);padding:22px 14px;text-align:center;background:#fff;transition:var(--transition)}
.sslf-area-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
.sslf-area-card .ic{border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto 12px}
.sslf-area-card span{display:block;font-size:13px;font-weight:700;color:var(--sslf-navy);line-height:1.3}
/* ---------- Development approach ---------- */
.sslf-approach-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.sslf-approach-card{border:1px solid var(--sslf-border);border-radius:var(--radius);padding:24px 18px;text-align:center;background:#fff}
.sslf-approach-card .ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;margin:0 auto 14px}
.sslf-approach-card h4{margin:0 0 8px;font-size:1rem;font-weight:800;color:var(--sslf-navy)}
.sslf-approach-card p{margin:0;font-size:13px;color:var(--sslf-muted)}
/* ---------- Vision / Mission / Values ---------- */
.sslf-vmv-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:22px;margin:44px 0}
.sslf-vmv-grid h3{display:flex;align-items:center;gap:10px;font-size:1.15rem;color:var(--sslf-navy);font-weight:800;margin:0 0 12px}
.sslf-vmv-grid p{color:var(--sslf-muted);font-size:14px;margin:0}
.sslf-values-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.sslf-values-list li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sslf-text);font-weight:600}
.sslf-values-list i{color:var(--sslf-navy)}
/* ---------- Partner / Legal / Leadership ---------- */
.sslf-triple-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin:44px 0}
.sslf-check-list li{display:flex;align-items:center;gap:8px;font-size:13.8px;font-weight:600;color:var(--sslf-text);margin-bottom:9px}
.sslf-check-list i{color:var(--sslf-green)}
.sslf-legal-reg{font-size:13.5px;color:var(--sslf-muted);margin:2px 0 14px}
.sslf-legal-reg strong{display:block;color:var(--sslf-text);font-size:13.5px;margin-bottom:2px}
.sslf-compliance-label{font-size:12px;font-weight:800;color:var(--sslf-navy);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px}
.sslf-compliance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
.sslf-compliance-item{text-align:center}
.sslf-compliance-item .ic {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin: 0 auto 5px;
color: #2e7d32;
border: 1px solid;
}
.sslf-compliance-item span{display:block;font-size:11px;font-weight:800;color:var(--sslf-navy)}
.sslf-compliance-item small{display:block;font-size:9px;color:var(--sslf-muted)}
.sslf-leader-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.sslf-leader-item .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex-shrink:0}
.sslf-leader-item strong{display:block;font-size:14px;color:var(--sslf-navy)}
.sslf-leader-item span{display:block;font-size:12.5px;color:var(--sslf-muted)}
/* ---------- CTA footer bar ---------- */
.sslf-cta{background:var(--sslf-navy-dark);color:#fff;margin-top:52px;padding:30px 0}
.sslf-cta-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.sslf-cta-left{display:flex;align-items:flex-start;gap:16px;max-width:640px}
.sslf-cta-left .ic{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sslf-cta-left h3{margin:0 0 6px;font-size:1.15rem;font-weight:800}
.sslf-cta-left p{margin:0;font-size:13.5px;color:#cfe0f5}
.sslf-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.sslf-btn{padding:11px 20px;border-radius:8px;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:8px;transition:var(--transition)}
.sslf-btn-green{background:var(--sslf-green);color:#fff}
.sslf-btn-green:hover{background:var(--sslf-green-dark)}
.sslf-btn-orange{background:var(--sslf-orange);color:#fff}
.sslf-btn-orange:hover{background:var(--sslf-orange-dark)}
.sslf-cta-contact{font-size:13px;color:#dbe7f7}
.sslf-cta-contact div{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sslf-cta-contact strong{display:block;font-size:12px;letter-spacing:.5px;color:#8fb3e0;margin-bottom:6px;text-transform:uppercase}
/* ===== Extracted from page-contact.php ===== */
/* =========================================================
PAGE-SPECIFIC CSS — Contact page (no header/footer)
========================================================= */
.contact-hero{
padding: 21px 2px;
}
.contact-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center}
.contact-hero h1{font-size:44px;font-weight:800;color:var(--sslf-text);margin-bottom:6px}
.contact-hero h1 .accent{color:var(--sslf-green);display:block}
.contact-hero .rule{width:70px;height:3px;background:var(--sslf-orange);border:none;margin:20px 0}
.contact-hero p.lead{color:var(--sslf-muted);font-size:15.5px;max-width:460px}
.contact-hero-media{
position:relative;border-radius:28px 28px 28px 90px;overflow:hidden;box-shadow:var(--shadow-lg);height:360px;background-image:url("https://shyamsharanam.org/wp-content/uploads/2026/08/Contact.webp");background-size:cover;background-position:center;
}
.contact-hero-badge{position:absolute;right:22px;bottom:22px;background:var(--sslf-navy-dark);color:#fff;border-radius:14px;padding:16px 20px;max-width:230px;box-shadow:var(--shadow-md);display:flex;gap:12px;align-items:flex-start}
.contact-hero-badge i{color:var(--sslf-orange);font-size:20px;margin-top:2px}
.contact-hero-badge p{margin:0;font-size:13px;line-height:1.5;color:#eef2f7}
/* ---------- GET IN TOUCH ---------- */
.gettouch-grid{display:grid;grid-template-columns:.85fr 1.4fr;gap:40px;align-items:start}
.info-list{display:flex;flex-direction:column;gap:22px}
.info-item{display:flex;gap:16px;align-items:flex-start}
.info-icon{width:48px;height:48px;border-radius:50%;background:rgba(46,125,50,.1);color:var(--sslf-green);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.info-item:nth-child(2n) .info-icon{background:rgba(245,130,32,.1);color:var(--sslf-orange)}
.info-item h4{font-size:15.5px;margin-bottom:4px;color:var(--sslf-navy)}
.info-item p{margin:0;font-size:13.5px;color:var(--sslf-muted)}
.contact-form-card h3{font-size:20px;margin-bottom:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-size:13px;font-weight:600;color:var(--sslf-text)}
.form-group label .req{color:var(--sslf-orange)}
.form-group input,.form-group textarea{border:1px solid var(--sslf-border);border-radius:8px;padding:12px 14px;font-size:13.5px;font-family:inherit;color:var(--sslf-text);background:#fbfcfe;transition:border-color var(--transition),box-shadow var(--transition)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--sslf-navy-light);box-shadow:0 0 0 3px rgba(27,90,168,.12)}
.form-group textarea{resize:vertical;min-height:110px}
/* ---------- HOW CAN WE WORK TOGETHER ---------- */
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.work-card{background:#fff;border:1px solid var(--sslf-border);border-radius:var(--radius);padding:26px 18px;text-align:center;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}
.work-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.work-icon{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px}
.work-icon.green{background:rgba(46,125,50,.1);color:var(--sslf-green)}
.work-icon.orange{background:rgba(245,130,32,.1);color:var(--sslf-orange)}
.work-card h3{font-size:15px;margin-bottom:8px}
.work-card p{font-size:12.5px;color:var(--sslf-muted);margin:0}
/* ---------- VISIT / CONNECT WITH US ---------- */
.visit-grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:34px;align-items:stretch}
.visit-office{background:#fff;border:1px solid var(--sslf-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:30px;display:flex;flex-direction:column;justify-content:space-between}
.visit-office-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.visit-office-icon{width:44px;height:44px;border-radius:50%;background:rgba(46,125,50,.1);color:var(--sslf-green);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.visit-office h4{font-size:16px;margin-bottom:6px}
.visit-office p{margin:0;font-size:13.5px;color:var(--sslf-muted);line-height:1.6}
.visit-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--sslf-border);min-height:280px}
.visit-map iframe{width:100%;height:100%;min-height:280px;border:0;display:block}
.contact-hero{
height:360px;background-image:url("https://shyamsharanam.org/wp-content/uploads/2026/08/Contact.webp");background-size:cover;background-position:center;
}
/* ===== Extracted from page-partners.php ===== */
.sslf-partners-page{
--sslf-navy:#0F3D75; --sslf-navy-dark:#092a55; --sslf-navy-light:#1b5aa8;
--sslf-orange:#F58220; --sslf-orange-dark:#d96f14;
--sslf-green:#2E7D32; --sslf-green-dark:#1f5c22;
--sslf-yellow:#facc15; --sslf-red:#dc2626; --sslf-purple:#7c3aed; --sslf-pink:#ec4899;
--sslf-teal:#0d9488;
--sslf-bg:#F7F9FC; --sslf-bg-soft:#F7F9FC;
--sslf-text:#1f2937; --sslf-muted:#6b7280; --sslf-border:#e5e7eb;
--shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
--shadow-md:0 8px 20px rgba(15,23,42,.08);
--shadow-lg:0 24px 50px -18px rgba(15,23,42,.25);
--radius:12px; --transition:.28s cubic-bezier(.4,0,.2,1);
font-family:"Inter",system-ui,-apple-system,sans-serif;
color:var(--sslf-text);
background:var(--sslf-bg);
overflow-x:hidden;
}
.sslf-partners-page .hero{
background: url(/wp-content/uploads/2026/08/parteners.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.sslf-partners-page h1,.sslf-partners-page h2,.sslf-partners-page h3{
font-family:"Poppins",system-ui,-apple-system,sans-serif;
margin:0; line-height:1.2;
}
.sslf-partners-page *{box-sizing:border-box;}
.sslf-partners-page .wrap{
margin: auto;
max-width:1240px;padding:0 24px;}
.sslf-partners-page .eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.sslf-partners-page section{padding:88px 0;}
.sslf-partners-page .section-head{max-width:720px; margin:0 auto 48px; text-align:center;}
.sslf-partners-page .section-head.left{text-align:left; margin:0 0 48px;}
.sslf-partners-page .section-head h2{font-size:clamp(28px,3.4vw,38px); font-weight:700; margin-top:10px;}
.sslf-partners-page .section-head p{color:var(--sslf-muted); font-size:16.5px; margin-top:14px; line-height:1.7;}
.sslf-partners-page .btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 26px; border-radius:var(--radius); font-weight:600; font-size:15px;
text-decoration:none; border:2px solid transparent; transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
cursor:pointer;
}
.sslf-partners-page .btn:hover{transform:translateY(-2px);}
.sslf-partners-page .btn-orange{background:var(--sslf-orange); color:#fff; box-shadow:var(--shadow-md);}
.sslf-partners-page .btn-orange:hover{background:var(--sslf-orange-dark);}
.sslf-partners-page .btn-outline{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px);}
.sslf-partners-page .btn-outline:hover{background:rgba(255,255,255,.18);}
.sslf-partners-page .btn-white{background:#fff; color:var(--sslf-navy);}
.sslf-partners-page .btn-white:hover{background:#f1f5f9;}
.sslf-partners-page .btn-green{background:var(--sslf-green); color:#fff;}
.sslf-partners-page .btn-green:hover{background:var(--sslf-green-dark);}
.sslf-partners-page .btn-navy-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.sslf-partners-page .btn-navy-outline:hover{background:rgba(255,255,255,.12);}
.sslf-partners-page svg{width:22px;height:22px;}
/* ---------- HERO ---------- */
.sslf-partners-page .hero{
position:relative; min-height:640px; display:flex; align-items:center;
padding:120px 0 100px;
}
.sslf-partners-page .hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,620px) 1fr; gap:40px; align-items:center;}
.sslf-partners-page .hero-content{color:#fff;}
.sslf-partners-page .hero .eyebrow{color:var(--sslf-yellow);}
.sslf-partners-page .hero h1{font-size:clamp(32px,4.4vw,50px); font-weight:700; margin-top:14px;}
.sslf-partners-page .hero h1 .accent{color:var(--sslf-orange);}
.sslf-partners-page .hero .sub{font-size:17px; font-weight:500; color:#e6edf7; margin-top:16px; line-height:1.7;}
.sslf-partners-page .hero p.body{font-size:15.5px; color:#cbd8ec; margin-top:14px; line-height:1.8; max-width:560px;}
.sslf-partners-page .hero .cta-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:32px;}
/* floating category badges over the image (right side) */
.sslf-partners-page .hero-badges{position:relative; min-height:420px; display:none;}
.sslf-partners-page .badge-pill{
position:absolute; display:flex; align-items:center; gap:10px;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
backdrop-filter:blur(8px); color:#fff; padding:10px 16px 10px 10px;
border-radius:999px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg);
animation:sslf-float 5s ease-in-out infinite;
}
.sslf-partners-page .badge-pill .ic{
width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sslf-partners-page .badge-pill svg{width:17px;height:17px;}
.sslf-partners-page .b1{top:0; left:10%; animation-delay:0s;}
.sslf-partners-page .b2{top:14%; right:0; animation-delay:.6s;}
.sslf-partners-page .b3{top:48%; left:0; animation-delay:1.2s;}
.sslf-partners-page .b4{top:52%; right:6%; animation-delay:1.8s;}
.sslf-partners-page .b5{bottom:6%; left:16%; animation-delay:2.4s;}
.sslf-partners-page .b6{bottom:0; right:14%; animation-delay:3s;}
@keyframes sslf-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
/* ---------- WHY PARTNER ---------- */
.sslf-partners-page .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.sslf-partners-page .why-card{
display: block;
background:#fff; border:1px solid var(--sslf-border); border-radius:var(--radius);
padding:30px 26px; box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.sslf-partners-page .why-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent;}
.sslf-partners-page .why-card .ic{
width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
margin-bottom:18px; color:#fff;
}
.sslf-partners-page .why-card h3{font-size:18px; font-weight:700;}
.sslf-partners-page .why-card p{color:var(--sslf-muted); font-size:14.5px; margin-top:10px; line-height:1.65;}
/* ---------- PARTNER CATEGORY CARDS ---------- */
.sslf-partners-page .partners-section{background:var(--sslf-bg-soft);}
.sslf-partners-page .partner-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.sslf-partners-page .partner-card{
background:#fff; border:1px solid var(--sslf-border); border-radius:var(--radius);
padding:28px 24px; text-align:center; box-shadow:var(--shadow-sm);
transition:transform var(--transition), box-shadow var(--transition);
display:flex; flex-direction:column; align-items:center;
}
.sslf-partners-page .partner-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.sslf-partners-page .partner-card .ic{
width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--sslf-navy),var(--sslf-navy-light)); color:#fff; margin-bottom:16px;
}
.sslf-partners-page .partner-card h3{font-size:16.5px; font-weight:700; min-height:44px;}
.sslf-partners-page .partner-card p{color:var(--sslf-muted); font-size:13.5px; margin-top:8px; line-height:1.6; flex-grow:1;}
.sslf-partners-page .status-pill{
margin-top:16px; display:inline-block; padding:6px 16px; border-radius:999px;
font-size:11.5px; font-weight:700; letter-spacing:.06em;
background:#fff4e8; color:var(--sslf-orange-dark); border:1px solid #fcd9ad;
}
.sslf-partners-page .partner-card.is-live{text-align:left; align-items:flex-start;}
.sslf-partners-page .partner-card.is-live .logo{max-height:44px; margin-bottom:14px;}
.sslf-partners-page .partner-card.is-live .status-pill{
background:#e9f7ec; color:var(--sslf-green-dark); border-color:#bfe6c5;
}
.sslf-partners-page .partner-note{
text-align:center; color:var(--sslf-muted); font-size:13.5px; margin-top:36px;
}
/* ---------- PROCESS TIMELINE ---------- */
.sslf-partners-page .process-track{
display:grid; grid-template-columns:repeat(8,1fr); gap:14px; position:relative;
}
.sslf-partners-page .process-track::before{
content:""; position:absolute; top:26px; left:5%; right:5%; height:2px;
background:repeating-linear-gradient(90deg,var(--sslf-border) 0 8px,transparent 8px 14px);
z-index:0;
}
.sslf-partners-page .process-step{position:relative; z-index:1; text-align:center;}
.sslf-partners-page .process-step .num{
width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
background:#fff; border:2px solid var(--sslf-navy); color:var(--sslf-navy); box-shadow:var(--shadow-sm);
}
.sslf-partners-page .process-step:nth-child(even) .num{border-color:var(--sslf-orange); color:var(--sslf-orange);}
.sslf-partners-page .process-step h3{font-size:13.5px; font-weight:700;}
.sslf-partners-page .process-step p{color:var(--sslf-muted); font-size:12.5px; margin-top:6px; line-height:1.55;}
/* ---------- COMMITMENT ---------- */
.sslf-partners-page .commit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.sslf-partners-page .commit-card{
background:#fff; border:1px solid var(--sslf-border); border-radius:var(--radius);
padding:24px 20px; box-shadow:var(--shadow-sm);
}
.sslf-partners-page .commit-card .ic{
width:44px; height:44px; border-radius:12px; background:#eaf1fb; color:var(--sslf-navy);
display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.sslf-partners-page .commit-card h3{font-size:15px; font-weight:700;}
.sslf-partners-page .commit-card p{color:var(--sslf-muted); font-size:13px; margin-top:8px; line-height:1.6;}
/* ---------- FAQ ---------- */
.sslf-partners-page .faq-list{max-width:820px; margin:0 auto;}
.sslf-partners-page .faq-item{
border:1px solid var(--sslf-border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; background:#fff;
}
.sslf-partners-page .faq-q{
width:100%; text-align:left; background:none; border:0; cursor:pointer;
padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
font-size:15.5px; font-weight:600; color:var(--sslf-text); font-family:inherit;
}
.sslf-partners-page .faq-q .chev{transition:transform var(--transition); flex-shrink:0; color:var(--sslf-navy);}
.sslf-partners-page .faq-item.open .faq-q .chev{transform:rotate(180deg);}
.sslf-partners-page .faq-a{max-height:0; overflow:hidden; transition:max-height var(--transition);}
.sslf-partners-page .faq-a p{padding:0 22px 20px; color:var(--sslf-muted); font-size:14.5px; line-height:1.7;}
/* ---------- FINAL CTA ---------- */
.sslf-partners-page .final-cta{
background:linear-gradient(120deg,var(--sslf-navy-dark),var(--sslf-navy) 60%,var(--sslf-navy-light));
color:#fff; text-align:center;
}
.sslf-partners-page .final-cta h2{
color: white;
font-size:clamp(26px,3.6vw,36px); font-weight:700;}
.sslf-partners-page .final-cta p{max-width:680px; margin:16px auto 0; color:#d7e2f2; font-size:15.5px; line-height:1.75;}
.sslf-partners-page .final-cta .cta-row{display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:32px;}
/* ---------- RESPONSIVE ---------- */
.sslf-partners-page .hero h1 {
color: white;
}
/* ===== Extracted from page-programs.php ===== */
:root{
--sslf-navy:#0F3D75;
--sslf-navy-dark:#092a55;
--sslf-navy-light:#1b5aa8;
--sslf-orange:#F58220;
--sslf-orange-dark:#d96f14;
--sslf-green:#2E7D32;
--sslf-green-dark:#1f5c22;
--sslf-muted:#6b7280;
--sslf-text:#1f2937;
--sslf-border:#e5e7eb;
--sslf-bg-soft:#F7F9FC;
--shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
--shadow-md:0 8px 20px rgba(15,23,42,.08);
--shadow-lg:0 24px 50px -18px rgba(15,23,42,.25);
--radius:14px;
--transition:.28s cubic-bezier(.4,0,.2,1);
}
.section-head{text-align:center;max-width:680px;margin:0 auto 44px;}
.section-head h2{font-size:clamp(24px,3vw,32px);color:var(--sslf-navy);font-weight:800;margin-bottom:10px;}
.section-head p{color:var(--sslf-muted);font-size:15.5px;}
.section-head .divider{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px;}
/* ===================== HERO (full background image) ===================== */
.prog-hero{
position:relative;width:100%;min-height:560px;
background-image:url("https://shyamsharanam.org/wp-content/uploads/2026/09/Banner-our-focus.webp");
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
overflow:hidden;
}
.prog-hero .container{max-width:1360px;margin:0 auto;padding:0 40px;position:relative;z-index:2;}
.prog-hero-content{width:52%;padding:60px 0;}
.prog-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:#087b42;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:7px 16px;border-radius:30px;margin-bottom:20px;
}
.prog-hero h1{font-size:clamp(38px,4.4vw,54px);font-weight:800;color:var(--sslf-navy);line-height:1.05;margin:0 0 10px;}
.prog-hero .tagline{margin:0 0 22px;}
.prog-hero .tagline span{display:block;font-size:clamp(20px,2.4vw,27px);font-weight:800;line-height:1.3;}
.prog-hero .tagline .l1{color:var(--sslf-green);}
.prog-hero .tagline .l2{color:var(--sslf-orange);}
.prog-hero .tagline .l3{color:var(--sslf-navy);}
.prog-hero p.desc{color:var(--sslf-muted);font-size:15.5px;line-height:1.7;max-width:480px;margin:0 0 30px;}
.prog-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.prog-hero-actions a{
display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;
padding:14px 24px;border-radius:9px;text-decoration:none;transition:transform var(--transition),box-shadow var(--transition);
}
.prog-hero-actions a:hover{transform:translateY(-2px);}
.btn-navy-fill{background:var(--sslf-navy);color:#fff;box-shadow:var(--shadow-md);}
.btn-navy-fill:hover{background:var(--sslf-navy-dark);}
.btn-navy-outline{background:#fff;color:var(--sslf-navy);border:1.5px solid var(--sslf-navy);}
.btn-navy-outline:hover{background:var(--sslf-navy);color:#fff;}
/* ===================== PROGRAM CARDS ===================== */
.programs-section{background:#fff;}
.card-grid.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;}
.program-card{
background:#fff;border:1px solid var(--sslf-border);border-radius:var(--radius);
padding:30px 20px 26px;text-align:center;
transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.program-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.pc-icon{
width:66px;height:66px;border-radius:50%;margin:0 auto 18px;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;
box-shadow:var(--shadow-sm);
}
.program-card h6{font-size:15.5px;font-weight:700;color:var(--sslf-navy);margin:0 0 10px;line-height:1.35;}
.program-card p {
font-size: 13px;
color: var(--sslf-muted);
line-height: 1.6;
margin: 0 0 16px;
min-height: 66px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.know-more{
display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
color:inherit;text-decoration:none;
}
.know-more i{font-size:11px;transition:transform var(--transition);}
.program-card:hover .know-more i{transform:translateX(4px);}
/* ===================== FEATURES STRIP ===================== */
.features-strip{
background:var(--sslf-bg-soft);border-radius:var(--radius);
padding:34px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.feature-item{display:flex;gap:14px;align-items:flex-start;}
.feature-item .f-icon{
flex:none;width:44px;height:44px;border-radius:10px;background:#fff;
display:flex;align-items:center;justify-content:center;color:var(--sslf-green);font-size:18px;box-shadow:var(--shadow-sm);
}
.feature-item h5{font-size:14.5px;font-weight:700;color:var(--sslf-navy);margin:0 0 6px;}
.feature-item p{font-size:12.8px;color:var(--sslf-muted);margin:0;line-height:1.55;}
/* ===================== CTA BANNER ===================== */
.cta-banner{
background:linear-gradient(120deg,var(--sslf-navy-dark),var(--sslf-navy) 60%,var(--sslf-navy-light));
border-radius:var(--radius);color:#fff;padding:34px 40px;
display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;box-shadow:var(--shadow-lg);
}
.cta-left{display:flex;align-items:center;gap:20px;flex:1;min-width:280px;}
.cta-left .icon-circle{
flex:none;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--sslf-navy);
display:flex;align-items:center;justify-content:center;font-size:22px;
}
.cta-left p{margin:0;font-size:15.5px;font-weight:600;line-height:1.5;max-width:560px;}
.cta-actions a{
display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:8px;
font-weight:700;font-size:14px;text-decoration:none;transition:transform var(--transition);
}
.cta-actions a:hover{transform:translateY(-2px);}
.btn-orange-fill{background:var(--sslf-orange);color:#fff;}
.btn-orange-fill:hover{background:var(--sslf-orange-dark);}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);}
.btn-outline-white:hover{background:rgba(255,255,255,.12);}
/* ===================== BOTTOM VALUES STRIP ===================== */
.values-strip{background:#fff;border-top:1px solid var(--sslf-border);padding:30px 0;}
.values-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.value-item{display:flex;align-items:center;gap:12px;justify-content:center;text-align:left;}
.value-item .v-icon{
flex:none;width:38px;height:38px;border-radius:8px;background:rgba(46,125,50,.08);
display:flex;align-items:center;justify-content:center;color:var(--sslf-green);font-size:15px;
}
.value-item span{font-size:13px;font-weight:700;color:var(--sslf-navy);line-height:1.3;}
/* ===== Extracted from partners.php ===== */
.sslf-partners-page{ background:var(--sslf-bg); padding:64px 20px 80px; }
.sslf-partners-wrap{ max-width:1180px; margin:0 auto; }
.sslf-partners-hero{ text-align:center; margin-bottom:40px; }
.sslf-partners-hero h1{
color:var(--sslf-navy); font-size:clamp(28px,4vw,40px); font-weight:800; margin:0 0 12px;
}
.sslf-partners-hero p{ color:var(--sslf-muted); max-width:640px; margin:0 auto; font-size:16px; line-height:1.6; }
/* Filter tabs */
.sslf-partner-tabs{
display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:32px 0 44px;
}
.sslf-partner-tab{
border:1px solid var(--sslf-border); background:#fff; color:var(--sslf-text);
padding:10px 20px; border-radius:999px; font-size:14px; font-weight:600;
cursor:pointer; transition:var(--transition); box-shadow:var(--shadow-sm);
}
.sslf-partner-tab:hover{ border-color:var(--sslf-navy-light); color:var(--sslf-navy); }
.sslf-partner-tab.is-active{
background:var(--sslf-navy); border-color:var(--sslf-navy); color:#fff;
}
/* Grid */
.sslf-partner-grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px;
}
.sslf-partner-card{
background:#fff; border:1px solid var(--sslf-border); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:24px 20px; text-align:center;
transition:var(--transition); display:flex; flex-direction:column; align-items:center;
}
.sslf-partner-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.sslf-partner-logo{
width:96px; height:96px; border-radius:10px; object-fit:contain; background:var(--sslf-bg-soft);
padding:10px; margin-bottom:16px; border:1px solid var(--sslf-border);
}
.sslf-partner-logo.is-placeholder{
display:flex; align-items:center; justify-content:center; color:var(--sslf-navy);
font-weight:700; font-size:22px;
}
.sslf-partner-name{ font-size:16px; font-weight:700; color:var(--sslf-text); margin:0 0 6px; }
.sslf-partner-type{ font-size:13px; color:var(--sslf-muted); margin:0 0 12px; }
.sslf-partner-badge{
display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em;
padding:4px 12px; border-radius:999px; margin-bottom:14px; text-transform:uppercase;
}
.sslf-partner-badge.badge-green{ background:rgba(46,125,50,.1); color:var(--sslf-green-dark); }
.sslf-partner-badge.badge-yellow{ background:rgba(250,204,21,.18); color:#92720a; }
.sslf-partner-badge.badge-navy{ background:rgba(15,61,117,.1); color:var(--sslf-navy); }
.sslf-partner-badge.badge-orange{ background:rgba(245,130,32,.12); color:var(--sslf-orange-dark); }
.sslf-partner-badge.badge-purple{ background:rgba(124,58,237,.1); color:var(--sslf-purple); }
.sslf-partner-badge.badge-teal{ background:rgba(13,148,136,.1); color:var(--sslf-teal); }
.sslf-partner-badge.badge-pink{ background:rgba(236,72,153,.1); color:var(--sslf-pink); }
.sslf-partner-link{
margin-top:auto; font-size:13px; font-weight:600; color:var(--sslf-navy-light);
text-decoration:none; border-bottom:1px solid transparent; transition:var(--transition);
}
.sslf-partner-link:hover{ border-color:var(--sslf-navy-light); }
.sslf-partner-empty{
text-align:center; color:var(--sslf-muted); padding:60px 20px; font-size:15px; display:none;
}
/* ===== Extracted from registration-page.php ===== */
.sslf-registration-page{
--sslf-navy:#0F3D75; --sslf-navy-dark:#092a55; --sslf-navy-light:#1b5aa8;
--sslf-orange:#F58220; --sslf-orange-dark:#d96f14;
--sslf-green:#2E7D32; --sslf-green-dark:#1f5c22;
--sslf-yellow:#facc15; --sslf-red:#dc2626; --sslf-purple:#7c3aed; --sslf-pink:#ec4899;
--sslf-teal:#0d9488;
--sslf-bg:#F7F9FC; --sslf-bg-soft:#F7F9FC;
--sslf-text:#1f2937; --sslf-muted:#6b7280; --sslf-border:#e5e7eb;
--shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
--shadow-md:0 8px 20px rgba(15,23,42,.08);
--shadow-lg:0 24px 50px -18px rgba(15,23,42,.25);
--radius:12px; --transition:.28s cubic-bezier(.4,0,.2,1);
font-family:"Inter",system-ui,-apple-system,sans-serif;
color:var(--sslf-text); background:var(--sslf-bg); overflow-x:hidden;
}
.sslf-registration-page h1,.sslf-registration-page h2,.sslf-registration-page h3{
font-family:"Poppins",system-ui,-apple-system,sans-serif; margin:0; line-height:1.2;
}
.sslf-registration-page *{box-sizing:border-box;}
.sslf-registration-page .wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
.sslf-registration-page .eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.sslf-registration-page section{padding:80px 0;}
.sslf-registration-page .btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 26px; border-radius:var(--radius); font-weight:600; font-size:15px;
text-decoration:none; border:2px solid transparent; transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
cursor:pointer;
}
.sslf-registration-page .btn:hover{transform:translateY(-2px);}
.sslf-registration-page .btn-orange{background:var(--sslf-orange); color:#fff; box-shadow:var(--shadow-md);}
.sslf-registration-page .btn-orange:hover{background:var(--sslf-orange-dark);}
.sslf-registration-page .btn-navy-outline{background:transparent; color:var(--sslf-navy); border-color:var(--sslf-navy);}
.sslf-registration-page .btn-navy-outline:hover{background:var(--sslf-navy); color:#fff;}
.sslf-registration-page svg{width:22px;height:22px;}
.sslf-registration-page .hero .wrap{position:relative; z-index:2;}
.sslf-registration-page .hero-content{max-width:560px;}
.sslf-registration-page .hero .eyebrow{color:var(--sslf-orange);}
.sslf-registration-page .hero h1{font-size:clamp(28px,3.8vw,42px); font-weight:700; margin-top:12px; color:var(--sslf-navy-dark);}
.sslf-registration-page .hero h1 .accent{color:var(--sslf-green);}
.sslf-registration-page .hero .rule{width:56px; height:3px; background:var(--sslf-orange); border-radius:2px; margin:18px 0;}
.sslf-registration-page .hero p.body{font-size:15px; color:var(--sslf-muted); margin-top:0; line-height:1.8; max-width:460px;}
.sslf-registration-page .hero .cta-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:28px;}
/* ---------- TRUST BAR ---------- */
.sslf-registration-page .trust-bar{
background:var(--sslf-navy-dark); padding:0; position:relative; z-index:3;
}
.sslf-registration-page .trust-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
background:rgba(255,255,255,.08); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
}
.sslf-registration-page .trust-card{
background:var(--sslf-navy-dark); padding:28px 22px; color:#fff;
}
.sslf-registration-page .trust-card .ic{
width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:#fff;
}
.sslf-registration-page .trust-card h3{
color: white;
font-size:15.5px; font-weight:700;}
.sslf-registration-page .trust-card p{font-size:13px; color:#c3d1e6; margin-top:8px; line-height:1.6;}
/* ---------- CERT GRID ---------- */
.sslf-registration-page .cert-section{padding-top:120px;}
.sslf-registration-page .section-head{max-width:680px; margin:0 auto 12px; text-align:center;}
.sslf-registration-page .section-head .divider{
display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px;
color:var(--sslf-orange); font-size:12px;
}
.sslf-registration-page .section-head .divider .line{width:36px; height:1px; background:var(--sslf-orange);}
.sslf-registration-page .section-head h2{font-size:clamp(26px,3.2vw,34px); font-weight:700;}
.sslf-registration-page .section-head p{color:var(--sslf-muted); font-size:15.5px; margin-top:12px; line-height:1.7;}
.sslf-registration-page .cert-row{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px;}
.sslf-registration-page .cert-row.row-3{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:900px; margin-left:auto; margin-right:auto; margin-top:22px;}
.sslf-registration-page .cert-card{
background:#fff; border:1px solid var(--sslf-border); border-radius:var(--radius);
padding:20px; box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition);
display:flex; flex-direction:column;
}
.sslf-registration-page .cert-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.sslf-registration-page .cert-thumb{
aspect-ratio:4/3; border-radius:8px; overflow:hidden; margin-bottom:16px;
background:repeating-linear-gradient(135deg,#eef2f7 0 10px,#f7f9fc 10px 20px);
border:1px dashed #c9d4e3; display:flex; align-items:center; justify-content:center; color:#9fb0c7;
}
.sslf-registration-page .cert-thumb img{width:100%;height:100%;object-fit:cover;}
.sslf-registration-page .cert-thumb svg{width:34px;height:34px;}
.sslf-registration-page .cert-card h3{font-size:15px; font-weight:700; min-height:40px;}
.sslf-registration-page .cert-meta{font-size:12.5px; color:var(--sslf-muted); margin-top:10px;}
.sslf-registration-page .cert-meta strong{display:block; font-size:13px; color:var(--sslf-text); letter-spacing:.02em; margin-top:2px;}
.sslf-registration-page .cert-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px;}
.sslf-registration-page .status-pill{
display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:999px;
font-size:11px; font-weight:700; letter-spacing:.04em;
}
.sslf-registration-page .status-pill.approved{background:#e9f7ec; color:var(--sslf-green-dark); border:1px solid #bfe6c5;}
.sslf-registration-page .status-pill.active{background:#eaf1fb; color:var(--sslf-navy); border:1px solid #cddcf3;}
.sslf-registration-page .status-pill.registered{background:#fff4e8; color:var(--sslf-orange-dark); border:1px solid #fcd9ad;}
.sslf-registration-page .view-btn{
display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
color:var(--sslf-navy); background:none; border:none; cursor:pointer;
}
.sslf-registration-page .view-btn svg{width:15px;height:15px;}
/* ---------- IMPORTANT INFO ---------- */
.sslf-registration-page .info-strip{
margin-top:56px; background:#eaf1fb; border:1px solid #cddcf3; border-radius:var(--radius);
padding:26px 30px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:flex-start;
}
.sslf-registration-page .info-strip .badge{
width:44px; height:44px; border-radius:50%; background:var(--sslf-navy); color:#fff;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sslf-registration-page .info-strip h4{font-size:14px; font-weight:700; margin-bottom:12px;}
.sslf-registration-page .info-list{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.sslf-registration-page .info-list div{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--sslf-text);}
.sslf-registration-page .info-list svg{width:16px;height:16px; color:var(--sslf-green); flex-shrink:0; margin-top:2px;}
/* ---------- REQUEST COPY CTA ---------- */
.sslf-registration-page .request-cta{
background:#fff6ec; border-top:1px solid #fbe4c4;
}
.sslf-registration-page .request-grid{
display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
}
.sslf-registration-page .request-icon{
width:64px; height:64px; border-radius:50%; background:#fff; border:1px solid #fbe4c4; color:var(--sslf-orange);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sslf-registration-page .request-icon svg{width:28px;height:28px;}
.sslf-registration-page .request-text h3{font-size:20px; font-weight:700;}
.sslf-registration-page .request-text p{color:var(--sslf-muted); font-size:14.5px; margin-top:10px; line-height:1.7; max-width:600px;}
.sslf-registration-page .request-cta-side{text-align:right;}
.sslf-registration-page .request-cta-side small{display:block; margin-top:10px; color:var(--sslf-muted); font-size:12px; max-width:220px; margin-left:auto;}
/* ===== Extracted from resources-and-information-page.php ===== */
/* ============================================================
PAGE-SPECIFIC STYLES (Resources & Information)
Built on top of the site's global root variables & .btn / .section
utilities already defined in the global stylesheet.
============================================================ */
/* ---------- Breadcrumb ---------- */
.ri-breadcrumb{font-size:13px;font-weight:700;letter-spacing:.5px;margin-bottom:18px}
.ri-breadcrumb a{color:var(--sslf-navy)}
.ri-breadcrumb span{color:var(--sslf-orange);margin:0 6px}
.ri-breadcrumb .current{color:var(--sslf-orange)}
/* ---------- Hero Banner (background image, content left) ---------- */
.ri-hero{
position:relative;
min-height:520px;
display:flex;
align-items:center;
background-image:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.85) 32%,rgba(15,61,117,.35) 62%,rgba(15,61,117,.15) 100%),
url("https://shyamsharanam.org/wp-content/uploads/2026/08/resources-and-information-page.webp");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius:var(--radius);
overflow:hidden;
}
.ri-hero .ri-hero-inner{
position:relative;
z-index:2;
max-width:620px;
padding:60px 20px;
}
.ri-hero h1{
font-weight:800;
font-size:48px;
color:var(--sslf-text);
margin-bottom:14px;
}
.ri-hero h1 .accent{color:var(--sslf-green)}
.ri-hero .ri-underline{
display:block;
width:70px;
height:4px;
background:var(--sslf-orange);
border-radius:2px;
margin-bottom:20px;
}
.ri-hero p{
color:var(--sslf-muted);
font-size:16px;
max-width:480px;
margin-bottom:28px;
}
/* ---------- Resource / Info Cards ---------- */
.ri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ri-card{
background:#fff;
border:1px solid var(--sslf-border);
border-radius:var(--radius);
padding:32px 24px;
text-align:center;
box-shadow:var(--shadow-sm);
transition:transform var(--transition), box-shadow var(--transition);
}
.ri-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.ri-card-icon{
width:64px;height:64px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
margin:0 auto 18px;font-size:26px;
}
.ri-card h3{font-size:19px;margin-bottom:10px}
.ri-card p{color:var(--sslf-muted);font-size:14.5px;margin-bottom:22px;min-height:66px}
.ri-icon-navy{background:#e7f0fb;color:var(--sslf-navy)}
.ri-icon-orange{background:#fef0e2;color:var(--sslf-orange)}
.ri-icon-green{background:#e7f5e8;color:var(--sslf-green)}
.ri-icon-purple{background:#f1e9fd;color:var(--sslf-purple)}
/* ---------- Quick Information (soft/grey cards) ---------- */
.ri-section-soft{background:var(--sslf-bg-soft)}
.ri-card-soft{
background:#eef1f5;
border:1px solid var(--sslf-border);
border-radius:var(--radius);
padding:32px 24px;
text-align:center;
}
.ri-card-soft h3{font-size:18px;margin-bottom:10px}
.ri-card-soft p{color:var(--sslf-muted);font-size:14.5px;margin-bottom:22px;min-height:66px}
/* ---------- CTA Strip ---------- */
.ri-cta{
background:linear-gradient(135deg,var(--sslf-navy-dark),var(--sslf-green-dark));
border-radius:var(--radius);
padding:30px 36px;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.ri-cta-left{display:flex;align-items:center;gap:20px}
.ri-cta-icon{
width:56px;height:56px;border-radius:50%;background:#fff;
display:flex;align-items:center;justify-content:center;color:var(--sslf-green);font-size:22px;flex-shrink:0;
}
.ri-cta h3{color:#fff;font-size:22px;margin-bottom:6px}
.ri-cta p{color:rgba(255,255,255,.85);font-size:14.5px;margin:0;max-width:520px}
/* ===== Extracted from single.php ===== */
/* =====================================================================
LEGACY INLINE-STYLE MIGRATION UTILITIES
Static template presentation rules are centralized here; dynamic values
remain data-driven in markup where required.
===================================================================== */
.ss-u-02b10d66{font-size:32px;color:#fff}
.ss-u-03fdf3ed{background:var(--sslf-orange);color:#fff}
.ss-u-04e859c0{background:linear-gradient(135deg,#1E3A8A,#3b5bc9);color:#fff;padding:38px;border-radius:20px}
.ss-u-0575df5a{color:var(--sslf-orange,#F58220)}
.ss-u-09ce91b6{background:var(--sslf-bg-soft)}
.ss-u-0c6a6477{background:var(--sslf-pink)}
.ss-u-0c8e3e21{margin:0 0 16px;color:var(--sslf-navy,#0F3D75);display:flex;align-items:center;gap:8px}
.ss-u-0f5897d1{margin:0 0 16px;color:rgba(255,255,255,.8);font-size:.9rem}
.ss-u-1072fa76{font-weight:700;color:#1E3A8A}
.ss-u-118cbe97{background:#3F7E44}
.ss-u-14e48af9{grid-column:1/-1; text-align:center; color:var(--sslf-muted)}
.ss-u-159b0ee4{font-size:13px;color:#c7d2fe}
.ss-u-1d34c094{max-width:900px}
.ss-u-1eb5d029{background:linear-gradient(135deg,var(--sslf-navy),#1b5aa8)}
.ss-u-1ef45ddf{width:70px;height:70px;background:rgba(255,255,255,.15);border-radius:16px;display:grid;place-items:center;font-size:30px;margin-bottom:18px}
.ss-u-21636a9e{background:#DD1367}
.ss-u-24b3c8c6{margin-bottom:70px}
.ss-u-24d308c0{margin-top:26px}
.ss-u-273a32c1{background:" . esc_attr($a[2]) . ";color:" . esc_attr($a[3]) . "}
.ss-u-29a27097{background:var(--sslf-green)}
.ss-u-29ff71d6{display:none;text-align:center;color:#6b7280;margin-top:20px}
.ss-u-2a1b75c9{display:block}
.ss-u-2a771314{background:#fff}
.ss-u-2aee2f2c{color:#dbe6f7}
.ss-u-2bd918f9{text-align:right;margin-top:24px}
.ss-u-2c6f0a3d{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.ss-u-31b5119e{width:100%;margin-bottom:10px}
.ss-u-33bc0e42{background:linear-gradient(135deg,#eef2ff,#f5f3ff);margin-top:40px;padding:30px;border-radius:16px}
.ss-u-352f9499{display:block;font-size:.92rem;font-weight:600;color:var(--sslf-text,#1f2937);line-height:1.3}
.ss-u-36b0417b{font-size:13px;color:#c7d2fe;margin:0 0 6px}
.ss-u-39c97000{background:#fff;border:1px solid var(--sslf-border,#e5e7eb);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm,0 1px 3px rgba(15,23,42,.06))}
.ss-u-3bc65892{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.ss-u-40c75f33{width:56px;height:56px;border-radius:10px;overflow:hidden;flex-shrink:0}
.ss-u-40d7417e{list-style:none;padding:0;margin:0}
.ss-u-40eead28{color:var(--sslf-navy,#0F3D75)}
.ss-u-41956e48{font-size:12px;color:var(--sslf-muted);margin-top:4px}
.ss-u-4260ebea{padding-top:0}
.ss-u-440252ef{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.ss-u-44e0029e{display:flex;flex-direction:column;gap:28px}
.ss-u-4c629856{padding:10px 0}
.ss-u-4dda25b5{color:var(--sslf-orange);background:rgba(245,130,32,.1)}
.ss-u-5021ff8b{margin-bottom:38px}
.ss-u-53d764fc{color:var(--sslf-green)}
.ss-u-55317d4e{background:linear-gradient(135deg,#1E3A8A,#3b5bc9);color:#fff}
.ss-u-5553b345{object-fit:cover;height:100%;min-height:280px}
.ss-u-56f43562{margin-top:12px}
.ss-u-57aac899{color:#6b7280;font-size:13px;margin:0}
.ss-u-5cdfbe5a{background:var(--sslf-navy-dark);color:#fff}
.ss-u-5e0faad2{font-size:13px}
.ss-u-5e1eb467{margin:0;color:#6b7280}
.ss-u-6002dd78{display:flex;gap:10px;flex-wrap:wrap}
.ss-u-60ce1dae{display:block;font-size:.8rem;color:var(--sslf-muted,#6b7280);margin-bottom:4px}
.ss-u-662c455e{color:#dbeafe;font-size:16px;line-height:1.7}
.ss-u-66a763e5{margin-top:14px;font-size:11px;color:#9ca3af}
.ss-u-66bd61bc{width:60px;height:60px;border-radius:50%;background:#1E3A8A;color:#fff;display:grid;place-items:center;font-size:22px}
.ss-u-699c050c{color:var(--sslf-green,#2E7D32)}
.ss-u-69c83e68{color:var(--sslf-purple)}
.ss-u-6b99de8b{display:none}
.ss-u-6d000617{margin-left:auto}
.ss-u-72389269{color:#16a34a}
.ss-u-729d2fa4{color:#fff}
.ss-u-72f30f81{margin-top:36px;background:linear-gradient(135deg,#1E3A8A,#3b5bc9);color:#fff;padding:28px;border-radius:16px;display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:center}
.ss-u-733e964a{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
.ss-u-75746910{width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;margin:0 auto 12px;color:#1E3A8A;font-size:24px}
.ss-u-78960fa3{color:var(--sslf-teal)}
.ss-u-7b1dd1f4{flex:1;min-width:200px}
.ss-u-7e524a6c{color:var(--sslf-muted,#6b7280)}
.ss-u-85b1dfb3{background:#e7f0fb;color:var(--sslf-navy)}
.ss-u-89082a13{background:#FF3A21}
.ss-u-8a3c5b5b{color:var(--sslf-navy)}
.ss-u-8d9c954e{background:#19486A}
.ss-u-8db4c30c{color:#1E3A8A;margin:0 0 20px}
.ss-u-91a87015{text-align:center}
.ss-u-92d0541a{display:block;font-size:.78rem;color:var(--sslf-muted,#6b7280);margin-top:2px}
.ss-u-96b67027{font-size:1.05rem}
.ss-u-9811bf05{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.ss-u-99a58887{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ss-u-9d5b5f66{color:#1E3A8A;font-size:15px;font-weight:800;font-family:Montserrat,sans-serif;margin:0 0 6px}
.ss-u-9ffad0c6{display:flex;align-items:center;gap:16px}
.ss-u-a03924f2{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);position:relative}
.ss-u-a12632f0{flex:1;min-width:200px;text-align:right}
.ss-u-a14c3b05{background:var(--sslf-navy,#0F3D75);border-radius:16px;padding:22px;color:#fff;text-align:center}
.ss-u-a2600b0e{font-size:28px}
.ss-u-a26bda7d{margin-top:20px}
.ss-u-a2b79658{color:#1E3A8A;margin:0 0 10px}
.ss-u-a4415d60{font-weight:700;color:#1E3A8A;margin-top:6px}
.ss-u-a56c85e3{display:flex;flex-direction:column;gap:10px}
.ss-u-a71217eb{font-size:13px;color:#c7d2fe;margin:0 0 12px}
.ss-u-affa6f49{border:2px solid var(--sslf-purple);color:var(--sslf-purple);background:#fff}
.ss-u-b06da1c6{background:#FD9D24}
.ss-u-b1bd7ab4{background:var(--sslf-navy)}
.ss-u-b59aaa4c{background:var(--sslf-purple);color:#fff}
.ss-u-b90f4237{text-align:center;margin-top:30px}
.ss-u-ba2cf611{background:" . esc_attr($c[2]) . ";color:" . esc_attr($c[3]) . "}
.ss-u-bab5de0c{text-align:center;color:#6b7280}
.ss-u-bb874b60{color:#fff;font-size:16px;line-height:1.7}
.ss-u-be4ba914{background:var(--sslf-teal)}
.ss-u-bf264347{padding-top:34px}
.ss-u-bf4a766f{color:#1E3A8A;margin:0;font-family:Montserrat,sans-serif}
.ss-u-c33ba39d{color:var(--sslf-orange)}
.ss-u-c5baf4cd{background:#A21942}
.ss-u-c5c886d0{font-size:56px;color:#fff}
.ss-u-c63aaf7d{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding-top:24px;border-top:1px solid var(--sslf-border,#e5e7eb);flex-wrap:wrap}
.ss-u-c7da9158{display:flex;flex-direction:column;gap:14px}
.ss-u-cdd73bd9{margin:0 0 8px;color:#fff}
.ss-u-ce32bdc0{margin-top:36px;background:linear-gradient(135deg,#eef2ff,#f5f3ff);padding:20px 26px;border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.ss-u-cf3a6f7a{color:#fff;margin:0 0 8px}
.ss-u-d6f2af6e{margin-top:14px}
.ss-u-d8738500{background:var(--sslf-purple)}
.ss-u-da2e4661{box-shadow:none;padding:0;border:0}
.ss-u-dc1f23f2{width:60px;height:60px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-size:22px}
.ss-u-dcc316ff{margin:0;color:#c7d2fe}
.ss-u-dee14c9f{color:#facc15}
.ss-u-e0139deb{color:#374151}
.ss-u-e020943c{background:#C5192D}
.ss-u-e3889086{background:var(--sslf-orange)}
.ss-u-e5430672{background:linear-gradient(135deg,#F97316,#fb923c);color:#fff;padding:38px;border-radius:20px}
.ss-u-e771a390{color:#16a34a;margin:0;font-family:Montserrat,sans-serif}
.ss-u-e7d543b7{text-align:center;padding:16px;background:#f8fafc;border-radius:10px}
.ss-u-ea8cc77a{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.ss-u-ece44abe{font-size:.92rem;font-weight:600;color:var(--sslf-text,#1f2937);line-height:1.3}
.ss-u-edbb08f3{padding:40px;background:#fff;border-radius:12px;color:#6b7280}
.ss-u-eed0f8fb{font-weight:600}
.ss-u-f1527561{background:#e8f5ec;color:var(--sslf-green)}
.ss-u-f41c49da{color:#F97316}
.ss-u-f4216f4b{margin-bottom:20px;border-radius:16px;overflow:hidden}
.ss-u-f99aa78a{font-size:13px;margin-top:8px}
.registration-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sslf-registration-page .hero{position:relative;overflow:hidden}
.sslf-registration-page .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#fff 0%,rgba(255,255,255,.96) 32%,rgba(255,255,255,.82) 48%,rgba(255,255,255,.35) 66%,rgba(255,255,255,.05) 82%);z-index:1}
.sslf-registration-page .hero>.container{position:relative;z-index:2}
.registration-icon-color-green{background:var(--sslf-green)}
.registration-icon-color-orange{background:var(--sslf-orange)}
.registration-icon-color-teal{background:var(--sslf-teal)}
/* Additional centralized utility classes migrated from legacy inline template CSS. */
.ss-u-366ed0fb{width:100%;height:220px;object-fit:cover}
.ss-u-3add65a4{max-height:64px;background:#fff;padding:6px;border-radius:8px;margin-bottom:12px}
.ss-u-6b8af399{display:block;padding:16px 20px;background:#fff;border:1px solid var(--sslf-border,#e5e7eb);border-radius:12px;text-decoration:none;transition:var(--transition,.28s)}
.ss-u-6d000617{margin-left:auto}
.ss-u-84e2569a{display:inline-block;background:var(--sslf-orange,#F58220);color:#fff;padding:10px 20px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem}
.ss-u-bbc51194{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
/* =========================================================
APPROVED HOME HERO — screenshot-matched dynamic banner
========================================================= */
.sslf-home-hero{
position:relative;
min-height:750px;
overflow:hidden;
background:#eef5fc var(--sslf-hero-image) center center / cover no-repeat;
}
.sslf-home-hero::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
}
.sslf-home-hero-inner{
position:relative;
z-index:2;
min-height:726px;
max-width:1600px;
margin:0 auto;
padding:0 40px;
}
.sslf-home-hero-content{
width:540px;
padding-top:52px;
}
.sslf-home-hero-content h1{
margin:0;
font-family:"Poppins","Inter",sans-serif;
font-size:54px;
line-height:1.17;
letter-spacing:-1.25px;
font-weight:800;
}
.sslf-home-hero-content .hero-line{display:block;white-space:nowrap}
.sslf-home-hero-content .hero-line-navy{color:#092a55}
.sslf-home-hero-content .hero-line-green{color:#087b42}
.sslf-home-hero-content .hero-line-orange{color:#f36b21}
.sslf-hero-accent{width:56px;height:4px;background:#f36b21;margin:12px 0 16px;position:relative}
.sslf-hero-accent::after{content:"";position:absolute;left:0;top:7px;width:56px;height:2px;background:#f36b21}
.sslf-home-hero-desc{
max-width:520px;
margin:0 0 21px;
color:#17233a;
font-size:15.5px;
line-height:1.72;
font-weight:500;
}
.sslf-home-hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sslf-hero-btn{
min-height:60px;
padding:0 18px;
border-radius:10px;
display:inline-flex;
align-items:center;
gap:12px;
font-family:"Poppins","Inter",sans-serif;
font-size:15px;
font-weight:700;
text-decoration:none!important;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.sslf-hero-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(9,42,85,.16)}
.sslf-hero-btn > i:first-child{font-size:23px}
.sslf-hero-btn > i:last-child{font-size:13px;margin-left:2px}
.sslf-hero-btn-primary{background:#0b2f78;color:#fff!important;border:1px solid #0b2f78;min-width:236px;justify-content:space-between}
.sslf-hero-btn-secondary{background:#fff;color:#0b2f78!important;border:2px solid #63ad89;min-width:252px;justify-content:space-between}
.sslf-hero-btn-secondary > i:first-child{color:#0b2f78}
.sslf-hero-feature-strip{
position:absolute;
left:0px;
bottom:26px;
width: 100%;
min-height:114px;
padding:14px 20px;
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
align-items:center;
background: rgb(255 255 255 / 75%);
border:1px solid rgba(210,220,235,.75);
border-radius:18px;
box-shadow:0 8px 28px rgba(12,38,75,.14);
}
.sslf-hero-feature{
min-width:0;
min-height:74px;
padding:7px 15px;
display:flex;
align-items:center;
gap:13px;
border-right:1px solid #d7dfeb;
}
.sslf-hero-feature:last-child{border-right:0}
.sslf-hero-feature-icon{
flex:0 0 48px;
width:48px;height:48px;
display:grid;place-items:center;
font-size:34px;
color:#0d3c82;
background:transparent;
}
.sslf-hero-feature:nth-child(2) .sslf-hero-feature-icon{color:#2a9b67}
.sslf-hero-feature:nth-child(3) .sslf-hero-feature-icon{color:#163d8d}
.sslf-hero-feature:nth-child(4) .sslf-hero-feature-icon{color:#f47b20}
.sslf-hero-feature:nth-child(5) .sslf-hero-feature-icon{color:#26975d}
.sslf-hero-feature:nth-child(6) .sslf-hero-feature-icon{color:#2b78bb}
.sslf-hero-feature-icon img{display:block;width:48px;height:48px;object-fit:contain;}
.sslf-hero-feature span{
color:#182337;
font-family:"Poppins","Inter",sans-serif;
font-size:12px;
line-height:1.45;
font-weight:600;
}
@media(max-width:1200px){
.sslf-home-hero-content{width:500px}
.sslf-home-hero-content h1{font-size:46px}
.sslf-home-hero-desc{font-size:14px;max-width:480px}
.sslf-hero-feature{padding:7px 9px;gap:8px}
.sslf-hero-feature-icon{flex-basis:40px;width:40px;height:40px;font-size:28px}
.sslf-hero-feature span{font-size:10.5px}
}
/* Hero Slides CPT: each slide owns its background image and editable overlay content. */
.hero-swiper.sslf-home-hero{position:relative;overflow:hidden;padding:0;}
.hero-swiper .swiper-slide{position:relative;min-height:690px;overflow:hidden;background:#f4f8fc;}
.ssf-home-hero-slide-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;}
.sslf-home-hero-slide-bg img{
width: 100%;
object-fit: cover;
height: 700px;
}
.hero-swiper .swiper-slide .sslf-home-hero-inner {
position: absolute;
z-index: 9;
top: 0;
width: 100%;
}
.hero-swiper .swiper-pagination{z-index:6;bottom:22px;}
.hero-swiper .swiper-button-next,.hero-swiper .swiper-button-prev{z-index:7;}
.header-cta .btn{
padding: 12px 8px;
max-width: 169px;
font-size: 13px;
}
/* Areas of Work Images */
.area-card {
overflow: hidden;
}
.area-image {
width: 100%;
height: 190px;
object-fit: cover;
display: block;
margin: 22px 0 18px;
border-radius: 12px;
}
/* Keep cards aligned */
.area-card {
justify-content: space-between;
display: flex;
flex-direction: column;
}
.area-card .area-link {
margin-top: auto;
}
/* Responsive */
@media (max-width: 768px) {
.area-image {
height: 180px;
}
}
@media (max-width: 480px) {
.area-image {
height: 200px;
}
}
.ss-u-31b5119e{
color: #000000 !important;
}