/* ============================================================
   PREMIUM REDESIGN — Online Library Pro v2.0
   ============================================================ */

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

:root {
  --teal: #0f766e;
  --teal-light: #14b8a6;
  --emerald: #10b981;
  --slate-dark: #0f172a;
  --slate: #1e293b;
  --slate-mid: #334155;
  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.55);
  --glass-shadow: 0 8px 32px rgba(15,118,110,0.12);
  --grad-main: linear-gradient(135deg, #0f766e 0%, #10b981 100%);
  --grad-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --ease: cubic-bezier(0.165,0.84,0.44,1);
  --t: 0.4s var(--ease);
}

body { font-family: 'Inter', sans-serif; color: var(--slate); background: #f0fdfa; scroll-behavior: smooth; }
h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--slate-dark); }
p { line-height: 1.8; color: var(--slate-mid); font-size: 1.02rem; }

#topbar_section { background: var(--grad-dark) !important; padding: 8px 0 !important; }
#topbar_section .topbar-content-box, #topbar_section .topbar-content-box a, #topbar_section .topbar-content-box p, #topbar_section .topbar-content-box i { color: rgba(255,255,255,0.82) !important; font-size: 0.85rem !important; }
#topbar_section .topbar-content-box i { color: #14b8a6 !important; margin-right: 6px; }
#topbar_section .topbar-content-box a:hover { color: #10b981 !important; }

#header { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(15,118,110,0.12) !important; box-shadow: 0 4px 24px rgba(15,118,110,0.08) !important; position: sticky !important; top: 0 !important; z-index: 9999 !important; transition: var(--t) !important; }
#nav-box { padding: 14px 0 !important; background: transparent !important; }

