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

:root {
  --eduka-primary: #116e63;
  --eduka-accent: #fda31b;
  --eduka-heading: #19232b;
  --eduka-body: #757f95;
  --eduka-soft: #f5faff;
}

body {
  color: var(--eduka-body);
  font-family: Roboto, ui-sans-serif, system-ui, sans-serif;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

h1,
h2,
h3,
.font-display {
  color: var(--eduka-heading);
  font-family: Yantramanav, Roboto, ui-sans-serif, system-ui, sans-serif !important;
}

.hero-bg h1,
.hero-bg h2,
.hero-bg h3,
.hero h1,
.hero h2,
.hero h3,
.bg-navy h1,
.bg-navy h2,
.bg-navy h3 {
  color: #fff;
}

.bg-navy {
  background-color: var(--eduka-primary) !important;
}

.text-navy {
  color: var(--eduka-heading) !important;
}

.text-gold {
  color: var(--eduka-accent) !important;
}

.bg-gold {
  background-color: var(--eduka-accent) !important;
}

.border-gold {
  border-color: var(--eduka-accent) !important;
}

.shadow-soft {
  box-shadow: 0 0 40px 5px rgba(0, 0, 0, .05) !important;
}

.site-topbar {
  align-items: center;
  background: var(--eduka-primary);
  color: rgba(255, 255, 255, .88);
  display: flex;
  font-size: 13px;
  gap: 18px;
  justify-content: center;
  min-height: 42px;
  padding: 8px 20px;
}

.site-topbar span {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

header nav {
  background: rgba(255, 255, 255, .97);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
  color: var(--eduka-heading) !important;
}

header nav a {
  color: var(--eduka-heading) !important;
}

header nav .bg-gold {
  color: #fff !important;
}

.hero-bg {
  background-image:
    linear-gradient(90deg, rgba(25, 35, 43, .86), rgba(17, 110, 99, .58), rgba(25, 35, 43, .80)),
    url('https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=1800&q=85') !important;
}

.hero {
  position: relative;
}

.hero::after,
.hero-bg::after {
  background: var(--eduka-accent);
  border-radius: 70px 70px 70px 0;
  bottom: 54px;
  content: "";
  height: 96px;
  opacity: .2;
  position: absolute;
  right: 8%;
  transform: rotate(18deg);
  width: 96px;
}

.section-kicker::after {
  background: var(--eduka-accent) !important;
}

.rounded-xl,
.rounded-2xl,
.lift-card,
article,
.shadow-soft {
  border-radius: 50px 50px 50px 0 !important;
}

.lift-card,
.card,
article.rounded-2xl,
.rounded-xl.bg-white,
.rounded-2xl.bg-white {
  border: 1px solid rgba(17, 110, 99, .08);
}

.lift-card:hover,
.card:hover {
  transform: translateY(-9px);
}

.image-zoom,
.zoom {
  border-radius: 35px 35px 35px 0 !important;
}

.image-zoom img,
.zoom img,
article img {
  border-radius: 35px 35px 35px 0 !important;
}

a.bg-gold,
button.bg-gold,
.hero-actions a:first-child,
form button {
  border-radius: 50px;
  box-shadow: 0 8px 18px rgba(253, 163, 27, .28);
}

a.bg-gold:hover,
button.bg-gold:hover,
form button:hover {
  background: var(--eduka-primary) !important;
  color: #fff !important;
}

.bg-slate-50 {
  background-color: var(--eduka-soft) !important;
}

footer {
  background: #19232b !important;
}

@media (max-width: 767px) {
  .site-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  header nav {
    border-radius: 0 0 12px 12px;
    gap: 12px;
  }

  header nav > a:first-child {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header nav > a:first-child span:last-child {
    max-width: 154px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero {
    min-height: 500px;
    padding-top: 210px !important;
  }

  main.pt-32,
  section.pt-36 {
    padding-top: 210px !important;
  }

  .hero-bg::after,
  .hero::after {
    right: -28px;
  }
}