:root {
  --teal: #008080;
  --teal-dark: #005f5f;
}
body {
  background: #f8f9fa;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.bg-teal { background-color: var(--teal) !important; }
.text-teal { color: var(--teal) !important; }
.btn-teal { background-color: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover { background-color: var(--teal-dark); color: #fff; }
.btn-outline-teal { color: var(--teal); border-color: var(--teal); }
.btn-outline-teal:hover { background-color: var(--teal); color: #fff; }

.site-nav { background-color: var(--teal); }
.site-footer { background: #e9ecef; }
.site-footer a { color: var(--teal); text-decoration: none; }

.course-card { border-top: 3px solid var(--teal); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.lesson-group .card-header { background: #fff; }
.lesson-body ruby { font-size: 1.15rem; }
.lesson-body table { background: #fff; }
.lesson-body h4, .lesson-body h5 { color: var(--teal); }

.ad-slot { text-align: center; overflow: hidden; }
.ad-slot-header, .ad-slot-footer { min-height: 90px; }
.ad-slot-sidebar { min-height: 250px; }

.home-content .jumbotron, .page-body .jumbotron { background: #fff; }
.pinyincontainer { display: inline-block; text-align: center; margin: 8px; }
.soundButtonGroup button { margin: 2px; }

.breadcrumb { background: #fff; }

/* RTL support (Arabic / Urdu) */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .navbar-brand { margin-left: 1rem; margin-right: 0; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: .5rem; padding-right: 0; content: "/"; }
html[dir="rtl"] .lesson-pager { flex-direction: row-reverse; }
html[dir="rtl"] .text-start { text-align: right !important; }
.lang-menu { max-height: 320px; overflow-y: auto; }

/* V4 hero banner */
.hero-banner{
  position:relative;
  display:flex;align-items:stretch;
  min-height:400px;
  border-radius:12px;overflow:hidden;
  background:linear-gradient(120deg,#003d3d 0%,#006060 55%,#008080 100%);
  box-shadow:0 6px 18px rgba(0,64,64,.18);
}
.hero-text{
  position:relative;z-index:2;
  flex:0 0 56%;max-width:56%;
  padding:56px 32px 56px 48px;color:#eafffb;
}
.hero-text h1{color:#fff;font-weight:700;}
.hero-text .lead{color:#d7f5ef;}
.hero-text .btn{margin-top:.5rem;}
.hero-media{
  position:absolute;top:0;right:0;bottom:0;width:62%;
  background-size:cover;background-position:right center;
  -webkit-mask-image:linear-gradient(to left,#000 42%,transparent 96%);
  mask-image:linear-gradient(to left,#000 42%,transparent 96%);
  pointer-events:none;
}
@media (max-width:767.98px){
  .hero-banner{min-height:340px;}
  .hero-text{flex:1 1 100%;max-width:100%;padding:40px 28px;}
  .hero-media{width:100%;opacity:.22;-webkit-mask-image:none;mask-image:none;}
}