.custombutton {
    background-color: #0073aa;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

    .custombutton:hover {
        background-color: #005177;
    }

.startfreetrialteams {
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    width: 298px;
    height: 42px;
    border-radius: 5px;
    background-color: #000000; /* black background */
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* hide default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 14px 0 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for SEO/accessibility */
    .startfreetrialteams span {
        visibility: hidden;
    }
    /* Default state text */
    .startfreetrialteams::before {
        color: #ffffff;
    }

    /* Hover state text */
    .startfreetrialteams::after {
        color: #ffffff;
    }
    /* Hover state */
    .startfreetrialteams:hover {
        background-color: #1e90ff !important; /* blue background */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

.scheduleafreedemo {
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    width: 188px;
    height: 40px;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* hide original text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 14px 0 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Accessibility / SEO */
    .scheduleafreedemo span {
        visibility: hidden;
    }

    .scheduleafreedemo::before {
        color: #000000;
    }

    /* After hover text */
    .scheduleafreedemo::after {
        color: #ffffff;
    }
    /* Hover effect */
    .scheduleafreedemo:hover {
        background-color: #000000 !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

.requestdemo {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 165px;
    height: 50px;
    border: 1px solid #101e69;
    border-radius: 4px;
    background-color: #101e69;
    box-shadow: 1px 2px 3px 0px #101e69;
    color: transparent; /* Hide original text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 17px 0 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Accessibility / fallback text */
    .requestdemo span {
        visibility: hidden;
    }
    /* Before hover text */
    .requestdemo::before {
        color: #ffffff;
    }

    /* After hover text */
    .requestdemo::after {
        color: #ffffff;
    }

    /* Hover effect */
    .requestdemo:hover {
        background-color: #000000;
        box-shadow: 0 0 6px rgba(16, 30, 105, 0.3), 0 0 10px rgba(16, 30, 105, 0.2), 0 0 14px rgba(16, 30, 105, 0.1);
    }

/* Responsive */
@media only screen and (max-width: 768px) {
    .requestdemo {
        margin-left: 2px;
    }
}

.tryitforfree-teams {
    position: relative;
    overflow: hidden;
    width: 203px;
    height: 56px;
    background: linear-gradient(270deg, #F61351, #1e90ff, #F61351);
    background-size: 400% 400%;
    animation: gradientWave 5s ease infinite;
    border: none;
    border-radius: 5px;
    color: transparent; /* Hide base text */
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    /*     box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); */
    transition: all 0.3s ease;
    cursor: pointer;
}

    /* Accessibility (hide visible text) */
    .tryitforfree-teams span {
        visibility: hidden;
        display: inline-block;
        height: 0;
        overflow: hidden;
    }
    /* Before hover text */
    .tryitforfree-teams::before {
        color: #ffffff;
    }

    /* After hover text */
    .tryitforfree-teams::after {
        color: #ffffff;
    }
    /* Hover background override */
    .tryitforfree-teams:hover {
        background: linear-gradient(to right, #d01045, #1a78c5) !important;
        animation: none; /* stop wave on hover */
        /*     box-shadow:0 0 10px rgba(255, 255, 255, 0.4); */
    }

/* Gradient wave animation */
@keyframes gradientWave {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.downloadfreetrialsharepoint {
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    width: 178px;
    height: 39px;
    border-radius: 5px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* hide default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 13px 0 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility/SEO */
    .downloadfreetrialsharepoint span {
        visibility: hidden;
    }
    /* Default state text */
    .downloadfreetrialsharepoint::before {
        color: #ffffff;
    }

    /* Hover state text */
    .downloadfreetrialsharepoint::after {
        color: #ffffff;
    }
    /* Hover state */
    .downloadfreetrialsharepoint:hover {
        background-color: #1e90ff !important;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
    }

.requestdemo2 {
    position: relative;
    display: inline-block;
    width: 168px;
    height: 38px;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: white;
    box-shadow: 1px 2px 3px 0px #000000;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    color: transparent; /* hides actual text */
    overflow: hidden;
    transition: all 0.3s ease;
    line-height: 38px;
}

    /* Hidden span for SEO / accessibility */
    .requestdemo2 span {
        visibility: hidden;
        display: none;
    }
    /* Default state text */
    .requestdemo2::before {
        color: #000000;
    }
    /* Hover state text */
    .requestdemo2::after {
        color: #ffffff;
    }
    /* Hover effects */
    .requestdemo2:hover {
        background-color: #000 !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

.tryitforfree-trello {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 153px;
    height: 42px;
    border-radius: 10px;
    background-color: black;
    color: transparent; /* hide actual text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 42px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility/SEO */
    .tryitforfree-trello span {
        visibility: hidden;
        display: none;
    }
    /* Default state */
    .tryitforfree-trello::before {
        color: #ffffff;
    }

    /* Hover state */
    .tryitforfree-trello::after {
        color: #ffffff;
    }
    /* Hover style with glow */
    .tryitforfree-trello:hover {
        background-color: #4169E1 !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

.buynow {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 170px;
    height: 38px;
    border-radius: 25px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* hide default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 38px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility/SEO */
    .buynow span {
        visibility: hidden;
        display: none;
    }
    /* Default state */
    .buynow::before {
        color: #ffffff;
    }

    /* Hover state text */
    .buynow::after {
        color: #000000;
    }

    /* Hover styles + glow */
    .buynow:hover {
        background-color: #ffffff !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1);
    }

.tryitforfree {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 170px;
    height: 38px;
    border-radius: 25px;
    background-color: white;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* hides default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 38px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility */
    .tryitforfree span {
        visibility: hidden;
        display: none;
    }
    /* Default visible text */
    .tryitforfree::before {
        color: #000000;
    }

    /* Hover state text */
    .tryitforfree::after {
        color: #ffffff;
    }

    /* Hover effects */
    .tryitforfree:hover {
        background-color: #000000 !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1);
    }

.download {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 130px;
    height: 45px;
    border: 1px solid #000000;
    border-radius: 10px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* hide default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    line-height: 45px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for SEO/accessibility */
    .download span {
        visibility: hidden;
        display: none;
    }
    /* Default text */
    .download::before {
        color: #ffffff;
    }

    /* Hover text */
    .download::after {
        color: #000000;
    }
    /* Hover effect */
    .download:hover {
        background-color: #ffffff !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1);
    }

.gotofaqs {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 130px;
    height: 45px;
    border: 1px solid #000000;
    border-radius: 10px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* hide default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    line-height: 45px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for SEO/accessibility */
    .gotofaqs span {
        visibility: hidden;
        display: none;
    }
    /* Default text */
    .gotofaqs::before {
        color: #ffffff;
    }

    /* Hover text */
    .gotofaqs::after {
        color: #000000;
    }

    /* Hover effect */
    .gotofaqs:hover {
        background-color: #ffffff !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1);
    }

.tryitforfree-planner {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 162px;
    height: 50px;
    border: 2px solid #000000;
    border-radius: 25px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #000000;
    color: transparent; /* hide default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 50px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for SEO/accessibility */
    .tryitforfree-planner span {
        visibility: hidden;
        display: none;
    }
    /* Default text */
    .tryitforfree-planner::before {
        color: #ffffff;
    }

    /* Hover text */
    .tryitforfree-planner::after {
        color: #000000;
    }
    /* Hover effect */
    .tryitforfree-planner:hover {
        background-color: #ffffff !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

.freetrial {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 130px;
    height: 50px;
    border-radius: 25px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* hides default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    line-height: 50px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility/SEO */
    .freetrial span {
        visibility: hidden;
        display: none;
    }
    /* Default state text */
    .freetrial::before {
        color: #ffffff;
    }

    /* Hover state text */
    .freetrial::after {
        color: #000000;
    }
    /* Hover animation */
    .freetrial:hover {
        background-color: #ffffff !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1);
    }

.gotoapps4proplanner {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 215px;
    height: 54px;
    border-radius: 25px;
    background-color: #090070;
    border: 1px solid #090070;
    box-shadow: 0px 0px 2px 0px #090070;
    color: transparent; /* Hide default text */
    font-size: 14px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 54px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility/SEO */
    .gotoapps4proplanner span {
        visibility: hidden;
        display: none;
    }
    /* Default state */
    .gotoapps4proplanner::before {
        color: #ffffff;
    }

    /* Hover state */
    .gotoapps4proplanner::after {
        color: #000000;
    }

    /* Hover styles */
    .gotoapps4proplanner:hover {
        background-color: #ffffff !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1);
    }

.tryitforfree-plannergantt,
.tryitforfree-powerbiconnector {
    position: relative;
    display: inline-block;
    width: 162px;
    height: 43px;
    border: 2px solid #090070;
    border-radius: 25px;
    background-color: #090070;
    box-shadow: 0px 0px 2px 0px #000000;
    font-size: 15px;
    font-weight: bold;
    line-height: 47px;
    text-align: center;
    color: transparent; /* Hide actual text */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    outline: none;
}

    /* Fix unwanted blue outline and border */
    .tryitforfree-plannergantt:focus,
    .tryitforfree-powerbiconnector:focus,
    .tryitforfree-plannergantt:focus-visible,
    .tryitforfree-powerbiconnector:focus-visible,
    .tryitforfree-plannergantt:active,
    .tryitforfree-powerbiconnector:active {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Accessible text hidden but readable for screen readers */
    .tryitforfree-plannergantt span,
    .tryitforfree-powerbiconnector span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    /* Default visible text */
    .tryitforfree-plannergantt::before,
    .tryitforfree-powerbiconnector::before {
        color: #ffffff;
    }

    /* Animated hover text (starts hidden) */
    .tryitforfree-plannergantt::after,
    .tryitforfree-powerbiconnector::after {
        color: #ffffff;
    }
    /* Hover state transitions */
    .tryitforfree-plannergantt:hover,
    .tryitforfree-powerbiconnector:hover {
        background-color: #000000 !important;
        transform: translateY(-2px);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        border: 2px solid #000000 !important;
    }
/*
.support {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 145px;
    height: 35px;
    border: 1px solid #000000;
    border-radius: 7px;
    background-color: #e9124d;
    box-shadow: 0px 0px 2px 0px #333333;
    color: #ffffff;
    font-size: 17px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    line-height: 35px;
    box-sizing: border-box;
    display: block;
    margin-left: 220px;
    padding-top: 0;
    margin-top: 29px;
    overflow: hidden;
    transition: all 0.3s ease;
}

   
    .support span {
        visibility: hidden;
        display: none;
    }
    
    .support::before {
        background-color: #ffffff;
    }

    
    .support::after {
        color: #000000;
    }

    
    .support:hover {
        background-color: #ffffff;
        color: #000000;
        border: 1px solid #000000;

    }
*/
/*.support {
    display: inline-block;
    float: right;
    position: relative;
    width: 180px;
    height: 35px;
    border-radius: 5px;
	 border: 1px solid #e9124d;
    background-color:#e9124d ;
    box-shadow: 0px 0px 2px 0px #333333;
    color: #fff;
    font-size: 17px;
    text-align: center;
    line-height: 35px;
    box-sizing: border-box;
    margin-top: 10px;
    transition: all 0.3s ease;
    right: 10px;
    cursor: pointer !important;
	 margin-left: 10px !important;
    margin-right: -21px !important;
}

    .support:hover {
       background-color: #fff !important;
        box-shadow: 0px 0px 2px 0px #000;
		color:#000 !important;
    }

    .support span {
        visibility: hidden;
    } 

    .support::before {
      color: #fff !important;
    }

    .support::after {
        color: #000 !important;
    } */
.support {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
   width: 180px;
    height: 35px;
    background-color: #e9124d;
    border: 1px solid #e9124d;
	 border-radius: 5px;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* Hide default text */
    font-size: 17px;
    text-align: center;
    font-style: normal;
    line-height: 54px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
	margin-top: 9px;
	cursor:pointer;
}

    /* Hidden span for accessibility/SEO */
    .support span {
        visibility: hidden;
        display: none;
    }
    /* Default state */
    .support::before {
        color: #ffffff;
    }

    /* Hover state */
    .support::after {
        color: #000000;
    }

    /* Hover styles */
    .support:hover {
        background-color: #ffffff !important;
       /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1); */
		border: 1px solid #000;
    }
	
    /* button css 2 */

.button-text-animation {
    position: relative;
    overflow: hidden;
    color: transparent;
    display: inline-block;
    transition: background-color 0.3s ease;
}

    .button-text-animation::before,
    .button-text-animation::after {
        content: attr(data-text);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: inherit;
        transition: top 0.3s ease, opacity 0.3s ease;
        pointer-events: none;
    }

    .button-text-animation::before {
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    .button-text-animation::after {
        top: 100%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    .button-text-animation:hover {
        background-color: black;
        color: transparent;
    }

        .button-text-animation:hover::before {
            top: -100%;
            opacity: 0;
        }

        .button-text-animation:hover::after {
            top: 50%;
            opacity: 1;
        }

/* landing btn */
/* Common styles for all four buttons */
.start-free-migration-now-powerbibtncls,
.start-free-migration-now-landingcls,
.Start-Free-Migration-Now-Yammercls,
.Start-Free-Migration-Now-Teamscls {
    position: relative;
    display: inline-block;
    background-color: #000000;
    border: 2px solid #000;
    color: transparent; /* Hide direct text */
    font-weight: bold;
    font-size: 15px;
    padding: 11px 24px;
    border-radius: 360px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    min-width: 95px;
    text-align: center;
    box-shadow: 0px 0px 2px 0px #000000;
}

    /* Hide actual span text */
    .start-free-migration-now-powerbibtncls span,
    .start-free-migration-now-landingcls span,
    .Start-Free-Migration-Now-Yammercls span,
    .Start-Free-Migration-Now-Teamscls span {
        visibility: hidden;
        display: none;
    }


    /* Hover background & animation */
    .start-free-migration-now-powerbibtncls:hover,
    .start-free-migration-now-landingcls:hover,
    .Start-Free-Migration-Now-Yammercls:hover,
    .Start-Free-Migration-Now-Teamscls:hover {
        background-color: #000;
    }


/* For header menu buttons */
.custombuttonpricing1 {
    display: flex;
    justify-content: flex-start; /* Aligns button to the left */
    align-items: center;
    margin: 0;
    padding: 0;
    margin-left: 9px !important;
    font-size: 16px !important;
    font-family: sans-serif !important;
}

.custombuttonhvr {
    position: relative;
    display: inline-block !important;
    padding: 10px 20px;
    font-size: 16px !important;
    /*     font-family: "Arial", "Helvetica", sans-serif !important; */
    font-family: sans-serif !important;
    color: transparent !important; /* Hide real text */
    background-color: white !important;
    text-align: center;
    text-decoration: none !important;
    border: 2px solid black !important;
    border-radius: 5px;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
    /*     width: fit-content !important; 
    min-width: 120px; 
    max-width: 200px !important; */
    overflow: hidden;
    width: 250px;
    min-width: 130px;
}

    /* Visually hidden text (for SEO/Accessibility) */
    .custombuttonhvr span {
        visibility: hidden;
        display: none;
    }

    .custombuttonhvr:hover {
        background-color: black !important;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4) !important;
    }


    .custombuttonhvr::before {
        color: black;
    }

    .custombuttonhvr::after {
        color: white;
    }

.custombutton1 {
    display: flex;
    justify-content: flex-start; /* Aligns button to the left */
    align-items: center;
    margin: 0;
    padding: 0;
}

.custombutton2hvr {
    position: relative;
    display: inline-block !important;
    padding: 10px 20px;
    font-size: 16px;
    font-family: sans-serif !important;
    color: transparent !important; /* Hide real text */
    background-color: Black !important;
    text-align: center;
    text-decoration: none !important;
    border: 2px solid black !important;
    border-radius: 5px;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
    min-width: 130px;
}

    /* Visually hidden text (for SEO/Accessibility) */
    .custombutton2hvr span {
        visibility: hidden;
        display: none;
    }

    .custombutton2hvr:hover {
        background-color: White !important;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4) !important;
    }

    .custombutton2hvr::before {
        color: white;
    }

    .custombutton2hvr::after {
        color: black;
    }

.custombuttonhvrpricing {
    position: relative;
    display: inline-block !important;
    padding: 10px 20px;
    font-size: 16px;
    /*     font-family: "Arial", "Helvetica", sans-serif !important;  */
    font-family: sans-serif !important;
    color: transparent !important; /* Hide real text */
    background-color: Black !important;
    text-align: center;
    text-decoration: none !important;
    border: 2px solid black !important;
    border-radius: 5px;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
    min-width: 130px;
    overflow: hidden;
}

    /* Visually hidden text (for SEO/Accessibility) */
    .custombuttonhvrpricing span {
        visibility: hidden;
        display: none;
    }

    .custombuttonhvrpricing:hover {
        background-color: White !important;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4) !important;
    }

    .custombuttonhvrpricing::before {
        color: white;
    }

    .custombuttonhvrpricing::after {
        color: black;
    }

.supportbutton {
    background-color: white !important;
    color: black !important;
    transform: translateX(50px) !important;
    /*     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    /* 	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1); */
    padding-top: 16px;
    /*     font-weight: bold;  */
    text-align: center;
}

    .supportbutton:hover {
        background-color: white !important;
        color: black !important;
    }

@media (max-width: 768px) {
    .supportbutton {
        display: none !important;
    }

    .support {
        display: none !important;
    }

    .custombutton {
        display: none !important;
    }

    .custombuttonhvr {
        display: none !important;
    }

    .custombuttonhvrpricing {
        display: none !important;
    }

    .custombutton2 {
        padding-left: 54px !important;
    }

    .producttabcontent {
        height: 75% !important;
    }

    .custom-header {
        position: sticky;
        /*         position: static !important; /* Removes sticky */ */ margin-top: 0 !important; /* Adjusts layout */
        /* 		margin-bottom: -12px; */
    }
}

.homepageviewmore1 {
    /*     position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 168px;
	 margin: 4px;
	padding-bottom:42px !important;
    height: 44px;
    border: 2px solid #101e69;
    border-radius: 100px;
    background-color: #101e69;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; 
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    line-height: 44px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease; */
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 168px;
    height: 48px;
    /* border: 2px solid #000000; */
    border-radius: 25px;
    background-color: #101e69;
    box-shadow: 0px 0px 2px 0px;
    color: transparent;
    font-size: 16px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 50px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Visually hidden for accessibility */
    .homepageviewmore1 span {
        visibility: hidden;
    }

    /* Animated text before/after */
    .homepageviewmore1::before,
    .homepageviewmore1::after {
        content: "View More";
        position: absolute;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 44px;
        /* 	  line-height: 1em; */
        pointer-events: none;
        transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
    }

    /* Default text (white) */
    .homepageviewmore1::before {
        top: 0;
        color: #ffffff;
        opacity: 1;
    }

    /* Hover text (black) */
    .homepageviewmore1::after {
        top: 100%;
        color: #000000;
        opacity: 0;
    }

    /* Hover effect */
    .homepageviewmore1:hover {
        background-color: #ffffff;
        border: 2px solid #101e69;
    }

    .homepageviewmore1:hover {
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        transform: translateY(-2px);
    }

        .homepageviewmore1:hover::before {
            top: -100%;
            opacity: 0;
        }

        .homepageviewmore1:hover::after {
            top: 0;
            opacity: 1;
        }

.viewallstories {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 165px;
    height: 45px;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: white;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent;
    font-size: 16px;
    text-align: center;
    font-style: normal;
    font-weight: normal !important line-height: 45px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-left: 925px !important;
}

    .viewallstories span {
        visibility: hidden;
    }

    .viewallstories:hover {
        background-color: #000;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); /* brighter glow */
    }

    .viewallstories::before {
        color: black;
    }

    .viewallstories::after {
        color: white;
    }

@media (max-width: 768px) {
    .viewallstories {
        margin-left: 140px !important;
    }
}

.readfullstory-petronas {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: 40px;
    border-radius: 8px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #ffffff;
    color: transparent; /* Hide base text */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional hidden text for SEO */
    .readfullstory-petronas span {
        visibility: hidden;
    }

    .readfullstory-petronas:hover {
        background-color: #000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }
    /* On hover: change bg color & animate text */
    .readfullstory-petronas:hover {
        background-color: #444CE7;
    }

    .readfullstory-petronas::before,
    .readfullstory-petronas::after {
        color: white !important;
    }

.contactsupport {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 145px;
    height: 41px;
    border: 1px solid #0062cc;
    border-radius: 6px;
    background-color: #305cde;
    box-shadow: 0px 0px 2px 0px #0062cc;
    color: transparent; /* Hide base text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    line-height: 41px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional: Accessibility-friendly hidden span */
    .contactsupport span {
        visibility: hidden;
    }

    /* On hover: change background and animate text */

    .contactsupport:hover {
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .contactsupport::before {
        color: white;
    }

    .contactsupport::after {
        color: #305cde;
    }

.contactsales {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 145px;
    height: 41px;
    border: 1px solid #0062cc;
    border-radius: 6px;
    background-color: #305cde;
    box-shadow: 0px 0px 2px 0px #0062cc;
    color: transparent; /* Hide base text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: normal;
    line-height: 41px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional: Accessibility-friendly hidden span */
    .contactsales span {
        visibility: hidden;
    }


    .contactsales:hover {
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .contactsales::before {
        color: white;
    }

    .contactsales::after {
        color: #305cde;
    }

.startfreepowerbimigration {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 295px;
    height: 36px;
    border-radius: 4px;
    background-color: #e9124d;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* Hide base text */
    font-size: 14px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0;
    margin-left: 43px;
    top: 13px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Visually hidden text for accessibility */
    .startfreepowerbimigration span {
        visibility: hidden;
    }


    /* Button hover background + box */
    .startfreepowerbimigration:hover {
        background-color: #ffffff;
    }

    .startfreepowerbimigration::before {
        color: white;
    }

    .startfreepowerbimigration::after {
        color: black;
    }

.startfreeteamsmigration {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 295px;
    height: 36px;
    border-radius: 4px;
    background-color: #e9124d;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* Hide base text */
    font-size: 14px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0;
    margin-left: 43px;
    top: 13px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Visually hidden text for accessibility */
    .startfreeteamsmigration span {
        visibility: hidden;
    }

    /* Button hover background + box */
    .startfreeteamsmigration:hover {
        background-color: #ffffff;
    }

    .startfreeteamsmigration::before {
        color: white;
    }

    .startfreeteamsmigration::after {
        color: black;
    }

.startfreeyammermigration {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 295px;
    height: 36px;
    border-radius: 4px;
    background-color: #e9124d;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* Hide base text */
    font-size: 14px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0;
    margin-left: 43px;
    top: 13px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Visually hidden text for accessibility */
    .startfreeyammermigration span {
        visibility: hidden;
    }

    /* Button hover background + box */
    .startfreeyammermigration:hover {
        background-color: #ffffff;
    }

    .startfreeyammermigration::before {
        color: white;
    }

    .startfreeyammermigration::after {
        color: black;
    }

.plannermanager {
    position: relative;
    text-decoration: none;
    display: block;
    width: 175px;
    height: 55px;
    border-radius: 7px;
    background-color: white;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* Hide visible text for animation */
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 55px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility/SEO */
    .plannermanager span {
        visibility: hidden;
    }

    /* Hover effect */
    .plannermanager:hover {
        background-color: #1e90ff;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
    }

    .plannermanager::before {
        color: black;
    }

    .plannermanager::after {
        color: white;
    }

.plannergantt {
    position: relative;
    text-decoration: none;
    display: block;
    width: 175px;
    height: 55px;
    border-radius: 7px;
    background-color: white;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* Hide visible text for animation */
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 55px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility/SEO */
    .plannergantt span {
        visibility: hidden;
    }


    /* Hover effect */
    .plannergantt:hover {
        background-color: #1e90ff;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
    }

    .plannergantt::before {
        color: black;
    }

    .plannergantt::after {
        color: white;
    }

.powerbiconnector {
    position: relative;
    text-decoration: none;
    display: block;
    width: 175px;
    height: 55px;
    border-radius: 7px;
    background-color: white;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* Hide visible text for animation */
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 55px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for accessibility/SEO */
    .powerbiconnector span {
        visibility: hidden;
    }


    /* Hover effect */
    .powerbiconnector:hover {
        background-color: #1e90ff;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
    }

    .powerbiconnector::before {
        color: black;
    }

    .powerbiconnector::after {
        color: white;
    }

.migrationmanagerexchange {
    position: relative;
    text-decoration: none;
    display: block;
    width: 140px;
    height: 45px;
    border: 1px solid #000000;
    border-radius: 8px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #000000;
    color: transparent; /* Hide visible text for animation layers */
    font-size: 15px;
    font-weight: normal;
    text-align: center;
    line-height: 45px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Hidden span for screen readers or SEO */
    .migrationmanagerexchange span {
        visibility: hidden;
    }

    /* Hover effect */
    .migrationmanagerexchange:hover {
        background-color: #ffffff;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
    }

    .migrationmanagerexchange::before {
        color: white;
    }

    .migrationmanagerexchange::after {
        color: black;
    }

.startfreetrial-planner {
    position: relative;
    text-decoration: none;
    display: block;
    width: 140px;
    height: 45px;
    border: 1px solid #000000;
    border-radius: 8px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #000000;
    color: transparent; /* Hide visible text for animation layers */
    font-size: 15px;
    font-weight: normal !important;
    text-align: center;
    line-height: 45px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-left: -60px;
}

@media (max-width: 768px) {
    .startfreetrial-planner {
        margin-left: -7px !important;
    }
}


/* Hidden span for screen readers or SEO */
.startfreetrial-planner span {
    visibility: hidden;
}

/* Hover effect */
.startfreetrial-planner:hover {
    background-color: #ffffff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
}

.startfreetrial-planner::before {
    color: white;
}

.startfreetrial-planner::after {
    color: black;
}

.viewpricingpage {
    position: relative;
    text-decoration: none;
    display: block;
    width: 185px;
    height: 55px;
    border: 1px solid #ffffff;
    border-radius: 7px;
    background-color: #101e69;
    box-shadow: 1px 2px 3px 0px #000000;
    color: transparent; /* Hide visible text */
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 55px;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

    /* Visually hidden span for accessibility */
    .viewpricingpage span {
        visibility: hidden;
    }

    .viewpricingpage:hover {
        background-color: #ffffff;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
    }

    .viewpricingpage::before {
        color: white;
    }

    .viewpricingpage::after {
        color: black;
    }

.downloadfreetrial2 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 185px;
    height: 46px;
    border: 2px solid #090070;
    border-radius: 25px;
    background-color: #090070;
    box-shadow: 0px 0px 2px 0px #333333;
    color: transparent; /* hide base text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 46px;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional span for SEO/screen readers */
    .downloadfreetrial2 span {
        visibility: hidden;
    }

    .downloadfreetrial2:hover {
        background-color: #000; /* blue background */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .downloadfreetrial2::before, .downloadfreetrial2::after {
        color: white;
    }
/* Mobile adjustment */
@media (max-width: 768px) {
    .downloadfreetrial2 {
        width: 175px !important;
        margin-left: -25px;
    }
}

.requestdemo3 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 185px;
    height: 46px;
    border: 1px solid #090070;
    border-radius: 25px;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    color: transparent;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    line-height: 46px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
}

    /* Visually hidden span for accessibility */
    .requestdemo3 span {
        visibility: hidden;
    }

    /* Hover effects */
    .requestdemo3:hover {
        background-color: #000000;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    }

    .requestdemo3::before {
        color: #090070;
    }

    .requestdemo3::after {
        color: white;
    }

.startfreetrial-planner1 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #090070;
    border-radius: 25px;
    background-color: #090070;
    width: 162px;
    height: 47px;
    border-width: 1px;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* hide default text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 47px; /* vertically center text */
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional hidden span */
    .startfreetrial-planner1 span {
        display: none;
    }

    /* Hover effect */
    .startfreetrial-planner1:hover {
        background-color: #000000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        border: 2px solid #000000;
    }

    .startfreetrial-planner1::before, .startfreetrial-planner1::after {
        color: white;
    }


.buynow2 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    width: 270px;
    height: 37px;
    border: 2px solid #000000;
    border-radius: 2px;
    background-color: black;
    box-shadow: 0px 0px 1px 2px #333333;
    color: transparent;
    font-size: 17px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 37px; /* vertically center text */
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional hidden span for accessibility */
    .buynow2 span {
        display: none;
    }

    /* On hover */
    .buynow2:hover {
        background-color: #ffffff;
    }

    .buynow2:hover {
        background-color: #000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .buynow2::before, .buynow2::after {
        color: white;
    }

.buynow3 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 125px;
    height: 40px;
    border: 2px solid #305cde;
    border-radius: 4px 4px 4px 4px;
    background-color: #305cde;
    box-shadow: 0px 0px 2px 0px #305cde;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 12px 0px 0px 0px;
}

    .buynow3:hover {
        background-color: #ffffff;
        color: #305cde;
    }

.talktoanexpert {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 275px;
    height: 65px;
    border: 1px solid #000000;
    border-radius: 6px;
    background-color: white;
    box-shadow: 0px 0px 1px 0px #333333;
    color: transparent;
    font-size: 21px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    padding: 23px 0 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional span fallback */
    .talktoanexpert span {
        visibility: hidden;
        display: none;
    }

    .talktoanexpert::before {
        color: black;
    }

    .talktoanexpert::after {
        color: white;
    }

    .talktoanexpert:hover {
        background-color: #000 !important;
        color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    }

.talktoanexpert2 {
    position: relative;
    overflow: hidden;
    width: 197px;
    height: 51px;
    background: linear-gradient(270deg, #F61351, #1e90ff, #F61351);
    background-size: 400% 400%;
    animation: gradientWave 5s ease infinite;
    border: none;
    border-radius: 5px;
    color: transparent; /* Hide base text */
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

    /* Accessibility (hide visible text) */
    .talktoanexpert2 span {
        visibility: hidden;
        display: inline-block;
        height: 0;
        overflow: hidden;
    }

    /* Hover background override */
    .talktoanexpert2:hover {
        background: linear-gradient(to right, #d01045, #1a78c5) !important;
        animation: none;
    }

    .talktoanexpert2::before, .talktoanexpert2::after {
        color: white;
    }
/* Gradient wave animation */
@keyframes gradientWave {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.contactsales-pricing1 {
    position: relative;
    display: inline-block;

	width:212px;
    height: 35px;
    margin-bottom: 3px;
    border: 2.8px solid #282D49;
    border-radius: 4px;
    background-color: #282D49;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.3s ease;
    cursor: pointer;
   
    font-weight: 700;
   color:#fff !important;
    margin-top: -2px !important;
	margin-left:15px;
	margin-right:15px;
	padding-top: 4px;
}

/*   .contactsales-pricing1::before,
    .contactsales-pricing1::after {
        content: "Get Started";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 16px;
        pointer-events: none;
        transition: all 0.3s ease;
    }


    .contactsales-pricing1::before {
        top: 50%;
        transform: translate(-50%, -50%);
        color: #ffffff;
        opacity: 1;
    }


    .contactsales-pricing1::after {
        top: 100%;
        color: #000000;
        opacity: 0;
        transform: translate(-50%, -50%);
    }


    .contactsales-pricing1:hover {
        background-color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
        color: #ffffff !important;
    }

        .contactsales-pricing1:hover::before {
            top: -50%;
            opacity: 0;
        }

        .contactsales-pricing1:hover::after {
            top: 50%;
            opacity: 1;
        }
*/
.contactsales-pricing2 {
    position: relative;
    display: inline-block;
    width: 220px;
    height: 35px;
    margin-bottom: 3px;
  
    border-radius: 4px;
    background: linear-gradient(273deg, #4154FF 0%, #D62D45 99%);

    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.3s ease;
    cursor: pointer;
    
    font-weight: 700;
    color: #fff !important;
    margin-top: -2px !important;
}

    /* Visually hide span text */
	/*
    .contactsales-pricing2 span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        white-space: nowrap;
        border: 0;
    }


    .contactsales-pricing2::before,
    .contactsales-pricing2::after {
        content: "Get Started";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 16px;
        pointer-events: none;
        transition: all 0.3s ease;
    }


    .contactsales-pricing2::before {
        top: 50%;
        transform: translate(-50%, -50%);
        color: #ffffff;
        opacity: 1;
    }


    .contactsales-pricing2::after {
        top: 100%;
        color: #fff;
        opacity: 0;
        transform: translate(-50%, -50%);
    }


    .contactsales-pricing2:hover {
        transform: translateY(-1px);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
        color: #ffffff !important;
    }

        .contactsales-pricing2:hover::before {
            top: -50%;
            opacity: 0;
        }

        .contactsales-pricing2:hover::after {
            top: 50%;
            opacity: 1;
        }
		*/
.letstalk1 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 154px;
    height: 44px;
    border-radius: 100px;
    background-color: #0369e3;
    box-shadow: 1px 1px 4px 0px #333333;
    color: transparent; /* Hide main text */
    font-size: 17px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 15px 0px 0px 0px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional hidden span for accessibility or fallback */
    .letstalk1 span {
        visibility: hidden;
        display: none;
    }

    .letstalk1::before, .letstalk1::after {
        color: white;
    }

/*.contactsales-pricing3 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 220px;
    height: 32px;
    border: 1px solid #000000;
    border-radius: 2px;
    background-color: #fbfbfb;
    box-shadow: 0px 0px 1px 2px #333333;
    color: transparent; 
    font-size: 16px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 8px 0 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
*/
    /* Visually hidden span for SEO */
 /*   .contactsales-pricing3 span {
        visibility: hidden;
    }

    .contactsales-pricing3:hover {
        background-color: #ffffff;
    }

    .contactsales-pricing3::before, .contactsales-pricing3::after {
        color: black;
    }
*/

    /*button css 3 */

/* faq section's btncss start */

.faq-sec-btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    background-color: #ee3466;
    width: 154px;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* Hide base text */
    font-size: 17px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0;
    margin-top: -20px;
    top: 13px;
    overflow: hidden;
    transition: all 0.3s ease;
	cursor:pointer;
}

    /* Visually hidden text for accessibility */
    .faq-sec-btn span {
        visibility: hidden;
    }

    .faq-sec-btn:hover {
        background-color: #ee3466 !important;
    }

    .faq-sec-btn::before {
        color: white !important;
        font-weight: normal !important;
    }

    .faq-sec-btn::after {
        color: white !important;
        font-weight: normal !important;
    }

/* faq section's btncss eng */
a.plannerpricing, button.plannerpricing {
    position: relative;
    display: inline-block;
    background-color: #ffffff;
    border: 2px solid #000;
    color: transparent; /* Hide direct text */
    font-weight: bold;
    font-size: 16px;
    padding: 12px 32px;
    border-radius: 30px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-left: 10px;
    height: 20px; /* Adjusted for consistency with previous button height */
    min-width: 95px;
    text-align: center;
    box-shadow: 0px 0px 2px 0px #000000; /* Initial shadow */
}

    /* Hide the actual text inside the button */
    a.plannerpricing span,
    button.plannerpricing span {
        visibility: hidden;
        display: none;
    }


    /* Hover state */
    a.plannerpricing:hover,
    button.plannerpricing:hover {
        background-color: #000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    a.plannerpricing::before, button.plannerpricing::before {
        color: black;
    }

    a.plannerpricing::after, button.plannerpricing::after {
        color: white;
    }
/* Style for the "View Pricing" button with hover animation */
a.targetsection, button.targetsection {
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    width: 153px;
    height: 42px;
    border: 2px solid #000; /* Black border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #ffffff;
    color: transparent; /* Hide original text */
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 14px 0 0 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Optional span inside for accessibility (hidden) */
    a.targetsection span,
    button.targetsection span {
        visibility: hidden;
    }

    /* Default state text */
    a.targetsection::before,
    button.targetsection::before {
        color: #000;
    }
    /* Hover text (hidden initially) */
    a.targetsection::after,
    button.targetsection::after {
        color: #fff;
    }

    /* Hover state */
    a.targetsection:hover,
    button.targetsection:hover {
        background-color: #000;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
    }

@media only screen and (max-width: 768px) {
    a.plannerpricing, button.plannerpricing {
        min-width: 83px !important;
    }
}

.bookdemonew {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 205px;
    height: 45px;
    border-radius: 5px 5px 5px 5px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #333333;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 15px 0px 0px 0px;
}

    .bookdemonew:hover {
        background-color: #fff;
        color: #000;
    }

.visittoseek {
    position: relative;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    width: 205px;
    height: 45px;
    border-radius: 5px 5px 5px 5px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px #333333;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 1em;
    box-sizing: border-box;
    display: block;
    padding: 15px 0px 0px 0px;
}

    .visittoseek:hover {
        background-color: #fff;
        color: #000;
    }
/* after moved to root css codes  */
body {
    margin-bottom: -20px !important;
}

.start-free-migration-now-landingcls {
    margin-top: -10px;
}


/* faq section's btncss eng */
.start-free-migration-now-powerbibtncls,
.start-free-migration-now-landingcls,
.Start-Free-Migration-Now-Yammercls,
.Start-Free-Migration-Now-Teamscls
.Start-Free-Migration-Now-M365cls {
    position: relative;
    display: inline-block;
    background-color: #000000;
    border: 2px solid #000;
    color: transparent; /* Hide direct text */
    font-weight: bold;
    font-size: 15px;
    padding: 11px 24px;
    border-radius: 360px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    min-width: 95px;
    text-align: center;
    box-shadow: 0px 0px 2px 0px #000000;
}

    /* Hide actual span text */
    .start-free-migration-now-powerbibtncls span,
    .start-free-migration-now-landingcls span,
    .Start-Free-Migration-Now-Yammercls span,
    .Start-Free-Migration-Now-Teamscls span
    .Start-Free-Migration-Now-M365cls {
        visibility: hidden;
        display: none;
    }


    /* Initial visible text */
    .start-free-migration-now-powerbibtncls::before,
    .start-free-migration-now-landingcls::before,
    .Start-Free-Migration-Now-Yammercls::before,
    .Start-Free-Migration-Now-Teamscls::before,
    .Start-Free-Migration-Now-M365cls::before {
        color: #fff;
    }

    .start-free-migration-now-powerbibtncls::after,
    .start-free-migration-now-landingcls::after,
    .Start-Free-Migration-Now-Yammercls::after,
    .Start-Free-Migration-Now-Teamscls::after,
    .Start-Free-Migration-Now-M365cls::after {
        color: #fff;
    }

    /* Hover background & animation */
    .start-free-migration-now-powerbibtncls:hover,
    .start-free-migration-now-landingcls:hover,
    .Start-Free-Migration-Now-Yammercls:hover,
    .Start-Free-Migration-Now-Teamscls:hover,
    .Start-Free-Migration-Now-M365cls::hover {
        background-color: #000;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

.startfreem365migration {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 295px;
    height: 36px;
    border-radius: 4px;
    background-color: #e9124d;
    box-shadow: 1px 2px 3px 0px #333333;
    color: transparent; /* Hide base text */
    font-size: 14px;
    text-align: center;
    font-style: normal;
    font-weight: bold;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0;
    margin-left: 43px;
    top: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

    /* Visually hidden text for accessibility */
    .startfreem365migration span {
        visibility: hidden;
    }

    .startfreem365migration::before {
        color: #ffffff;
    }
    /* Hidden hover text, below the button initially */
    .startfreem365migration::after {
        color: #000000;
    }

    .startfreem365migration:hover {
        background-color: #ffffff;
    }

.headerbookfreedemo {
    display: inline-block;
    float: right;
    position: relative;
    width: 180px;
    height: 35px;
    border: 2px solid #000; 
    border-radius: 5px;
    background-color: transparent;
  /*  box-shadow: 0px 0px 2px 0px #333333; */
    color: transparent;
    font-size: 17px;
    text-align: center;
    line-height: 35px;
    box-sizing: border-box;
    margin-top: 29px;
    transition: all 0.3s ease;
    right: 10px;
    cursor: pointer !important;
}

    .headerbookfreedemo:hover {
       background-color: #000 !important;
        box-shadow: 0px 0px 2px 0px #333333;
    }

    .headerbookfreedemo span {
        visibility: hidden;
    }

    .headerbookfreedemo::before {
      color: #000000;
    }

    .headerbookfreedemo::after {
        color: #ffffff;
    }



.startfreepowerbimigration,
.startfreeyammermigration,
.startfreeteamsmigration,
.startfreem365migration {
    top: 3px !important;
}