.heading-menu,
#scroll,
#allFea,
#customers,
.btmBar {
    display: none;
}

:root {
    --text-light: #FFF;
    --text-dark: #000;
    --bright-bg: #FFF;
    --bg-grey: #F7F8FB;
    --cta-sd: #0085FF;
    --icon-bg: #EAE8FF;
    --tab-border: #D8D8D8;
    --button-color: #F0473D;
    --active-edition: #FFD177;
    --active-edition-color: #742800;
    --edition-border: DEE2F2;
    --h1-font: 60px;
    --h2-font: 36px;
    --h3-font: 24px;
    --h4-font: 20px;
    --p-font: 17px;
    --s-font: 12px;
    --m-font: 16px;
    --l-font: 32px;
    --xl-font: 48px;
    --xs-wgt: 200;
    --s-wgt: 300;
    --m-wgt: 400;
    --l-wgt: 500;
    --xl-wgt: 600;
    --n-gap: 24px;
    --m-top: 60px;
}

.migration {
    padding: 80px 40px;
}


.migration [data-animate="true"] {
    opacity: 0 !important;
    transform: translate(0, 50px) !important;
    transition: all ease 750ms !important;
}

.migration .active[data-animate="true"] {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

.migration .flex {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin: auto;
}

.grey {
    background: var(--bg-grey);
}

.cta-grp.single {
    width: max-content;
    margin: auto;
}

.migration h1 {
    font-size: var(--h1-font);
    line-height: normal;
    font-weight: var(--xl-wgt);
    margin: 0 0 20px;
    color: var(--text-dark);
}

.migration h2 {
    font-size: var(--h2-font);
    line-height: 48px;
    font-weight: var(--xl-wgt);
    margin: 0 auto 20px;
    text-align: center;
    color: var(--text-dark);
    max-width: 1000px;
}

.migration h3 {
    font-size: var(--h3-font);
    line-height: normal;
    font-weight: var(--l-wgt);
    margin: 0 0 20px;
    color: var(--text-dark);
}

.migration h3 strong {
    font-weight: 600;
}

.migration h4 {
    font-size: var(--h4-font);
    line-height: 28px;
    margin: 0px 0px 10px;
    color: var(--text-dark);
    font-weight: var(--l-wgt);
}

.migration p,
.migration li {
    font-size: var(--p-font);
    line-height: 27.2px;
    font-weight: var(--s-wgt);
    margin: 0 0 30px;
    letter-spacing: .1px;
    color: var(--text-dark);
}

.migration .cta-grp {
    grid-gap: 20px;
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.migration .cta {
    font-size: 16px;
    line-height: normal;
    padding: 12px 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 105px;
    text-decoration: none;
    text-align: center;
    background-color: var(--button-color);
    color: var(--text-light);
    text-transform: uppercase;
    cursor: pointer;
    justify-content: center;
    border: 1px solid var(--button-color);
    border-radius: 4px;
    font-weight: var(--m-wgt);
}

.migration .cta.sd {
    background-color: transparent;
    color: var(--cta-sd);
    border: none;
    padding: 0px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    font-weight: var(--l-wgt);
}

.migration .cta.link {
    color: var(--link-color);
    background-color: transparent;
    border: 1px solid var(--link-color);
}

.migration.banner {
    background: url(../images/pmp-vs-ec-banner-bg.png);
    background-size: 1920px 100%;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.bg-wrapper {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.migration.banner .content {
    max-width: 730px;
    margin: auto;
    text-align: center;
    padding: 50px 0px;
    position: relative;
}

.migration.banner p b {
    font-weight: var(--l-wgt);
    color: var(--text-dark);
}

.migration .blue {
    color: var(--cta-sd);
}

.migration.banner p {
    font-size: 22px;
    color: #212123;
    line-height: 35px;
    font-weight: var(--m-wgt);
}

.migration a.cta.sd::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    top: 120%;
    left: 0;
}


.migration a.cta.sd img {
    width: 20px;
    filter: brightness(0) saturate(100%) invert(47%) sepia(62%) saturate(6141%) hue-rotate(193deg) brightness(101%) contrast(100%);
}

.migration .rotate-270 {
    transform: rotate(270deg);
}

.migration.banner .content:before {
    content: "";
    position: absolute;
    top: 0px;
    left: -170px;
    height: 120px;
    width: 120px;
    background-image: url(../images/migration-pmp-logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
}


.migration.banner .content:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: -170px;
    height: 120px;
    width: 120px;
    background-image: url(../images/migration-ec-logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.migration img.icon-img {
    max-width: 45px;
    margin: 0px 0px 15px;
    z-index: 2;
    position: relative;
}

.migration.flow .diagram {
    width: max-content;
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 800px;
}

.migration.flow .diagram:after {
    position: absolute;
    content: "";
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    height: 100%;
    width: 100%;
    background-image: url(../images/pmp-vs-ec-flow-diagram.svg);
    z-index: 2;
    background-size: 100% 105%;
}

.migration.flow img.flow-diagram {
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.migration.table ul.table.flex {
    background: #fff;
    max-width: 1000px;
    align-items: flex-start;
    grid-gap: 0px;
    flex-wrap: nowrap;
    border-radius: 20px;
    margin: 40px auto;
}

.migration.table li.inner-flex.cloumn {
    width: 28%;
}

.migration.table li.inner-flex.cloumn li {
    padding: 20px 26px;
    border: solid var(--tab-border) 1px;
    margin: 0px;
    text-align: center;
}

.migration.table li.inner-flex.cloumn li img {
    margin: 0px;
    max-width: 25px;
}

.migration.table li.inner-flex.left {
    width: 48%;
}

.migration.table li.inner-flex.left li {
    text-align: left;
}

.migration.table ul.table.flex li {
    margin: 0px !important;
}

.migration.table ul.table.flex li.heading {
    font-weight: var(--l-wgt);
    font-size: 19px;
}

.migration.table li.inner-flex.cloumn.left ul li:first-child {
    border-radius: 10px 0px 0px 0px;
}

.migration.table li.inner-flex.cloumn.left ul li:last-child {
    border-radius: 0px 0px 0px 10px;
}

.migration.table li.inner-flex.right.cloumn ul li:first-child,
.migration.table li.inner-flex.right.cloumn ul li:last-child {
    border: transparent;
}

.migration.table li.inner-flex.right.cloumn ul.highlight {
    transform: scale(1.03);
    border-radius: 10px;
    background: #fff;
    border: solid var(--active-edition) 2px;
    box-shadow: 0px 2px 44px 0px rgba(234, 157, 99, 0.20);
}

.migration.table li.inner-flex.right.cloumn ul.highlight li {
    border-left: 0px;
    border-right: 0px;
}

.migration.table li.inner-flex.right.cloumn ul.highlight li.heading {
    background: var(--active-edition);
    border-radius: 10px 10px 0px 0px;
    color: var(--active-edition-color);
}

.migration.rewards .box {
    max-width: 275px;
    width: 100%;
    padding: 15px;
    transition: transform ease-in;
    max-height: 185px;
    position: relative;
}

.migration.rewards .box img {
    min-height: 35px;
    margin: 0px 0px 30px;
    position: relative;
}

.migration.rewards .box .cta {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.migration.rewards .box:hover .cta {
    opacity: 1;
    bottom: -4px;
    display: inline-block;
    width: max-content;
}

.migration.rewards .box p {
    margin: 0px 0px 10px;
}

.migration.rewards .box:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 20px;
    display: inline-block;
    background-image: url(https://www.manageengine.com/ems/images/icon/award-leaf.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    width: 35px;
    height: 100%;
}

.migration.rewards .box:after {
    content: '';
    position: absolute;
    top: 0px;
    right: 20px;
    display: inline-block;
    background-image: url(https://www.manageengine.com/ems/images/icon/award-leaf.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    width: 35px;
    height: 100%;
    transform: rotateY(-180deg);
}

.migration.rewards .flex {
    grid-gap: 35px;
}


.migration .main-tab {
    grid-gap: 15px;
    border: solid var(--tab-border) 1px;
    max-width: 488px;
    width: 100%;
    margin: 35px auto;
    border-radius: 35px;
    padding: 5px;
}

.migration .main-tab li[data-main-tab] {
    margin: 0px;
    padding: 14px 35px;
    border-radius: 30px;
    font-weight: var(--m-wgt);
    cursor: pointer;
}

.migration .main-tab li[data-main-tab].active {
    background: var(--cta-sd);
    color: #fff;
    pointer-events: none;
}

.migration.tabs [data-main-cont].active {
    display: block;
}

.migration.tabs {
    position: relative;
}

.migration.tabs [data-main-cont] {
    display: none;
}

.migration .margin-0 {
    margin: 0pc !important;
}

.migration.tabs [data-main-cont] ul.flex li {
    padding: 15px 30px;
    border-right: solid var(--tab-border) 1px;
    cursor: pointer;
}

.migration.tabs [data-main-cont] ul.flex {
    margin: 0px 0px 50px;
    box-shadow: 0px 9px 10px 0px rgba(224, 221, 219, 0.30);
    background: var(--bright-bg);
}

.migration.tabs [data-main-cont] ul.flex li:last-child {
    border: 0px;
}

.migration.tabs [data-main-cont] ul.flex li.active {
    border-bottom: solid var(--cta-sd) 3px;
    pointer-events: none;
}

.migration.tabs [data-inner-cont].active {
    display: block;
}

.migration.tabs [data-inner-cont] {
    display: none;
}

.migration.tabs .box {
    width: 315px;
    transition: all ease 750ms;
    position: relative;
    padding: 20px;
    text-align: left;
}


.migration.tabs .box .link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content-visibility: hidden;
    font-size: 0;
}

.migration.tabs .box:hover .link {
    border: 1px solid #ededed;
    border-radius: 10px;
    background-color: #00000005;
}

.migration.tabs .box.intelligence-image {
    max-height: 275px;
    width: 30%;
    padding: 0px;
    position: relative;
    height: 250px;
}

.migration.tabs .box figure {
    margin: 0 0 8px;
    display: flex;
    flex-wrap: wrap;
}

.migration.tabs .box figure img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    z-index: 1;
}

.migration.tabs .box figure .background {
    position: relative;
    background: #FFE88C;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: -27px;
    z-index: 0;
    color: transparent;
}

.migration.tabs h3 {
    margin: 0px 0px 40px;
}

.migration.tabs [data-inner-cont]>.flex {
    justify-content: flex-start;
    margin: 30px auto 0px;
    align-items: stretch;
    max-width: 1070px;
}

.migration [data-main-cont].active [data-inner-cont]:nth-child(2) .box figure .background {
    background: #EAE8FF !important;
}

.migration [data-main-cont].active [data-inner-cont]:nth-child(3) .box figure .background {
    background: #D8FFD2 !important;
}

.migration [data-main-cont].active [data-inner-cont]:nth-child(4) .box figure .background {
    background: #E0D2FF !important;
}

.migration [data-main-cont].active [data-inner-cont]:nth-child(5) .box figure .background {
    background: #FFF0D2 !important;
}

.migration [data-main-cont].active [data-inner-cont]:nth-child(6) .box figure .background {
    background: #FFD2D2 !important;
}


.migration h1.blue:before {
    content: "";
    position: absolute;
    background-image: url('../images/migration-banner-line.svg');
    background-repeat: no-repeat;
    width: 800px;
    height: 250px;
    top: -34px;
    left: -20px;
    bottom: 30px;
    right: 0px;
    z-index: 1;
    margin: auto;
}

.migration h1.blue:after {
    content: "";
    position: absolute;
    background-image: url(../images/migration-banner-arrow.svg);
    background-repeat: no-repeat;
    background-size: 70px auto;
    bottom: 35%;
    right: -11%;
    width: 70px;
    height: 70px;
    margin: 0px auto;
}

.migration.banner .bg-wrapper {
    overflow: hidden;
}

.migration.demo .trigger-img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 18px;
    box-shadow: 0px 0px 2px 5px #85858561 inset;
    border-radius: 50%;
    cursor: pointer;
}

.migration.demo .image-wrapper {
    position: relative;
    margin: 20px auto;
}


.migration.demo ul.image-list [data-img] img {
    max-width: 100%;
}

.migration.demo ul.image-list [data-img].active {
    display: block;
}

.migration.demo ul.image-list [data-img] {
    display: none;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger].active {
    display: block;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger] {
    display: none;
    width: 28px;
    height: 28px;
    box-shadow: 0px 0px 2px 5px #85858561 inset;
    border-radius: 50%;
    cursor: pointer;
    margin: 0px;
    position: absolute;
    top: 16px;
    left: 0px;
    z-index: 2;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger] img {
    width: 100%;
    cursor: pointer;
}


.migration.demo .image-wrapper .trigger-icon-list [data-trigger="1"] {
    left: 24%;
    top: 6%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="2"] {
    top: 53%;
    left: 5%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="3"] {
    top: 9%;
    left: 5%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="4"] {
    top: 6%;
    left: 31%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="6"] {
    top: 53%;
    left: 14%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="5"] {
    top: 58%;
    left: 14%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="7"] {
    top: 6%;
    left: 39%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="8"] {
    top: 6%;
    left: 47%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="9"] {
    top: 6%;
    left: 56%;
}

.migration.demo .image-wrapper .trigger-icon-list [data-trigger="10"] {
    top: 6%;
    left: 65%;
}

.migration.demo .image-wrapper li {
    margin: 0px !important;
}

.migration.boiler-plate .bg-wrapper:before {
    content: "";
    position: absolute;
    background-image: url(../images/migration-bottom-left-line.svg);
    background-repeat: no-repeat;
    background-size: 260px auto;
    height: 150px;
    width: 260px;
    left: 0px;
    bottom: -40px;
    z-index: 1;
    margin: auto;
}

.migration.boiler-plate .bg-wrapper,
.migration.boiler-plate h2 {
    position: relative
}

.migration.boiler-plate .bg-wrapper:after {
    content: "";
    position: absolute;
    background-image: url(../images/migration-bottom-right-line.svg);
    background-repeat: no-repeat;
    background-size: 220px auto;
    height: 150px;
    width: 220px;
    right: 40px;
    bottom: 0px;
    z-index: 1;
    margin: auto;
}

.migration.boiler-plate h2:after {
    content: "";
    position: absolute;
    background-image: url(../images/migration-banner-arrow.svg);
    background-repeat: no-repeat;
    background-size: 70px auto;
    bottom: 33%;
    right: -94px;
    width: 70px;
    height: 70px;
    margin: 0px auto;
    z-index: 2;
}

.migration ul.tooltip-list {
    z-index: auto !important;
    font-size: 14px !important;
}

.migration .tooltip {
    left: 61px;
    top: 4px;
}

.migration .tooltip .tool {
    background-color: #FFF;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: flex;
    color: #0084FF;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 500;
    border: 0.5px solid #0084FF;
}

.migration .tooltip .tip {
    display: none;
}

.migration .tooltip:hover .tip {
    display: block;
    position: absolute;
    bottom: 30px;
    color: #000;
    padding: 20px;
    left: -10%;
    top: 30px;
    height: max-content;
    font-size: 17px;
    border-radius: 10px;
    background: #F2F9FF;
    box-shadow: 0px 0px 5px #0004;
    z-index: 999999;
}

.migration .tooltip .tip p {
    margin: 0px;
    font-size: 14px;
    font-weight: 300;
    line-height: 26px;
    text-wrap: wrap;
}

.migration .tooltip .tip p b {
    font-weight: 500;
}

.migration .tooltip .tip strong {
    color: #323E50;
}

.migration .tooltip {
    right: -25px;
    left: auto;
    top: 0px;
    bottom: 0px;
    width: max-content;
    position: static;
}

.migration .tooltip .tip {
    z-index: 9999;
    position: absolute;
    text-align: left;
}

.migration .tooltip:hover .tip {
    min-width: 300px;
}

.migration .tooltip:hover .tip span {
    display: block;
    margin: 0px 0px 8px;
}

.migration.demo ul.tooltip-list [data-tool-tip] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 16px;
    left: 0px;
    margin: 0px;
}


.migration.demo ul.tooltip-list [data-tool-tip="1"] {
    left: 24.6%;
    top: 7.2%;
}

.migration.demo ul.tooltip-list [data-tool-tip="2"] {
    top: 7.2%;
    left: 31.6%;
}

.migration.demo ul.tooltip-list [data-tool-tip="3"] {
    top: 7.2%;
    left: 39.6%;
}

.migration.demo ul.tooltip-list [data-tool-tip="4"] {
    top: 7.2%;
    left: 47.6%;
}

.migration.demo ul.tooltip-list [data-tool-tip="5"] {
    top: 7.2%;
    left: 56.6%;
}

.migration.demo ul.tooltip-list [data-tool-tip="6"] {
    top: 7.2%;
    left: 65.6%;
}

.migration.demo ul.tooltip-list [data-tool-tip="7"] {
    top: 21.5%;
    left: 19%;
}

.migration.bottom h2 {
    position: relative;
}

.migration.bottom {
    background: url(../images/migration-bottom-bg.png);
    background-size: 1920px 100%;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.migration.bottom h2::before {
    content: "";
    position: absolute;
    left: -11%;
    right: 20px;
    top: 0px;
    bottom: -78px;
    height: auto;
    width: 300px;
    background: url(../images/migration-bottom-left-line.svg);
    background-repeat: no-repeat;
    background-size: 300px auto;
    background-position: center;
}

.migration.bottom h2::after {
    content: "";
    position: absolute;
    right: -11%;
    top: -70px;
    bottom: 0px;
    height: auto;
    width: 300px;
    background: url(../images/migration-bottom-right-line.svg);
    background-repeat: no-repeat;
    background-size: 300px auto;
    background-position: center;
}

.migration.table ul.table.flex {
    width: 1000px;
}

@media screen and (max-width:1150px) {

    .migration.banner .content:before,
    .migration.banner .content:after,
    .migration h1.blue:before,
    .migration h1.blue:after,
    .migration.boiler-plate .bg-wrapper:after,
    .migration.boiler-plate .bg-wrapper:before,
    .migration.boiler-plate h2:after,
    .migration.bottom h2::after,
    .migration.bottom h2::before {
        display: none;
    }

}

@media screen and (max-width:1050px) {
    .migration.table li.inner-flex.right.cloumn ul.highlight {
        transform: scale(1);
    }
}

@media screen and (max-width:1000px) {
    .migration.table ul.table.flex {
        width: 1000px;
    }

    .migration .table-wrapper {
        max-width: 1000px;
        width: 100%;
        overflow: scroll;
    }
}