.logo img { max-height: 56px !important; width: auto !important; }
.logo-text h2 a { font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; font-size: 1.4rem !important; background: var(--grad-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

#site-navigation ul li a { font-weight: 500 !important; font-size: 0.9rem !important; color: var(--slate) !important; padding: 8px 16px !important; border-radius: 8px !important; transition: var(--t) !important; position: relative; }
#site-navigation ul li a:hover, #site-navigation ul li.current-menu-item > a { color: #0f766e !important; background: rgba(15,118,110,0.06) !important; }
#site-navigation ul ul { background: #fff !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; box-shadow: 0 20px 60px rgba(15,118,110,0.15) !important; overflow: hidden !important; padding: 8px !important; }

#slider { background: var(--grad-dark) !important; min-height: 88vh !important; display: flex !important; align-items: center !important; position: relative !important; overflow: hidden !important; }
#slider::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(20,184,166,0.18) 0%, transparent 70%); pointer-events: none; }
.slider-content-box { position: relative; z-index: 2; padding: 80px 0 100px; }
.slider-content-box h1 { font-family: 'Outfit', sans-serif !important; font-size: clamp(2.4rem, 6vw, 4.5rem) !important; font-weight: 800 !important; color: #fff !important; line-height: 1.1 !important; margin-bottom: 24px !important; }
.slider-content-box p { font-size: 1.15rem !important; color: rgba(255,255,255,0.75) !important; max-width: 560px !important; margin-bottom: 36px !important; }

.theme-button a, .btn-primary, .slid-btn, .offer-btn, .about-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--grad-main) !important; color: #fff !important; border: none !important; border-radius: 50px !important; padding: 14px 34px !important; font-weight: 600 !important; font-size: 0.9rem !important; box-shadow: 0 6px 24px rgba(16,185,129,0.4) !important; transition: var(--t) !important; text-decoration: none !important; }
.theme-button a:hover, .btn-primary:hover, .slid-btn:hover, .offer-btn:hover, .about-btn:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 36px rgba(16,185,129,0.55) !important; color: #fff !important; }

.section-heading-box { text-align: center; margin-bottom: 48px; }
.section-heading-box span { display: inline-block !important; background: var(--grad-main) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; margin-bottom: 12px !important; }
.section-heading-box h2 { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; font-weight: 800 !important; color: var(--slate-dark) !important; position: relative !important; display: inline-block !important; }
.section-heading-box h2::after { content: ''; display: block; width: 60px; height: 4px; background: var(--grad-main); border-radius: 4px; margin: 14px auto 0; }

.image-card, .services-card, .blog-card, #testimonials .item, .feature-boxx, .feature-box { background: var(--glass-bg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid var(--glass-border) !important; border-radius: 20px !important; box-shadow: var(--glass-shadow) !important; transition: transform var(--t), box-shadow var(--t) !important; overflow: hidden; }
.image-card:hover, .services-card:hover, .blog-card:hover, #testimonials .item:hover { transform: translateY(-10px) scale(1.02) !important; box-shadow: 0 24px 60px rgba(15,118,110,0.2) !important; border-color: #14b8a6 !important; }

#about { padding: 90px 0 !important; background: #fff !important; position: relative !important; overflow: hidden !important; }
.abt-small-head { display: inline-block !important; background: var(--grad-main) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; }
.abt-main-head { font-size: clamp(1.9rem, 4vw, 2.8rem) !important; color: var(--slate-dark) !important; }
.about-image img { border-radius: 24px !important; box-shadow: 0 24px 60px rgba(15,118,110,0.18) !important; transition: transform var(--t) !important; }
.about-image img:hover { transform: scale(1.03) !important; }
.feature-box { padding: 20px 24px !important; margin-bottom: 16px !important; border-left: 4px solid #14b8a6 !important; border-radius: 12px !important; background: rgba(240,253,250,0.7) !important; }
.feature-box h3 { font-size: 1.05rem !important; color: #0f766e !important; }

#features { padding: 90px 0 !important; background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%) !important; }
.feature-boxx { padding: 28px !important; margin-bottom: 20px !important; }
.feature-boxx h3 { color: #0f766e !important; }

#testimonials { background: var(--grad-dark) !important; padding: 90px 0 !important; position: relative !important; overflow: hidden !important; }
#testimonials .section-heading-box h2 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
#testimonials .section-heading-box span { color: #14b8a6 !important; -webkit-text-fill-color: #14b8a6 !important; }
#testimonials .item { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.12) !important; padding: 32px !important; z-index: 1; position: relative; }
#testimonials .item:hover { background: rgba(255,255,255,0.12) !important; border-color: #14b8a6 !important; }
.testimonial-text { color: rgba(255,255,255,0.82) !important; font-style: italic !important; }
.testimonial-title a { color: #fff !important; font-weight: 700 !important; }
.testimonial-text1 { color: #14b8a6 !important; font-size: 0.85rem !important; }
.image-card img { border-radius: 50% !important; width: 56px !important; height: 56px !important; object-fit: cover !important; }

#counter { background: var(--grad-main) !important; padding: 70px 0 !important; }
#counter .counter-number, #counter .count { color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 3rem !important; font-weight: 800 !important; }
.count-text-box { background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 16px !important; padding: 24px 16px !important; backdrop-filter: blur(8px) !important; }
.count-text-box .count, .count-text-box .counter-number { color: #fff !important; font-size: 2.6rem !important; font-weight: 800 !important; }
.count-text-box p, .count-text-box span:not(.count) { color: rgba(255,255,255,0.75) !important; }

#video, section#video { background: var(--grad-dark) !important; background-color: #0f172a !important; padding: 90px 0 !important; position: relative !important; overflow: hidden !important; }
#video::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(20,184,166,0.18) 0%, transparent 70%); pointer-events: none; }
#video h2, #video h3, #video p { color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: rgba(255,255,255,0.9) !important; }
#video .section-heading-box span { color: #14b8a6 !important; -webkit-text-fill-color: #14b8a6 !important; }

#what-we-do, #services { padding: 90px 0 !important; background: #fff !important; }
.services-card { padding: 32px !important; text-align: center !important; }
.services-card i { font-size: 2.4rem !important; background: var(--grad-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px !important; display: block; }

#latest-news { padding: 90px 0 !important; background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%) !important; }
.blog-card { overflow: hidden !important; padding: 0 !important; }
.blog-card img { width: 100% !important; height: 220px !important; object-fit: cover !important; transition: transform var(--t) !important; }
.blog-card:hover img { transform: scale(1.06) !important; }
.blog-card .blog-content, .blog-card .post-content { padding: 24px !important; }
.blog-card .post-date { color: #14b8a6 !important; font-size: 0.8rem !important; font-weight: 600 !important; text-transform: uppercase !important; }

#books { padding: 90px 0 !important; background: #fff !important; }
#author-details { padding: 90px 0 !important; background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%) !important; }
#book-explanation { background: var(--grad-dark) !important; padding: 90px 0 !important; }
#book-explanation h2, #book-explanation p, #book-explanation h3 { color: rgba(255,255,255,0.9) !important; -webkit-text-fill-color: rgba(255,255,255,0.9) !important; }
#faq { background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%) !important; padding: 90px 0 !important; }

.about-top-lines path, .about-bottom-lines path { stroke: #14b8a6 !important; }

.outer-footer { background: var(--grad-dark) !important; padding: 60px 0 20px !important; border-top: 1px solid rgba(20,184,166,0.18) !important; }
.outer-footer h3, .outer-footer .widget-title { font-family: 'Outfit', sans-serif !important; color: #fff !important; margin-bottom: 20px !important; padding-bottom: 10px !important; border-bottom: 2px solid #14b8a6 !important; display: inline-block !important; }
.outer-footer p, .outer-footer li, .outer-footer a { color: rgba(255,255,255,0.65) !important; font-size: 0.92rem !important; }
.outer-footer a:hover { color: #14b8a6 !important; }

.widget { background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: 16px !important; padding: 24px !important; margin-bottom: 28px !important; box-shadow: var(--glass-shadow) !important; }
.widget-title { font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; color: var(--slate-dark) !important; padding-bottom: 12px !important; border-bottom: 2px solid #14b8a6 !important; margin-bottom: 16px !important; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal.fade-left { transform: translateX(-40px); }
.reveal.fade-right { transform: translateX(40px); }
.reveal.fade-left.active, .reveal.fade-right.active { transform: translateX(0); opacity: 1; }

section[style*="rgb(250, 93, 25)"], section[style*="#FA5D19"], section[style*="#fa5d19"], div[style*="rgb(250, 93, 25)"] {
  background-color: #0f172a !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

@media (max-width: 767px) {
  .slider-content-box h1 { font-size: 2.2rem !important; }
  .section-heading-box h2 { font-size: 1.8rem !important; }
}
/* FORCE OVERRIDE ORANGE BACKGROUNDS — Added v2.1 */
#video, section#video, .explanation-left-box, .footer-contact-box, .wpcf7-submit, .fa-arrow-up,
[style*="background-color:#FA5D19"], [style*="background-color: #FA5D19"], [style*="background-color:rgb(250, 93, 25)"], [style*="background-color: rgb(250, 93, 25)"],
[style*="background:#FA5D19"], [style*="background: #FA5D19"], [style*="background:rgb(250, 93, 25)"], [style*="background: rgb(250, 93, 25)"] {
  background-color: #0f172a !important;
  background: var(--grad-dark) !important;
  color: #fff !important;
}

.wpcf7-submit {
  background: var(--grad-main) !important;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  box-shadow: 0 6px 20px rgba(16,185,129,0.3) !important;
  border: none !important;
}

#scroll-to-top i, .fa-arrow-up {
  background: var(--grad-main) !important;
  color: #fff !important;
}