/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1756810864
Updated: 2025-09-02 11:01:04

*/





 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#0F172A;
  --navy-soft:#1E293B;
  --blue:#2563EB;
  --teal:#14B8A6;
  --teal-bright:#2DD4BF;
  --canvas:#F8FAFC;
  --surface:#F1F5F9;
  --slate:#475569;
  --slate-light:#94A3B8;
  --border:#E2E8F0;
  --white:#FFFFFF;
  --purple:#7C3AED;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 48px rgba(15,23,42,0.12);
  --maxw: 1380px;
}
body {
 
    padding: 0px 0px !important; 
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  font-family:'Inter',sans-serif;
  color:var(--navy);
  background:var(--canvas);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:'Sora',sans-serif; color:var(--navy); line-height:1.15; letter-spacing:-0.02em; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal); margin-bottom:14px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:10px; font-weight:600; font-size:15px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--navy); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:#1a2740; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--white); color:var(--navy); border:1px solid var(--border); }
.btn-secondary:hover{ border-color:var(--navy); transform:translateY(-1px); }
.btn-teal{ background:var(--teal); color:var(--white); }
.btn-teal:hover{ background:#0d9c8c; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-ghost{ color:var(--navy); font-weight:600; font-size:14.5px; padding:8px 4px; }
.btn-ghost svg{ transition:transform .18s ease; }
.btn-ghost:hover svg{ transform:translateX(3px); }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(248,250,252,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
header.scrolled{ border-bottom-color:var(--border); box-shadow:0 1px 0 rgba(15,23,42,0.02); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-family:'Playfair Display',serif; font-size:26px; font-weight:500; color:var(--navy); }
.logo span{ color:var(--teal); }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--slate); transition:color .15s ease; }
.nav-links a:hover{ color:var(--navy); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-actions .signin{ font-size:14.5px; font-weight:600; color:var(--navy); padding:8px 10px; }
.menu-toggle{ display:none; }
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{ display:flex; align-items:center; gap:5px; font-size:14.5px; font-weight:500; color:var(--slate); background:none; border:none; cursor:pointer; padding:0; font-family:inherit; transition:color .15s ease; }
.nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger{ color:var(--navy); }
.nav-dropdown-trigger svg{ transition:transform .2s ease; }
.nav-dropdown.open .nav-dropdown-trigger svg{ transform:rotate(180deg); }
.nav-dropdown-panel{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-6px); background:var(--white); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px; min-width:180px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:50; }
.nav-dropdown.open .nav-dropdown-panel{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dropdown-panel a{ display:block; padding:9px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--slate); }
.nav-dropdown-panel a:hover, .nav-dropdown-panel a.active{ background:var(--surface); color:var(--navy); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:96px 0 88px; }
.hero-mesh{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 420px at 78% 8%, rgba(20,184,166,0.16), transparent 60%),
    radial-gradient(480px 360px at 15% 30%, rgba(37,99,235,0.10), transparent 60%);
  animation: driftMesh 18s ease-in-out infinite alternate;
}
@keyframes driftMesh{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-16px,10px) scale(1.03);} }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero h1{ font-size:52px; font-weight:700; margin-bottom:22px; max-width:590px; }
.hero .spark{ position:relative; color:var(--teal); }
.hero .spark::after{
  content:''; position:absolute; top:-6px; right:-16px; width:8px; height:8px; border-radius:50%;
  background:var(--teal); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.4; transform:scale(0.7);} }
.hero p.lead{ font-size:18px; color:var(--slate); max-width:490px; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:14px; margin-bottom:38px; flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--slate-light); }
.avatars{ display:flex; }
.avatars span{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--canvas);
  margin-left:-8px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--white);
}
.avatars span:first-child{ margin-left:0; }

.hero-visual{ position:relative; }
.mentor-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:26px; max-width:400px; margin-left:auto;
}
.mentor-card .mc-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.mc-dot{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--teal), var(--blue)); display:flex; align-items:center; justify-content:center; color:white; font-family:'Sora'; font-weight:700; font-size:15px; flex-shrink:0; }
.mc-name{ font-family:'Sora'; font-weight:600; font-size:15px; }
.mc-role{ font-size:12.5px; color:var(--slate-light); }
.mc-msg{ background:var(--surface); border-radius:12px 12px 12px 4px; padding:14px 16px; font-size:14px; color:var(--navy-soft); margin-bottom:12px; line-height:1.5; }
.mc-msg.right{ background:var(--navy); color:var(--white); border-radius:12px 12px 4px 12px; margin-left:36px; }
.mc-chip-row{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.mc-chip{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px; background:var(--surface); color:var(--slate); }
.float-badge{
  position:absolute; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
}
.float-badge.b1{ top:-18px; left:-24px; animation: floatY 5s ease-in-out infinite; }
.float-badge.b2{ bottom:12px; left:-36px; animation: floatY 6s ease-in-out infinite reverse; }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.float-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); }


