.da-slider {
    width:100%;
    height:45vw;
    max-height:450px;
    position:relative;
    overflow:hidden;
    background-image:linear-gradient(#e66465ae, #9198e5fe),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 15'><path fill='red' d='M0 0h8v5H0zm48 0h8v5h-8zM8 10h8v5H8zm24 0h8v5h-8z'/><path fill='%23747c89' d='M8 0h8v5H8zm32 0h8v5h-8zM0 5h8v5H0zm16 5h8v5h-8z'/><path fill='%238b95a5' d='M16 0h8v5h-8zm8 5h8v5h-8zm24 0h8v5h-8zM0 10h8v5H0z'/><path fill='white' d='M24 0h8v5h-8zm8 5h8v5h-8zm-8 5h8v5h-8zm24 0h8v5h-8z'/><path fill='%23d1d7db' d='M32 0h8v5h-8zM8 5h8v5H8zm32 0h8v5h-8z'/><path fill='%234e555e' d='M16 5h8v5h-8zm24 5h8v5h-8z'/></svg>");
    background-size:auto 100%;
    transition:background-position-x 1.4s ease-in-out .3s
}
.da-slider>.container-xl {
    position:relative;
    height:100%
}

.da-slide h2,.da-slide h4,.da-slide p,.da-slide .da-link,.da-slide .da-img {
    position:absolute;
    opacity:0;
    left:10%;
    transform:translateX(90vw)
}
.da-slide h2 {
    top:100px;
    color:#181a1c;
    font-size:33px;
    font-weight:700
}
.da-slide h4 {
    top:155px;
    color:#181a1c;
    font-size:22px;
    width:50%
}
.da-slide p {
    top:210px;
    color:#181a1c;
    padding:0;
    width:45%
}
.da-slide .da-link {
    top:340px;
    text-decoration: none;
    font-size:18px;
    padding:10px 20px;
    color: var(--text-white);
    background: var(--brand-gradient);
    border-radius:4px
}
.da-slide .da-link:hover,.da-slide .da-link:active,.da-slide .da-link:focus {
    color:#181a1c;
    color: var(--text-white);
    background: var(--brand-hover-gradient);
}
.da-slide .da-img {
    top:70px;
    left:60%;
    width:30%
}
.da-slide .da-img img {
    border-radius:10px
}
.da-arrows span {
    position:absolute;
    top:0;
    height:100%;
    width:45px;
    cursor:pointer;
    opacity:0;
    transition:opacity .4s ease-in-out .2s
}
.da-slider:hover .da-arrows span {
    opacity:1
}
.da-arrows span.da-arrows-prev {
    background:no-repeat 50% url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='45' height='130'><path fill='none' stroke='white' stroke-width='2' d='M42 0l-40 65 40 65'/></svg>")
}
.da-arrows span.da-arrows-next {
    right:15px;
    background:no-repeat 50% url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='45' height='130'><path fill='none' stroke='white' stroke-width='2' d='M2 0l40 65-40 65'/></svg>")
}
.da-dots {
    position:absolute;
    bottom:20px;
    width:100%;
    text-align:center
}
.da-dots span {
    display:inline-block;
    width:50px;
    height:3px;
    background-color:#fff;
    margin:3px;
    cursor:pointer
}
.da-dots span.da-dots-current {
    background-color:#181a1c
}
.da-slide-current h2,.da-slide-current h4,.da-slide-current p,.da-slide-current .da-link {
    transform:translateX(0);
    opacity:1
}
.da-slide-current .da-img {
    transform:translateX(0);
    opacity:1
}

@media(max-width: 1440px) {
    .da-slide .da-link {
        top: 340px;
        font-size: 17px;
    }
    .da-slide p {
        top: 220px;
        font-size: 15px;
        line-height: 1.5;
    }
    .da-slide h2, .da-slide h4, .da-slide p, .da-slide .da-link, .da-slide .da-img {
        left: 8%;
    }
    .da-slide .da-img {
        top: 110px;
        left: 62%;
    }
}

@media(max-width:991px) {
    .da-slide h2 {
        top: 50px;
        font-size: 26px;
    }
    .da-slide h4 {
        top: 95px;
        font-size: 17px;
    }
    .da-slide p {
        top: 140px;
        font-size: 14px;
    }
    .da-slide .da-link {
        top: 255px;
    }
    .da-slide .da-img {
        top: 70px;
    }

}


@media(max-width:767px) {
    .da-slide p {
        display:none
    }
    .da-slide .da-link {
        top:180px
    }
    .da-slide h2 {
        top: 68px;
        font-size: 26px;
    }
    .da-slide h4 {
        top: 110px;
    }
    .da-slide p {
        top: 142px;
    }
    .da-slide .da-link {
        top: 180px;
        font-size: 15px;
    }


}


@media(max-width:575px) {
    .da-slide h2 {
        top: 22px;
        font-size: 20px
    }
    .da-slide h4,.da-slide .da-img {
        display:none
    }
    .da-slide .da-link {
        top: 82px;
        font-size: 13px;
    }
    .da-dots span {
        width: 32px;
        height: 2px;
    }
    .da-dots {
        bottom: 10px;
    }
    .da-slide h2, .da-slide h4, .da-slide p, .da-slide .da-link, .da-slide .da-img {
        left: 10%;
    }

}

.da-slide-fromright h2,.da-slide-fromright h4,.da-slide-fromright p,.da-slide-fromright .da-img {
    animation:fromRight .6s ease-out .8s both
}
.da-slide-fromright .da-link {
    animation:fromRightLink .4s ease-out 1.2s both
}

@keyframes fromRight {
    0% {
        transform:translateX(90vw);
        opacity:0
    }
    100% {
        transform:translateX(0);
        opacity:1
    }
}

@keyframes fromRightLink {
    0% {
        transform:translateX(0);
        opacity:0
    }
    100% {
        transform:translateX(0);
        opacity:1
    }

}


.da-slide-fromleft h2,.da-slide-fromleft h4,.da-slide-fromleft p,.da-slide-fromleft .da-img {
    animation:fromLeft .6s ease-out .6s both
}
.da-slide-fromleft .da-link {
    animation:fromLeftLink .4s ease-out 1.2s both
}

@keyframes fromLeft {
    0% {
        transform:translateX(-90vw);
        opacity:0
    }
    100% {
        transform:translateX(0);
        opacity:1
    }
}

@keyframes fromLeftLink {
    0% {
        transform:translateX(0);
        opacity:0
    }
    100% {
        transform:translateX(0);
        opacity:1
    }
}

.da-slide-toright h2 {
    animation:toRightText .6s ease-in .6s both
}
.da-slide-toright h4 {
    animation: toRightText 0.6s ease-in 0.45s both;
}
.da-slide-toright p {
    animation: toRightText 0.6s ease-in 0.3s both;
}
.da-slide-toright .da-link {
    animation: toRightLink 0.4s ease-in both;
}
.da-slide-toright .da-img {
    animation: toRightImg 0.6s ease-in both;
}
@keyframes toRightText {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(90vw);
        opacity: 0;
    }
}
@keyframes toRightLink {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    99% {
        transform: translateX(0);
        opacity: 0;
    }
    100% {
        transform: translateX(90vw);
        opacity: 0;
    }
}
@keyframes toRightImg {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    30% {
        transform: translateX(-5vw);
        opacity: 1;
    }
    100% {
        transform: translateX(50vw);
        opacity: 0;
    }
}
.da-slide-toleft h2 {
    animation: toLeftText 0.6s ease-in both;
}
.da-slide-toleft h4 {
    animation: toLeftText 0.6s ease-in 0.15s both;
}
.da-slide-toleft p {
    animation: toLeftText 0.6s ease-in 0.3s both;
}
.da-slide-toleft .da-link {
    animation: toLeftLink 0.4s ease-in both;
}
.da-slide-toleft .da-img {
    animation: toLeftImg 0.6s ease-in 0.6s both;
}
@keyframes toLeftText {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    30% {
        transform: translateX(5vw);
        opacity: 1;
    }
    100% {
        transform: translateX(-90vw);
        opacity: 0;
    }
}
@keyframes toLeftLink {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    99% {
        transform: translateX(0);
        opacity: 0;
    }
    100% {
        transform: translateX(-90vw);
        opacity: 0;
    }
}
@keyframes toLeftImg {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateX(10vw);
        opacity: 1;
    }
    90% {
        transform: translateX(-60vw);
        opacity: 0;
    }
    100% {
        transform: translateX(-90vw);
        opacity: 0;
    }
}