/* service page hero section */
.banner-ss{
    /* display: block; */
    text-align: center;

}
.service-banner{
    position: relative;
    display: block;
    overflow: hidden;
}
.banner-anim-block-lg{
    position: relative;
    padding-top: 50px;
    /* overflow: hidden;
    display: block; */
    
}
.banner-anim-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

}

.banner-ss {
    display: block;
    margin: 0px auto; /* Adjust the margin value as needed */
}
.banner-s1{
    position: relative;
    top:0;
}
.banner-s2{
    position: relative;
    top:0;
}
.banner-s3{
    position: relative;
    top:0;
}
.banner-s4{
    position: relative;
    top:0;
}
.banner-s5{
    position: relative;
    top:0;
}

.banner-os{
    position: absolute;
    top:-30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: -1;
}
.banner-anim-block-sd{
    display: none;
}
@media all and (max-width:991px){
    .banner-anim-block-lg{
        display: none;
    }
    .banner-anim-block-sd{
        display: block;
    }
}

/* Service page service section */
.serviceSection {
    position: relative;
    display: block;
    overflow: hidden;
}

.serviceContainer {
    position: relative;
    margin-top: 10px;
}

.serviceTextContainer::after {
    position: absolute;
    content: "";
    width: 1000%;
    height: 100%;
    top: 0;
    z-index: -1;
}

.serviceContainerOdd .serviceTextContainer::after {
    background: #FFE6E6 0% 0% no-repeat padding-box;
    left: 0px;
    /* animation: widthGrowLeft 6s linear forwards; */
}

/* @-webkit-keyframes widthGrowLeft {
    0% {
        opacity: 0;
        width: 0%;
    }
    5%{
        opacity: 1;
    }

    100% {
        opacity: 1;
        width: 1000%;
    }
}

@keyframes widthGrowLeft {
    0% {
        opacity: 0;
        width: 0%;
    }
    5%{
        opacity: 1;
    }

    100% {
        opacity: 1;
        width: 1000%;
    }
} */

.serviceContainerEven .serviceTextContainer::after {
    background: #B9DBF2 0% 0% no-repeat padding-box;
    right: 0px;
}

.serviceThumbContainer {
    display: block;
    overflow: hidden;
}

.serviceThumbBlock {
    position: relative;
    display: -ms-grid;
    display: grid;
    height: 100%;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    z-index: 9;
}

.serviceLogoSection {
    position: absolute;
    top: 50%;
    left: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 11;
    /* background-color: #FFFFFF; */

}

.serviceTS {
    position: relative;
    display: inline-block;
    /* transform: rotate(45deg); */
    left: 0%;

    /* top:50%;
    left:0%;
    transform:translateY(-50%) rotate(45deg); */
    width: 48px;
    height: 48px;
    /* transform: translateY(-50%)  matrix(0.71, 0.71, -0.71, 0.71, 0, 0); */
    background: #FA938F 0% 0% no-repeat padding-box;
    border-radius: 5px;
}

/* .appsysLogo{
    display: inline-block;
    position: absolute;
    top:0;

} */
@media all and (min-width:1200px) {

    .serviceContainerOdd .serviceThumbBlock {

        -webkit-box-pack: end;

        -ms-flex-pack: end;

        justify-content: end;

    }

    .serviceContainerEven .serviceThumbBlock {

        -webkit-box-pack: start;

        -ms-flex-pack: start;

        justify-content: start;

    }

    /* .serviceContainerOdd .serviceTextContainer::after{
        left:-15px;
    
    }
    .serviceContainerEven .serviceTextContainer::after{
        right:-15px;
    } */
}


.serviceTextBlock {
    position: relative;
    display: -ms-grid;
    display: grid;
    height: 100%;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* -ms-flex-line-pack: center;
    align-content: center; */
    overflow: hidden;
    padding:20px 0px 15px 0px;
}

.serviceText {
    margin-top: 13px;
    margin-bottom: 15px;
}

.serviceListBlock {
    position: relative;
}

.serviceList {
    position: relative;
    padding-lefT: 30px;
    -webkit-animation-name: serFadeInLeft;
    animation-name: serFadeInLeft;

}

.serviceList::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 2px solid #000000;
}

.serviceList::after {
    position: absolute;
    content: "";
    left: 9px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    /* animation: DotToRight 0.6s linear 2s forwards ; */
}