/* ---------- Trust bar ---------- */
.trustbar{ padding:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trustbar p{ text-align:center; font-size:12.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-light); margin-bottom:26px; }
.logo-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; opacity:0.55; }
.logo-row span{ font-family:'Sora'; font-weight:700; font-size:17px; color:var(--slate); letter-spacing:0.01em; }

/* ---------- Section shell ---------- */
section{ padding:100px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:36px; margin-bottom:14px; }
.section-head p{ font-size:16.5px; color:var(--slate); }

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.svc-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:28px 24px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.svc-icon{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.svc-card h3{ font-size:17px; margin-bottom:8px; }
.svc-card p{ font-size:14px; color:var(--slate); margin-bottom:16px; }
.svc-card .tag{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:6px; }

/* ---------- Why choose ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.why-card{ background:var(--white); padding:38px; }
.why-card .num{ font-family:'Sora'; font-weight:700; font-size:13px; color:var(--teal); margin-bottom:14px; letter-spacing:0.04em; }
.why-card h3{ font-size:20px; margin-bottom:10px; }
.why-card p{ font-size:14.5px; color:var(--slate); }

/* ---------- Process ---------- */
.process{ background:var(--navy); color:var(--white); }
.process .section-head h2, .process .section-head p{ color:var(--white); }
.process .section-head p{ color:#94A3B8; }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.process-grid::before{ content:''; position:absolute; top:23px; left:0; right:0; height:1px; background:rgba(255,255,255,0.14); }
.proc-step{ position:relative; padding-right:20px; }
.proc-num{
  width:46px; height:46px; border-radius:50%; background:var(--navy-soft); border:1px solid rgba(255,255,255,0.16);
  display:flex; align-items:center; justify-content:center; font-family:'Sora'; font-weight:700; font-size:16px;
  color:var(--teal-bright); margin-bottom:22px; position:relative; z-index:1;
}
.proc-step h3{ font-size:17px; color:var(--white); margin-bottom:8px; }
.proc-step p{ font-size:14px; color:#94A3B8; }

/* ---------- Stats ---------- */
.stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:52px 0; }
.stat{ text-align:center; }
.stat .num{ font-family:'Sora'; font-weight:700; font-size:38px; color:var(--navy); }
.stat .num span{ color:var(--teal); }
.stat .label{ font-size:13.5px; color:var(--slate); margin-top:6px; }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; }
.testi-stars{ color:var(--teal); font-size:14px; margin-bottom:16px; letter-spacing:2px; }
.testi-quote{ font-size:15px; color:var(--navy-soft); margin-bottom:22px; line-height:1.6; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-family:'Sora'; font-weight:700; font-size:13px; }
.testi-name{ font-size:14px; font-weight:600; }
.testi-role{ font-size:12.5px; color:var(--slate-light); }

/* ---------- Insights ---------- */
.insights-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.insight-card{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); background:var(--white); transition:transform .2s ease, box-shadow .2s ease; }
.insight-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.insight-thumb{ height:150px; background:linear-gradient(135deg, var(--surface), var(--border)); position:relative; overflow:hidden; }
.insight-thumb::after{ content:''; position:absolute; inset:0; background:radial-gradient(220px 140px at 30% 20%, rgba(20,184,166,0.25), transparent 70%); }
.insight-body{ padding:22px; }
.insight-cat{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--teal); margin-bottom:10px; }
.insight-card h3{ font-size:16px; margin-bottom:10px; line-height:1.35; }
.insight-meta{ font-size:12.5px; color:var(--slate-light); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 4px; text-align:left; font-family:'Sora'; font-weight:600; font-size:16px; color:var(--navy); }
.faq-q svg{ flex-shrink:0; transition:transform .25s ease; color:var(--slate-light); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); color:var(--teal); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 4px 22px; font-size:14.5px; color:var(--slate); line-height:1.6; max-width:640px; }

