/*Banner Section CSS*/
.banner-section {
    padding: 230px 0 395px;
    position: relative;
    overflow: hidden;
    &::before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        background: url(./img/banner-before.png) no-repeat center center;
        background-size: cover;
    }
    .container {
        position: relative;
        z-index: 99;
    }
    @include breakpoint(max-lg) {
        padding: 160px 0 190px;
    }
    @include breakpoint(max-sm) {
        padding: 160px 0 120px;
    }
}
.banner-bottom-shape {
    position: absolute;
    bottom: -1px;
    left: 50%;
    @include transform(translateX(-50%));
}
.banner-content {
    max-width: 910px ;
    margin: 0 auto ;text-align: center;
    .cate {
        color: $primary-color;
        text-transform: uppercase;
        margin: 0;
        margin-bottom: 18px;
    }
    p {
        max-width: 860px;
        font-size: 28px;
        line-height: 34px;
        margin: 0 auto 35px;
    }
    .title {
        margin-bottom: 14px;
    }
    @include breakpoint(xl) {
        .title {
            font-size: 90px;
            line-height: 110px;
        }
    }
    @include breakpoint(max-lg) {
        .title {
            font-size: 70px;
            line-height: 80px;
            margin-bottom: 20px;
        }
    }
    @include breakpoint(max-md) {
        .cate, p {
            font-size: 22px;
            line-height: 30px;
        }
        .title {
            font-weight: 700;
            font-size: 50px;
            line-height: 60px;
            margin-bottom: 20px;
        }
    }
    @include breakpoint(max-sm) {
        .cate, p {
            font-size: 18px;
            line-height: 28px;
        }
        .cate {
            margin-bottom: 10px;
        }
        .title {
            font-size: 30px;
            line-height: 42px;
            margin-bottom: 10px;
        }
        p {
            margin-bottom: 25px;
        }
    }
}
.ball-1,
.ball-2,
.ball-3,
.ball-4,
.ball-5,
.ball-6 {
    position: absolute;
    @include breakpoint(max-lg) {
        display: none;
    }
}
.ball-1 {
    left: calc(50% - 68px);
    bottom: 200px;
    animation: ball 5s alternate infinite;
    -webkit-animation: ball 5s alternate infinite;
    -moz-animation: ball 5s alternate infinite;
}
.ball-2 {
    left: calc(50% + 110px);
    bottom: 250px;
    animation: ball 3s alternate infinite;
    -webkit-animation: ball 3s alternate infinite;
    -moz-animation: ball 3s alternate infinite;
}
.ball-3 {
    left: calc(50% + 450px);
    bottom: 650px;
    animation: ball 7s alternate infinite;
    -webkit-animation: ball 7s alternate infinite;
    -moz-animation: ball 7s alternate infinite;
}
.ball-4 {
    right: calc(50% + 450px);
    bottom: 650px;
    animation: ball 11s alternate infinite;
    -webkit-animation: ball 11s alternate infinite;
    -moz-animation: ball 11s alternate infinite;
}
.ball-6 {
    right: calc(50% + 110px);
    bottom: 350px;
    animation: ball 8s alternate infinite;
    -webkit-animation: ball 8s alternate infinite;
    -moz-animation: ball 8s alternate infinite;
}
@keyframes ball {
    0% {
        @include transform(translateY(-100px));
    }
    30% {
        @include transform(translateY(30px));
    }
    60% {
        @include transform(translateY(-30px));
    }
    80% {
        @include transform(translateY(0px));
    }
    100% {
        @include transform(translateY(-100px));
    }
}
div[class*="b-elem"] {
    position: absolute;
}
.tup_kore {
    animation: tup_kore 1s;
    opacity: 1;
    &.animated {
        opacity: 0;
    }
}
.tup_kore_2 {
    animation: tup_kore_2 1s;
    opacity: 1;
    &.animated {
        opacity: 0;
    }
}
.b-elem-1 {
    bottom: 225px;
    right: calc(50% + 455px);
}
.b-elem-2 {
    bottom: 695px;
    right: calc(50% + 670px);
}
.b-elem-3 {
    bottom: 580px;
    right: calc(50% + 825px);
}
.b-elem-4 {
    bottom: 485px;
    right: calc(50% + 530px);
}
.b-elem-5 {
    bottom: 430px;
    right: calc(50% + 680px);
}
.b-elem-6 {
    bottom: 280px;
    right: calc(50% + 555px);
}
.b-elem-7 {
    top: 115px;
    left: calc(50% + 725px);
}
.b-elem-8 {
    top: 825px;
    left: calc(50% + 545px);
}
.b-elem-9 {
    top: 775px;
    left: calc(50% + 475px);
}
.b-elem-10 {
    top: 713px;
    left: calc(50% + 632px);
}
.b-elem-11 {
    top: 685px;
    left: calc(50% + 701px);
}
.b-elem-12 {
    top: 422px;
    left: calc(50% + 538px);
    img {
        animation: up_down 6s linear infinite;
    }
}
.b-elem-13 {
    top: 490px;
    left: calc(50% + 440px);
}
.b-elem-14 {
    top: 195px;
    left: calc(50% + 378px);
}
@keyframes tup_kore {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes tup_kore_2 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes up_down {
    0% {
        @include transform(translateY(-15px));
    }
    50% {
        @include transform(translateY(15px));
    }
    100% {
        @include transform(translateY(-15px));
    }
}