
/* =========================================================
   Ekaparnika UI Refresh — September 2026
   ========================================================= */
:root{
  --ek-primary:#2563eb;
  --ek-primary-dark:#173b8f;
  --ek-ink:#0f172a;
  --ek-muted:#64748b;
  --ek-soft:#f4f7fb;
  --ek-card:#ffffff;
  --ek-border:#e2e8f0;
  --ek-radius:18px;
}
body{background:#fff;color:var(--ek-ink);font-family:var(--default-font,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);}
.header{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(14px);border-bottom:1px solid rgba(15,23,42,.07);box-shadow:0 4px 24px rgba(15,23,42,.05);padding:12px 0!important;}
.header .container-fluid{max-width:1280px}
.header .logo img{height:42px;max-height:42px;width:auto;margin-right:10px}
.header .logo .sitename{font-size:23px;letter-spacing:.5px;font-weight:800;color:var(--ek-ink)}
.header .logo small{display:block;color:var(--ek-muted);font-size:10px;letter-spacing:1.4px;font-weight:700}
.header .navmenu>ul>li>a{font-size:14px;font-weight:600;padding:18px 12px!important}
.header .navmenu>ul>li>a:hover,.header .navmenu>ul>li>a.active{color:var(--ek-primary)}
.header .navmenu .dropdown ul{border-radius:14px;border:1px solid var(--ek-border);box-shadow:0 18px 45px rgba(15,23,42,.12);padding:10px}
.header .navmenu .dropdown ul a{border-radius:9px;padding:9px 12px!important;font-size:13px}
.header .navmenu .dropdown ul a:hover{background:#eff6ff;color:var(--ek-primary)}
.header .header-cta{display:inline-flex!important;align-items:center;gap:8px;background:var(--ek-primary);color:#fff!important;border-radius:999px;padding:10px 18px!important;margin-left:10px;font-weight:700!important}
.header .header-cta:hover{background:var(--ek-primary-dark);color:#fff!important}

.hero.section{padding:92px 0 86px;background:
 radial-gradient(circle at 85% 20%,rgba(37,99,235,.16),transparent 30%),
 linear-gradient(135deg,#f8fbff 0%,#eef5ff 55%,#fff 100%);position:relative;overflow:hidden}
.hero.section:before{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(37,99,235,.08);border-radius:50%;right:-150px;bottom:-180px}
.hero .hero-tag{background:#fff;border:1px solid #dbeafe;box-shadow:0 8px 25px rgba(37,99,235,.08);padding:9px 14px;border-radius:999px}
.hero h1{font-size:clamp(2.4rem,5vw,4.35rem)!important;line-height:1.05;letter-spacing:-1.8px}
.hero .lead{font-size:1.08rem;line-height:1.8;max-width:650px}
.hero .hero-image-wrapper{position:relative;max-width:520px;margin:auto}
.hero .hero-image{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:34px;box-shadow:0 28px 70px rgba(15,23,42,.16);border:10px solid #fff}
.hero .stat-card{background:#fff!important;border:1px solid var(--ek-border);box-shadow:0 16px 40px rgba(15,23,42,.12)!important;border-radius:16px!important;padding:16px 20px!important}
.hero .stat-value{color:var(--ek-primary)!important;font-weight:800!important}
.section{padding:78px 0}
.section-title h2{font-weight:800;letter-spacing:-.6px}
.section-title p{color:var(--ek-muted);max-width:700px;margin:8px auto 0}
.page-title{padding:72px 0 52px!important;background:linear-gradient(135deg,#f8fbff,#eef5ff)!important;border-bottom:1px solid #e8eef7}
.page-title h1{font-size:clamp(2rem,4vw,3.1rem)!important;font-weight:800!important;letter-spacing:-1px}
.page-title p{color:var(--ek-muted);font-size:1.05rem;max-width:720px}
.feature-box,.service-card,.contact-card,.contact-form-container,.about-content-box{
 background:var(--ek-card)!important;border:1px solid var(--ek-border)!important;border-radius:var(--ek-radius)!important;box-shadow:0 12px 34px rgba(15,23,42,.06)!important;
}
.feature-box{padding:30px!important}
.feature-box:hover,.service-card:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(15,23,42,.10)!important}
.service-card{padding:28px!important;position:relative;overflow:hidden}
.service-card:before{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--ek-primary);transition:.3s}
.service-card:hover:before{height:100%}
.service-card h3,.service-card h2{font-weight:750}
.service-card h3 a,.service-card h2 a{color:var(--ek-ink)}
.service-card h3 a:hover{color:var(--ek-primary)}
.service-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:15px;background:#eff6ff;color:var(--ek-primary);font-size:25px;margin-bottom:18px}
.service-card .read-more-btn{font-weight:700;color:var(--ek-primary)}
.light-background{background:#f7f9fc!important}
.btn-primary{background:var(--ek-primary)!important;border-color:var(--ek-primary)!important;border-radius:10px!important;padding:11px 20px!important;font-weight:700}
.btn-primary:hover{background:var(--ek-primary-dark)!important;border-color:var(--ek-primary-dark)!important}
.section .table{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--ek-border)}
.section .table th{background:#f1f5f9;font-weight:700}
.breadcrumbs-lite{display:flex;gap:8px;align-items:center;color:var(--ek-muted);font-size:13px;margin-bottom:14px}
.detail-hero{padding:60px 0 25px}
.detail-hero .eyebrow{color:var(--ek-primary);font-weight:800;text-transform:uppercase;letter-spacing:1.4px;font-size:12px}
.detail-hero h1{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:850;letter-spacing:-1px}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.detail-mini{padding:22px;border:1px solid var(--ek-border);border-radius:15px;background:#fff}
.detail-mini i{color:var(--ek-primary);font-size:23px}
.topic-list{list-style:none;padding:0;margin:0}
.topic-list li{padding:11px 0;border-bottom:1px solid #eef2f7;display:flex;gap:10px}
.topic-list li:before{content:"✓";color:var(--ek-primary);font-weight:800}
.cta-strip{background:linear-gradient(135deg,#0f2d6b,#2563eb);color:#fff;border-radius:24px;padding:40px}
.cta-strip h2{color:#fff}
.cta-strip p{color:rgba(255,255,255,.78)}
.contact-form-container{padding:32px}
.contact-form-container .form-control{border-radius:11px;border-color:#dbe3ee;padding:12px 14px}
.contact-card{padding:28px!important}
.contact-card p{display:flex;gap:10px;line-height:1.65}
.contact-card i{color:var(--ek-primary);margin-top:3px}
.footer{border-top:1px solid var(--ek-border)}
.footer .sitename{font-weight:800}
.footer .footer-links a:hover{color:var(--ek-primary)}
@media(max-width:1199px){.header .header-cta{display:none!important}}
@media(max-width:991px){
 .hero.section{padding:62px 0}.hero .hero-image-wrapper{margin-top:35px}
 .detail-grid{grid-template-columns:1fr}
 .section{padding:60px 0}
}