/* ---------- Final CTA ---------- */
.final-cta{ background:linear-gradient(135deg, var(--navy) 0%, #142238 100%); color:var(--white); text-align:center; position:relative; overflow:hidden; }
.final-cta::before{ content:''; position:absolute; inset:0; background:radial-gradient(500px 300px at 50% -10%, rgba(20,184,166,0.22), transparent 70%); }
.final-cta .wrap{ position:relative; z-index:1; }
.final-cta h2{ color:var(--white); font-size:38px; max-width:560px; margin:0 auto 16px; }
.final-cta p{ color:#94A3B8; font-size:16.5px; margin-bottom:34px; }
.final-cta .hero-ctas{ justify-content:center; }

/* ---------- Footer ---------- */
footer{ background:var(--navy); color:#94A3B8; padding:64px 0 28px; }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; margin-bottom:48px; }
.footer-brand .logo{ color:var(--white); margin-bottom:10px; }
.footer-tagline{ font-size:11px; color:#64748B; letter-spacing:1.5px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.footer-tagline .rule{ width:16px; height:1px; background:#334155; display:inline-block; }
.footer-brand p{ font-size:14px; max-width:260px; margin-bottom:20px; }
.footer-col h4{ font-family:'Sora'; font-size:13px; color:var(--white); margin-bottom:16px; letter-spacing:0.03em; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ font-size:14px; color:#94A3B8; transition:color .15s ease; }
.footer-col a:hover{ color:var(--teal-bright); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-size:13px; flex-wrap:wrap; gap:12px; }
.social-row{ display:flex; gap:14px; }
.social-row a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; transition:background .15s ease; }
.social-row a:hover{ background:rgba(255,255,255,0.14); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- About hero ---------- */
.about-hero{ position:relative; overflow:hidden; padding:88px 0 70px; text-align:center; }
.about-hero-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 380px at 50% -10%, rgba(20,184,166,0.14), transparent 60%),
    radial-gradient(420px 320px at 85% 20%, rgba(37,99,235,0.09), transparent 60%);
}
.about-hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.about-hero h1{ font-size:48px; margin-bottom:20px; }
.about-hero p.lead{ font-size:18px; color:var(--slate); max-width:600px; margin:0 auto; }

/* ---------- Story ---------- */
.story-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; }
.story-grid h2{ font-size:32px; margin-bottom:22px; }
.story-grid p{ font-size:15.5px; color:var(--slate); margin-bottom:16px; }
.story-timeline{ border-left:2px solid var(--border); padding-left:28px; display:flex; flex-direction:column; gap:30px; }
.tl-item{ position:relative; }
.tl-item::before{ content:''; position:absolute; left:-33px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--teal); border:3px solid var(--canvas); }
.tl-year{ font-family:'Sora'; font-weight:700; font-size:13px; color:var(--teal); margin-bottom:6px; letter-spacing:0.03em; }
.tl-item h4{ font-size:16px; margin-bottom:6px; }
.tl-item p{ font-size:14px; color:var(--slate); }

/* ---------- Values ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.value-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 24px; transition:transform .2s ease, box-shadow .2s ease; }
.value-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.value-icon{ width:42px; height:42px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.value-card h3{ font-size:16.5px; margin-bottom:8px; }
.value-card p{ font-size:14px; color:var(--slate); }

/* ---------- Stats ---------- */
.stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:8px 0; }
.stat{ text-align:center; }
.stat .num{ font-family:'Sora'; font-weight:700; font-size:38px; color:var(--navy); }
.stat .num span{ color:var(--teal); }
.stat .label{ font-size:13.5px; color:var(--slate); margin-top:6px; }

/* ---------- Sage spotlight ---------- */
.sage-section{ background:var(--navy); color:var(--white); }
.sage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.sage-grid .eyebrow{ color:var(--teal-bright); }
.sage-grid .eyebrow::before{ background:var(--teal-bright); }
.sage-grid h2{ color:var(--white); font-size:32px; margin-bottom:18px; }
.sage-grid p{ color:#94A3B8; font-size:15.5px; margin-bottom:16px; }
.sage-points{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.sage-point{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:#CBD5E1; }
.sage-point svg{ flex-shrink:0; margin-top:2px; color:var(--teal-bright); }
.sage-visual{ background:var(--navy-soft); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:32px; }
.sage-avatar{ width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, var(--teal), var(--blue)); display:flex; align-items:center; justify-content:center; color:white; font-family:'Sora'; font-weight:700; font-size:20px; margin-bottom:18px; }
.sage-visual h4{ color:var(--white); font-size:18px; margin-bottom:8px; }
.sage-visual p{ color:#94A3B8; font-size:14px; margin-bottom:20px; }
.sage-stat-row{ display:flex; gap:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); }
.sage-stat-row div{ flex:1; }
.sage-stat-row .n{ font-family:'Sora'; font-weight:700; font-size:22px; color:var(--teal-bright); }
.sage-stat-row .l{ font-size:12px; color:#94A3B8; margin-top:4px; }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.team-card{ text-align:center; }
.team-avatar{ width:88px; height:88px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:white; font-family:'Sora'; font-weight:700; font-size:24px; }
.team-card h4{ font-size:15.5px; margin-bottom:4px; }
.team-card p{ font-size:13px; color:var(--slate-light); }

/* ---------- Final CTA ---------- */
.final-cta{ background:linear-gradient(135deg, var(--navy) 0%, #142238 100%); color:var(--white); text-align:center; position:relative; overflow:hidden; }
.final-cta::before{ content:''; position:absolute; inset:0; background:radial-gradient(500px 300px at 50% -10%, rgba(20,184,166,0.22), transparent 70%); }
.final-cta .wrap{ position:relative; z-index:1; }
.final-cta h2{ color:var(--white); font-size:34px; max-width:560px; margin:0 auto 14px; }
.final-cta p{ color:#94A3B8; font-size:16px; margin-bottom:30px; }
.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* blog css  */
.type-post {
	padding-top: 100px;
}

.type-post .wp-block-accordion-heading button {
	border: unset !important;
	    color: #444;
	font-size: 14px !important;
	justify-content: space-between;
    width: 100%;
    display: flex !important;
	text-align: left !important;
	padding-left: 0;
}
.cs.signin {
    display: none;
}
.cs.btn.btn-primary {
    display: none;
}
.academy-btn.academy-btn--bg-purple:hover {
    background: #0f172a !important;
    color: #FFF !important;
    z-index: 99999;
    opacity: 1;
}
.academy-single-course__title {
    color: #0f172a !important;
 
}

.pg-hero{ position:relative; overflow:hidden; padding:80px 0 40px; text-align:center; }
.pg-hero-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(560px 380px at 50% -10%, rgba(20,184,166,0.14), transparent 60%); }
.pg-hero-inner{ position:relative; z-index:1; max-width:600px; margin:0 auto; }
.pg-hero h1{ font-size:42px; margin-bottom:16px; }
.pg-hero p{ font-size:16.5px; color:var(--slate); }

.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; }
.contact-cards{ display:flex; flex-direction:column; gap:16px; }
.contact-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px 24px; display:flex; gap:16px; align-items:flex-start; }
.contact-icon{ width:40px; height:40px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-card h3{ font-size:15px; margin-bottom:4px; }
.contact-card p{ font-size:13.5px; color:var(--slate); margin-bottom:4px; }
.contact-card a.link{ font-size:13.5px; color:var(--teal); font-weight:600; }

.form-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-md); }
/* .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } */
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--navy); }
.field input, .field select, .field textarea{ width:100%; padding:12px 14px; border-radius:9px; border:1px solid var(--border); font-family:'Inter'; font-size:14.5px; color:var(--navy); background:var(--canvas); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.field{ margin-bottom:16px; }
.field textarea{ resize:vertical; min-height:110px; font-family:'Inter'; }
.form-note{ font-size:12px; color:var(--slate-light); margin-top:12px; text-align:center; }

/* ---------- Hero ---------- */
.cpd-hero{ position:relative; overflow:hidden; padding:88px 0 60px; }
.cpd-hero-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(560px 380px at 80% 0%, rgba(20,184,166,0.14), transparent 60%), radial-gradient(420px 320px at 10% 40%, rgba(37,99,235,0.09), transparent 60%); }
.cpd-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.cpd-hero h1{ font-size:46px; margin-bottom:20px; max-width:560px; }
.cpd-hero p.lead{ font-size:17px; color:var(--slate); max-width:480px; margin-bottom:30px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.accred-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.accred-chip{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--slate); background:var(--white); border:1px solid var(--border); padding:8px 14px; border-radius:20px; }
.accred-chip svg{ color:var(--teal); }

.tracker-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:30px; }
.tracker-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.tracker-head h4{ font-size:15px; }
.tracker-head span{ font-size:12.5px; color:var(--slate-light); }
.tracker-bar-bg{ height:10px; border-radius:6px; background:var(--surface); overflow:hidden; margin-bottom:10px; }
.tracker-bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg, var(--teal), var(--blue)); width:68%; }
.tracker-labels{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--slate-light); margin-bottom:22px; }
.tracker-rows{ display:flex; flex-direction:column; gap:12px; }
.tr-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--surface); border-radius:8px; font-size:13.5px; }
.tr-row .done{ color:var(--teal); font-weight:700; font-size:12px; }
.tr-row .pending{ color:var(--slate-light); font-weight:600; font-size:12px; }

