.services section{
    height: 100vh;
}

.services .particles-bg {
    height: 66vh;
    width: 80%;
    top: 27%;
    left: 20%;
    transform: unset;
}
.services-header {
    margin: 223px 0 0 15%;
    position: relative;
    user-select: none;
    pointer-events: none;
}
.services-banners {
    position: absolute;
    top: 56%;
    right: 0;
    transform: translate(0, -50%);
    height: 57vw;
    width: 62vw;
    max-width: calc(90vw - 700px);
    max-height: calc(82.8vw - 644px);
}
.s-banner{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.2s linear;
    /* transform: translate3d(60px, -60px, 0px); */
    /* clip-path: polygon(98.2% 0, 67% 56.5%, 100% 56.5%, 100% 100%, 0 100%, 0 0); */
    clip-path: polygon(98.2% 0, 70.2% 50.7%, 100% 63.5%, 100% 100%, 0 100%, 0 0);
}
.s-banner.active{
    opacity: 1;
    transition: all 0.5s linear;
    /* transform: translate3d(0px, -0px, 0px); */
}
.banner-bar{
    content: "";
    display: block;
    position: absolute;
    left: 56%;
    top: 49%;
    background-color: var(--red-color);
    height: 76%;
    width: 30%;
    transform: translate3d(-24%, -68%, 0) skewX(-31deg);
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.5s ease;
}
.s-banner.active .banner-bar{
    transform: translate3d(-50%, -50%, 0) skewX(-31deg);
    opacity: 1;
    transition: all 0.8s ease;
}
.banner-img{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    position: absolute;
    opacity: 0;
    transform: translate3d(-60px, -20px, 0px);
    transition: all 1s ease-out;
}
.s-banner.active .banner-img{
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
}
.service-tabs{
    position: absolute;
    width: 40vw;
    min-width: 774px;
    top: 45%;
    height: calc(100% - 550px);
    left: 10vw;
}
.service-no{
    position: absolute;
    right: 0;
    top: 20px;
    font-size: 10rem;
    line-height: 10rem;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--pink-op-color);
    color: transparent;
    font-weight: 900;
}
span.s-no {
    display: block;
    position: absolute;
    right: 0;
    /* transform: translate(0, 50%); */
    opacity: 0;
    transition: all 0.2s ease;
}
span.s-no.active{
    /* transform: translate(0, 0%); */
    transition: all 1s ease 0.2s;
    opacity: 1;
}
.service-tabs .service-swiper{
    overflow: hidden;
    height: 100%;
    width: calc(100% - 194px);
    margin-left: 194px;
    min-height: 395px;
    min-width: 580px;
    /* min-width: 520px; */
}
.service-tabs .swiper-slide {
    text-align: left;
    font-size: 18px;
    color: var(--white-color);

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;

    -webkit-box-pack: center;
    -ms-flex-pack: center;

    -webkit-justify-content: start;
    justify-content: start;

    -webkit-box-align: center;
    -ms-flex-align: center;

    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.service-button-prev, .service-button-next{
    position: absolute;
    left: 0;
    top: 25px;
    width: 45px;
    height: 45px;
    opacity: 1;
    border-radius: 50%;
    border: 1px var(--white-color) solid;
    --slider-button: 0.3s;
    transition: all var(--slider-button) ease;
    -webkit-transition: all var(--slider-button) ease;
}
.service-button-next{
    top: 105px;
}
.service-button-prev:before, .service-button-next:before{
    position: absolute;
    top: 36%;
    left: 36%;
    content: "";
    display: inline-block;
    width: 30%;
    height: 30%;
    border-left: 2px solid var(--white-color);
    border-bottom: 2px solid var(--white-color);
    transform: rotate(135deg) translate(2px, -2px);
    transition: all var(--slider-button) ease;
    -webkit-transition: all var(--slider-button) ease;
}
.service-button-next:before{
    transform: rotate(315deg) translate(2px, -2px);
}
.swiper-button-disabled{
    border: 1px var(--grey-color) solid;
}
.swiper-button-disabled.service-button-prev:before, 
.swiper-button-disabled.service-button-next:before{
    border-left: 2px solid var(--grey-color);
    border-bottom: 2px solid var(--grey-color);
}

.service-pagination{
    position: absolute;
    top: 0;
    left: 80px;
}
.service-pagination .swiper-pagination-bullet{
    display: block;
    height: 25px;
    width: 25px;
    color: var(--white-color);
    text-align: center;
    margin-bottom: 15px;
    background: transparent;
    position: relative;
}
.service-pagination .swiper-pagination-bullet:before{
    content: "";
    display: block;
    position: absolute;
    left: -12px;
    top: 50%;
    background-color: var(--green-color);
    height: 60%;
    width: 3px;
    transform: translate3d(-10px, -50%, 0) skewX(-34deg);
    opacity: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}
.service-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before{
    transform: translate3d(0px, -50%, 0) skewX(-34deg);
    opacity: 1;
}
.service-pagination .swiper-pagination-bullet:after{
    content: "";
    display: block;
    width: 0px;
    height: 1px;
    background-color: var(--white-color);
    position: absolute;
    top: 50%;
    left: calc(100% + 16px);
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}
.service-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
    width: 50px;
}

