/* Public Proftoon site — aligned with the course landing and application UI. */
:root {
  --mainfontFamily: "Montserrat", Arial, sans-serif;
  --optionalfontFamily: "Montserrat", Arial, sans-serif;
  --mainColor: #7d9cb2;
  --mainColorShade: #385e79;
  --mainColorTint: #beced9;
  --secondaryColor: #a3b9a4;
  --secondaryColorShade: #527f54;
  --accentColor: #d99e88;
  --pageBackground: #efedea;
  --surfaceColor: #fcfcfc;
  --blackColor: #031521;
}

body.proftoon-site {
  background: var(--pageBackground);
  color: var(--blackColor);
  font-family: var(--mainfontFamily);
}

body.proftoon-site p,
body.proftoon-site li { font-family: var(--mainfontFamily); line-height: 1.55; }
body.proftoon-site h1,
body.proftoon-site h2,
body.proftoon-site h3,
body.proftoon-site h4 { font-family: var(--mainfontFamily); font-weight: 800; }

body.proftoon-site .navbar-light,
body.proftoon-site .navbar.is-sticky {
  background: var(--surfaceColor) !important;
  border-bottom: 1px solid rgba(125, 156, 178, .24);
  box-shadow: none;
}
body.proftoon-site .navbar-light .navbar-nav .nav-item a {
  color: var(--mainColorShade);
  font-size: 14px;
  font-weight: 700;
}
body.proftoon-site .navbar-light .navbar-nav .nav-item a:hover,
body.proftoon-site .navbar-light .navbar-nav .nav-item a.active { color: var(--mainColor); }
body.proftoon-site .logo h3 {
  align-items: center;
  color: var(--accentColor);
  display: flex;
  font-family: Helvetica, var(--mainfontFamily);
  font-weight: 400;
  gap: 4px;
}
body.proftoon-site .brand-mark {
  background: var(--accentColor);
  display: inline-block;
  height: 38px;
  width: 36px;
  -webkit-mask: url("../img/logo.svg") center / contain no-repeat;
  mask: url("../img/logo.svg") center / contain no-repeat;
}

body.proftoon-site .products-banner-area,
body.proftoon-site .products-banner-area.two {
  height: auto;
  min-height: 720px;
  background: var(--pageBackground);
  border-bottom: 1px solid rgba(125, 156, 178, .18);
}
body.proftoon-site .products-banner-area .main-banner-content.two h1 {
  color: var(--mainColorShade);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: .015em;
  text-transform: uppercase;
}
body.proftoon-site .hero-teacher-video {
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
body.proftoon-site .products-about-video {
  margin: 32px 0 48px;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  width: 100%;
}
body.proftoon-site .landing-demo-video-wrap {
  line-height: 0;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}
body.proftoon-site .landing-demo-video-cover,
body.proftoon-site .landing-demo-video {
  border: 0;
  cursor: pointer;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  object-fit: contain;
  outline: none;
  vertical-align: top;
  width: 100%;
}
body.proftoon-site .landing-demo-video {
  cursor: default;
}
body.proftoon-site .landing-demo-video-cover[hidden] {
  display: none;
}
body.proftoon-site .landing-demo-video[hidden] {
  display: none;
}
@media (max-width: 767px) {
  body.proftoon-site .products-about-video {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  body.proftoon-site .landing-demo-video-wrap {
    margin-left: auto;
    margin-right: auto;
  }
  body.proftoon-site .landing-demo-video-cover,
  body.proftoon-site .landing-demo-video {
    max-height: none;
    object-fit: contain;
  }
}
body.proftoon-site .main-banner-content h2.slogan { color: var(--mainColorShade); font-weight: 700; }

body.proftoon-site .default-btn {
  background: var(--mainColor);
  border-radius: 8px;
  box-shadow: none;
  font-family: var(--mainfontFamily);
  font-weight: 700;
  min-height: 35px;
}
body.proftoon-site .default-btn span { background: var(--mainColorShade); border-radius: 8px; }
body.proftoon-site .default-btn:hover { background: var(--mainColorShade); color: #fff !important; }
body.proftoon-site .banner-btn .default-btn,
body.proftoon-site .demo-modal-panel .sidebar-demo-control {
  background: var(--secondaryColor);
  border-radius: 8px;
  box-shadow: none;
  color: var(--blackColor);
  font-family: var(--mainfontFamily);
  font-weight: 700;
}
body.proftoon-site .banner-btn .default-btn span { background: var(--secondaryColorShade); }

body.proftoon-site .products-about-area,
body.proftoon-site .app-about-area,
body.proftoon-site .contact-area,
body.proftoon-site .author-area { background: var(--pageBackground); }
body.proftoon-site .why-choose-area,
body.proftoon-site .overview-area { background: var(--surfaceColor); }
body.proftoon-site .section-title h2 {
  color: var(--mainColor);
  font-size: 38px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
body.proftoon-site .products-about-content h3,
body.proftoon-site .overview-content h3,
body.proftoon-site .app-about-content h4,
body.proftoon-site .author-content h3 { color: var(--mainColorShade); }
body.proftoon-site .products-about-content span,
body.proftoon-site .redtitle { color: var(--accentColor); font-weight: 800; }
body.proftoon-site .products-list li i,
body.proftoon-site .app-list li i { color: var(--mainColor); }

body.proftoon-site .why-choose-content {
  background: var(--surfaceColor);
  border: 1px solid rgba(125, 156, 178, .24);
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
body.proftoon-site .why-choose-content::before { display: none; }
body.proftoon-site .why-choose-content .icon i {
  background: rgba(125, 156, 178, .08);
  color: var(--mainColor);
  border-radius: 8px;
}
body.proftoon-site .why-choose-content h3 { color: var(--mainColorShade); }
body.proftoon-site .why-choose-content:hover { border-color: var(--mainColor); transform: none; }
body.proftoon-site .why-choose-content:hover h3,
body.proftoon-site .why-choose-content:hover p { color: inherit; }

body.proftoon-site .overview-item,
body.proftoon-site .app-about-content,
body.proftoon-site .contact-area .container,
body.proftoon-site .author-area .container {
  background: var(--surfaceColor);
  border: 1px solid rgba(125, 156, 178, .24);
  border-radius: 8px;
}
body.proftoon-site .overview-item { padding: 32px; }
body.proftoon-site .app-about-content { padding: 0 24px 24px; }
body.proftoon-site .contact-area .container,
body.proftoon-site .author-area .container { padding: 28px; }
body.proftoon-site .img-screenshot img,
body.proftoon-site .img-phone-screenshot img { border-color: rgba(125, 156, 178, .42); }

body.proftoon-site .copy-right { background: var(--mainColorShade); }
body.proftoon-site .copy-right-content p,
body.proftoon-site .copy-right-content p a { color: #fff; }
body.proftoon-site .go-top { background: var(--accentColor); border-radius: 8px; }
body.proftoon-site .go-top:hover { background: #bf8b78; }

@media only screen and (max-width: 767px) {
  body.proftoon-site .products-banner-area,
  body.proftoon-site .products-banner-area.two { min-height: 0; }
  body.proftoon-site .section-title h2 { font-size: 26px; }
  body.proftoon-site .overview-item,
  body.proftoon-site .contact-area .container,
  body.proftoon-site .author-area .container { padding: 18px; }
}