.heading-menu,div#scroll {
    display: none;
}
img.img-fluid.integration-logo {
    width: 38px;
    height: 38px;
}


.banner-subheader,
.promo-banner strong {
    font-family: Zoho_Puvi_Bold
}

.banner-text {
    max-width: 875px;
    margin: 0 auto;
}

.banner-img-block {
    min-height: 617px
}

.mobile-banner-visible {
    display: none
}

.not-visible {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
}

.not-visible.show-section {
    opacity: 1;
    visibility: visible;
    animation: fade-bottom .5s ease-in;
}

@keyframes fade-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

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

.feature-row {
    padding: 100px 0;
}

.footer-bg {
    background-image: -moz-linear-gradient(90deg, #000 0, #052a49 100%) !important;
    background-image: -webkit-linear-gradient(90deg, #000 0, #052a49 100%) !important;
    background-image: -ms-linear-gradient(90deg, #000 0, #052a49 100%) !important;
}

.template-list li {
    display: inline-block;
}

.template-list a {
    color: #000;
    padding: 8px 18px 9px;
    border-radius: 18px;
    background: #fff9ef;
    font: 16px Zoho_Puvi_Regular;
    margin: 5px;
    display: inline-block;
    cursor: pointer;
}

.template-list li a:hover {
    background: #e6c385;
    color: #000;
    text-decoration: none;
}

.customer-service-img {
    max-width: 966px;
    margin: 30px auto 0;
    width: 100%;
    z-index: 1;
    position: relative;
    height: 617px;
    background-color: #e9eaed;
    border-radius: 15px;
}

.dashboard-layout {
    border-radius: 15px;
}

.customer-service-img img {
    border-bottom-right-radius: 15px
}

.cs-screen-1 {
    top: 50px;
}

.cs-screen-2 {
    top: 120px;
}

.cs-screen-3 {
    top: 190px;
}

.cs-screen-4 {
    top: 260px;
}

.cs-screen-5 {
    top: 330px;
}

.cs-screen-1:after {
    background-position: -19px -22px;
    width: 55px;
    height: 41px;
}

.cs-screen-2:after {
    background-position: -105px -20px;
    width: 47px;
    height: 53px;
}

.cs-screen-3:after {
    background-position: -181px -20px;
    width: 41px;
    height: 41px;
}

.cs-screen-4:after {
    background-position: -253px -19px;
    width: 44px;
    height: 41px;
}

.cs-screen-5:after {
    background-position: -328px -22px;
    width: 35px;
    height: 41px;
}

.cust-icns {
    position: absolute;
    left: 0;
    width: 74px;
    height: 65px;
}

.cust-icns:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.cust-icns.active-icn {
    background: #000;
}

.cust-scrns {
    left: 75px;
    top: 54px;
    width: calc(100% - 75px);
    display: none;
}

.banner-img-block {
    max-width: 966px;
    margin: 0 auto;
    padding: 0 15px;
}

.cs-sprite,
.cust-icns:after {
    background-image: url("https://www.manageengine.com/cloudspend/images/sprite.svg");
    display: inline-block;
}

.indicate-dots {
    background-position: -392px -20px;
    width: 11px;
    height: 11px;
    position: absolute;
    right: 6px;
    top: 30%;
}

.active-icn .indicate-dots {
    display: none !important
}

.cust-icns:not(.active-icn):before {
    animation: pulse-border 1500ms ease-out infinite;
    content: "";
    position: absolute;
    right: -8px;
    top: 38%;
    transform: translateY(-50%);
    display: block;
    width: 20px;
    height: 20px;
    background: #ef536480;
    border-radius: 50%;
    z-index: 1;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

@media(max-width:767px) {

    .feature-row {
        padding: 30px 0;
    }
}

@media(max-width:991px) {
    .banner-img-block {
        display: none;
    }

    .mobile-banner-visible {
        display: block;
    }

    .video-section {
        padding: 30px 15px;
    }
}

@media(min-width:1200px) {
    .banner-left-arrow {
        background-position: -433px -19px;
        width: 113px;
        height: 98px;
        position: absolute;
        top: 35px;
        left: -110px;
        display: inline-block;
        background-image: url(https://www.manageengine.com/cloudspend/images/sprite.svg);
    }

    .banner-right-arrow {
        background-position: -575px -22px;
        width: 71px;
        height: 76px;
        position: absolute;
        top: 267px;
        right: -58px;
        display: inline-block;
        background-image: url(https://www.manageengine.com/cloudspend/images/sprite.svg);
    }

    .banner-top-arrow {
        background-position: -674px -19px;
        width: 26px;
        height: 25px;
        position: absolute;
        top: -27px;
        right: -29px;
        display: inline-block;
        background-image: url(https://www.manageengine.com/cloudspend/images/sprite.svg);
    }
}

.integration-icon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
}

.integration-icon li {
    width: 110px;
    height: 110px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
}

.integration-icon li:hover {
    box-shadow: 0 6px 13px 2px rgba(0, 0, 0, .05);
}

.integration-icon a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.integration-icon img {
    transition: transform 0.2s ease-in-out;
}

.integration-icon a:hover>img {
    transform: scale(1.1);
}

.info-card {
    padding: 20px 50px 0;

}

.integration-card {
    padding: 60px 50px;
}

@media(max-width:767px) {
    .integration-icon li {
        width: 70px;
        height: 70px;
    }

    .integration-card {
        padding: 20px;
    }

    .info-card {
        padding: 20px 20px 0;
    }
}

.integration-card h2 {
    max-width: 600px;
}

@media (min-width: 992px) {
    .cs-col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
}

.business-block .info-block {
    gap: 20px;
    flex-wrap: wrap;
    display: flex;
}

.business-block .info-card {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    background: #0a3244;
}

.roi-block {
    background-image: url(https://www.manageengine.com/cloudspend/images/roi-banner.png);
    background-size: cover;
    background-position: center center;
    padding-top: 48px;
    padding-right: 30px;
    padding-bottom: 48px;
    padding-left: 48px;
}

.mobile-img {
    width: 300px;
}

.bg-light-blue {
    background: #0a3244;
}

.white-link {
    color: #fff;
    text-decoration: underline;
}

.btn-block .btn-outline-primary {
    margin-right: 15px;
}

.btn-block a {
    min-width: 180px;
}

@media(max-width:767px) {
    .roi-block {
        background: #fbe1b6;
    }

    .btn-block .pricing-btn,
    .btn-block .btn-outline-primary {
        margin-left: 0;
    }
    .promo-banner .promo-block {
        background-image: none;
    }
}

.h-100 {
    height: 100%;
}

.d-flex {
    display: flex;
}

.text-charcoal {
    color: #333;
}

.video-section h2 {
    font: 26px / 1.3 Zoho_Puvi_SemiBold;
}

.promo-block {
    background-image: url(https://www.manageengine.com/cloudspend/images/promo-pattern.svg);
    background-color: #f5bc4f;
    padding: 20px;
    border-radius: 10px;
    background-size: cover;
    background-position: right;
    gap: 10px;
}

.promo-banner {
    background: linear-gradient(0deg, #022736 50%, #ffffff 0);
    padding: 0 20px;
}

.promo-banner p {
    font-size: 18px;
}