.title, .platforms, .des, .service-btn{
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
}
.swiper-slide-active .title, 
.swiper-slide-active .platforms, 
.swiper-slide-active .des, 
.swiper-slide-active .service-btn{
    opacity: 1;
    transform: translate(0, 0px);
}
.title{
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 3rem;
    color: var(--red-color);
    text-transform: uppercase;
}
.platforms{
    margin: 12px 0;
    font-weight: 100;
}
.des{
    margin: 22px 0 38px 0;
    font-weight: 100;
}
.service-btn{
    margin-left: 53px;
}
.swiper-slide-active .title{
    transition: all 0.7s linear;
    -webkit-transition: all 0.7s linear;
    
}
.swiper-slide-active .platforms{
    transition: all 0.5s linear 0.2s;
    -webkit-transition: all 0.5s linear 0.2s;
    
}
.swiper-slide-active .des{
    transition: all 0.5s linear 0.7s;
    -webkit-transition: all 0.5s linear 0.7s;
    
}
.swiper-slide-active .service-btn{
    transition: all 0.5s linear 1.2s;
    -webkit-transition: all 0.5s linear 1.2s;

}



/* inner page */
.s-website section:nth-child(1){
    height: 100vh;
    max-height: 100vw;
}
.s-website .scroll-bar {
    bottom: 12vh;
    opacity: 0.1;
}
.s-website .scroll-bar.nd-b{
    bottom: 40px;
}
.s-page-title{
    font-size: 4.2vw;
    line-height: 5.2vw;
}
.s-subtitle{
    color: var(--white-color);
    font-weight: 500;
    pointer-events: none;
    font-size: 1.3vw;
}
.s-website .section-con{
    display: flex;
    margin: 70px auto 150px auto;
    position: relative;
}

.web-subtitle{
    font-size: 90px;
    line-height: 90px;
    flex-basis: 650px;
    flex-grow: 0;
    flex-shrink: 0;
}
@media (max-width: 1440px){
    .web-subtitle {
        font-size: 76px;
        line-height: 76px;
        flex-basis: 560px;
    }
}

.s-website #particles-bg2{
    height: 50vh;
    top: 100%;
    left: 0;
    transform: translate(0, -50%);
}
.s-website #particles-bg3{
    top: 32%;
}

.performing-div{
    padding-top: 120px;
    z-index: 1;
}

.svg-box {
    display: flex;
    margin: 55px 0;
}
.svg-bg{
    height: 122px;
    width: 122px;
    flex-basis: 122px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 15px;
    background: rgba(69, 74, 82, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
}
.svg-box.show .svg-bg{
    opacity: 1;
}
.pra-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.practice{
    transition: all 0.8s ease 0.3s;
    -webkit-transition: all 0.8s ease 0.3s;
}


.inner-platforms{
    margin-top: 160px;
    width: 100%;
    height: 500px;
    position: relative;
}
.platform-box{
    position: absolute;
}
.platform-box:nth-child(1){
    top: 0;
    left: 0;
}
.platform-box:nth-child(2){
    top: 0;
    right: 0;
}
.platform-box:nth-child(3){
    bottom: 0;
    left: 0;
}
.platform-box:nth-child(4){
    bottom: 0;
    right: 0;
}
.plat-div{
    height: 130px;
    width: 130px;
    position: relative;
}
.plat-div > img{
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}
.plat-div > img:nth-child(2){
    opacity: 0;
}
.platform-box:hover .plat-div > img:nth-child(1){
    opacity: 1;
}
.platform-box:hover .plat-div > img:nth-child(2){
    opacity: 1;
}
.platform-box > p{
    text-align: center;
    font-weight: bold;
    margin: 35px 0;
}

.s-website .exp-btn{
    margin: 0 0 90px 0;
}