/*slider 1*/
/*--------------------------------------------------------------------------------------------------------------*/
.color-insta {
    color: #c44e58;
}

.color-telegram {
    color: #4a92c6;
}

.color-aparat {
    color: #bb3d75;
}
.slider-nav-btn{
    transition: all 0.3s;
}
.main-slider {
    position: relative;
    height: 80vh;
    width: 100%;
    overflow: hidden;
}

.font-slider-p {
    font-weight: 400;
    font-size: 12px;

}

.main-slider-background {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -2;

}

.font-slider-h {
    font-weight: 700;
    font-size: 20px;
    margin: -50px 0 50px 0;
}

.slide {
    position: relative;
    height: 100vh;
    width: 100%;
}

.slider-btn {
    opacity: 60%;
}

.slider-left-bottom-img {
    position: absolute;
    bottom: 3%;
    left: 4%;
    width: 20%;
    height: 40%;
    z-index: 0;
}

.slider-left-top-img {
    position: absolute;
    top: 12%;
    left: 4%;
    width: 20%;
    height: 40%;
    z-index: 0;
}

.slider-center-text {
    position: absolute;
    height: 60%;
    top: 20%;
    left: 2.5%;
    width: 95%;
    z-index: 1;
}

.slider-right-top-img {
    position: absolute;
    height: 40%;
    right: 0;
    top: 10%;
    width: 30%;
    z-index: 0;
}

.slider-right-bottom-img {
    position: absolute;
    bottom: 7%;
    height: 40%;
    right: 10%;
    width: 15%;
    z-index: 0;
}

.slider-next-btn {
    position: absolute;
    bottom: 10%;
    left: 47.5%;
    height: 8%;
    width: 5%;
    z-index: 1;
}

.slider-prev-btn {
    position: absolute;
    top: 0;
    left: 47.5%;
    height: 8%;
    width: 5%;
    z-index: 1;
}

.background-bold-text {
    font-family: Serif;
    font-size: 60px;
    line-height: 70px;
    font-weight: 900;
}

.slider-nav-btn-section {
    position: absolute;
    right: 0;
    height: 12%;
    width: 5%;
    top: 30%;
    z-index: 3;
}

.slider-nav-btn {
    width: 15px;
    height: 15px;
    border-right: 4px solid #0b5ed7;
    border-bottom-right-radius: 4px;
}

.m-text {
    margin-top: -30px;
}

