/* emmanuelolega.com — site styles on top of the Fallow theme (Teachers variant).
   Theme files in static/fallow/ stay untouched; everything of ours lives here.
   Bump ?v= in templates/base.html when editing.

   Palette (own, deliberately different from Schoolara's green + yellow and TEP's navy + amber):
   indigo primary, coral accent, lavender-tinted neutrals. Change the variables below to retheme. */

:root {
  --eo-primary: #2662FA;        /* royal blue: buttons, links (Fallow default variation) */
  --eo-primary-dark: #042F9C;   /* blue hover */
  --eo-accent: #FDCC04;         /* yellow highlight, used sparingly (tags, underline, icons) */
  --eo-lime: #DAED1A;           /* lime highlight behind words */
  --eo-ink: #04091E;            /* navy text + footer */
  --eo-soft: #F4F6FF;           /* pale blue tint for alternate sections */
  --eo-muted: #747681;
  --eo-hero: url("../../fallow/assets/image/others/banner/Hero.jpg") no-repeat center/cover;
  --eo-inner: url("../../fallow/assets/image/others/banner/inner-bg.png") no-repeat center/cover;
  --eo-band: linear-gradient(135deg, #042F9C 0%, #2662FA 100%);
  --eo-cover: linear-gradient(145deg, #2662FA, #042F9C);
}

/* ---------- Theme colour overrides: Teachers variant (green + yellow) -> Fallow default (light + blue) ---------- */
body .hero { background: var(--eo-hero); min-height: 820px; }
body .hero .hero-content h1, body .hero .hero-content p { color: var(--eo-ink); }
body .header-three .hrader-left-item .text a, body .header-three .hrader-left-item .text p,
body .header-three .header-right-inner .icon i { color: var(--eo-ink); }
body .header-three .header-right-inner .icon i:hover { color: var(--eo-primary); }
body .about-hero { background: var(--eo-inner); }
body .about-hero .inner-bg-head h1, body .about-hero .inner-item h5, body .about-hero .inner-item a,
body .about-hero .inner-item .icon span { color: var(--eo-ink); }
/* Breadcrumb under the page title: the theme paints it white (meant for a dark banner). */
body .about-hero .inner-item .inner-text a { color: var(--eo-primary); }
body .about-hero .inner-item .inner-text h5 { color: var(--eo-ink); }
body .about-hero .inner-item .icon i { color: var(--eo-muted) !important; }
body .thought-teacher, body .eo-cta { background: var(--eo-band); }
body .eo-cta .thought-text h2 { color: #fff; }

body .btn-style-3 { background-color: var(--eo-primary); }
body .btn-style-3 a, body .btn-style-3 button { color: #fff; }
body .btn-style-3 a svg path { stroke: #fff; }
body .btn-style-3:hover { background-color: var(--eo-primary-dark); }
body .btn-style-3:hover a, body .btn-style-3:hover button { color: #fff; }
body .btn-style-1 { background-color: var(--eo-primary); }
body .btn-style-1:hover { background-color: var(--eo-primary-dark); }
body .back-to-top-3 i { background-color: var(--eo-primary); color: #fff; }

body .header-three .nav-main .menu ul li ul { border-top-color: var(--eo-primary); }
body .menu-bg .nav-main .menu ul li a:hover, body .header-three .nav-main .menu ul li a:hover { color: var(--eo-primary); }
body .menu-bg .nav-main .menu ul li a:after { background-color: var(--eo-primary); }
body .menu ul li.active > a { color: var(--eo-primary); }

body .about-4 .about-content h3, body .service-title h3, body .student-heading h3,
body .eo-plain .service-title h3, body .eo-plain .student-heading h3 { color: var(--eo-primary); }
body .form-control:focus, body .thought-teacher .form-control:focus { border-color: var(--eo-primary); box-shadow: none; }

body .footer-four .footer-logo-icon i:hover, body .footer-four .footer-logo-icon .active-one i { background-color: var(--eo-primary); color: #fff; }
body .footer-four .official-inner .icon i { color: var(--eo-accent); }
body .footer-four .official-btn-right { background-color: var(--eo-primary); }
body .footer-four .official-btn-right a { color: #fff; }
body .footer-four .official-btn-right:hover { background-color: #fff; }
body .footer-four .official-btn-right:hover a { color: var(--eo-ink); }
body .footer-four .footer-menu ul li a:hover, body .footer-four .footer-services-menu ul li a:hover { color: var(--eo-accent); }

/* Yellow marker under a word, as in the theme's "Richard Lord" headline */
.eo-mark { position: relative; display: inline-block; }
.eo-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 10px; background: var(--eo-lime); z-index: -1; border-radius: 2px; }

/* ---------- Logo (text, no image) ---------- */
.eo-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.eo-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--eo-primary); color: #fff;
  font-weight: 800; font-size: 16px; letter-spacing: .5px;
}
.eo-logo-text { font-weight: 700; font-size: 20px; color: var(--eo-ink); }
.eo-logo-light .eo-logo-text { color: #fff; }
.eo-logo-light .eo-logo-mark { background: var(--eo-primary); }
.eo-logo-img { height: 44px; width: auto; display: block; }
.about-tittle h3 a { color: inherit; }

/* ---------- Hero ---------- */
.eo-hero-kicker { font-weight: 600; color: var(--eo-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
.eo-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.eo-hero-btns input { display: none; }
body .eo-btn-outline { background: #fff !important; border: 2px solid var(--eo-primary); }
body .eo-btn-outline a { color: var(--eo-primary) !important; }
body .eo-btn-outline:hover { background: var(--eo-soft) !important; }
.eo-hero-photo .hero-inner-img img { border-radius: 24px; max-height: 520px; object-fit: cover; }

/* ---------- Generic bits ---------- */
.eo-section { padding-top: 60px; padding-bottom: 60px; }
.eo-tag {
  display: inline-block; background: rgba(38, 98, 250, .10); color: var(--eo-primary-dark);
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.eo-lead { font-size: 18px; color: #333; }
.eo-muted { color: var(--eo-muted); font-size: 14px; }
.eo-empty { color: var(--eo-muted); padding: 40px 0; }
.eo-more { margin-top: 30px; }
.eo-more a { font-weight: 600; color: var(--eo-primary); margin: 0 12px; }
.eo-more a:hover { color: var(--eo-primary-dark); }
/* Notices ("Thank you...", errors): a card in the bottom-right corner that fades away,
   because the header floats over the top of every page. */
.eo-messages {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: min(380px, calc(100% - 40px));
  padding: 0; animation: eo-toast-out .6s ease 7s forwards;
}
.eo-messages .alert {
  margin: 0 0 10px; padding: 16px 20px; border: 0; border-left: 4px solid var(--eo-primary); border-radius: 10px;
  background: #fff; color: var(--eo-ink); font-size: 16px; line-height: 1.5; box-shadow: 0 14px 40px rgba(4, 9, 30, .15);
}
.eo-messages .alert-success { border-left-color: #1f9d55; }
.eo-messages .alert-danger, .eo-messages .alert-error { border-left-color: #DE3D3E; }
.eo-messages .alert-warning { border-left-color: #f0ad4e; }
@keyframes eo-toast-out { to { opacity: 0; visibility: hidden; transform: translateY(10px); } }

/* Contact form: labels above roomy boxes */
.eo-contact-form .send .send-item .send-inner > div { flex: 1; }
.eo-contact-form .form-label { display: block; margin-bottom: 6px; }
.eo-contact-form .form-control { border-color: #e3e7f2; background: #fff; }
.eo-contact-form .mb-3 { margin-bottom: 18px !important; }
.eo-contact-form textarea.form-control { min-height: 160px; resize: vertical; }
@media (max-width: 767px) { .eo-contact-form .send .send-item .send-inner { flex-direction: column; gap: 0; } }
.eo-icon-circle {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--eo-soft); color: var(--eo-primary); font-size: 22px;
}
.eo-icon-lg { width: 76px; height: 76px; flex-basis: 76px; font-size: 30px; }
.eo-card-link, .eo-card-link:hover { display: block; color: inherit; text-decoration: none; }

/* Placeholder cover when there is no image yet */
.eo-cover-blank {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 3 / 4; background: var(--eo-cover);
  color: #fff; font-weight: 700; padding: 20px; border-radius: 10px;
}
.eo-cover-wide { aspect-ratio: 16 / 10; }
.eo-book-cover img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: 10px; }
.eo-book-cover-lg img, .eo-book-cover-lg .eo-cover-blank { max-width: 360px; }

/* Work filter */
.eo-filter { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0 0 30px; }
.eo-filter a { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid #e5e7eb; color: var(--eo-ink); font-weight: 600; }
.eo-filter li.active a, .eo-filter a:hover { background: var(--eo-primary); border-color: var(--eo-primary); color: #fff; }

/* Detail pages */
.eo-detail { padding: 60px 0 80px; }
.eo-body p { line-height: 1.8; color: #333; }
.eo-side-box { background: var(--eo-soft); border-radius: 16px; padding: 24px; }
.eo-side-box h5 { margin-bottom: 14px; }
.eo-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eo-tags li { background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.eo-gallery { margin-top: 40px; }
.eo-gallery img { border-radius: 12px; width: 100%; }
.eo-buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0 30px; }
.eo-facts p { margin-right: 24px; }

/* Own cards (work, books, topics) */
.eo-plain { background: #fff; padding: 70px 0 50px; }
.eo-alt { background: var(--eo-soft); }
.eo-plain .service-title, .eo-plain .student-heading, .eo-plain .news-tittle, .eo-plain .Product-head, .eo-plain .blog-head { margin-bottom: 36px; }
.eo-plain .service-title h2, .eo-plain .student-heading h2, .eo-plain .news-tittle h2 { margin-bottom: 0; }
.eo-work-card {
  display: block; height: calc(100% - 30px); margin-bottom: 30px; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 30px rgba(4, 9, 30, .07); color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.eo-work-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(4, 9, 30, .12); color: inherit; }
.eo-work-cover img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.eo-work-cover .eo-cover-blank { border-radius: 0; }
.eo-work-body { padding: 20px 22px 24px; }
.eo-work-body h3 { font-size: 20px; font-weight: 700; margin: 4px 0 8px; color: var(--eo-ink); }
.eo-work-body p { color: var(--eo-muted); margin-bottom: 10px; font-size: 15px; }
.eo-link { font-weight: 600; color: var(--eo-primary); }
.eo-book .eo-work-cover img, .eo-book .eo-work-cover .eo-cover-blank { aspect-ratio: 3 / 4; }
.eo-topic-card {
  display: block; margin-bottom: 24px; padding: 24px; border-radius: 16px; background: #fff;
  border: 1px solid #e9edf7; color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.eo-topic-card:hover { border-color: var(--eo-primary); transform: translateY(-3px); color: inherit; }
.eo-topic-card h3 { font-size: 20px; font-weight: 700; color: var(--eo-ink); margin: 6px 0 8px; }
.eo-topic-card p { margin: 0; color: var(--eo-muted); font-size: 14px; }

/* Maths */
.eo-paper-title { margin: 40px 0 10px; font-weight: 700; }
.eo-video { margin: 30px 0; }
.eo-video h4 small { color: var(--eo-muted); font-size: 14px; margin-left: 8px; }
.eo-video-frame { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
.eo-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.eo-resource { padding: 12px 0; border-bottom: 1px solid #e5e7eb; display: flex; flex-direction: column; gap: 4px; }
.eo-resource:last-child { border-bottom: 0; }
.eo-resource-kind { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--eo-muted); }
.eo-resource-link { font-weight: 600; color: var(--eo-primary); }
.eo-resource-link:hover { color: var(--eo-primary-dark); }

/* Photos */
.eo-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.eo-photo { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #eee; aspect-ratio: 4 / 3; }
.eo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.eo-photo:hover img { transform: scale(1.03); }
.eo-photo-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; color: #fff; font-size: 13px;
  background: linear-gradient(to top, rgba(4,9,30,.75), transparent); }
@media (max-width: 991px) { .eo-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .eo-photo-grid { grid-template-columns: 1fr; } }

/* Orders */
.eo-price-big { font-size: 28px; font-weight: 800; color: var(--eo-ink); margin: 6px 0 14px; }
.eo-methods .eo-method { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-weight: 500; }
.eo-methods .eo-method:has(input:checked) { border-color: var(--eo-primary); background: var(--eo-soft); }
.eo-methods input { margin-top: 4px; }
.eo-momo { list-style: none; padding: 0; margin: 10px 0 16px; font-size: 18px; }
.eo-momo li { padding: 8px 0; border-bottom: 1px solid #e5e7eb; }
.eo-order-status .eo-side-box { padding: 32px; }

/* Shop */
.eo-product { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 30px rgba(4, 9, 30, .07); }
.eo-product-body { padding: 20px; }
.eo-product-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.eo-price { font-weight: 700; }

/* Footer subscribe box (newsletter) */
body .footer-four .official-btn-right button { background: transparent; border: 0; color: #fff; font-weight: 600; padding: 0; }
body .footer-four .official-btn-right:hover button { color: var(--eo-ink); }

/* Contact */
.eo-contact-form .send button { border: 0; background: transparent; }
.eo-footer-cta .official-btn-right a { display: inline-block; }

/* 404 */
.eo-error-code { font-size: 96px; font-weight: 800; color: var(--eo-primary); line-height: 1; margin: 40px 0 10px; }

/* CTA band */
.eo-cta { padding: 60px 0; }
.eo-cta .thought-text p { color: #fff; opacity: .85; }

@media (max-width: 767px) {
  .eo-logo-text { font-size: 17px; }
  .eo-detail { padding: 40px 0 60px; }
}