.section-hero {

    display: flex;

    padding-top: var(--header-comp);

    background-color: var(--bg-l-green);

    text-align: center;

    flex-flow: column;

}



.section-hero.sm .section-hero-container {

    padding-block: var(--tb-val-m);

}



.section-hero.big .section-hero-container {

    padding-block: 124px var(--tb-val-xl);

}



.section-hero-bg {

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    -o-object-position: center center;

    object-position: center center;

    z-index: 0;

}



.section-hero-container {

    position: relative;

    margin-block: auto;

    padding-block: var(--tb-val-m) var(--tb-val-l);

    padding-inline: var(--p-inline);

}



.section-hero-info {

    margin-inline: auto;

    max-width: 1125px;

}



.section-hero-desc {

    /* max-width: 900px; */

    margin-top: 40px;

}

@media screen and (max-width: 1600px) {

  .section-hero-info {

    max-width: 890px;

  }

}



@media (max-width: 1440px) {

    .section-hero-desc {

        margin: 40px auto 0;

        max-width: 850px;

    }

}



.section-hero-btns {

    display: flex;

    margin-top: 70px;

    justify-content: center;

    align-items: center;

    gap: 20px;

}



.section-hero-half {

    text-align: left;

}



.section-hero-half-container {

    display: flex;

    padding-block: 30px var(--tb-val-l);

    padding-inline: var(--p-inline);

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}



.section-hero-half-info {

    max-width: 676px;

}



.section-hero-half-media {

    position: relative;

    margin-right: 65px;

    width: 100%;

    max-width: 611px;

}



.section-hero-half-media-ball {

    position: absolute;

    animation: float 4s ease-in-out 0s infinite normal none running;

}



.section-hero-half-media-ball.one {

    top: 10px;

    left: 163px;

}



.section-hero-half-media-ball.two {

    right: 0;

    bottom: 0;

    animation-duration: 6s;

}



@media screen and (max-width: 1440px) {

    .section-hero.big .section-hero-container {

        padding-top: 70px;

    }



    .section-hero-desc {

        margin-top: 20px;

    }



    .section-hero-btns {

        margin-top: 60px;

    }



    .section-hero-half-container {

        padding-top: 68px;

    }



    .section-hero-half-info {

        max-width: 509px;

    }



    .section-hero-half-media {

        margin-right: 60px;

        max-width: 446px;

    }



    .section-hero-half-media-bg {

        max-width: 360px;

    }



    .section-hero-half-media-ball.one {

        left: 120px;

        max-width: 108px;

    }



    .section-hero-half-media-ball.two {

        max-width: 248px;

    }

}



@media screen and (max-width: 1024px) {

    .section-hero.big .section-hero-container {

        padding-block: 176px 242px;

    }



    .section-hero-info {

        max-width: 512px;

    }



    .section-hero-desc {

        margin-top: 16px;

    }



    .section-hero-btns {

        margin-top: 32px;

    }



    .section-hero-half-container {

        display: grid;

        padding-top: 48px;

        grid-template-columns: repeat(2, 1fr);

    }



    .section-hero-half-media {

        margin-right: 0;

    }



    .section-hero-half-media-bg {

        max-width: 270px;

    }



    .section-hero-half-media-ball.one {

        left: 89px;

        max-width: 81px;

    }



    .section-hero-half-media-ball.two {

        max-width: 187px;

    }

}







@media screen and (max-width: 552px) {

    .section-hero.big .section-hero-container {

      padding-block: 60px 80px;

    }

  

    .section-hero br:not(.dh) {

      display: none;

    }

  

    .section-hero-btns {

      gap: 16px;

    }

  

    .section-hero-half-container {

      padding-top: 32px;

      grid-template-columns: 1fr;

      gap: 40px;

    }

  

    .section-hero-half-info {

      max-width: 100%;

    }

  

    .section-hero-half-media-bg {

      margin-left: 50px;

      max-width: 192px;

    }

  

    .section-hero-half-media-ball.one {

      left: 113px;

      max-width: 58px;

    }

  

    .section-hero-half-media-ball.two {

      max-width: 133px;

    }

}