/* =====================================================
   EduOrbit (SMC-Private) Limited - Main Stylesheet
   Brand: Charcoal #1a1a1a + Orange-Red #dd3311
   ===================================================== */

:root {
  --brand:        #dd3311;
  --brand-dark:   #b8260a;
  --brand-light:  #ff5a33;
  --ink:          #1a1a1a;
  --ink-soft:     #2d2d2d;
  --bg-soft:      #f6f7f9;
  --grad-1: linear-gradient(135deg, #dd3311 0%, #ff7a45 100%);
  --grad-2: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
  --grad-hero: linear-gradient(135deg, #1a1a1a 0%, #2a1410 55%, #dd3311 130%);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.08);
  --shadow-md: 0 10px 30px rgba(0,0,0,.12);
  --shadow-brand: 0 10px 28px rgba(221,51,17,.32);
}

/* ---------- Base ---------- */
body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink-soft);
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--ink); }
a { text-decoration: none; }
.section { padding: 90px 0; }
.bg-soft { background: var(--bg-soft); }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; }

/* ---------- Buttons ---------- */
.btn-brand {
  background: var(--grad-1);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 50px;
  box-shadow: var(--shadow-brand);
  transition: transform .25s, box-shadow .25s;
}
.btn-brand:hover { color:#fff; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(221,51,17,.45); }
.btn-outline-brand {
  border: 2px solid var(--brand);
  color: var(--brand);
  font-weight: 600;
  padding: 10px 26px;
  border-radius: 50px;
  transition: all .25s;
}
.btn-outline-brand:hover { background: var(--brand); color:#fff; transform: translateY(-3px); }
.btn-dark-pill {
  background: var(--ink); color:#fff; border:none; font-weight:600;
  padding:12px 28px; border-radius:50px; transition: transform .25s;
}
.btn-dark-pill:hover { color:#fff; transform: translateY(-3px); }

/* ---------- Section heading ---------- */
.sec-tag {
  display:inline-block;
  background: rgba(221,51,17,.1);
  color: var(--brand);
  font-weight:600; font-size:.8rem;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:6px 16px; border-radius:50px; margin-bottom:14px;
}
.sec-title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; }
.sec-title span { color: var(--brand); }
.sec-line { width:70px; height:4px; background:var(--grad-1); border-radius:4px; }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 18px rgba(0,0,0,.06);
  padding: 12px 0;
  transition: padding .3s;
}
.navbar-brand img { height: 52px; }
.navbar .nav-link {
  font-weight: 600;
  color: var(--ink) !important;
  margin: 0 4px;
  position: relative;
}
.navbar .nav-link::after {
  content:''; position:absolute; left:50%; bottom:2px;
  width:0; height:2px; background:var(--brand); transition:.3s;
  transform:translateX(-50%);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after { width:60%; }
.navbar .nav-link.active { color: var(--brand) !important; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--ink);
  color: #d8d8d8;
  font-size: .85rem;
  padding: 8px 0;
}
.topbar a { color:#d8d8d8; transition:.2s; }
.topbar a:hover { color: var(--brand-light); }
.topbar .social a {
  display:inline-flex; width:30px; height:30px;
  align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.08); margin-left:6px;
}
.topbar .social a:hover { background: var(--brand); color:#fff; }

/* ---------- Hero ---------- */
.hero {
  background: var(--grad-hero);
  color:#fff;
  position:relative;
  padding: 130px 0 110px;
  overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(221,51,17,.55), transparent 70%);
}
.hero::after {
  content:''; position:absolute; bottom:-140px; left:-100px;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
}
.hero h1 { color:#fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.18; }
.hero h1 span { color: var(--brand-light); }
.hero p.lead { color:#cfcfcf; max-width:560px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  padding:7px 16px; border-radius:50px; font-size:.85rem; color:#eee;
  margin-bottom:18px;
}
.hero-orbit {
  width:100%; max-width:430px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
  background: var(--grad-hero);
  color:#fff; padding: 90px 0 70px;
  text-align:center; position:relative; overflow:hidden;
}
.page-banner::before {
  content:''; position:absolute; top:-100px; right:-80px;
  width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(221,51,17,.5), transparent 70%);
}
.page-banner h1 { color:#fff; font-size: clamp(1.8rem,3.5vw,2.8rem); }
.page-banner .breadcrumb { justify-content:center; margin:0; }
.page-banner .breadcrumb a { color: var(--brand-light); }
.page-banner .breadcrumb-item.active { color:#ddd; }
.page-banner .breadcrumb-item+.breadcrumb-item::before { color:#888; }

/* ---------- Cards ---------- */
.feature-card, .service-card, .tool-card {
  background:#fff;
  border-radius: 18px;
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s;
  height:100%;
  border:1px solid #eee;
}
.feature-card:hover, .service-card:hover, .tool-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
}
.icon-box {
  width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; color:#fff; margin-bottom:18px;
}
.ic-primary { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.ic-danger  { background:var(--grad-1); }
.ic-warning { background:linear-gradient(135deg,#f59e0b,#d97706); }
.ic-success { background:linear-gradient(135deg,#10b981,#059669); }
.ic-info    { background:linear-gradient(135deg,#06b6d4,#0891b2); }
.service-card .more {
  color:var(--brand); font-weight:600; font-size:.9rem;
}
.service-card .more i { transition: margin .25s; }
.service-card:hover .more i { margin-left:6px; }

/* ---------- Stats ---------- */
.stats {
  background: var(--grad-2);
  color:#fff; border-radius:22px;
  padding: 46px 20px;
}
.stat-num { font-size:2.6rem; font-weight:800; color:var(--brand-light); }
.stat-label { color:#cfcfcf; font-weight:500; }

/* ---------- Tool card ---------- */
.tool-card { text-align:center; }
.tool-card .badge-cat {
  background: rgba(221,51,17,.1); color:var(--brand);
  font-weight:600; font-size:.7rem; padding:4px 12px; border-radius:50px;
}
.tool-card .coming {
  font-size:.78rem; color:#aaa; font-style:italic;
}

/* ---------- CEO ---------- */
.ceo-photo {
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  border:6px solid #fff;
}
.ceo-quote {
  border-left:4px solid var(--brand);
  background:#fff; border-radius:0 14px 14px 0;
  padding:22px 26px; box-shadow:var(--shadow-sm);
  font-style:italic; color:#444;
}
.gallery-item img {
  border-radius:14px; width:100%; height:230px;
  object-fit:cover; transition: transform .4s;
}
.gallery-item { overflow:hidden; border-radius:14px; position:relative; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-item .cap {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(0,0,0,.8));
  color:#fff; padding:30px 16px 14px; font-size:.85rem; font-weight:500;
}

/* ---------- Portfolio ---------- */
.portfolio-card { overflow:hidden; border-radius:18px; position:relative; }
.portfolio-card img { width:100%; height:260px; object-fit:cover; transition:transform .5s; }
.portfolio-card:hover img { transform:scale(1.1); }
.portfolio-overlay {
  position:absolute; inset:0;
  background:linear-gradient(transparent 40%, rgba(26,26,26,.92));
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; opacity:0; transition:opacity .35s;
}
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-overlay .cat { color:var(--brand-light); font-size:.78rem; font-weight:600; letter-spacing:1px; }
.portfolio-overlay h5 { color:#fff; margin:4px 0; }

/* ---------- Blog ---------- */
.blog-card { background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:.3s; height:100%; }
.blog-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-md); }
.blog-card img { width:100%; height:210px; object-fit:cover; }
.blog-card .body { padding:22px; }
.blog-meta { font-size:.8rem; color:#999; }

/* ---------- Testimonials ---------- */
.testi-card {
  background:#fff; border-radius:18px; padding:30px;
  box-shadow:var(--shadow-sm); height:100%;
}
.testi-card .stars i { color:#f5b301; }
.testi-card .quote-ic { font-size:2.4rem; color:var(--brand); opacity:.25; }

/* ---------- CTA ---------- */
.cta {
  background: var(--grad-1);
  color:#fff; border-radius:24px; padding:54px 40px;
  position:relative; overflow:hidden;
}
.cta::before {
  content:''; position:absolute; top:-80px; right:-60px;
  width:240px; height:240px; border-radius:50%;
  background:rgba(255,255,255,.12);
}
.cta h2 { color:#fff; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius:10px; padding:12px 16px; border:1.5px solid #e3e3e3;
}
.form-control:focus, .form-select:focus {
  border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(221,51,17,.15);
}
.contact-info-card {
  background:#fff; border-radius:16px; padding:26px;
  box-shadow:var(--shadow-sm); height:100%;
}
.contact-info-card .ic {
  width:54px; height:54px; border-radius:14px; background:var(--grad-1);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:14px;
}

/* ---------- Footer ---------- */
.footer { background:var(--ink); color:#bdbdbd; padding:64px 0 0; }
.footer h5 { color:#fff; margin-bottom:20px; }
.footer img.f-logo { height:54px; margin-bottom:16px; }
.footer a { color:#bdbdbd; transition:.2s; }
.footer a:hover { color:var(--brand-light); padding-left:4px; }
.footer ul { list-style:none; padding:0; }
.footer ul li { margin-bottom:10px; }
.footer .social a {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08); display:inline-flex;
  align-items:center; justify-content:center; margin-right:8px;
}
.footer .social a:hover { background:var(--brand); color:#fff; padding-left:0; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:50px; padding:20px 0; font-size:.85rem;
}

/* ---------- WhatsApp float ---------- */
.wa-float {
  position:fixed; right:22px; bottom:22px; z-index:999;
  width:58px; height:58px; border-radius:50%;
  background:#25d366; color:#fff; font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(37,211,102,.5);
  animation: pulse 2.2s infinite;
}
.wa-float:hover { color:#fff; }
@keyframes pulse {
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity:0; transform:translateY(40px); transition:all .7s ease; }
.reveal.show { opacity:1; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .section { padding:64px 0; }
  .hero { padding:90px 0 70px; }
  .navbar .nav-link::after { display:none; }
}