/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

@media (min-width: 1025px) {
  #page-header {
    --header-gap: max(24px, calc((100% - 1585px) / 2));

    width: auto;
    left: var(--header-gap);
    right: var(--header-gap);
    margin-top: 24px;

    transition:
      left 0.3s ease,
      right 0.3s ease,
      margin-top 0.3s ease;
  }

  #page-header .l-subheader.at_middle {
    background: #1e1e1e;
    padding-left: 50px;
    padding-right: 50px;
  }

  #page-header .l-subheader-h {
    width: 100%;
    max-width: 1485px;
    margin-inline: auto;
  }

  #page-header.sticky {
    left: 0;
    right: 0;
    margin-top: 0;
  }
}

:is(.hero-section, .connect-section) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #080c0b;
  --next-section-bg: #080c0b;
}

:is(.hero-section, .connect-section)::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(200px, 30vw, 500px);
  max-height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--next-section-bg)
  );
  pointer-events: none;
  z-index: 0;
}

:is(.hero-section, .connect-section)::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(200, 205, 180, 0.75),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 25% 25%,
      rgba(30, 110, 190, 0.85),
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 40%,
      rgba(220, 65, 10, 0.8),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 35% 65%,
      rgba(140, 45, 100, 0.7),
      transparent 50%
    );

  filter: blur(50px);
  animation: hero-colors 4s ease-in-out infinite alternate;
}

:is(.hero-section, .connect-section) > .l-section-h {
  position: relative;
  z-index: 1;
}

@keyframes hero-colors {
  from {
    transform: translate(-3%, -2%) scale(1);
  }

  to {
    transform: translate(3%, 4%) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section::before {
    animation: none;
  }
}

.hero-btns {
    flex-direction: row !important;
}

.header-btn, .black-btn {
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.hero-counter .w-counter-value {
    font-weight: 700;
    font-size: 100px !important;
}

.more-btn i {
  font-size: 20px !important;
}

.step-wrapper {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: color 0.3s ease;
}

.steps-row:before {
  content: "";
  position: absolute;
  top: 39px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(199,255,164,0.11);
}

.steps-wrapper:hover .step-wrapper {
  color: var(--color-content-primary)!important;
  transition: color 0.3s ease;
}

.reviews-template-wrapper {
  flex-direction: row !important;
  align-items: center;
}

.reviews-template-image img {
  height: 60px;
  object-fit: cover;
}

footer #menu-header-menu-1 {
  margin-left: auto;
  display: block;
  width: fit-content;
}

.team-image {
  position: relative;
  overflow: hidden;
}

.team-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hover-photo) center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.team-image:hover::after {
  opacity: 1;
}

.team-1 {
  --hover-photo: url("/wp-content/uploads/2026/09/pavlo-black.jpg");
}

.team-2 {
  --hover-photo: url("/wp-content/uploads/2026/09/serhii-black.jpg");
}

.team-3 {
  --hover-photo: url("/wp-content/uploads/2026/09/volodymyr-black.jpg");
}

@media (max-width: 780px) {
  .hero-counter .w-counter-value {
      font-weight: 700;
      font-size: 60px !important;
  }
  .counters-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}