/* ---------- What is CPD strip ---------- */
.info-strip{ background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.info-item{ display:flex; gap:14px; }
.info-num{ font-family:'Sora'; font-weight:700; color:var(--teal); font-size:15px; flex-shrink:0; }
.info-item h4{ font-size:15.5px; margin-bottom:6px; }
.info-item p{ font-size:13.5px; color:var(--slate); }

/* ---------- Course grid ---------- */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-pill{ padding:9px 16px; border-radius:20px; border:1px solid var(--border); background:var(--white); font-size:13px; font-weight:600; color:var(--slate); transition:all .18s ease; }
.filter-pill:hover{ border-color:var(--navy); color:var(--navy); }
.filter-pill.active{ background:var(--navy); color:var(--white); border-color:var(--navy); }

.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.course-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.course-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.course-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.course-tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:4px 10px; border-radius:6px; }
.course-hours{ font-family:'Sora'; font-weight:700; font-size:13px; color:var(--navy); background:var(--surface); padding:4px 10px; border-radius:6px; }
.course-card h3{ font-size:16.5px; margin-bottom:8px; }
.course-card p{ font-size:13.5px; color:var(--slate); margin-bottom:18px; flex:1; }
.course-foot{ display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid var(--border); }
.course-price{ font-family:'Sora'; font-weight:700; font-size:16px; }
.add-bundle{ font-size:12.5px; font-weight:600; color:var(--teal); display:flex; align-items:center; gap:5px; }
.add-bundle svg{ transition:transform .15s ease; }
.course-card.added .add-bundle{ color:var(--navy); }
.course-card.added .add-bundle svg{ transform:rotate(45deg); }