.font-next {
    font-size: 30px;
    animation-name: next-btn;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

.active-slider-btn {
    background: #0b5ed7;
}

@media (min-width: 576px) {
    .main-slider {
        position: relative;
        height: 90vh;
        width: 100%;
        overflow: hidden;
    }

    .font-slider-p {
        font-weight: 400;
        font-size: 15px;

    }

    .font-slider-h {
        font-weight: 700;
        font-size: 25px;

    }

    .slide {
        position: relative;
        height: 100vh;
        width: 100%;
    }

    .slider-btn {
        opacity: 60%;
    }

    .slider-left-bottom-img {
        position: absolute;
        bottom: 5%;
        left: 4%;
        width: 20%;
        height: 40%;
        z-index: 0;
    }

    .slider-left-top-img {
        position: absolute;
        top: 10%;
        left: 4%;
        width: 20%;
        height: 40%;
        z-index: 0;
    }

    .slider-center-text {
        position: absolute;
        height: 60%;
        top: 20%;
        left: 7.5%;
        width: 85%;
        z-index: 1;
    }

    .slider-right-top-img {
        position: absolute;
        height: 40%;
        right: 0;
        width: 25%;
        z-index: 0;
    }

    .slider-right-bottom-img {
        position: absolute;
        bottom: 9%;
        height: 40%;
        right: 10%;
        width: 20%;
        z-index: 0;
    }

    .slider-next-btn {
        position: absolute;
        bottom: 10%;
        left: 47.5%;
        height: 8%;
        width: 5%;
        z-index: 1;
    }

    .slider-prev-btn {
        position: absolute;
        top: 0;
        left: 47.5%;
        height: 8%;
        width: 5%;
        z-index: 1;
    }

    .background-bold-text {
        font-family: Serif;
        font-size: 60px;
        line-height: 70px;
        font-weight: 900;
    }

    .slider-nav-btn-section {
        position: absolute;
        right: 0;
        height: 12%;
        width: 5%;
        top: 30%;
        z-index: 3;
    }

    .slider-nav-btn {
        width: 15px;
        height: 15px;
        border-right: 4px solid #0b5ed7;
        border-bottom-right-radius: 4px;
    }

    .m-text {
        margin-top: -30px;
    }

    .font-next {
        font-size: 40px;
        animation-name: next-btn;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-fill-mode: backwards;
        transition: 1s ease-in-out;
    }
}

@media (min-width: 768px) {
    .main-slider {
        position: relative;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }

    .font-slider-p {
        font-weight: 400;
        font-size: 15px;

    }

    .font-slider-h {
        font-weight: 700;
        font-size: 30px;

    }

    .slide {
        position: relative;
        height: 100vh;
        width: 100%;
    }

    .slider-btn {
        opacity: 60%;
    }

    .slider-left-bottom-img {
        position: absolute;
        bottom: 4%;
        left: 4%;
        width: 20%;
        height: 40%;
        z-index: 0;
    }

    .slider-left-top-img {
        position: absolute;
        top: 5%;
        left: 8%;
        width: 20%;
        height: 40%;
        z-index: 0;
    }

    .slider-center-text {
        position: absolute;
        height: 60%;
        top: 20%;
        left: 10%;
        width: 80%;
        z-index: 1;
    }

    .slider-right-top-img {
        position: absolute;
        height: 20%;
        top: 5%;
        right: 0;
        width: 25%;
        z-index: 0;
    }

    .slider-right-bottom-img {
        position: absolute;
        bottom: 5%;
        height: 40%;
        right: 10%;
        width: 20%;
        z-index: 0;
    }

    .slider-next-btn {
        position: absolute;
        bottom: 10%;
        left: 47.5%;
        height: 8%;
        width: 5%;
        z-index: 1;
    }

    .slider-prev-btn {
        position: absolute;
        top: 0;
        left: 47.5%;
        height: 8%;
        width: 5%;
        z-index: 1;
    }

    .slider-nav-btn-section {
        position: absolute;
        right: 0;
        height: 12%;
        width: 5%;
        top: 30%;
        z-index: 3;
    }

    .slider-nav-btn {
        width: 15px;
        height: 15px;
        border-right: 4px solid #0b5ed7;
        border-bottom-right-radius: 4px;
    }

    .m-text {
        margin-top: -30px;
    }

    .font-next {
        font-size: 40px;
        animation-name: next-btn;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-fill-mode: backwards;
        transition: 1s ease-in-out;
    }
}

@media (min-width: 991px) {
    .main-slider {
        position: relative;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }

    .font-slider-p {
        font-weight: 400;
        font-size: 15px;

    }

    .font-slider-h {
        font-weight: 700;
        font-size: 35px;

    }

    .slide {
        position: relative;
        height: 100vh;
        width: 100%;
    }

    .slider-btn {
        opacity: 60%;
    }

    .slider-left-bottom-img {
        position: absolute;
        bottom: 10%;
        left: 10%;
        width: 16%;
        height: 40%;
        z-index: 0;
    }

    .slider-left-top-img {
        position: absolute;
        top: 5%;
        left: 15%;
        width: 16%;
        height: 30%;
        z-index: 0;
    }

    .slider-center-text {
        position: absolute;
        height: 60%;
        top: 20%;
        left: 10%;
        width: 80%;
        z-index: 1;
    }

    .slider-right-top-img {
        position: absolute;
        height: 25%;
        right: 0;
        top: 0;
        width: 25%;
        z-index: 0;
    }

    .slider-right-bottom-img {
        position: absolute;
        bottom: 15%;
        height: 30%;
        right: 20%;
        width: 15%;
        z-index: 0;
    }

    .slider-next-btn {
        position: absolute;
        bottom: 10%;
        left: 47.5%;
        height: 8%;
        width: 5%;
        z-index: 1;
    }

    .slider-prev-btn {
        position: absolute;
        top: 0;
        left: 47.5%;
        height: 8%;
        width: 5%;
        z-index: 1;
    }

    .slider-nav-btn-section {
        position: absolute;
        right: 0;
        height: 12%;
        width: 5%;
        top: 30%;
        z-index: 3;
    }

    .slider-nav-btn {
        width: 15px;
        height: 15px;
        border-right: 4px solid #0b5ed7;
        border-bottom-right-radius: 4px;
    }

    .m-text {
        margin-top: -30px;
    }

    .font-next {
        font-size: 40px;
        animation-name: next-btn;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-fill-mode: backwards;
        transition: 1s ease-in-out;
    }
}

@media (min-width: 1200px) {
    .main-slider {
        position: relative;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }

    .font-slider-p {
        font-weight: 400;
        font-size: 15px;

    }

    .main-slider-background {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -2;

    }

    .font-slider-h {
        font-weight: 700;
        font-size: 35px;

    }

    .slide {
        position: relative;
        height: 100vh;
        width: 100%;
    }

    .slider-btn {
        opacity: 60%;
    }

    .slider-left-bottom-img {
        position: absolute;
        bottom: 10%;
        left: 4%;
        width: 20%;
        height: 40%;
        z-index: 0;
    }

    .slider-left-top-img {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 16%;
        height: 30%;
        z-index: 0;
    }

    .slider-center-text {
        position: absolute;
        height: 60%;
        top: 20%;
        left: 17.5%;
        width: 65%;
        z-index: 1;
    }

    .slider-right-top-img {
        position: absolute;
        height: 40%;
        top: 5%;
        right: 4%;
        width: 25%;
        z-index: 0;
    }

    .slider-right-bottom-img {
        position: absolute;
        bottom: 17%;
        right: 15%;
        width: 10%;
        z-index: 0;
    }

    .slider-next-btn {
        position: absolute;
        bottom: 10%;
        left: 47.5%;
        height: 8%;
        width: 5%;
        z-index: 1;
    }

    .slider-prev-btn {
        position: absolute;
        top: 0;
        left: 47.5%;
        height: 8%;
        width: 5%;
        z-index: 1;
    }

    .background-bold-text {
        font-family: Serif;
        font-size: 60px;
        line-height: 70px;
        font-weight: 900;
    }

    .slider-nav-btn-section {
        position: absolute;
        right: 0;
        height: 12%;
        width: 5%;
        top: 30%;
        z-index: 3;
    }

    .slider-nav-btn {
        width: 15px;
        height: 15px;
        border-right: 4px solid #0b5ed7;
        border-bottom-right-radius: 4px;
    }

    .m-text {
        margin-top: -30px;
    }

    .font-next {
        font-size: 40px;
        animation-name: next-btn;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-fill-mode: backwards;
        transition: 1s ease-in-out;
    }
}

@keyframes next-btn {
    0% {
        transform: translateY(0px);
    }

    50% {
        margin-top: 10px;
        transform: scale(1.1) translateY(0px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes slider-left-top-img-exit {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateY(-130%) rotate(90deg);
    }
}

.slider-left-top-img-exit {
    animation-name: slider-left-top-img-exit;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slider-left-top-img-enter {
    0% {
        transform: translateX(-180%) rotate(90deg);
    }

    100% {
        transform: translateX(0px);
    }
}

.slider-left-top-img-enter {
    animation-name: slider-left-top-img-enter;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slider-left-bottom-img-exit {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-300%) rotate(90deg);
    }
}

.slider-left-bottom-img-exit {
    animation-name: slider-left-bottom-img-exit;
    animation-duration: 1.2s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slider-left-bottom-img-enter {
    0% {
        transform: translateY(130%) rotate(90deg);
    }

    100% {
        transform: translateY(0px);
    }
}

.slider-left-bottom-img-enter {
    animation-name: slider-left-bottom-img-enter;
    animation-duration: 1.7s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slider-right-bottom-img-enter {
    0% {
        transform: translateY(130%) rotate(-90deg);
    }

    100% {
        transform: translateY(0px);
    }
}

.slider-right-bottom-img-enter {
    animation-name: slider-right-bottom-img-enter;
    animation-duration: 1.6s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slider-right-bottom-img-exit {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateX(200%) rotate(90deg);
    }
}

.slider-right-bottom-img-exit {
    animation-name: slider-right-bottom-img-exit;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slider-right-top-img-enter {
    0% {
        transform: translateX(180%) translateY(100%) rotate(-90deg);
    }

    100% {
        transform: translateY(0px);
    }
}

.slider-right-top-img-enter {
    animation-name: slider-right-top-img-enter;
    animation-duration: 1.2s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slider-right-top-img-exit {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateX(280%) rotate(90deg);
    }
}

.slider-right-top-img-exit {
    animation-name: slider-right-top-img-exit;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slide-center-text-exit {
    0% {
        transform: translateY(0px);
        opacity: 100%;
    }

    100% {
        transform: translateX(-230%);
        opacity: 0;
    }
}

.slide-center-text-exit {
    animation-name: slide-center-text-exit;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes slide-center-text-enter {
    0% {
        transform: translateY(-200%);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 100%;
    }
}

.slide-center-text-enter {
    animation-name: slide-center-text-enter;
    animation-duration: 1.2s;
    animation-fill-mode: backwards;
    transition: 1s ease-in-out;
}

@keyframes main-slider-background-enter {
    0% {
        opacity: 50%;
    }

    100% {
        opacity: 100%;
    }
}

.main-slider-background-exit {
    animation-name: main-slider-background-enter;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    transition: 1s ease-in-out;
}