@font-face {font-family: 'ZohoPuvi';src: url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_regular.woff2') format('woff2'), url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_regular.woff') format('woff'), url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_regular.ttf') format('truetype');font-style: normal;font-weight: 300;font-display: swap;}
@font-face {font-family: 'ZohoPuvi';src: url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_medium.woff2') format('woff2'), /* Modern Browsers */ url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_medium.woff') format('woff'), url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_medium.ttf') format('truetype');font-style: normal;font-weight: 400;font-display: swap;}
@font-face {font-family: 'ZohoPuvi';src: url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_extrabold.woff2') format('woff2'), /* Modern Browsers */ url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_extrabold.woff') format('woff'), url('https://fonts.zohowebstatic.com/zohopuvi/3.5/zoho_puvi_extrabold.ttf') format('truetype');font-style: normal;font-weight: 700;font-display: swap;}
body{font-family: ZohoPuvi, sans-serif;}

        .msp.home.banner {
                background-size: 100% 100%;
                   padding: 40px;
        }

        .msp.home.banner .content {
                text-align: left;
                max-width: 500px;
                margin: 0px;
                padding: 0px 0px 60px;
        }
         .msp.home.banner .flex{
             max-width: 1300px;
              width: 100%;
             grid-gap: 50px;
}

        .msp.home.banner .screenshots {
                max-width: 670px;
                margin: 0px;
                width: 100%;
        }

        .msp.home.banner h1 {
                font-size: 48px;
                line-height: 60px;
        }

        .msp.home.banner .screenshots [data-img="mobile"] {
                display: none;
        }

        .msp.home.banner .screenshots ul[data-img="desktop"] li {
                position: absolute;
                top: 0px;
                left: 0px;
                background-size: 100% 100%;
        }

        .msp.home.banner .screenshots ul[data-img="desktop"] {
                height: 100%;
                width: 100%;
                position: relative;
                min-height: 450px;
        }

        .msp.home.banner .screenshots li[data-clip="1"] {
                height: 114px;
                width: 670px;
                background-image: url('https://www.manageengine.com/msp-central/../msp-central/images/msp-central-hero-img-1.png');
        }

        .msp.home.banner .screenshots ul[data-img="desktop"] li[data-clip="2"] {
                height: 165px;
                width: 296px;
                top: 115px;
                background-image: url(https://www.manageengine.com/msp-central/images/msp-central-hero-img-2.png);
        }

        .msp.home.banner .screenshots ul[data-img="desktop"] li[data-clip="3"] {
                left: 298px;
                top: 115px;
                right: 190px;
                height: 165px;
                width: 179px;
                background-image: url(https://www.manageengine.com/msp-central/../msp-central/images/msp-central-hero-img-3.png);
        }

        .msp.home.banner .screenshots ul[data-img="desktop"] li[data-clip="4"] {
                left: unset;
                top: 114px;
                right: 0px;
                height: 165px;
                width: 194px;
                background-image: url(https://www.manageengine.com/msp-central/../msp-central/images/msp-central-hero-img-4.png);
        }

        .msp.home.banner .screenshots ul[data-img="desktop"] li[data-clip="5"] {
                top: unset;
                bottom: 9px;
                height: 164px;
                width: 238px;
                background-image: url(https://www.manageengine.com/msp-central/../msp-central/images/msp-central-hero-img-5.png);
        }

        .msp.home.banner .screenshots ul[data-img="desktop"] li[data-clip="6"] {
                top: unset;
                left: unset;
                right: 0px;
                bottom: 9px;
                height: 164px;
                width: 432px;
                background-image: url(https://www.manageengine.com/msp-central/../msp-central/images/msp-central-hero-img-6.png);
        }

        .msp.home.banner .screenshots .animated-list li {
                opacity: 0;
                transform: scale(1.2);
                transition: transform 0.4s ease, opacity 0.4s ease;
                list-style: none;
        }

        /* The animation class */
        .msp.home.banner .screenshots .animated-list li.move {
                opacity: 1;
                transform: scale(1);
        }

        @media screen and (max-width:1300px) {
                .msp.home.banner .screenshots [data-img="mobile"] {
                        display: block;
                        width: 100%;
                }

                .msp.home.banner .screenshots [data-img="desktop"] {
                        display: none;
                }

                .msp.home.banner {
                        padding: 80px 20px 60px;
                }

                .msp.home.banner .content {
                        max-width: 1000px;
                        text-align: center;
                        padding: 0px;
                }


                .msp.home.banner .bg-wrapper>.flex {
                        justify-content: center;
                        text-align: center;
                }
        }

        .msp.tabs {
                position: relative;
        }


        .msp.tabs ul.tabs-section {
                position: sticky;
                top: 50px;
                left: 0px;
                background: var(--bg-grey);
                margin: 0px;
                padding: 10px 0px 30px;
                z-index: 9;
        }

        .msp.tabs ul.tab-desc li.content-sec {
                padding: 30px 0px 90px;
                display: block;
        }

        .msp.tabs ul.tab-desc li.content-sec:last-child {
                padding-bottom: 0px;
        }

        .msp.tabs ul.tab-desc li.content-sec:nth-child(even) .flex {
                flex-direction: row-reverse;
        }

        .msp .cta.sd:hover {
                color: var(--text-light);
                background: linear-gradient(146deg, #000 -44.91%, #797979 83.87%);
        }