/* @-webkit-keyframes DotToRight {
    0% {
        left:0px;
    }

    100% {
       left:9px
    }
}

@keyframes DotToRight {
    0% {
        left:0px;
    }

    100% {
       left:9px
    }
} */

@media all and (max-width:1200px) {
    .serviceTextBlock {
        padding: 20px 0px;
    }
}

@media all and (max-width:991px) {
    .serviceContainer {
        margin-top: 50px;
    }

    .serviceTextBlock {
        padding: 30px 0px 30px 10px;
    }

    .serviceThumbContainer.col-md-12.col-sm-12.col-12 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .serviceTextContainer::after {
        width: 100%;
    }

    .serviceContainerOdd .serviceTextContainer::after {
        left: 0%;

    }

    .serviceContainerEven .serviceTextContainer::after {
        right: 0%;
    }


}

.serviceContainerOdd .serviceList::after {
    background: #D3302A 0% 0% no-repeat padding-box;

}

.serviceContainerEven .serviceList::after {
    background: #00B8FA 0% 0% no-repeat padding-box;
}


.serFadeInLeft {
    -webkit-animation-name: serFadeInLeft;
    animation-name: serFadeInLeft;
}

.serFadeInRight {
    -webkit-animation-name: serFadeInRight;
    animation-name: serFadeInRight;
}

/* .fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
} */


@-webkit-keyframes serFadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px)
    }

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

@keyframes serFadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        transform: translateX(-200px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}


@-webkit-keyframes serFadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        transform: translateX(200px)
    }

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

@keyframes serFadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}


.opb-lists{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.opb-list{
    -ms-flex: 0 0 33.333333%;
    -webkit-box-flex: 0;
            flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding-left:5px;
    padding-right:5px;
}
@media all and (max-width:525px){
    .opb-lists{
        /* text-align: center; */
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .opb-list{
        -ms-flex: 0 0 50%;
        -webkit-box-flex: 0;
                flex: 0 0 50%;
        max-width: 50%;
    }
}


/* .opb-hblock{
    position: relative;
    display: block;
    overflow: hidden;
    margin-top: -100%;
    z-index: -1;
    opacity:0;
    transition: margin-top 0.4s linear, z-index 0.4s ease-in, opacity 0.2s linear 0.4s;
}
.serviceContainer:hover .opb-hblock{
    position: relative;
    margin-top: -3px;
    z-index:1;
    opacity: 1;
} */
.opb-vblock{
    position: relative;
    z-index: 3;
}
.opb-hblock {
    position: relative;
    margin-top: -3px;
    display: block;
    overflow: hidden;
}

.opb-hblockc{
    position: relative;
    top: -400px;
}
.hblockc1{
    -webkit-transition: top 0.6s linear 0s;
    -o-transition: top 0.6s linear 0s;
    transition: top 0.6s linear 0s;
}
.hblockc2{
    -webkit-transition: top 0.6s linear 0.3s;
    -o-transition: top 0.6s linear 0.3s;
    transition: top 0.6s linear 0.3s;
}
.hblockc3{
    -webkit-transition: top 0.6s linear 0.6s;
    -o-transition: top 0.6s linear 0.6s;
    transition: top 0.6s linear 0.6s;
}

.serviceContainer:hover .opb-hblockc {
    position: relative;
    top:0px;
}
.serviceContainer:hover .hblockc1{
    -webkit-transition: top 0.6s linear 0s;
    -o-transition: top 0.6s linear 0s;
    transition: top 0.6s linear 0s;
}
.serviceContainer:hover .hblockc2{
    -webkit-transition: top 0.6s linear 0.3s;
    -o-transition: top 0.6s linear 0.3s;
    transition: top 0.6s linear 0.3s;
}
.serviceContainer:hover .hblockc3{
    -webkit-transition: top 0.6s linear 0.6s;
    -o-transition: top 0.6s linear 0.6s;
    transition: top 0.6s linear 0.6s;
}
@media all and (max-width:992px){
    .opb-hblockc {
        position: relative;
        top:0px;
    }
}

.opb-hblock p{
    position: absolute;
    padding:0px 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: center;
}
@media all and (max-width:767px){
    
.opb-hblockc{
    position: relative;
    top: 0px;
}
.opb-list{
    margin-top: 20px;
}
}