/* ---------- Bundles ---------- */
.bundle-strip{ background:var(--white); border-top:1px solid var(--border); }
.bundle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.bundle-card{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px; display:flex; flex-direction:column; background:var(--canvas); }
.bundle-card.highlight{ background:var(--navy); color:var(--white); border-color:var(--navy); position:relative; transform:scale(1.03); box-shadow:var(--shadow-lg); }
.bundle-ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--teal); color:white; font-size:11.5px; font-weight:700; padding:5px 14px; border-radius:20px; text-transform:uppercase; letter-spacing:0.04em; }
.bundle-card h3{ font-size:19px; margin-bottom:8px; }
.bundle-card.highlight h3{ color:var(--white); }
.bundle-card .price{ font-family:'Sora'; font-weight:700; font-size:34px; margin:10px 0 4px; }
.bundle-card .price span{ font-size:14px; font-weight:500; color:var(--slate-light); }
.bundle-card.highlight .price span{ color:#94A3B8; }
.bundle-card .desc{ font-size:13.5px; color:var(--slate); margin-bottom:22px; }
.bundle-card.highlight .desc{ color:#94A3B8; }
.bundle-feats{ display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1; }
.bundle-feat{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; }
.bundle-feat svg{ flex-shrink:0; margin-top:2px; color:var(--teal); }
.bundle-card.highlight .bundle-feat svg{ color:var(--teal-bright); }

/* ---------- Sage callout ---------- */
.sage-strip{ background:var(--navy); color:var(--white); }
.sage-strip-inner{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; }
.sage-mini-avatar{ width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, var(--teal), var(--blue)); display:flex; align-items:center; justify-content:center; color:white; font-family:'Sora'; font-weight:700; font-size:20px; flex-shrink:0; }
.sage-strip h3{ color:var(--white); font-size:19px; margin-bottom:6px; }
.sage-strip p{ color:#94A3B8; font-size:14px; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 4px; text-align:left; font-family:'Sora'; font-weight:600; font-size:15.5px; color:var(--navy); }
.faq-q svg{ flex-shrink:0; transition:transform .25s ease; color:var(--slate-light); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); color:var(--teal); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 4px 22px; font-size:14px; color:var(--slate); line-height:1.6; max-width:640px; }

section{ padding:96px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin:0 auto 52px; text-align:center; }
.section-head h2{ font-size:34px; margin-bottom:14px; }
.section-head p{ font-size:16px; color:var(--slate); }

.pg-hero{ position:relative; overflow:hidden; padding:88px 0 60px; text-align:center; }
.pg-hero-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(560px 380px at 50% -10%, rgba(20,184,166,0.14), transparent 60%); }
.pg-hero-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.pg-hero h1{ font-size:44px; margin-bottom:16px; }
.pg-hero p{ font-size:17px; color:var(--slate); }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.value-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px 22px; }
.value-card h3{ font-size:16px; margin-bottom:8px; }
.value-card p{ font-size:13.5px; color:var(--slate); }

