/* ==========================================================================
   Custom overrides for `new/index.html`
   Keep this file small, scoped, and intentional.
   ========================================================================== */

/* Fonts */
@font-face {
  font-family: "Roboto_Condensed";
  src: url("../fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto_Condensed";
  src: url("../fonts/Roboto_Condensed/RobotoCondensed-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source_Sans_3";
  src: url("../fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source_Sans_3";
  src: url("../fonts/Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sofia_Sans_Extra_Condensed";
  src: url("../fonts/Sofia_Sans_Extra_Condensed/SofiaSansExtraCondensed-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sofia_Sans_Extra_Condensed";
  src: url("../fonts/Sofia_Sans_Extra_Condensed/SofiaSansExtraCondensed-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant_Unicase";
  src: url("../fonts/Cormorant_Unicase/CormorantUnicase-Light.ttf")
    format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant_Unicase";
  src: url("../fonts/Cormorant_Unicase/CormorantUnicase-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant_Unicase";
  src: url("../fonts/Cormorant_Unicase/CormorantUnicase-Medium.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant_Unicase";
  src: url("../fonts/Cormorant_Unicase/CormorantUnicase-SemiBold.ttf")
    format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant_Unicase";
  src: url("../fonts/Cormorant_Unicase/CormorantUnicase-Bold.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.font-roboto-condensed {
  font-family: "Roboto_Condensed", "Roboto Condensed", sans-serif;
}

.font-source-sans-3 {
  font-family: "Source_Sans_3", "Source Sans 3", sans-serif;
}

.font-sofia-sans-extra-condensed {
  font-family: "Sofia_Sans_Extra_Condensed", "Sofia Sans Extra Condensed",
    sans-serif;
}

.font-cormorant-unicase {
  font-family: "Cormorant_Unicase", serif;
  font-weight: 600;
}

/* Hero title */
.tp-hero-title-box,
.tp-hero-title-box .tp-hero-title {
  font-family: "Cormorant_Unicase", serif;
}

/* Footer: date title */
.des-footer-title,
.des-footer-title a {
  font-family: "Sofia_Sans_Extra_Condensed", "Sofia Sans Extra Condensed",
    sans-serif;
}

.des-footer-title {
  font-size: 76px;
  text-align: center;
}

/* Section titles */
.tp-section-title {
  font-family: "Cormorant_Unicase", serif;
}

.cst-section-title {
  font-family: "Sofia_Sans_Extra_Condensed", "Sofia Sans Extra Condensed",
    sans-serif;
  font-weight: 400;
}

/* Button: make "Програма курсу" look active by default */
.tp-btn-border.tp-btn-border--active {
  color: var(--tp-common-black);
  border-color: var(--tp-common-cream);
  background-color: var(--tp-common-cream);
}

.tp-btn-border.tp-btn-border--active:hover {
  color: var(--tp-common-black);
  border-color: var(--tp-common-cream);
  background-color: var(--tp-common-cream);
}

/* Service: make selected thumbs full-bleed */
.tp-service-thumb--bleed img {
  display: block;
  width: 100%;
  height: auto;
}

.tp-service-thumb--bleed video {
  display: block;
  width: 100%;
  height: auto;
}

.tp-service-thumb video {
  display: block;
  max-width: 100%;
  height: auto;
}

.tp-service-thumb--bleed {
  margin-right: -40px;
}

@media (max-width: 767px) {
  .tp-service-thumb--bleed {
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* Service: highlight a specific category tag */
.tp-service-category span.tp-service-category__highlight {
  display: inline-flex;
  align-items: center;
}

/* About list: keep icon round and aligned to the first text line */
.cst-about-list {
  --cst-icon-size: 32px;
  --cst-line-height: 1.4;
}

.cst-about-list ul li {
  align-items: center;
  line-height: var(--cst-line-height);
}

.cst-about-list ul li span {
  flex: 0 0 var(--cst-icon-size);
  width: var(--cst-icon-size);
  height: var(--cst-icon-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cst-about-list ul li span svg {
  display: block;
}

/* Footer: smaller title and lighter tagline */
.tp-footer-widget-title {
  font-size: 76px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-footer-widget-title {
    font-size: 71px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-footer-widget-title {
    font-size: 56px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-footer-widget-title {
    font-size: 61px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tp-footer-widget-title {
    font-size: 46px;
  }
}

.tp-footer-widget-title .tp-footer-tagline {
  font-weight: 400;
}

.tp-footer-area .tp-section-title,
.tp-footer-area .tp-section-title .tp-footer-tagline,
.tp-footer-area .tp-section-title .font-cormorant-unicase {
  color: var(--tp-common-black);
}

/* Service title: remove left padding on large screens */
@media (min-width: 1200px) {
  .creative-service-title-box {
    padding-left: 0;
  }
}

/* Service module titles: smaller on mobile */
@media (max-width: 767px) {
  .creative-service-item.about-us-4 .creative-service-title {
    font-size: 44px;
    line-height: 1.05;
  }
}

/* Service category bullets: stable bullets on all screens */
.creative-service-item.about-us-4 .creative-service-category {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.creative-service-item.about-us-4 .creative-service-category span {
  position: relative;
  padding-left: 12px;
}

.creative-service-item.about-us-4 .creative-service-category span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background-color: currentColor;
}

.creative-service-item.about-us-4 .creative-service-category span:not(:last-child) {
  padding-right: 0;
  margin-right: 0;
}

.creative-service-item.about-us-4 .creative-service-category span:not(:last-child)::before {
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* Testimonial area: make text readable on white background */
.creative-testimonial-area,
.creative-testimonial-area .tp-section-subtitle,
.creative-testimonial-area .tp-section-title,
.creative-testimonial-area .creative-testimonial-avater-info h4,
.creative-testimonial-area .creative-testimonial-avater-info span,
.creative-testimonial-area .creative-testimonial-text p {
  color: var(--tp-common-black);
}

.creative-testimonial-area .creative-testimonial-item {
  background-color: #f0f0f2;
}

.creative-testimonial-area .creative-testimonial-text p span svg {
  color: var(--tp-common-black);
}

.creative-testimonial-area .creative-testimonial-text p span svg path {
  fill: currentColor;
}

/* Brand area: remove top padding on mobile */
@media (max-width: 767px) {
  .tp-brand-area {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Brand titles: use Sofia Sans Extra Condensed */
.tp-brand-title {
  font-family: "Sofia_Sans_Extra_Condensed", "Sofia Sans Extra Condensed",
    sans-serif;
  font-size: 40px;
}

/* Pricing section background */
.tp-service-4-price-ptb {
  background-color: #F7F8EF;
  margin-bottom: 80px;
}

/* Offcanvas "ПОЧАТОК" block styling */
.tp-offcanvas-start {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background-color: #F2F4EC;
  padding: 16px 50px;
  margin-top: -40px;
  margin-left: -50px;
  margin-right: -50px;
  width: calc(100% + 100px);
  box-sizing: border-box;
  margin-bottom: 48px;
}

.tp-offcanvas-start-date {
  font-size: 28px;
}

.tp-offcanvas-start .tp-offcanvas-cta {
  text-decoration: none;
}

@media (max-width: 1600px) {
  .tp-header-date {
    display: none;
  }
}

.tp-header-area.header-transparent .tp-header-date,
.tp-header-area.header-transparent .tp-header-date a {
  color: var(--tp-common-white);
}

.tp-header-area.header-transparent.header-sticky .tp-header-date,
.tp-header-area.header-transparent.header-sticky .tp-header-date a {
  color: var(--tp-common-black);
}

.tp-pricing-subtitle {
  font-weight: 300;
}

.tp-pricing-emph {
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--tp-theme-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* iOS: prevent clipped corners on blurred button style */
.tp-btn-black,
.tp-btn-black-filter,
.tp-btn-black-filter-blur {
  overflow: visible;
}

.tp-btn-black-filter-blur svg {
  overflow: visible;
}

/* iOS fallback: avoid clipped corners on blurred buttons */
@supports (-webkit-touch-callout: none) {
  .tp-btn-black,
  .tp-btn-black-filter,
  .tp-btn-black-filter-blur {
    border-radius: 999px;
  }

  .tp-btn-black-filter {
    filter: none !important;
  }
}

@media (max-width: 1400px) {
  .tp-header-desktop-menu {
    display: none !important;
  }
  .tp-header-burger {
    display: block !important;
  }
  .tp-header-right-col {
    margin-left: auto;
  }
  .tp-header-right {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .tp-header-btn-box .tp-btn-black-text,
  .tp-header-btn-box .tp-btn-black-filter {
    white-space: nowrap;
  }
  .tp-header-ptb {
    padding: 10px 0;
  }
  .tp-header-logo {
    padding: 10px 0;
  }
  .tp-header-box {
    padding-right: 0;
  }
}

@media (min-width: 1401px) {
  .tp-header-burger {
    display: none !important;
  }
}

.tp-service-category span.tp-service-category__highlight::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #de572b;
  margin-right: 8px;
}

/* About */
.tp-about-title-box .tp-section-subtitle {
  font-family: "Cormorant_Unicase", serif;
  font-weight: 600;
}

.tp-about-text p {
  font-weight: 400;
  margin-right: 24px;
  margin-bottom: 16px;
}

.link-primary-underline {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tp-theme-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.link-primary-underline:hover {
  color: var(--tp-theme-green);
}

/* Footer */
.des-footer-top {
  margin-bottom: 42px;
}

/* CTA button row */
.cst-team-btn {
  margin: 24px 0;
}

/* Banner area */
.des-footer-wrap {
  margin-top: 80px;
}

/* Hero: background video */
.tp-hero-area[data-background] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Immediate fallback while JS applies `data-background`. */
.tp-hero-area[data-background="assets/video/hero.jpg"] {
  background-image: url("../video/hero.jpg");
}

.tp-hero-area .tp-hero-bg {
  position: absolute;
  top: -2px;
  right: 0;
  bottom: -2px;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.tp-hero-area .tp-hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tp-hero-area > .container {
  position: relative;
  z-index: 1;
}

/* Hero: info card */
.tp-hero-more-info {
  background-size: contain;
  background-position: center;
}

.tp-hero-more-info-wrap {
  opacity: 0.85;
}

.tp-hero-avater {
  padding: 24px 24px 0;
}

.tp-hero-avater img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

.tp-hero-avater span {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.62;
  letter-spacing: -0.01em;
  color: var(--tp-common-black);
}

/* "Overall vertical gap = 24px" between blocks */
.tp-hero-more-info p {
  padding: 0 24px;
  margin: 24px 0;
}

.tp-hero-more-info .tp-hero-link {
  padding-top: 0;
}

/* Hero: sound toggle icon */
.tp-hero-area .tp-hero-info span {
  margin-left: 0;
}

.tp-hero-area .tp-hero-info span a {
  width: 35px;
  height: 35px;
}

.tp-hero-area .tp-hero-info span a svg {
  width: 33px;
  height: 33px;
}

.tp-hero-area .tp-hero-info span a svg:last-child {
  left: -33px;
  bottom: -33px;
}

.tp-hero-area .tp-hero-info span a:hover svg:first-child {
  transform: translate(30px, -30px);
}

.tp-hero-area .tp-hero-info span a:hover svg:last-child {
  transform: translate(34px, -34px);
}

.js-hero-sound-toggle {
  opacity: 0.7;
}

.js-hero-sound-toggle:hover {
  opacity: 1;
}

.js-hero-sound-toggle .sound-slash {
  opacity: 0;
  transition: opacity 180ms ease;
}

.js-hero-sound-toggle.is-muted .sound-slash {
  opacity: 1;
}