:root {
    --header-height: 112px;
}

@media(min-width: 1001px) {
  /*TOPBAR*/
  body:not(.scrolled) .topbar-navigation ul li a,
  body:not(.scrolled) .topbar-controls-wrap a.email,
  body:not(.scrolled) .topbar-navigation .overflow-dropdown-arrow {
    color: white !important;
    opacity: 0.75;
  }
  body:not(.scrolled) .topbar-navigation ul li .dropdown {
    color: var(--text) !important;
  }
  body:not(.scrolled) .topbar-navigation ul li .dropdown a {
    color: var(--text) !important;
  }
  body:not(.scrolled) .header-logo img {
    opacity: 0;
  }
  body:not(.scrolled) .header-logo a {
    background-image: url('/file/public/brand/logo-trener-mike-light.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
  }
  body:not(.scrolled) .language-select {
    color: white !important;
  }
  body:not(.scrolled) .languages {
    color: var(--text) !important;
  }
  body:not(.scrolled) .header-separator {
    opacity: 0.1;
  }
}
.topbar-controls-wrap {
  padding:  6px 0px;
}

@media(min-width: 1001px) {
  /*SMART SCROLL*/
  body:not(.scrolled) main header {
    position: absolute !important;
    background-color: transparent !important;
    box-shadow: none !important;
    animation: none;
  }
  body:not(.scrolled) .main-navigation ul li.link a:hover {
    color: #fff;
  }
  body:not(.scrolled) .main-navigation ul {
    color: white !important;
  }
  body.scrolled main header {
    position: fixed !important;
    animation: scrolledUp .5s forwards;
  }
  .body.scrolled .main-navigation ul li.link a{
    color: var(--headline);
  }
 }

/*BANNER BAR*/
.banner-bar{
  max-width:  900px;
  box-shadow: 0px 5px 14px #00000014;
  border-radius: 3px;
  margin-top: -90px;
  margin: -100px auto auto;
  padding: 40px 50px;
  z-index: 49;
  background: #fff;
  text-align: center;
}
.banner-bar .h2{
  color: var(--headline);
  display: block;
  margin-bottom: 15px;
}
.banner-bar .text-bold.h2{
  font-size: 2rem;
}
.banner-bar .fast-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  font-size: 1.2rem;
  color: var(--primary);
  font-weight: 500;
}
.banner-bar  .fast-contact .item{
  display: flex;
  gap: 5px;
}
.banner-bar  .fast-contact .item img {
  position: relative;
  height: 25px;
  aspect-ratio: 1;
  padding: 6px;
  top: 1px;
}

/*PRICING*/
.pricing {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gutter);
}
@media (max-width: 1200px) {
    .pricing {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 800px) {
    .pricing {
        grid-template-columns: 1fr;
    }
}
.pricing-item {
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: grid;
    gap: 10px;
}
.pricing-item h3{
    margin: 0;
}
.pricing-item .price {
    font-size: 1.2rem;
    color: var(--primary);
    font-weight: 700;
    margin-top: auto;
}

.subpage-banner .basic-banner {
    text-align: center;
}
.subpage-banner .basic-banner .banner-text {
    text-align: center;
    margin-inline: auto;
}
.subpage-banner .basic-banner .block-content {
    display: inline-block;
    width: 100%;
    margin: 90px auto !important;
}
 @media (max-width: 1000px) {
     .subpage-banner .basic-banner .block-content {
        margin: 70px auto !important;
    }
 }
 @media (max-width: 750px) {
     .subpage-banner .basic-banner .block-content {
        margin: 50px auto !important;
    }
 }
 
 @media (max-width: 750px) {
     .block-template-Services .block-content {
        grid-template-columns: 1fr 1fr;
    }
 }