.roles-list{ display:flex; flex-direction:column; gap:14px; }
.role-row{ display:flex; align-items:center; justify-content:space-between; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px 26px; transition:transform .18s ease, box-shadow .18s ease; }
.role-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.role-info h3{ font-size:16.5px; margin-bottom:6px; }
.role-meta{ display:flex; gap:10px; font-size:12.5px; color:var(--slate-light); }
.role-meta span{ background:var(--surface); padding:3px 10px; border-radius:6px; }

.process-strip{ background:var(--navy); color:var(--white); }
.process-strip .section-head h2, .process-strip .section-head p{ color:var(--white); }
.process-strip .section-head p{ color:#94A3B8; }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.process-grid::before{ content:''; position:absolute; top:23px; left:0; right:0; height:1px; background:rgba(255,255,255,0.14); }
.proc-step{ position:relative; padding-right:20px; }
.proc-num{ width:46px; height:46px; border-radius:50%; background:var(--navy-soft); border:1px solid rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; font-family:'Sora'; font-weight:700; font-size:16px; color:var(--teal-bright); margin-bottom:22px; position:relative; z-index:1; }
.proc-step h3{ font-size:16px; color:var(--white); margin-bottom:8px; }
.proc-step p{ font-size:13.5px; color:#94A3B8; }

.final-cta{ background:linear-gradient(135deg, var(--navy) 0%, #142238 100%); color:var(--white); text-align:center; position:relative; overflow:hidden; }
.final-cta::before{ content:''; position:absolute; inset:0; background:radial-gradient(500px 300px at 50% -10%, rgba(20,184,166,0.22), transparent 70%); }
.final-cta .wrap{ position:relative; z-index:1; }
.final-cta h2{ color:var(--white); font-size:32px; max-width:540px; margin:0 auto 14px; }
.final-cta p{ color:#94A3B8; font-size:15.5px; margin-bottom:28px; }
/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .mentor-card{ margin:0 auto; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .process-grid::before{ display:none; }
  .stats-bar{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .testi-grid, .insights-grid{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
   .story-grid{ grid-template-columns:1fr; gap:40px; }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-bar{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .sage-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .cpd-hero-inner{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:1fr; gap:24px; }
  .course-grid{ grid-template-columns:repeat(2,1fr); }
  .bundle-grid{ grid-template-columns:1fr; }
  .bundle-card.highlight{ transform:none; }
  .sage-strip-inner{ grid-template-columns:1fr; text-align:center; }
  .sage-mini-avatar{ margin:0 auto; }
}


@media(max-width:991px){

.menu-toggle{
    display:block;
}

.nav{
    flex-wrap:wrap;
}
	.cs.signin {
    display: block !important;
}
.cs.btn.btn-primary {
    display: block !important;
    color: #FFF !important;
    padding: 15px;
    margin-top: 15px;
}	
	.nav-links a {
    padding: 8px 0px;
}
	.nav-actions {
  
    display: none;
}
	  .wrap.nav{
        position: relative;
    }

    .menu-toggle{
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 1002;
    }

    .menu-toggle .close-icon{
        display: none;
    }

    .menu-toggle.active .menu-icon{
        display: none;
    }

    .menu-toggle.active .close-icon{
        display: block;
    }

    /* Menu */
    .nav-links{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 30px 24px;
        flex-direction: column;
        gap: 20px;
        z-index: 999;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
    }

    .nav-links.active{
        display: flex;
    }

    .nav-links a{
        display: block;
        width: 100%;
        font-size: 18px;
        color: #243B5A;
        text-decoration: none;
    }

    .nav-dropdown {
    width: 100%;
    padding: 8px 0px;
}
    .nav-dropdown-trigger{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: none;
        border: 0;
        padding: 0;
        font-size: 18px;
        cursor: pointer;
    }

    .nav-dropdown-panel{
        position: static;
        display: none;
        box-shadow: none;
        padding: 15px 0 0 15px;
    }
	.nav.nav-links a {
    padding: 5px 0px;
}

  .nav-dropdown.open .nav-dropdown-panel {
    display: contents;
}
	.nav-dropdown-panel a {
    font-size: 14px;
    color: #5c687b;
    line-height: 20px;
}

	.nav-dropdown-trigger:focus {
    background: unset;
    font-size: 18px !important;
    font-weight: 500;
    color: #273d5c !important;
    transition: color .15s ease;
    white-space: nowrap;
}
    .nav-actions{
        display: none;
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
    }

    .nav-actions.active{
        display: flex;
    }

    .nav-actions a{
        width: 100%;
        text-align: center;
    }

    .btn-primary{
        width: 100%;
    }

}
@media (max-width: 700px){
  .nav-links{ display:none; }
  .menu-toggle{ display:block; }
  .hero{ padding:56px 0 60px; }
  .hero h1{ font-size:36px; }
  .hero p.lead{ font-size:16px; }
  .section-head h2{ font-size:28px; }
  section{ padding:64px 0; }
  .services-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .testi-grid, .insights-grid{ grid-template-columns:1fr; }
  .stats-bar{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .float-badge{ display:none; }
  .final-cta h2{ font-size:28px; }
  .logo-row{ justify-content:center; gap:22px 32px; }
  .nav-links{ display:none; }
  .menu-toggle{ display:block; }
  .about-hero h1{ font-size:34px; }
  .about-hero p.lead{ font-size:16px; }
  .section-head h2{ font-size:28px; }
  section{ padding:64px 0; }
  .values-grid{ grid-template-columns:1fr; }
  .stats-bar{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .final-cta h2{ font-size:26px; }
	.type-post {
	padding-top: 60px;
}
  .nav-links{ display:none; }
  .menu-toggle{ display:block; }
  .cpd-hero h1{ font-size:32px; }
  section{ padding:60px 0; }
  .course-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }

}


.blog-loading{
    text-align:center;
    font-size:18px;
    padding:50px 0;
}

.blog-error{
    text-align:center;
    color:red;
    padding:50px 0;
}

#blogContainer.loading{
    opacity:.6;
    transition:.3s;
}


.blog-page{
    max-width:1320px;
    margin:80px auto;
    padding:0 20px;
}


.featured-blog{
    margin-bottom:70px;
}

.featured-blog-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.featured-content{
    width:50%;
}

.featured-image{
    width:50%;
}
.page-id-2671 span.elementor-icon-list-icon svg {
    max-width: unset !important;
}

.featured-image img{
    width:100%;
    display:block;
    border-radius:20px;
}

.featured-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: #54cabf30;
    color: #14b8a6;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}
section.blog-categories button.category-btn.active {
    color: #FFF !important;
    background: #14b8a6 !important;
}

.blog-categories  button.category-btn {
    color: #000 !important;
}

.featured-meta{
    display:flex;
    gap:15px;
    margin-bottom:20px;
    color:#777;
    font-size:15px;
}

.featured-content h1{
    font-size:48px;
    line-height:1.2;
    margin-bottom:25px;
}

.featured-content h1 a{
    color:#111;
    text-decoration:none;
}

.featured-content p{
    color:#666;
    line-height:1.8;
    font-size:17px;
}
#blogSearchForm {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

button.search-btn:hover {
    background: #14b8a6 !important;
    color: #FFF !important;
}

.blog-search{
    margin:60px 0 35px;
}
.page-id-2852 section {
    padding: 0px;
}

#blogSearch{
    width:100%;
    height:65px;
    border:1px solid #ddd;
    border-radius:60px;
    padding:0 25px;
    font-size:16px;
    outline:none;
}

#blogSearch:focus{
    border-color:#000;
}


.blog-categories{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:50px;
}

.category-btn{
    border:1px solid #ddd;
    background:#fff;
    padding:12px 22px;
    border-radius:40px;
    cursor:pointer;
    transition:.3s;
    font-size:15px;
}

.category-btn:hover{
    background:#000;
    color:#fff;
}

.category-btn.active{
    background:#000;
    color:#fff;
}

#blogContainer{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.blog-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    transition:.3s;
}

.blog-card:hover{
    transform:translateY(-5px);
}

.blog-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.blog-content{
    padding:25px;
}

.blog-date{
    color:#777;
    font-size:14px;
}

.blog-content h3{
    margin:15px 0;
    font-size:24px;
    line-height:1.4;
}
button.woocommerce-Button.button {
    background: #0f172a;
    border: none;
    color: #FFF;
    height: 50px;
    border-radius: 100px !important;
    width: max-content;
}
.hero-ctas a.btn.btn-secondary:hover {
    color: #FFFF !important;
}
section.hero a.btn.btn-secondary:hover {
    color: #0f172a !important;
}
section.cpd-hero a.btn.btn-secondary:hover {
    color: #0f172a !important;
}
section.final-cta a.btn.btn-secondary:hover {
    color: #FFF !important;
}
button.woocommerce-Button.button:hover{

	  background: #1cc68f !important;
    color: #FFF !important;
    z-index: 99999;
    opacity: 1;
}
.span-reading-time.rt-reading-time {
    display: none !important;
}
.blog-content h3 a{
    text-decoration:none;
    color:#111;
}
.cs-meta{
    display:flex;
    align-items:center;
    gap:25px;
    margin-bottom:20px;
}
article.cs-article.cs-single-table div#ez-toc-container {
    display: none;
}

.single-post span.span-reading-time.rt-reading-time {
    display: none !important;
}
.single-post .wp-block-accordion-heading__toggle-title {
    flex: 1;
    text-align: left;
}
.cs-date,
.cs-reading-time{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    color:#6B7280;
    font-weight:500;
}

.blog-content p{
    color:#666;
    line-height:1.8;
    margin-bottom:20px;
}

.read-more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    font-weight:600;
    color:#000;
}

.cs-single-hero{
    padding:60px 0;
}

.cs-single-hero .container{
    display:grid;
    grid-template-columns:60% 40%;
    gap:50px;
    align-items:center;
}

.cs-single-left img{
    width:100%;
    border-radius:20px;
}

.cs-single-right h1 {
    font-size: 42px;
    line-height: 52px;
    margin: 20px 0;
}
.cs-meta{
    display:flex;
    gap:15px;
    color:#666;
}

.cs-author{
    display:flex;
    gap:15px;
    align-items:center;
    margin-top:30px;
}

.cs-author img{
    border-radius:50%;
}


.cs-content-area{
    padding:70px 0;
}
.single-post .cs-article h2 {
    margin-top: 20px;
}

.single-post h3.wp-block-heading {
    padding-top: 20px;
    font-size: 20px;
    font-weight: 300;
}

.cs-content-area .container{
    display:grid;
    grid-template-columns:400px 1fr;
    gap:60px;
}

.single-post button.wp-block-accordion-heading__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    background: unset;
    border: none;
    padding: 10px 0px;
    text-decoration: none !important;
}
.single-post span.wp-block-accordion-heading__toggle-title strong {
    font-size: 18px;
    font-weight: 300;
    color: #0f172a;
}

.single-post .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}


.cs-sidebar{
    position:relative;
}

.toc-wrapper{

    position:sticky;
    top:120px;
    background:#fff;
    padding:25px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.toc-wrapper h3{
    margin-bottom:20px;
}


.cs-article{

    max-width:850px;

}

.cs-article h2{
    margin-top:60px;
}

.cs-article p{
    line-height:1.8;
}

.single-post .container {
    width: 100%;
    max-width: 1380px;
    padding: 0px 28px;
    margin: 0 auto;
}



.blog-loading,
.no-post,
.blog-error{
    grid-column:1/-1;
    text-align:center;
    padding:80px 0;
    font-size:22px;
}

#blogContainer.loading{
    opacity:.5;
}
.blog-search{
    margin:60px 0 35px;
}

#blogSearchForm{
    position:relative;
    max-width:600px;
}

