:root {

  --teee-red: #e01f1a;

  --teee-bg-diagonal: rgba(255, 255, 255, 1);

  --teee-text-white: #ffffff;

  --teee-nav-numbers: #ffffff;

  --teee-num-giant: rgba(255, 255, 255, 0.1);

  --teee-progress-bg: rgba(255, 255, 255, 0.2);

  --teee-progress-fill: #ffffff;

}



.teee-hero, .teee-hero * { 

  box-sizing: border-box; 

  margin: 0; padding: 0; 

  font-family: 'IBM Plex Sans Condensed'; 

}



.teee-hero {

  position: relative; 

  width: 100%; 

  height: 50vh; 

  min-height: 850px;

  background: var(--teee-red); 

  overflow: hidden;

}



.teee-hero::before {

  content: ""; 

  position: absolute; 

  left: 0; top: 0; 

  width: 100%; height: 100%;

  background: var(--teee-bg-diagonal); 

  clip-path: polygon(0 0, 20% 0, -5% 100%, 0 100%); 

  z-index: 2;

}



.teee-swiper { width: 100%; height: 100%; z-index: 1; }



.teee-hero .swiper-slide { 

  display: flex !important; 

  align-items: center; 

  padding: 0 6% 300px calc(28% + 140px); 

  opacity: 0 !important;

}



.teee-hero .swiper-slide-active { opacity: 1 !important; }



.teee-hero__content { 

  color: var(--teee-text-white); 

  max-width: 650px; 

  position: relative; 

  z-index: 10; 

}



.teee-hero__content > * { opacity: 0; }



.teee-hero__tag {

  display: inline-block; 

  background: var(--teee-text-white); 

  color: var(--teee-red);

  padding: 6px 20px; 

  border-radius: 40px; 

  font-size: 11px; 

  font-weight: 700; 

  margin-bottom: 20px; 

  text-transform: uppercase;

}



.teee-hero__title { 

  font-size: clamp(28px, 4vw, 52px); 

  font-weight: 500; 

  line-height: 1.1; 

  margin-bottom: 20px; 

  color: var(--teee-text-white);

  text-transform: uppercase;

}



.teee-hero__desc { 

  opacity: 0.9; 

  margin-bottom: 35px; 

  font-size: 16px; 

  line-height: 1.6; 

  color: var(--teee-text-white);

}



.teee-hero__buttons { display: flex; gap: 15px; flex-wrap: wrap; }



.teee-hero__btn {

  display: inline-block;

  padding: 14px 30px; 

  border: 2px solid var(--teee-text-white); 

  color: var(--teee-text-white);

  text-decoration: none; 

  font-weight: 700; 

  font-size: 11px; 

  text-transform: uppercase;

  transition: all 0.3s ease;

}



.teee-hero__btn--primary { 

  background: var(--teee-text-white); 

  color: var(--teee-red); 

}



.teee-hero__btn:hover {

  background: var(--teee-text-white);

  color: var(--teee-red);

}



.teee-hero__btn--primary:hover {

  background: transparent;

  color: var(--teee-text-white);

}



.teee-hero__nav { 

  position: absolute; 

  left: 26%; 

  top: calc(50% - 150px); 

  transform: translateY(-50%); 

  z-index: 20; 

}



.teee-hero__num-wrap { height: 110px; width: 150px; overflow: hidden; position: relative; }



.teee-hero__num { 

  position: absolute; 

  font-size: 110px; 

  font-weight: 200; 

  color: var(--teee-num-giant); 

  line-height: 1; 

}



.teee-hero__progress-line { 

  display: inline-block; 

  width: 60px; 

  height: 2px; 

  background: var(--teee-progress-bg); 

  position: relative; 

}



.teee-progress-fill { 

  position: absolute; 

  left: 0; top: 0; 

  height: 100%; 

  width: 0%; 

  background: var(--teee-progress-fill); 

}



.nav-number {

  background: none; 

  border: none; 

  cursor: pointer;

  font-weight: 800; 

  color: var(--teee-nav-numbers); 

  font-size: 14px;

  padding: 10px;

  opacity: 0.6;

  transition: opacity 0.3s;

}



.nav-number:hover { opacity: 1; }



@media(max-width: 768px) {



  .teee-hero {

    height: auto;

    min-height: 720px;

    padding-bottom: 90px;

  }



  .teee-hero::before { 

    clip-path: polygon(0 0, 100% 0, 100% 8%, 0 18%);

    background: rgba(255,255,255,0.06);

  }



  .teee-hero .swiper-slide { 

    padding: 140px 24px 140px 24px !important;

    align-items: flex-start;

  }



  .teee-hero__content {

    max-width: 100%;

  }



  .teee-hero__tag {

    font-size: 10px;

    padding: 6px 18px;

    margin-bottom: 18px;

  }



  .teee-hero__title { 

    font-size: 30px;

    line-height: 1.15;

    margin-bottom: 18px;

  }



  .teee-hero__desc {

    font-size: 15px;

    margin-bottom: 28px;

  }



  .teee-hero__buttons {

    gap: 12px;

  }



  .teee-hero__btn {

    padding: 14px 22px;

    font-size: 10px;

    border-radius: 50px;

  }



  .teee-hero__nav { 

    left: 24px; 

    bottom: 28px; 

    top: auto; 

    transform: none; 

    width: calc(100% - 48px); 

    display: flex; 

    justify-content: space-between; 

    align-items: center; 

  }



  .teee-hero__num-wrap { 

    display: none;

  }



  .teee-hero__progress-line {

    width: 50px;

  }



}