.hero{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 78px;
  overflow: hidden;
}
.hero-inner-wrapper{
  padding-right: 50px;
  padding-left: 50px;
}
.hero-inner-wrapper-inner{
  padding-top: 127.2px;
    border-left: 1px solid transparent;
border-right: 1px solid transparent;
  -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
}
.hero.seen-np-kom .hero-inner-wrapper-inner{
    border-left: 1px solid var(--gray-4);
border-right: 1px solid var(--gray-4);
}
.hero-inner{
  padding-top: 72px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 33px;
position: relative;
}
.hero .description{
text-shadow: 0px 4px 30px rgba(32, 32, 32, 0.5);
}
.hero .phrases{
  margin-bottom: 1px;
  opacity: 0;
   -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
}
.hero.seen-np-kom .phrases{
opacity: 1;
}
.hero h1{
  margin-left: 21px;
   opacity: 0;
   -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
}
.hero.seen-np-kom h1{
  opacity: 1;
}
.first-hero-dscr-wrapper{
  display: flex;
  justify-content: end;
  margin-top: 36px;
}
.first-hero-dscr{
  text-align: right;
  max-width: 263px;
  right: -100px;
  position: relative;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
}
.hero.seen-np-kom .first-hero-dscr{
 transform: translateX(-100px);
 opacity: 1;
}
.second-hero-dscr-wrapper{
  margin-top: 263px;
}
.second-hero-dscr{
  max-width: 476px;
  margin-bottom: 0px;
  left: -100px;
  position: relative;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
}
.hero.seen-np-kom .second-hero-dscr{
transform: translateX(100px);
 opacity: 1;
}
.btm-hor-hero{
  border-top: 1px solid var(--gray-4);
  width: 35%;
   opacity: 0;
  -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
}
.hero.seen-np-kom .btm-hor-hero{
width: 100%;
opacity: 1;
}
.button-hero-wrapper{
  display: flex;
  justify-content: end;
  margin-top: 52px;
  margin-right: 50px;
   opacity: 0;
   -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
}
.hero.seen-np-kom .button-hero-wrapper{
  opacity: 1;
}
.round-block-hero{
  position: absolute;
    top: 50%;
    left: 50%;
        width: 300px;
    height: 300px;
    border-radius: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
   z-index: 1;
     opacity: 0;
  -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
}
.hero.seen-np-kom .round-block-hero{
opacity: 1;
  width: 500px;
    height: 500px;
}
.round-block-hero svg{
  width: 100%;
  height: 100%;
}
.diag-block-hero{
background: -webkit-gradient(linear, left top, right top, from(#A3A3A3), color-stop(20.34%, rgba(172, 172, 172, 0.00)), color-stop(79.77%, rgba(172, 172, 172, 0.00)), to(#4A4A4A));
    background: -o-linear-gradient(left, #A3A3A3 0%, rgba(172, 172, 172, 0.00) 20.34%, rgba(172, 172, 172, 0.00) 79.77%, #4A4A4A 100%);
    background: linear-gradient(90deg, #A3A3A3 0%, rgba(172, 172, 172, 0.00) 20.34%, rgba(172, 172, 172, 0.00) 79.77%, #4A4A4A 100%);
    -webkit-clip-path: polygon(0 0.1%, 0.1% 0, 100% 99.9%, 99.9% 100%);
            clip-path: polygon(0 0.1%, 0.1% 0, 100% 99.9%, 99.9% 100%);
    inset: 0;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
            transform: scaleX(-1);
           position: absolute;
           opacity: 0;
   -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
            }
 .hero.seen-np-kom .diag-block-hero{
  opacity: 1;
}           
@media (max-width: 900px) {
  .hero{
  padding-bottom: 100px;
}
.hero-inner{
  padding-top: 99px;
}
.button-hero-wrapper{
  margin-top: 36px;
  margin-right: 0px;
}
.hero-inner-wrapper-inner {
    padding-top: 76.26px;
}
.diag-block-hero{
background: -webkit-gradient(linear, left top, right top, from(#A3A3A3), color-stop(10.34%, rgba(172, 172, 172, 0.00)), color-stop(79.77%, rgba(172, 172, 172, 0.00)), to(#4A4A4A));
    background: -o-linear-gradient(left, #A3A3A3 0%, rgba(172, 172, 172, 0.00) 10.34%, rgba(172, 172, 172, 0.00) 79.77%, #4A4A4A 100%);
    background: linear-gradient(90deg, #A3A3A3 0%, rgba(172, 172, 172, 0.00) 10.34%, rgba(172, 172, 172, 0.00) 79.77%, #4A4A4A 100%);
}
}

@media (max-width: 850px) {
  .hero-inner-wrapper {
    padding-right: 16px;
    padding-left: 16px;
}
.hero-inner{
  padding-bottom: 51px;
}
}

@media (max-width: 576px) {
  .hero-inner-wrapper {
    padding-right: 26px;
    padding-left: 26px;
}
    .hero {
        padding-bottom: 24px;
    }
    .hero-inner {
    padding-top: 67px;
    padding-left: 26px;
    padding-right: 26px;
    padding-bottom: 12px;
}
.hero .phrases {
    margin-top: 0px;
}
.round-block-hero{
  width: calc(100% - 220px);
  height: auto;
  min-width: 230px;
}
.hero.seen-np-kom .round-block-hero{
  width: calc(100% - 120px);
}
.first-hero-dscr-wrapper{
  margin-top: 9px;
}
.second-hero-dscr-wrapper {
    margin-top: 232px;
}
     .button-hero-wrapper {
        margin-top: 53px;
        justify-content: center;
     }
}
@media (max-width: 425px) {
   .hero-inner-wrapper {
    padding-right: 8px;
    padding-left: 8px;
}
 .hero {
        padding-bottom: 10px;
    }
      .hero-inner {
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 17px;
}
.hero h1 {
    margin-left: 0px;
}
.hero .phrases {
    margin-top: 0px;
}
.first-hero-dscr{
  max-width: 198px;
}
.button-hero-wrapper {
        margin-top: 12px;
}
}