#blogSearch{
    width:100%;
    height:60px;
    border:1px solid #ddd;
    border-radius:50px;
    padding:0 70px 0 20px;
    font-size:16px;
    outline:none;
}

.search-btn{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    background:#000;
    color:#fff;
    border-radius:50%;
    cursor:pointer;
    transition:.3s;
}

.search-btn:hover{
    background:#333;
}

.search-btn i{
    font-size:16px;
}


@media(max-width:991px){

.featured-blog-wrapper{
    flex-direction:column;
}

.featured-content,
.featured-image{
    width:100%;
}

.featured-content h1{
    font-size:34px;
}

#blogContainer{
    grid-template-columns:repeat(2,1fr);
}
	
.cs-single-hero .container,
.cs-content-area .container{

grid-template-columns:1fr;

}

.toc-wrapper{

position:relative;
top:0;
margin-bottom:40px;

}

.cs-single-hero .container, .cs-content-area .container {
    gap: 30px;
}

.cs-single-right h1 {
    font-size: 26px;
    line-height: 36px;
}

.cs-content-area {
    padding: 0px;
}
	.cs-article {
    max-width: 100%;
    overflow: hidden;
}


}


@media(max-width:767px){

.blog-page{
    margin:40px auto;
}

.featured-content h1{
    font-size:28px;
}

#blogContainer{
    grid-template-columns:1fr;
}

.blog-card img{
    height:220px;
}

.blog-categories{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:10px;
}

.category-btn{
    white-space:nowrap;
}

}