﻿#microsoft-365-license-management-main-container {
    font-size: 13px;
    color: darkslategray;
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    display: block;
}

/*============= M365 License Management Banner section styles ===============*/

.license-management-banner-section {
    padding: 65px 20px 0px;
    overflow: hidden;
    background: linear-gradient(45deg, #002f51, #00554f);
}

.license-management-banner-content {
    width: 45%;
    max-width: 670px;
    margin: 25px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    color: #ffffff
}

.license-management-banner-img {
    width: 42%;
    max-width: 550px;
    min-width: 280px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    margin: 20px;
}

.lm-banner-title {
    color: #00db6c;
}

.lm-hero-text {
    font-family: poppins-medium;
    color: #ffffff;
    font-style: italic;
}

.license-management-banner-img img {
    width: 100%;
    height: 100%;
}

.ad-color {
    background: linear-gradient(90deg, #00e325, #3a85ff, #ff2fdf);
    background: linear-gradient(90deg, #44ebff, #51ffc1, #31ff97);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: poppins-semibold;
}

/*================ Slides JS styles =================*/

.feature-img {
    max-width: 550px;
    width: 100%;
    padding: 0px !important;
    min-width: 280px;
    position: relative;
}

    .feature-img::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 5;
        pointer-events: none;
    }

    .feature-img img {
        min-width: 350px;
        width: 100%;
        max-width: 100%;
        height: 100%;
        transition: transform 0.2s ease-out !important;
        cursor: zoom-in;
    }

        .feature-img img:hover {
            transform: scale(1.05);
        }

    .feature-img .slidesjs-container {
        box-shadow: 0px 0px 0px 10px #fff, 0px 0px 18px 15px rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }

    .feature-img .slidesjs-control {
        cursor: zoom-in;
    }

    .feature-img .slidesjs-navigation {
        font-size: 1.15em !important;
        color: rgb(173 173 173 / 50%) !important;
        transform: rotateY(-15deg) rotateX(10deg);
        pointer-events: auto;
        top: unset;
        position: absolute;
        cursor: pointer;
    }

    .feature-img .cust-quote-nav.slidesjs-navigation:hover {
        color: rgb(72 140 186) !important;
    }

    .feature-img .slidesjs-previous {
        right: 45px;
        bottom: -4px;
    }

    .feature-img .slidesjs-navigation.slidesjs-next {
        right: 20px;
        bottom: -4px;
    }

    .feature-img .skew-right .slidesjs-navigation.slidesjs-previous {
        right: 45px;
    }

    .feature-img .skew-right .slidesjs-navigation.slidesjs-next {
        right: 20px;
    }

    .feature-img .skew-right .slidesjs-navigation {
        transform: rotateY(15deg) rotateX(10deg);
    }

.slidesjs-pagination {
    text-align: left;
    pointer-events: none;
    margin-top: 15px;
    cursor: pointer;
}

    .slidesjs-pagination li {
        display: inline-block;
        pointer-events: auto;
    }

        .slidesjs-pagination li a {
            display: inline-block;
            background-color: rgb(159 159 159 / 20%);
            font-size: 10px;
            padding: 3px 3px;
            border-radius: 2px;
            line-height: 0.7em;
            margin: 0 2px;
            transition: background-color 0.3s linear;
            color: transparent;
            width: 12px;
        }

            .slidesjs-pagination li a.active,
            .slidesjs-pagination li a:hover.active {
                background-color: rgb(72 140 186);
            }

.skew-left .slidesjs-pagination {
    transform: rotateY(-15deg) rotateX(15deg);
}

.skew-right .slidesjs-pagination {
    transform: rotateY(15deg) rotateX(15deg);
    margin-left: 15px;
}

.skew-left .slidesjs-container {
    transform: rotateY(-15deg) rotateX(15deg);
    backface-visibility: hidden;
    border-right: 4px solid #899ab2;
    pointer-events: auto;
}

.skew-right .slidesjs-container {
    border-left: 4px solid #899ab2;
    transform: rotateY(15deg) rotateX(15deg);
    backface-visibility: hidden;
    pointer-events: auto;
}

.feature-img .slide-wrapper {
    perspective: 1500px;
    /*    transform-style: preserve-3d;*/
    overflow: visible !important;
    position: relative;
    pointer-events: auto;
}

.slide-wrapper img {
    display: none;
}

.slidesjs-play {
    display: none !important;
}

.slidesjs-stop {
    display: none !important;
}

.feature-img.expanded {
    position: fixed !important;
    top: 40px;
    left: 0;
    background: rgb(0,0,0, 0.75);
    z-index: 12;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw;
    cursor: zoom-out;
}

    .feature-img.expanded img {
        width: 100%;
        display: block;
        cursor: zoom-out;
    }

        .feature-img.expanded img:hover {
            transform: none;
        }

    .feature-img.expanded .active-dir-img-container {
        background: #f0f8ff1a;
        padding: 20px 20px 10px !important;
        border-radius: 10px;
        border: 1px solid #757575;
        position: relative;
        width: 60%;
    }

.feature-img .close-btn {
    display: none;
    position: absolute;
    top: 0px;
    right: 0%;
    font-size: 24px;
    color: #555555;
    cursor: pointer;
    z-index: 10;
    background: #fff;
    width: 30px;
    border-top-right-radius: 10px;
}

.feature-img.expanded .close-btn {
    display: block;
}

.feature-img.expanded .slidesjs-container,
.feature-img.expanded .slidesjs-control {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    cursor: zoom-out;
}

.feature-img.expanded .slidesjs-navigation {
    font-size: 3.15em !important;
    color: rgb(255 255 255 / 50%) !important;
}

    .feature-img.expanded .slidesjs-navigation.slidesjs-previous {
        left: -70px;
        bottom: 50%;
        right: auto;
    }

    .feature-img.expanded .slidesjs-navigation.slidesjs-next {
        right: -70px;
        bottom: 50%;
    }

.feature-img.expanded .slidesjs-pagination {
    margin-top: 20px;
}

    .feature-img.expanded .slidesjs-pagination li a {
        background-color: rgb(255 255 255 / 44%);
    }

        .feature-img.expanded .slidesjs-pagination li a.active,
        .feature-img.expanded .slidesjs-pagination li a:hover.active {
            background-color: rgb(72 140 186);
        }

/*================ Microsoft 365 license management section styles =================*/

.section-text {
    gap: 1em;
    max-width: 1045px;
    margin: 0px 60px;
    padding-bottom: 40px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
}

.license-management-content-wrapper, .license-reporting-content-wrapper, .license-auditing-content-wrapper, .license-alerts-content-wrapper,
.license-reminders-and-followups-content-wrapper, .license-management-automation-content-wrapper, .droid-main-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 18px;
}

.license-management-card, .license-reporting-card, .license-auditing-card, .license-alerts-card,
.license-reminders-and-followups-card, .license-management-automation-card, .how-admindroid-simplifies-lm-card {
    max-width: 620px;
    text-align: left;
}

.license-reporting-card, .license-alerts-card, .license-management-automation-card {
    max-width: 620px;
}

.license-management-img-container {
    max-width: 480px;
    min-width: 280px;
    margin: 20px 20px 0px;
    vertical-align: middle;
    display: inline-block;
    width: 35%;
}

    .license-management-img-container img {
        width: 75%;
        height: auto;
    }

.droid-section-main-title-desc {
    padding-left: 0px;
}

.section-header-text-quote {
    font-family: poppins-regular;
    color: #008a22;
    font-size: 1.2em;
    line-height: 1.5;
    margin-top: 10px;
    padding-top: 15px;
    /* display: flex; */
    align-items: center;
    justify-content: left;
    gap: 18px;
    border-top: 1px solid #70809021;
    max-width: 700px;
    position: relative;
    margin: 10px auto;
    background: linear-gradient(45deg, transparent, #a5a5ff21, transparent);
    padding: 12px;
}

section.m365-license-reporting-section, .m365-license-alerts-section, .m365-license-management-automation-section {
    background: linear-gradient(45deg, #fdffea, #ebfff9);
    background: linear-gradient(45deg, #002e55, #003124);
    background: #001a35;
    color: white;
}


.license-reporting-card, .license-alerts-card, .license-management-automation-card {
    border-radius: 8px;
    position: relative;
}


.lm-card-title-wrap {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 18px;
}

.lm-card-title.droid-section-sub-title {
    margin-bottom: 0px;
}

.lm-card-title-icon {
    font-size: 1.5em;
}

.lm-card-title-icon {
    /*    background: linear-gradient(45deg, #ebfff2, #eceeff);*/
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 5px;
    /*    color: #5b6977;
    border: 1px solid #b9cadb42;*/
}

.m365-license-reporting-section, .m365-license-management-section, .m365-license-auditing-section, .m365-license-alerts-section,
.m365-license-reminders-and-followups-section, .m365-license-management-automation-section, .m365-license-management-delegation-section {
    /*    padding-top: 35px;*/
    overflow: hidden;
    position: relative;
}

.section-icon {
    font-size: 12em;
    opacity: 0.05;
    position: absolute;
    left: 5px;
    top: 65px;
}

.m365-lm-section .droid-section-outer-wrapper {
    padding-top: 65px;
}


/*=============== M365 license management CTA banner section ================*/


.m365-license-management-cta-banner-section {
    background: linear-gradient(45deg, #001233, #004547);
    /*    background-color: white;*/
    /*background-image: radial-gradient(at 80% 80%, #c0ffe1 0%, transparent 50%), radial-gradient(at 20% 80%, #e0fff5 0% 0%, transparent 50%), radial-gradient(at 20% 20%, #d8ffc8 0%, transparent 50%), radial-gradient(at 80% 20%, #e2fff8 0%, transparent 50%);*/
    /* padding: 30px; */
}

.cta-banner-wrap {
    padding: 45px 10px;
    background: linear-gradient(125deg, #7898d533, #599d4524);
    border: 1px solid #667a854a;
    border-radius: 20px;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /*    background-color: #D9F7FF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23D9F7FF'/%3E%3Cstop offset='1' stop-color='%23DBFFD0'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");*/
    background-size: cover;
    background-attachment: fixed;
    color: #f4ffff;
}

    .cta-banner-wrap svg {
        position: absolute;
        top: 3px;
        opacity: 0.25;
    }

.sec-highlight {
    color: palegreen;
}

.m365-license-management-dwd-banner-btn {
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 1.05em;
    padding-top: 10px;
}

    .m365-license-management-dwd-banner-btn a {
        text-decoration: underline;
        color: #6edd42;
        font-family: work-sans-medium;
    }

/* CTA banner redesign - dark teal glow, centred headline, gradient Download
   button beside an outlined "Live Demo" pill. Scoped to this section only. */
.m365-license-management-cta-banner-section {
    background: radial-gradient(900px 320px at 50% 0%, rgba(22, 82, 102, 0.55), transparent 70%), linear-gradient(180deg, #0a2a36 0%, #071c25 100%);
}

    .m365-license-management-cta-banner-section .cta-banner-wrap {
        padding: 30px 16px 38px;
        background: none;
        border: none;
        border-radius: 0px;
        overflow: visible;
    }

    .m365-license-management-cta-banner-section .m365-license-management-cta-banner-wrap .droid-section-main-title {
        max-width: 760px;
        margin: 0px auto;
        color: #f4fbff;
        text-align: center;
    }

    /* Download button with the "Live Demo" text link stacked beneath it */
    .m365-license-management-cta-banner-section .dwn-btn-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 18px;
        margin-top: 36px;
    }

        .m365-license-management-cta-banner-section .dwn-btn-wrap > a {
            display: inline-flex;
            text-decoration: none;
        }

    /* gradient Download button with a soft purple glow */
    .m365-license-management-cta-banner-section .download-btn.dwd-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 0px;
        padding: 11px 22px;
        border-radius: 6px;
        background: linear-gradient(90deg, #3f82e0 0%, #7a5cc4 50%, #b43f9e 100%);
        background-size: 160% 100%;
        background-position: 0% 50%;
        color: #ffffff;
        font-size: 1.28em;
        font-family: poppins-semibold, Arial, Helvetica, sans-serif;
        box-shadow: 0px 10px 28px -6px rgba(180, 63, 158, 0.45);
        transition: background-position 0.4s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

        .m365-license-management-cta-banner-section .download-btn.dwd-btn:hover {
            opacity: 1 !important;
            background-position: 100% 50%;
            transform: translateY(-2px);
            box-shadow: 0px 14px 32px -6px rgba(180, 63, 158, 0.55);
        }

        .m365-license-management-cta-banner-section .download-btn.dwd-btn i {
            padding: 0px;
            font-size: 0.85em;
        }

    /* plain "Take a quick look  Live Demo" text line with an underlined green link */
    .m365-license-management-cta-banner-section .m365-license-management-dwd-banner-btn {
        align-items: baseline;
        gap: 6px;
        padding: 0px;
        font-size: 1.02em;
    }

        .m365-license-management-cta-banner-section .m365-license-management-dwd-banner-btn p {
            margin: 0px;
            color: #c3cfd6;
        }

        .m365-license-management-cta-banner-section .m365-license-management-dwd-banner-btn a {
            color: #34d399;
            font-family: work-sans-medium, Arial, Helvetica, sans-serif;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 4px;
            text-decoration-color: rgba(52, 211, 153, 0.6);
            transition: color 0.25s ease-in-out, text-decoration-color 0.25s ease-in-out;
        }

            .m365-license-management-cta-banner-section .m365-license-management-dwd-banner-btn a:hover {
                color: #5eead4;
                text-decoration-color: currentColor;
            }

@media (max-width: 576px) {
    .m365-license-management-cta-banner-section .dwn-btn-wrap {
        gap: 14px;
    }

        .m365-license-management-cta-banner-section .dwn-btn-wrap > a,
        .m365-license-management-cta-banner-section .download-btn.dwd-btn {
            width: 100%;
            max-width: 320px;
        }
}

.stats-hl {
    color: #35a1f0;
    font-family: work-sans-medium, Arial, Helvetica, sans-serif;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(45deg, #ff3fad, #c647ff);
    background-clip: text;
    -webkit-background-clip: text;
}

.btn-content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    text-align: left;
    max-width: none;
    margin: 0px;
    padding: 30px 34px;
    border: 1px solid #14284a;
    border-radius: 12px;
    background: radial-gradient(620px 300px at 88% 120%, rgba(47, 138, 233, 0.20), transparent 62%), linear-gradient(160deg, #172b4d 0%, #0e1c33 100%);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.07), 0px 12px 30px rgba(16, 30, 54, 0.18);
}

.free-tool-cta-conatiner.droid-container::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -220px;
    left: -120px;
    /*    background: radial-gradient(circle, rgb(0 255 220 / 13%) 0%, rgb(0 160 179 / 11%) 35%, transparent 70%);*/
    filter: blur(20px);
    pointer-events: none;
    z-index: 1;
}

.free-tool-cta-conatiner.droid-container::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -300px;
    right: -180px;
    /*    background: radial-gradient(circle, rgb(110 80 255 / 12%) 0%, rgb(0 120 180 / 13%) 40%, transparent 70%);*/
    filter: blur(25px);
    pointer-events: none;
    z-index: 0;
}

.how-m365-lm-accordian-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.how-m365-card-content {
    padding: 12px 15px;
    background: #f0f8ff0a;
    color: white;
    display: flex;
    align-items: center;
    gap: 35px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .how-m365-card-content:hover .explore-button-down {
        opacity: 1;
    }

    .how-m365-card-content i {
        font-size: 2.2em;
        z-index: 0;
    }

.how-m365-lm-accordian-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/*=============== Droid Nav overwrite styles ================*/

.droid-nav-tab.active,
.droid-tabs-expanded .droid-nav-tab {
    width: 200px;
    text-align: center;
}

.droid-nav-tab.navy.active {
    background: #6262ca;
    color: white;
}

.droid-nav-tab.navy {
    color: #6262ca;
    background: white;
}

.droid-nav-tab.violet.active {
    background: #238fcd;
    color: white;
}

.droid-nav-tab.violet {
    color: #238fcd;
    background: white;
}

.droid-nav-tab.blue.active {
    background: #46bc64;
    color: white;
}

.droid-nav-tab.blue {
    color: #23c24c;
    background: white;
}

.droid-nav-tab.brown.active {
    background: #2b89a0;
    color: white;
}

.droid-nav-tab.brown {
    color: #2b89a0;
    background: white;
}

.droid-nav-tab.pink.active {
    background: #b546bc;
    color: white;
}

.droid-nav-tab.pink {
    color: #b546bc;
    background: white;
}

.droid-nav-tab.orange.active {
    background: #7a29a4;
    background: #009985;
    color: white;
}

.droid-nav-tab.orange {
    color: #7a29a4;
    color: #009985;
    background: white;
}

.droid-nav-tab.sandle {
    color: rgb(173, 108, 0);
    background: white;
}

    .droid-nav-tab.sandle.active {
        background: rgb(173, 108, 0);
        color: white;
    }

.theme-blue {
    background: aliceblue;
    border: 1px solid #3947af30;
}

.theme-green {
    background: #eaffea;
    border: 1px solid #39af5938;
}

.theme-rose {
    background: #fff1fb;
    border: 1px solid #bd39ab2e;
}

.theme-violet {
    background: #faeeff;
    border: 1px solid #9839af2e;
}

.highlight-lm {
    color: #308bcd;
}

.highlight-lavender {
    color: #6262ca;
}

.highlight-brown {
    color: #29aac9;
}

.highlight-pink {
    color: #b90bc3;
    display: inline-block;
}

.highlight-violet {
    color: #b85ad5;
    color: #1ad5bd;
    display: inline-block;
}

.highlight-sandle {
    color: #8c00a7;
}
/*=============== How AdminDroid simplifies section styles ================*/


.how-admindroid-simplifies-lm-section .droid-main-content-wrapper {
    /*    background: linear-gradient(45deg, #0f003f, #470036);
    color: white;*/
    gap: 12px;
    margin-top: 20px;
    flex-direction: column;
}

.how-admindroid-simplifies-lm-sub-title-desc.droid-section-sub-title-desc {
    color: #b5c3d1;
}

.why-this-matters-wrap::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 155%;
    background: #ffffff0d;
    left: -15px;
    display: none;
}

.group h3 {
    color: #6bd76b;
    font-size: 1.25em;
    font-family: poppins-medium !important;
}

.group p {
    line-height: 1.5;
    margin-top: 6px;
    font-size: 1.1em;
    color: #dbe0e9;
}

.how-admindroid-simplifies-lm-section svg {
    position: absolute;
    opacity: 0.03;
}

.how-admindroid-simplifies-lm-card {
    min-height: 130px;
    color: #ffffff;
    /*    background: white;
    border-radius: 8px;*/
    max-width: 850px;
    /*    border-bottom: 1px solid #b2becb5c;*/
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: column;
    /*    background: linear-gradient(45deg, #ffffff12, #ffffff0f);*/
    /* box-shadow: 0px 0px 8px #cacccf63; */
    border: 1px solid #70809024;
    border-radius: 25px;
    position: relative;
    backdrop-filter: blur(8px);
    border-left: 2px solid #84ffdc30;
    border-right: 2px solid #84ffdc30;
    padding: 0px 20px;
}

.how-admindroid-simplifies-lm-title {
    background: linear-gradient(90deg, #26b990 0%, #a2c324 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: poppins-medium;
}

.lhs {
    /*    max-width: 595px;*/
    /* width: 80%; */
}

.why-this-matters-wrap h4 {
    font-family: poppins-medium !important;
}

.why-this-matters-wrap {
    /*    margin-top: 10px;*/
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    /*    max-width: 350px;*/
    position: relative;
}

    .why-this-matters-wrap i {
        font-size: 4em;
        opacity: 0.4;
        background: linear-gradient(90deg, #26b990 0%, #b2fb29 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }


.how-admindroid-simplifies-lm-title-wrapper {
    color: darkslategray;
}

.lm-card-title-icon.dark {
    position: relative;
}

.section-header-text-quote i {
    font-size: 1.4em;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    /* display: none; */
    position: absolute;
    top: -17px;
    opacity: 0.3;
}

.sub-heading {
    font-family: poppins-medium;
    font-size: 1.6em;
    margin-bottom: 20px;
    color: #008731;
    background: linear-gradient(90deg, #45b6e5, #26e303);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-theme-pink {
    background: #ffe4fa;
    color: #bd39ab;
    border-radius: 8px;
}

.dark-accordion .icon-theme-pink {
    background: #44c8a530;
    color: #39bd95;
    border-radius: 8px;
}

.icon-theme-blue {
    background: #e4ebff;
    color: #3947af;
    border-radius: 8px;
}

.dark-accordion .icon-theme-blue {
    background: #9db7ff1c;
    color: #5db7e7;
    border-radius: 8px;
}

.icon-theme-green {
    background: #e4ffe9;
    color: #39af59;
    border-radius: 8px;
}

.dark-accordion .icon-theme-green {
    background: #258f393d;
    color: #acb219;
    border-radius: 8px;
}

.icon-theme-purple {
    background: #f7e4ff;
    color: #9839af;
    border-radius: 8px;
}

.dark-accordion .icon-theme-purple {
    background: #8f4dab24;
    color: #b63bc6;
    border-radius: 8px;
}

.title-blue {
    color: #0c69a8;
    background: linear-gradient(90deg, #0d53bd, #0097bb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-green {
    color: #179917;
    background: linear-gradient(90deg, #008995, #189700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-pink {
    color: #c12472;
    background: linear-gradient(90deg, #cf00b1, #950664);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-purple {
    color: #ad00ad;
    background: linear-gradient(90deg, #95008f, #8211d6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-wrap {
    font-size: 2em;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: aliceblue; */
    flex-shrink: 0;
    border-radius: 15px;
    color: #ffffff;
    /*    position: absolute;*/
    /*    left: -75px;*/
    position: relative;
    top: 45px;
}

.new-wrap {
    display: flex;
    /*    align-items: center;*/
    justify-content: center;
    gap: 20px;
}

.microsoft-365-license-management-section {
    /*    margin-top: 40px;*/
    /*    background: #fcfeff;*/
}

.how-admindroid-simplifies-lm-title-desc {
    width: 72%;
    margin: 0 auto;
    color: white;
    position: relative;
}

    .how-admindroid-simplifies-lm-title-desc i {
        position: absolute;
        left: -20px;
        font-size: 4em;
        opacity: 0.15;
        top: -10px;
        color: palegreen;
    }
/* Droid Nav Styles */

#microsoft-365-license-management-main-container .droid-nav-tab-container {
    font-family: poppins-medium, Arial, Helvetica, sans-serif;
}

#microsoft-365-license-management-main-container .droid-tabs-expanded.droid-nav-tab-container {
    padding: 0px 0px 0px;
    border-radius: 0px;
    background-color: transparent;
    box-shadow: none;
    /*    transition:all 0.5s ease-in-out;*/
}

#microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab {
    background-color: #ffffff0f;
    /*    border: 2px solid #d5e5f3;*/
    color: darkslategray;
    font-size: 1.1em;
    /*    transition: all 0.5s ease-in-out;*/
}

    #microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab[title="Microsoft 365 License Management"] {
        /*       border: 2px solid transparent;*/
        background: linear-gradient(45deg, #d9fdff, #e1edff);
        padding-right: 14px;
        padding-left: 6px;
        padding-top: 0px;
        padding-bottom: 2px;
        border: 1px solid #9197d82e;
    }

    #microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab[title="Microsoft 365 License Reporting"] {
        /*        border: 2px solid transparent;*/
        padding-right: 14px;
        padding-left: 6px;
        padding-top: 0px;
        padding-bottom: 2px;
    }

    #microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab[title="Microsoft 365 License Auditing"] {
        /*        border: 2px solid transparent;*/
        padding-right: 14px;
        padding-left: 6px;
        padding-top: 0px;
        padding-bottom: 2px;
    }

    #microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab[title="Microsoft 365 Licensing Alerts"] {
        /*        border: 2px solid transparent;*/
        padding-right: 14px;
        padding-left: 6px;
        padding-top: 0px;
        padding-bottom: 2px;
    }

    #microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab[title="Smart License Lifecycle Reminders and Follow-ups"] {
        /*        border: 2px solid transparent;*/
        padding-right: 14px;
        padding-left: 6px;
        padding-top: 0px;
        padding-bottom: 2px;
    }

    #microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab[title="Automate Microsoft 365 License Management"] {
        /*        border: 2px solid transparent;*/
        padding-right: 14px;
        padding-left: 6px;
        padding-top: 0px;
        padding-bottom: 2px;
    }

    #microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab[title="Microsoft 365 License Management Delegation"] {
        /*        border: 2px solid transparent;*/
        padding-right: 14px;
        padding-left: 6px;
        padding-top: 0px;
        padding-bottom: 2px;
    }

    #microsoft-365-license-management-main-container #droid-sticky-navigation .droid-tabs-expanded .droid-nav-tab:hover {
        /*    border: 2px solid #ffffff17;*/
        background: linear-gradient(45deg, #d9fdff, #e1edff);
    }

#microsoft-365-license-management-main-container .droid-tabs-expanded .droid-nav-tab {
    padding: 4px 0px 4px 0px;
    margin: 6px 6px;
    width: fit-content;
    /*    transition: all 0.5s ease-in-out;*/
}

#microsoft-365-license-management-main-container .droid-tabs-expanded.droid-nav-tab-container .droid-nav-item {
    text-align: left;
    overflow: visible;
    /*    transition: all 0.5s ease-in-out;*/
}

.droid-nav-tab-container:not(.droid-tabs-shrinked) .nav-tab-icon {
    /*    background: linear-gradient(45deg, #009bcb, #00a354);*/
    border-radius: 5px;
    padding: 6px;
    font-size: 13px;
    left: -10px;
    top: -1px;
    margin-right: 3px;
    /*    position: relative;*/
    color: white;
    transition: all 0.5s ease-in-out;
    /*    outline: 2px solid #ffffff4a;*/
}

.droid-nav-tab .droid-nav-item .nav-tab-icon {
    transition: all 0.5s ease-in-out;
    border-radius: 5px;
    display: inline-flex;
}

#microsoft-365-license-management-main-container .droid-tabs-shrinked.droid-nav-tab-container {
    /*    transition: all 0.5s ease-in-out;*/
}

#microsoft-365-license-management-main-container #droid-sticky-navigation {
    /* margin-bottom: 32px; */
    /* max-width: 1200px; */
    margin: 0 auto;
    /* margin-top: -60px; */
    /* height: 170px; */
    /* background: #ffffff;*/
}

#microsoft-365-license-management-main-container .droid-tabs-expanded .droid-nav-item .droid-tab-label {
    /*    text-overflow: ellipsis;*/
    white-space: nowrap;
    /*    overflow: hidden;*/
    max-width: calc(100% - 50px);
}

#droid-sticky-navigation .nav-container .droid-nav-tab[title="Microsoft 365 License Management"].active, .droid-nav-tab[title="Microsoft 365 License Management"] i {
    background: #6262ca;
}

#droid-sticky-navigation .nav-container .droid-nav-tab[title="Microsoft 365 License Reporting"].active, .droid-nav-tab[title="Microsoft 365 License Reporting"] i {
    background: #308bcd;
}

#droid-sticky-navigation .nav-container .droid-nav-tab[title="Microsoft 365 License Auditing"].active, .droid-nav-tab[title="Microsoft 365 License Auditing"] i {
    background: #26ad48;
}

#droid-sticky-navigation .nav-container .droid-nav-tab[title="Microsoft 365 Licensing Alerts"].active, .droid-nav-tab[title="Microsoft 365 Licensing Alerts"] i {
    background: #22aac9;
}

#droid-sticky-navigation .nav-container .droid-nav-tab[title="Smart License Lifecycle Reminders and Follow-ups"].active, .droid-nav-tab[title="Smart License Lifecycle Reminders and Follow-ups"] i {
    background: #bc2dc4;
}

#droid-sticky-navigation .nav-container .droid-nav-tab[title="Automate Microsoft 365 License Management"].active, .droid-nav-tab[title="Automate Microsoft 365 License Management"] i {
    background: #12958e;
}

#droid-sticky-navigation .nav-container .droid-nav-tab[title="Microsoft 365 License Management Delegation"].active, .droid-nav-tab[title="Microsoft 365 License Management Delegation"] i {
    background: #8c00a7;
}

.nav-container.droid-tabs-expanded .nav-tab-icon i {
    /*    background: white;*/
}

.droid-nav-tab .droid-nav-item i {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    box-shadow: none;
}

.droid-nav-tab.active .droid-nav-item i {
    -webkit-text-fill-color: white;
}

#droid-sticky-navigation .droid-nav-tab-container i {
    font-size: 1.6em;
}

.droid-nav-tab-container .droid-nav-tab.active {
    box-shadow: none;
}

div#droid-sticky-navigation.droid-sticky-nav {
    background: transparent;
}

.droid-nav-tab.active {
    visibility: visible;
}

.droid-nav-tab-container {
    border-bottom: none;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 0px;
}

.droid-tabs-expanded {
    border-radius: 3px;
}

    .nav-container .droid-nav-tab.active, .droid-tabs-expanded .droid-nav-tab {
        width: 210px;
    }

nav.nav-container.droid-nav-tab-container.home-nav-tab-container.droid-tabs-expanded i {
    -webkit-text-fill-color: #ffffff00 !important;
}


@keyframes fadeInNavforward {
    0% {
        opacity: 0.001;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInNavbackward {
    70% {
        opacity: 0.001;
    }

    99% {
        opacity: 1;
    }
}

.how-m365-card-content::before {
    position: absolute;
    content: '';
    background: #55b29f29;
    width: 55px;
    border-radius: 0px 0px 25px;
    height: 55px;
    left: 0px;
    box-shadow: 0px 0px 20px #03291c8c;
}

.how-admindroid-simplifies-lm-section {
    background: linear-gradient(125deg, #001241, #006b4d);
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg, #002741, #002144);
}

@media (max-width: 1024px) {
    .droid-nav-tab.active {
        width: 25px !important;
    }

    #microsoft-365-license-management-main-container #droid-sticky-navigation {
        margin-top: 0px;
    }

    .license-management-banner-section {
        padding-bottom: 40px;
    }

    .section-header {
        flex-wrap: wrap;
    }

    .section-text {
        width: 100%;
    }

    .m365-license-management-section {
        padding-top: 0px;
    }

    .m365-lm-section .droid-section-outer-wrapper {
        padding-top: 50px;
    }
}


@media (max-width: 1092px) {
    .feature-img {
        width: 80% !important;
        height: auto !important;
        margin: 40px auto 30px;
    }

    .section-text {
        padding-bottom: 0px;
    }

    .m365-license-reporting-section .droid-main-content-wrapper, .m365-license-alerts-section .droid-main-content-wrapper, .m365-license-management-automation-section .droid-main-content-wrapper {
        flex-direction: column-reverse;
    }
}



@media (max-width:426px) {
    .how-admindroid-simplifies-lm-section .droid-main-content-wrapper {
        gap: 40px;
    }

    .new-wrap {
        gap: 0px;
        flex-direction: column;
        position: relative;
    }

    .icon-wrap {
        position: absolute;
        top: -30px;
        z-index: 1;
        left: unset;
    }
}


@media(max-width:685px) {
    .license-management-banner-content {
        margin-left: unset;
    }

    .license-management-banner-btn-wrap {
        text-align: center;
    }
}

.slide-card {
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}

    .slide-card:hover::before {
        transform: translate(0px);
    }

    .slide-card::before {
        content: '';
        position: absolute;
        inset: 0;
        /*        background: linear-gradient(45deg, black, transparent);*/
        transition: transform 0.52s cubic-bezier(0.4,0,0.2,1);
        z-index: 0;
        border-radius: 16px;
    }

.slide-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-direction: column;
    padding: 25px 10px;
    width: 100%;
    /*    transition: opacity 0.28s, transform 0.28s;
    transition: opacity 0.32s 0.18s, transform 0.32s 0.18s;*/
}


.slide-reveal {
    /*    position: absolute;*/
    inset: 0;
    z-index: 2;
    /*    display: flex;
    align-items: center;
    flex-direction: column;*/
    /*    padding: 20px 20px;*/
    gap: 10px;
    /*    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.32s 0.18s, transform 0.32s 0.18s;*/
    pointer-events: none;
    max-width: 550px;
    /*    width: 40%;*/
    border-radius: 20px;
    text-align: left;
    /*    background: linear-gradient(45deg, #085a56d4, #0f4c65);*/
    position: relative;
    display: none;
}

    .slide-reveal.active::before {
        content: '';
        width: 900px;
        height: 600px;
        background: linear-gradient(45deg, #22584fbf, #003550);
        position: absolute;
        left: -149px;
        z-index: -1;
        top: -24px;
    }

    .slide-reveal.active {
        display: block;
    }

    .slide-reveal img {
        width: 100%;
        /* display: flex; */
        /* align-items: center; */
        border-radius: 8px;
        box-shadow: 0px 0px 4px #b5bfc8;
    }

.section-header-text-quote i {
    /*    opacity: 0.5;*/
    /*    display:none;*/
}



.how-m365-lm-accordian-item.active {
    background: #ffffff0d;
    max-width: 860px;
    margin: 0 auto;
    padding: 20px;
    color: white;
    border-radius: 8px;
    backdrop-filter: blur(3px);
    border: 1px solid #ffffff12;
    text-align: left;
}

.how-m365-image {
    max-width: 100%;
}

    .how-m365-image img {
        width: 100%;
        border-radius: 8px;
        border: 5px solid #ffffff1a;
        margin-top: 20px;
    }

.popup-container-wrapper {
    position: fixed;
    z-index: 4;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7176470588);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;
}

.popup-container {
    /*    width: 75rem;
    height: 78vh;*/
    /*    background: linear-gradient(125deg, #003c6a, #006a4c);*/
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    margin-top: 30px;
    /*    transform: translateY(-100%) scale(1.25);*/
    transition: 0.8s 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
    position: relative;
}

.popup-container-wrapper.active {
    opacity: 1;
    visibility: visible;
}

.popup-container .options-lhs {
    width: 25rem;
    min-height: 100%;
    /*    background-color: #F5F5F5;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*    border-right: 1px solid rgba(0, 0, 0, 0.1);*/
}

.popup-container .card-items {
    padding-top: 2rem;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    overflow-y: auto;
}

.popup-container .card-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    background: #ffffff14;
}

.popup-container .options-rhs {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    position: relative;
    gap: 1em;
    padding: 2rem;
    padding-right: 3rem;
    color: white;
    text-align: left;
    animation: new 0.8s ease-in-out;
}

.popup-lhs-menu-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    padding-right: 1.4rem;
    font-size: 1em;
    line-height: 1.65;
    color: #b8b8b8;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    border-left: 3px solid transparent;
    font-family: poppins-medium;
    text-align: left;
}

    .popup-lhs-menu-item:hover {
        border-left-color: rgb(28 225 120 / 29%);
        color: #3fed7878;
        /*        background-color: rgba(255, 255, 255, 0.4509803922);*/
    }

    .popup-lhs-menu-item .title-text {
        display: flex;
        align-items: center;
        gap: 20px;
    }

.title-text i {
    font-size: 2em;
}

.popup-container .chart-detail-image img {
    border-radius: 8px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
    width: 80%;
    text-align: center;
    cursor: zoom-in;
    outline: 7px solid #ffffff21;
}

.popup-container .chart-item-expand-data {
    display: none;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 8px;
    flex-direction: column;
    gap: 1rem;
    background-color: #fff;
}

.popup-container .close-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #32313C;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-family: var(--font-work-sans);
    font-size: 1.2em;
    cursor: pointer;
    padding-bottom: 2.5px;
    z-index: 4;
}

.popup-container .card-item.active .popup-lhs-menu-item {
    border-left: 3px solid #3fed78;
    color: #3fed78;
    /*    background-color: #fff;*/
    /*    border-radius: 8px 0 0 8px;*/
    box-shadow: -1px 0 8px rgba(0, 0, 0, 0.0666666667);
}

.popup-container .chart-detail-title {
    font-weight: 600;
    font-size: 1.6em;
    /* line-height: 1.55; */
    background: linear-gradient(90.38deg, #4eea62 -19.47%, #00ffd7 112.49%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: poppins-light;
}

.how-m365-card-content .explore-button-down {
    position: absolute;
    right: 15px;
    font-size: 1.2em;
    transform: rotate(-90deg);
    opacity: 0.2;
}

@media screen and (width < 1000px) {
    .popup-container .card-item.active .chart-item-expand-data {
        display: flex;
        color: white;
        text-align: left;
    }

    .popup-container .options-rhs {
        display: none;
    }

    .popup-container .options-lhs {
        width: 100%;
        overflow: hidden;
    }

    .popup-lhs-menu-item .title-text {
        font-size: 1.05em;
    }

    .chart-item-expand-data .chart-detail-title {
        display: none;
    }

    .btn-content-wrap {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }

    .free-tool-cta-banner-btm {
        max-width: none;
    }

    .group p {
        /*        color: #575757;*/
    }

    .group h4 {
        /*        color: #1da71d;*/
    }

    .popup-container .chart-item-expand-data {
        background: none;
    }

    .popup-container .card-items {
        padding-left: 0px;
    }
}

@media (max-width:426px) {
    .license-management-img-container img {
        display: none;
    }
}

.section-header-text-quote.highlight-lavender i {
    /*    color: #7c7ce1;
    background: linear-gradient(45deg, #d2f5ff, #e1e1ff);*/
    background: linear-gradient(45deg, #e4d0f6, #b6cbf2);
}

.highlight-green {
    color: #07a42e;
}

.section-header-text-quote.highlight-lm i {
    /*    background: linear-gradient(45deg, #307c9d4a, #00fee930);
    color: white;*/
}

.section-header-text-quote.highlight-brown i, .section-header-text-quote.highlight-lm i {
    /*    color: #ffffff;
    background: linear-gradient(45deg, #39a08a5c, #628bca3b);*/
    background: linear-gradient(45deg, #004b72, #00402e);
}

.section-header-text-quote.highlight-sandle i {
    background: linear-gradient(45deg, #e1a3fb, #f6aaf6);
}

.section-header-text-quote.highlight-pink i {
    /*    color: #dd49e5;
    background: linear-gradient(45deg, #eed1ff, #ffc3f0);*/
    background: linear-gradient(45deg, #ffcaf0, #ebbee7);
}

.section-header-text-quote.highlight-green i {
    background: linear-gradient(45deg, #d5e3eb, #89f38f);
}

.section-header-text-quote.highlight-pink, .section-header-text-quote.highlight-violet {
    display: flex;
    background: linear-gradient(45deg, transparent, #f75eff1a, transparent);
}

    .section-header-text-quote.highlight-violet i {
        /*        color:white;
        background: linear-gradient(45deg, #3daf8b59, #5e72ad61);*/
        background: linear-gradient(45deg, #004b72, #00402e);
    }

.chart-detail-question {
    margin-bottom: 15px;
}

.la-card-one.active .lm-card-title-wrap h3, .la-card-one.active .lm-card-title-wrap i {
    color: #55bc23;
}

.la-card-two.active .lm-card-title-wrap h3, .la-card-two.active .lm-card-title-wrap i {
    color: #d757d7;
}

.la-card-three.active .lm-card-title-wrap h3, .la-card-three.active .lm-card-title-wrap i {
    color: deepskyblue;
}

.la-card-four.active .lm-card-title-wrap h3, .la-card-four.active .lm-card-title-wrap i {
    color: #b67dff;
}

.la-card-five.active .lm-card-title-wrap h3, .la-card-five.active .lm-card-title-wrap i {
    color: #d757d7;
}

.la-card-six.active .lm-card-title-wrap h3, .la-card-six.active .lm-card-title-wrap i {
    color: #2eeaa9;
}

.la-card-seven.active .lm-card-title-wrap h3, .la-card-seven.active .lm-card-title-wrap i {
    color: #9ea431;
}

@keyframes new {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.hl-italic {
    font-style: italic;
}
/* Slider CSS*/

.feature-img {
    max-width: 530px;
    /*    width: 79%;*/
    padding: 0px !important;
    min-width: 280px;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    width: 40%;
    /*    margin: 0px 20px;*/
}

    .feature-img::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 5;
        pointer-events: none;
    }

    .feature-img img {
        /*max-width: 550px;*/
        min-width: 350px;
        width: 100%;
        max-width: 100%;
        height: 100%;
        transition: transform 0.2s ease-out !important;
        cursor: zoom-in;
    }

        .feature-img img:hover {
            transform: scale(1.05);
        }

    .feature-img .slidesjs-container {
        box-shadow: 0px 0px 0px 10px #fff, 0px 0px 18px 15px rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }

    .feature-img .slidesjs-control {
        cursor: zoom-in;
    }

    .feature-img .slidesjs-navigation {
        font-size: 1.15em !important;
        color: rgb(173 173 173 / 50%) !important;
        transform: rotateY(-15deg) rotateX(10deg);
        pointer-events: auto;
        top: unset;
        position: absolute;
        cursor: pointer;
    }

    .feature-img .cust-quote-nav.slidesjs-navigation:hover {
        color: rgb(72 140 186) !important;
    }

    .feature-img .slidesjs-previous {
        right: 45px;
        bottom: -4px;
    }

    .feature-img .slidesjs-navigation.slidesjs-next {
        right: 20px;
        bottom: -4px;
    }

    .feature-img .skew-right .slidesjs-navigation.slidesjs-previous {
        right: 45px;
    }

    .feature-img .skew-right .slidesjs-navigation.slidesjs-next {
        right: 20px;
    }

    .feature-img .skew-right .slidesjs-navigation {
        transform: rotateY(15deg) rotateX(10deg);
    }

.slidesjs-pagination {
    text-align: left;
    pointer-events: none;
    margin-top: 15px;
    cursor: pointer;
}

    .slidesjs-pagination li {
        display: inline-block;
        pointer-events: auto;
    }

        .slidesjs-pagination li a {
            display: inline-block;
            background-color: rgb(159 159 159 / 20%);
            font-size: 10px;
            padding: 3px 3px;
            border-radius: 2px;
            line-height: 0.7em;
            margin: 0 2px;
            transition: background-color 0.3s linear;
            color: transparent;
            width: 12px;
        }

            .slidesjs-pagination li a.active,
            .slidesjs-pagination li a:hover.active {
                background-color: rgb(72 140 186);
            }


.skew-left .slidesjs-pagination {
    transform: rotateY(-15deg) rotateX(15deg);
}

.skew-right .slidesjs-pagination {
    transform: rotateY(15deg) rotateX(15deg);
    margin-left: 15px;
}



.skew-left .slidesjs-container {
    transform: rotateY(-15deg) rotateX(15deg);
    backface-visibility: hidden;
    border-right: 4px solid #899ab2;
    pointer-events: auto;
}

.skew-right .slidesjs-container {
    border-left: 4px solid #899ab2;
    transform: rotateY(15deg) rotateX(15deg);
    backface-visibility: hidden;
    pointer-events: auto;
}


.feature-img .slide-wrapper {
    perspective: 1500px;
    /*    transform-style: preserve-3d;*/
    overflow: visible !important;
    position: relative;
    pointer-events: auto;
}

.slide-wrapper img {
    display: none;
}

.slidesjs-play {
    display: none !important;
}

.slidesjs-stop {
    display: none !important;
}



.feature-img.expanded {
    position: fixed !important;
    top: 40px;
    left: 0;
    background: rgb(0,0,0, 0.75);
    z-index: 12;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw;
    cursor: zoom-out;
}

    .feature-img.expanded img {
        width: 100%;
        display: block;
        cursor: zoom-out;
    }



        .feature-img.expanded img:hover {
            transform: none;
        }


    .feature-img.expanded .active-dir-img-container {
        background: #f0f8ff1a;
        padding: 20px 20px 10px !important;
        border-radius: 10px;
        border: 1px solid #757575;
        position: relative;
        width: 60%;
    }

.feature-img .close-btn {
    display: none;
    position: absolute;
    top: 0px;
    right: 0%;
    font-size: 24px;
    color: #555555;
    cursor: pointer;
    z-index: 10;
    background: #fff;
    width: 30px;
    border-top-right-radius: 10px;
}

.feature-img.expanded .close-btn {
    display: block;
}

.feature-img.expanded .slidesjs-container,
.feature-img.expanded .slidesjs-control {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    cursor: zoom-out;
}

.feature-img.expanded .slidesjs-navigation {
    font-size: 3.15em !important;
    color: rgb(255 255 255 / 50%) !important;
}

    .feature-img.expanded .slidesjs-navigation.slidesjs-previous {
        left: -70px;
        bottom: 50%;
        right: auto;
    }

    .feature-img.expanded .slidesjs-navigation.slidesjs-next {
        right: -70px;
        bottom: 50%;
    }

.feature-img.expanded .slidesjs-pagination {
    margin-top: 20px;
}

    .feature-img.expanded .slidesjs-pagination li a {
        background-color: rgb(255 255 255 / 44%);
    }

        .feature-img.expanded .slidesjs-pagination li a.active,
        .feature-img.expanded .slidesjs-pagination li a:hover.active {
            background-color: rgb(72 140 186);
        }

/*temp*/

.obj-chg-lhs-header-content {
    display: inline-block;
    width: 50%;
    max-width: 670px;
    min-width: 280px;
    vertical-align: middle;
    text-align: left;
    margin: 0 20px;
}

.obj-chg-sol-left-header {
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
}

.obj-cng-content-partition {
    margin: 0 auto;
    max-width: 1300px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    overflow: visible !important;
}

.obj-cng-content-part {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    width: 50%;
}

.obj-cng-card {
    cursor: pointer;
    opacity: 0.7 !important;
    text-align: left;
    width: 100%;
    position: relative;
}

    .obj-cng-card .droid-section-sub-title {
        font-size: 1.15em;
    }

    .obj-cng-card:hover {
        opacity: 0.8 !important;
    }

    .obj-cng-card.active {
        opacity: 1 !important;
    }

    .obj-cng-card .icon-expand {
        transition: 0.3s ease-in-out;
        position: absolute;
        right: 0px;
    }

    .obj-cng-card.active .icon-expand {
        transform: rotate(90deg);
    }

    .obj-cng-card .droid-section-sub-title-desc {
        display: none;
    }



.container .obj-cng-card-title {
    text-align: left;
    padding: 0px 0px 10px 10px;
    font-size: 1.15em;
}

.container .obj-cng-card-desc {
    text-align: left;
    margin-bottom: 10px;
    display: none;
}

.obj-cng-img-part {
    max-width: 550px;
    width: 100%;
    padding: 0px !important;
    min-width: 280px;
    position: relative;
}

    .obj-cng-img-part img {
        max-width: 550px;
        min-width: 350px;
        height: 100%;
        max-width: 100%;
        cursor: zoom-in;
    }

    .obj-cng-img-part .slide-wrapper {
        overflow: visible !important;
    }

.slide-wrapper img {
    display: none;
}

.skew-right .slidesjs-container {
    backface-visibility: hidden;
}

.skew-left .slidesjs-container {
    backface-visibility: hidden;
}

.skew-right .slidesjs-pagination {
    margin-left: 15px;
}

.skew-left .slidesjs-pagination {
}

.feature-img .slidesjs-container {
    /*    box-shadow: 0px 0px 0px 10px #e3ebf1, 0px 0px 18px 15px rgba(0, 0, 0, 0.1);*/
    border-radius: 2px;
    margin-bottom: 20px;
}

.audit-grp-administration-activities-section,
.contact-mng-auditing-section,
.dns-auditing-section,
.password-ploicy-audit-section
.container .obj-cng-card-title {
    padding: 0px 0px 10px 10px;
    text-align: left;
    color: white;
}



    .audit-grp-administration-activities-section .feature-img .slidesjs-container,
    .contact-mng-auditing-section .slidesjs-container,
    .dns-auditing-section .feature-img .slidesjs-container,
    .password-ploicy-audit-section .feature-img .slidesjs-container {
        box-shadow: 0px 0px 0px 10px #2a465a, 0px 0px 18px 15px rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        margin-bottom: 20px;
    }

.obj-cng-img-part .slidesjs-navigation {
    font-size: 1.25em !important;
    color: rgba(113, 153, 188, 0.5) !important;
    pointer-events: auto;
    top: unset;
}

.obj-cng-img-part.cust-quote-nav .slidesjs-navigation:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

.cust-quote-nav {
    position: absolute;
    font-size: 6em !important;
    color: rgba(255, 255, 255, 0.1) !important;
    top: 13%;
    cursor: pointer;
    text-decoration: none;
}

    .cust-quote-nav:hover {
        color: rgb(97, 137, 170) !important;
    }

    .cust-quote-nav:active {
        opacity: 0;
    }

.obj-cng-img-part .skew-left .slidesjs-navigation.slidesjs-previous {
    right: 45px;
    bottom: -7px;
}

.obj-cng-img-part .skew-left .slidesjs-navigation.slidesjs-next {
    right: 20px;
    bottom: -7px;
}

.obj-cng-img-part .skew-right .slidesjs-navigation.slidesjs-previous {
    right: 45px;
}

.obj-cng-img-part .skew-right .slidesjs-navigation.slidesjs-next {
    right: 20px;
}


.obj-cng-content-partition .slidesjs-pagination {
    text-align: right;
    margin-top: 5px;
    pointer-events: none;
}

    .obj-cng-content-partition .slidesjs-pagination li {
        display: inline-block;
        pointer-events: auto;
    }

        .obj-cng-content-partition .slidesjs-pagination li a {
            display: inline-block;
            background-color: rgba(99, 170, 190, 0.2);
            font-size: 10px;
            padding: 3px 3px;
            border-radius: 2px;
            line-height: 0.7em;
            margin: 0 2px;
            transition: background-color 0.3s linear;
            color: transparent;
            width: 12px;
        }

            .obj-cng-content-partition .slidesjs-pagination li a.active,
            .obj-cng-content-partition .slidesjs-pagination li a:hover.active {
                background-color: rgba(100, 192, 208, 0.75);
            }

.obj-cng-content-partition a:active {
    color: transparent !important;
}

.obj-cng-content-partition .slidesjs-play {
    display: none !important;
}

.obj-cng-content-partition .slidesjs-stop {
    display: none !important;
}

.obj-cng-content-partition .slidesjs-pagination {
    text-align: left;
}

.obj-cng-slider-image-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.expand-view-div {
    font-size: 1.15em;
    position: absolute;
    display: flex;
    align-items: center;
    top: 6px;
    z-index: 12;
    background-color: #313951;
    right: 5px;
    border-radius: 3px;
    color: aliceblue;
    padding: 2px 5px;
    box-shadow: 0px 0px 5px 0px #444444;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
}

.expand-icon {
    font-size: 1.35em;
    display: flex;
}

.expand-view-div .expand-text {
    font-size: 0.85em;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    margin: 0;
    transition: max-width 300ms ease-in-out, margin 300ms ease-in-out;
}

.container:hover .expand-view-div .expand-text {
    animation: viewtext 3s 1;
    transition: max-width 300ms ease-in-out, margin 300ms ease-in-out;
}

@keyframes viewtext {
    0% {
        max-width: 0;
        margin-left: 0;
    }

    50% {
        max-width: 150px;
        margin-left: 8px;
    }

    100% {
        max-width: 0;
        margin-left: 0;
    }
}

/* ---- Free tool feature banner : ivory ground, plum + emerald accents, amber tertiary ---- */

/* ---------------------------------------------------------------------------
   FREE TOOL FEATURE PANEL
   Light elevated panel inset on a tinted gutter. Two accents with fixed meaning:
     green  #0f9c66  = free / value   (25+, its label, "Free Edition!")
     azure  #1a73e8  = capability     (report icons, stat icons)
   Deep navy ink carries the headline and the stat numerals.
---------------------------------------------------------------------------- */

/* "25+" value figure - lives inside the shared .ftc-head surface, no box of its own */
.new-wrapper {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    width: auto;
    min-width: 0px;
    margin: 0px;
    padding: 12px 24px 12px 20px;
    background: linear-gradient(135deg, #effaf5 0%, #e6f5ee 100%);
    border: none;
    border-left: 1px solid #d9ece3;
    border-bottom: 1px solid #d9ece3;
    border-radius: 0px 15px 0px 14px;
    box-shadow: none;
}

.free-tool-cta-mark {
    position: static;
    margin-bottom: 0px;
    font-size: 1em;
    line-height: 1;
    opacity: 0.7;
}

/* the value block - one surface holding the figure and the headline together.
   The gradient runs from green behind "25+" into neutral behind the message. */
.ftc-head {
    display: block;
    padding: 0px;
    border: none;
    border-radius: 0px;
    background: none;
}

/* the panel itself */
.free-tool-cta-conatiner.droid-container.droid-section-outer-wrapper {
    margin-bottom: -60px;
    margin-top: -60px;
    position: relative;
    overflow: hidden;
    max-width: 1320px;
    padding: 62px 46px 44px;
    text-align: left;
    border: 1px solid #e4eaf2;
    border-radius: 16px;
    background: radial-gradient(880px 520px at 5% -12%, rgba(16, 160, 106, 0.09), transparent 58%), radial-gradient(780px 500px at 97% 110%, rgba(26, 115, 232, 0.085), transparent 56%), linear-gradient(160deg, #ffffff 0%, #fcfdff 100%);
    box-shadow: inset 0px 1px 0px #ffffff, 0px 1px 2px rgba(16, 30, 54, 0.04), 0px 8px 24px rgba(16, 30, 54, 0.05), 0px 24px 48px rgba(16, 30, 54, 0.045);
}

.wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: none;
    margin: 0px;
    text-align: left;
}

/* tinted gutter so the white panel reads as an inset surface */
.free-tool-cta-section {
    position: relative;
    text-align: center;
    color: #61748d;
    background: linear-gradient(180deg, #e8eef7 0%, #f1f5fb 100%);
    border-top: 1px solid #e4eaf2;
    border-bottom: 1px solid #e4eaf2;
    padding: 32px 18px;
}

    .free-tool-cta-section img {
        position: absolute;
        width: 160px;
        top: 11px;
        right: 56px;
        opacity: 0.3;
    }

.free-tool-reports-list {
    max-width: 915px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 20px auto;
    padding: 25px;
    background: #ffffff08;
    border: 1px solid #7080902b;
    border-radius: 25px;
    /* box-shadow: 0px 0px 4px #9cabbb26; */
    backdrop-filter: blur(14px);
}

/* chip: white fill, accent hairline, solid accent bar flush to the left edge */
.free-tool-report-wrap {
    --ftc: #6b7cd6;
    --ftc-bg: #eef2ff;
    --ftc-br: #c9d2f7;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0px;
    width: fit-content;
    padding: 10px 20px 10px 20px;
    text-align: left;
    background: var(--ftc-bg);
    border: 1px solid var(--ftc-br);
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(16, 30, 54, 0.05);
    transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
}

    .free-tool-report-wrap::before {
        content: "";
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 6px;
        background: var(--ftc);
    }

    .free-tool-report-wrap:hover {
        box-shadow: 0px 6px 16px rgba(16, 30, 54, 0.12);
        transform: translateY(-1px);
    }

    .free-tool-report-wrap i {
        font-size: 1.55em;
    }

    .free-tool-report-wrap p {
        font-size: 1.08em;
        line-height: 1.4em;
        font-family: work-sans-medium, Arial, Helvetica, sans-serif;
        color: #3f4652;
    }

.free-tool-report-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0px;
    background: none;
    color: var(--ftc);
}

/* Colour cycle. The marquee duplicates each row's markup, so the cycle length
       must equal the row's item count or a chip changes colour as it loops.
       Row one holds 5 items, row two holds 4. */
.reports-list-container-one .free-tool-report-wrap:nth-child(5n+1) {
    --ftc: #db5c9d;
    --ftc-bg: #fdf2f8;
    --ftc-br: #f5c9e0;
}

.reports-list-container-one .free-tool-report-wrap:nth-child(5n+2) {
    --ftc: #5b8fdb;
    --ftc-bg: #eff6ff;
    --ftc-br: #c3dbfa;
}

.reports-list-container-one .free-tool-report-wrap:nth-child(5n+3) {
    --ftc: #4faf74;
    --ftc-bg: #f0fdf4;
    --ftc-br: #bfe8cd;
}

.reports-list-container-one .free-tool-report-wrap:nth-child(5n+4) {
    --ftc: #d69e3c;
    --ftc-bg: #fffbeb;
    --ftc-br: #f7e0ab;
}

.reports-list-container-one .free-tool-report-wrap:nth-child(5n+5) {
    --ftc: #8a76d6;
    --ftc-bg: #f5f3ff;
    --ftc-br: #d5cdf8;
}

.reports-list-container-two .free-tool-report-wrap:nth-child(4n+1) {
    --ftc: #3fa8bb;
    --ftc-bg: #ecfeff;
    --ftc-br: #b3e6ee;
}

.reports-list-container-two .free-tool-report-wrap:nth-child(4n+2) {
    --ftc: #db6060;
    --ftc-bg: #fef2f2;
    --ftc-br: #f7c9c9;
}

.reports-list-container-two .free-tool-report-wrap:nth-child(4n+3) {
    --ftc: #6b7cd6;
    --ftc-bg: #eef2ff;
    --ftc-br: #c9d2f7;
}

.reports-list-container-two .free-tool-report-wrap:nth-child(4n+4) {
    --ftc: #dd8a45;
    --ftc-bg: #fff7ed;
    --ftc-br: #f9d5b0;
}

.free-tool-report-name.droid-section-sub-title {
    font-size: 1em;
    margin-bottom: 0px;
}

.nav-btn-wrap {
    justify-content: center !important;
}

.free-tool-intro.droid-section-sub-title {
    margin-bottom: 6px;
    font-size: 1.4em;
    color: #ffffff;
}

.free-tool-intro h3 {
    font-size: inherit;
    font-family: inherit;
}

.free-tool-intro-desc.droid-section-sub-title-desc {
    font-family: work-sans-regular, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-size: 1.05em;
    line-height: 1.55em;
    color: #a3b6d0;
}

/* no divider - the shared .ftc-head surface does the binding */
.free-tool-cta-title.droid-section-main-title {
    display: block;
    max-width: none;
    margin: 0px;
    padding: 0px;
    border: none;
    font-size: 2.55em;
    line-height: 1.3em;
    letter-spacing: -0.3px;
    text-align: center;
    color: #14243c;
}

.free-tool-cta-title h2 {
    max-width: 900px;
    margin: 0px auto;
    font-size: inherit;
    font-family: inherit;
    font-weight: normal;
    line-height: inherit;
}

.free-toot-btn-wrap {
    max-width: none;
    margin: 0px;
    flex-shrink: 0;
    color: inherit;
}

/* Flat accents - the gradient is reserved for the "25+" figure alone */
.cta-title-hl {
    color: #1a6fd4;
    -webkit-text-fill-color: currentColor;
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
}

.cta-title-hl-green {
    color: #0b8f5e;
    -webkit-text-fill-color: currentColor;
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
}

/* Explore More - blue to magenta gradient pill with a trailing arrow */
.explore-rept-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, #3f82e0 0%, #7a5cc4 50%, #b43f9e 100%);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border: none;
    letter-spacing: 0.2px;
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 10px;
    font-size: 1.15em;
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
    box-shadow: 0px 6px 18px rgba(122, 92, 196, 0.28);
    transition: background-position 0.4s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

    .explore-rept-btn:hover {
        background-position: 100% 50%;
        color: #ffffff;
        opacity: 1;
        transform: translateY(-2px);
        box-shadow: 0px 10px 24px rgba(180, 63, 158, 0.34);
    }

/* trailing chevron icon nudges right on hover */
.nav-btn.explore-rept-btn i {
    position: static;
    bottom: auto;
    display: inline-block;
    font-size: 0.85em;
    line-height: 1;
    transition: transform 0.3s ease-in-out;
}

.explore-rept-btn:hover i {
    transform: translateX(4px);
}
/* simple */

.accordion {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.license-management-card {
    border: 1px solid #E7EBF4;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: border-color .35s, box-shadow .35s, transform .25s;
    padding: 0px;
}

    .license-management-card:hover {
        border-color: #C8D5FF;
        box-shadow: 0 10px 35px rgba(35,55,120,.08);
    }

    .license-management-card.active {
        border-color: #dbe1f7;
        box-shadow: 0 20px 50px rgba(70,90,180,.12);
    }

.accordion-header {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    text-align: left;
}

    .accordion-header:hover {
        /*        background: #FAFBFF;*/
    }

.accordion-content {
    height: 0;
    overflow: hidden;
    transition: height .45s cubic-bezier(.4,0,.2,1);
}

    .accordion-content .lm-card-title-desc {
        padding: 0 21px 21px 62px;
    }

.accordion-arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /*    background: #F4F7FE;*/
    transition: transform .35s, background .35s;
    flex-shrink: 0;
}

    .accordion-arrow i {
        transition: transform .35s;
    }

.license-management-card.active
.accordion-arrow {
    /*    background: #4D6BFE;
    color: #fff;*/
}

    .license-management-card.active
    .accordion-arrow i {
        transform: rotate(180deg);
    }


/* dark simple*/
.dark-accordion .license-management-card.active {
    background: #dbeeff14;
    border: 1px solid #70809045;
}

.dark-accordion .license-management-card {
    background: #1157950d;
    border: 1px solid #7080902b;
}

.dark-accordion .accordion-arrow {
    /*    background: #add8e614;*/
}

/* Static label - no fade-up or shimmer entrance */
.free-rept-count-tag {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    text-align: left;
    line-height: 1.2;
}

    /* the key value indicator - the only gradient text in the section */
    .free-rept-count-tag .ftc-num {
        font-family: poppins-semibold, Arial, Helvetica, sans-serif;
        font-size: 1.95em;
        line-height: 1;
        letter-spacing: -0.8px;
        color: #0f9c66;
        background: linear-gradient(135deg, #16b87a 0%, #0f9c66 55%, #0a8259 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* green is reserved for the word "free" - here and in the headline only */
    .free-rept-count-tag .ftc-label {
        max-width: none;
        margin-top: 0px;
        font-family: work-sans-medium, Arial, Helvetica, sans-serif;
        font-size: 1.02em;
        letter-spacing: 0.15px;
        line-height: 1.45;
        color: #0a7d52;
        -webkit-text-fill-color: currentColor;
    }

.free-tool-cta-banner-btm {
    /* max-width: 480px; */
}

.reveal-text {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
}

    .reveal-text.show {
        animation: maskReveal .9s cubic-bezier(.65,0,.35,1) forwards;
    }

section#License-Reporting-Section {
    background: radial-gradient(circle at 0% 50%, rgba(0, 255, 200, 0.15), transparent 40%), radial-gradient(circle at 100% 50%, rgba(0, 120, 255, 0.12), transparent 40%), linear-gradient(100deg, #02142b 0%, #000c1c 100%);
}

@keyframes maskReveal {

    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes shine {

    100% {
        left: 170%;
    }
}

@keyframes glowPulse {

    0%,100% {
        box-shadow: 0 0 0 rgba(0,220,120,.4), 0 0 12px rgba(0,220,120,.3);
    }

    50% {
        box-shadow: 0 0 15px rgba(0,220,120,.55), 0 0 35px rgba(0,220,120,.4);
    }
}

@keyframes tagFade {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-header-text-quote.highlight-green {
    background: linear-gradient(45deg, transparent, #108a2217, transparent);
}

.section-header-text-quote.highlight-sandle {
    background: linear-gradient(45deg, transparent, #eb86ff1c, transparent);
}

/* Capability stream - no container box. The cards themselves carry the weight
   and fade at the panel edges. Still driven by the .js-marquee script. */
.reports-container-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: none;
    margin: 0px;
    padding: 0px;
    position: relative;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0px;
    box-shadow: none;
}

.reports-list-container-one, .reports-list-container-two {
    display: flex;
    justify-content: center;
    align-items: center;
}

.reports-container-wrap > div {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    white-space: normal;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.free-tool-stats-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0px;
    color: #2f4858;
}


.free-tool-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0px;
    padding: 4px 22px;
}

    .free-tool-stats + .free-tool-stats {
        border-left: 1px solid rgba(255, 255, 255, 0.13);
    }

    .free-tool-stats i {
        height: 46px;
        width: 46px;
        font-size: 1.7em;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        opacity: 1;
        border-radius: 8px;
        background: rgba(124, 192, 255, 0.12);
        border: 1px solid rgba(124, 192, 255, 0.20);
        color: #7cc0ff;
    }

.content {
    text-align: left;
}

    .content p {
        font-size: 1.02em;
        color: #a3b6d0;
    }

    .content h3 {
        font-size: 2.35em;
        font-family: poppins-semibold, Arial, Helvetica, sans-serif;
        line-height: 1.05;
        letter-spacing: -0.8px;
        color: #ffffff;
    }

/* free tool panel - the value block stacks, everything else stays full width */
@media (max-width: 1092px) {
    .free-tool-cta-conatiner.droid-container.droid-section-outer-wrapper {
        padding: 34px 28px 32px;
    }

    .new-wrapper {
        position: static;
        justify-content: center;
        margin: 0px auto 24px;
        padding: 10px 22px;
        border: 1px solid #d9ece3;
        border-radius: 999px;
    }

    .free-rept-count-tag .ftc-label {
        max-width: none;
    }

    .btn-content-wrap {
        justify-content: flex-start;
        gap: 24px;
    }

    .free-tool-cta-banner-btm {
        max-width: none;
    }

    .free-tool-stats-wrap {
        justify-content: flex-start;
    }
}

@media(max-width: 768px) {
    .license-management-banner-img {
        display: none;
    }

    .license-management-banner-content {
        width: 100%;
    }

    .how-admindroid-simplifies-lm-title-desc {
        width: 90%;
    }

    .free-tool-stats-wrap {
        flex-wrap: wrap;
        justify-content: center;
    }

    .free-tool-stats {
        padding: 8px 16px;
        justify-content: left;
    }

        .free-tool-stats + .free-tool-stats {
            border-left: none;
        }

    .free-tool-cta-section {
        padding: 18px 10px;
    }

    .free-tool-cta-conatiner.droid-container.droid-section-outer-wrapper {
        padding: 24px 18px 22px;
        border-radius: 12px;
    }

    .free-tool-cta-title.droid-section-main-title {
        font-size: 1.78em;
    }

    .free-tool-report-wrap {
        min-width: 0px;
        padding: 8px 16px 8px 16px;
    }

    .free-rept-count-tag .ftc-num {
        font-size: 1.75em;
    }

    .btn-content-wrap {
        padding: 24px 20px;
        justify-content: center;
        text-align: center;
    }

    .content h3 {
        font-size: 1.95em;
    }

    .free-toot-btn-wrap {
        width: 100%;
        text-align: center;
    }

    .explore-rept-btn {
        padding: 12px 24px;
        font-size: 1.05em;
    }
}

#microsoft-365-license-management-main-container .droid-tabs-expanded.expanded {
    animation: fadeInNavbackward 0.8s ease-in-out forwards;
}

#microsoft-365-license-management-main-container .droid-tabs-expanded {
    border-bottom: 1px solid #70809014;
    background: linear-gradient(45deg, transparent, #ffffff, transparent);
    box-shadow: 0px -2px 9px #95aabf30 !important;
    border-radius: 10px !important;
}

#microsoft-365-license-management-main-container .droid-tabs-shrinked {
    animation: fadeInNavforward 1s ease-in-out forwards;
}

/* Sticky tabs reserve no space in the page flow - the wrapper collapses to zero height and
   the bar overflows it, so the banner flows straight into the first section with its normal
   spacing. The bar stays hidden until it is pinned under the header (.nav-visible is toggled
   by the page script), so it only ever overlays content that is scrolling beneath it. */
#microsoft-365-license-management-main-container #droid-sticky-navigation {
    height: 0px;
}

    #microsoft-365-license-management-main-container #droid-sticky-navigation .nav-container {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        animation: none;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0.3s;
    }

        #microsoft-365-license-management-main-container #droid-sticky-navigation .nav-container.nav-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0px);
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0s;
        }

@keyframes fadeInNavbackward {
    70% {
        opacity: 0.001;
    }

    90% {
        opacity: 1;
    }
}

@keyframes fadeInNavforward {
    0% {
        opacity: 0.001;
    }

    100% {
        opacity: 1;
    }
}

/*=============================================================================
  FREE TOOL CTA SECTION - SOFT PASTEL CARD
  Centred pill badge, headline, dot-marked report pills, then a hairline
  divider above a single row of intro text / stats / outlined button.
  Every selector is prefixed with .free-tool-cta-section so it overrides the
  earlier free tool panel rules without touching any other section.
=============================================================================*/

.free-tool-cta-section {
    background: #eef1f5;
    border-top: none;
    border-bottom: none;
    padding: 32px 18px;
}

    .free-tool-cta-section .free-tool-cta-conatiner.droid-container.droid-section-outer-wrapper {
        max-width: 1270px;
        padding: 50px 100px 50px;
        text-align: center;
        border: 1px solid #e3e8ef;
        border-radius: 18px;
        background: radial-gradient(rgba(37, 99, 184, 0.07) 1px, transparent 1px) 0px 0px / 22px 22px, linear-gradient(120deg, #e5f3fd 0%, #eef8f6 40%, #f4f6f8 70%, #fbeff5 100%);
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9), 0px 1px 2px rgba(16, 30, 54, 0.04), 0px 18px 40px -18px rgba(37, 70, 120, 0.18);
    }

    /* soft colour glows behind the headline and the bottom row */
    .free-tool-cta-section .free-tool-cta-conatiner.droid-container::before {
        width: 520px;
        height: 520px;
        top: -260px;
        left: 50%;
        margin-left: -260px;
        /* background: radial-gradient(circle, rgba(64, 156, 240, 0.16) 0%, rgba(22, 184, 138, 0.08) 40%, transparent 70%); */
        filter: blur(10px);
        z-index: 0;
    }

    .free-tool-cta-section .free-tool-cta-conatiner.droid-container::after {
        width: 460px;
        height: 460px;
        bottom: -240px;
        right: -140px;
        /* background: radial-gradient(circle, rgba(219, 92, 157, 0.12) 0%, rgba(162, 79, 208, 0.06) 45%, transparent 70%); */
        filter: blur(10px);
        z-index: 0;
    }

    .free-tool-cta-section .wrapper {
        position: relative;
        z-index: 2;
        gap: 0px;
        text-align: center;
    }

    /* head - pill badge above the headline */
    .free-tool-cta-section .ftc-head {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .free-tool-cta-section .new-wrapper {
        position: static;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0px auto 44px;
        padding: 9px 20px 9px 16px;
        /* white fill with a faint green-blue-purple gradient hairline */
        border: 1px solid transparent;
        border-radius: 999px;
        background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, rgba(19, 169, 120, 0.45), rgba(47, 134, 201, 0.3), rgba(162, 79, 208, 0.45)) border-box;
        box-shadow: 0px 4px 14px rgba(37, 70, 120, 0.08);
    }

        /* live indicator dot */
        .free-tool-cta-section .new-wrapper::before {
            content: "";
            flex-shrink: 0;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #16b88a;
            box-shadow: 0px 0px 0px 0px rgba(22, 184, 138, 0.45);
            animation: ftcDotPulse 2.4s ease-out infinite;
        }

@keyframes ftcDotPulse {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(22, 184, 138, 0.45);
    }

    70%, 100% {
        box-shadow: 0px 0px 0px 7px rgba(22, 184, 138, 0);
    }
}

.free-tool-cta-section .free-tool-cta-mark {
    display: none;
}

.free-tool-cta-section .free-rept-count-tag {
    align-items: center;
    gap: 12px;
    color: inherit;
}

    .free-tool-cta-section .free-rept-count-tag .ftc-num {
        font-size: 1.55em;
        letter-spacing: -0.4px;
        background: linear-gradient(90deg, #13a978 0%, #2f86c9 55%, #a24fd0 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .free-tool-cta-section .free-rept-count-tag .ftc-label {
        font-family: work-sans-medium, Arial, Helvetica, sans-serif;
        /* font-size: 0.82em; */
        letter-spacing: 1.3px;
        /* text-transform: uppercase; */
        color: #5b6b7d;
    }

.free-tool-cta-section .free-tool-cta-title.droid-section-main-title {
    line-height: 1.32em;
    letter-spacing: -0.2px;
    color: #2a3441;
}

.free-tool-cta-section .free-tool-cta-title h2 {
    max-width: 880px;
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
}

.free-tool-cta-section .cta-title-hl {
    color: #2563b8;
}

.free-tool-cta-section .cta-title-hl-green {
    color: #16b86a;
}

/* report pills - white capsule with a coloured dot in place of the icon */
.free-tool-cta-section .reports-container-wrap {
    margin: 44px auto 0px;
    gap: 0px;
}

    .free-tool-cta-section .reports-container-wrap > div {
        max-width: 1080px;
        margin: 0px auto;
        gap: 14px 12px;
    }

        .free-tool-cta-section .reports-container-wrap > div:empty {
            display: none;
        }

.free-tool-cta-section .free-tool-report-wrap {
    --ftc: #2563b8;
    gap: 10px;
    padding: 11px 20px;
    background: #ffffff;
    border: 1px solid #e6ebf1;
    border-radius: 999px;
    box-shadow: none;
}

    .free-tool-cta-section .free-tool-report-wrap:nth-child(even) {
        --ftc: #16b88a;
    }

    .free-tool-cta-section .free-tool-report-wrap::before {
        position: static;
        flex-shrink: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ftc);
    }

    .free-tool-cta-section .free-tool-report-wrap:hover {
        box-shadow: 0px 6px 16px rgba(16, 30, 54, 0.08);
    }

    .free-tool-cta-section .free-tool-report-wrap p {
        font-size: 1em;
        color: #3a4654;
    }

.free-tool-cta-section .free-tool-report-icon {
    display: none;
}

/* bottom block - intro text, stats and button stacked in one centred column */
.free-tool-cta-section .btn-content-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0px;
    /* margin-top: 35px; */
    padding: 0px 0px 0px;
    border: none;
    /* border-top: 1px solid #dfe5ec; */
    border-radius: 0px;
    background: none;
    box-shadow: none;
    text-align: center;
}

.free-tool-cta-section .free-tool-cta-banner-btm {
    /* max-width: 600px; */
    margin: 0px auto;
}

.free-tool-cta-section .free-tool-intro.droid-section-sub-title {
    margin-bottom: 8px;
    font-size: 1.2em;
    color: #243040;
}

.free-tool-cta-section .free-tool-intro h3 {
    font-family: poppins-semibold, Arial, Helvetica, sans-serif;
}

.free-tool-cta-section .free-tool-intro-desc.droid-section-sub-title-desc {
    font-size: 0.95em;
    line-height: 1.65em;
    color: #6b7a8c;
}

/* three equal stat columns split by soft vertical dividers */
.free-tool-cta-section .free-tool-stats-wrap {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0px;
    margin: 30px auto 0px;
}

.free-tool-cta-section .free-tool-stats {
    flex: 0 0 auto;
    min-width: 225px;
    padding: 8px 24px;
}

    .free-tool-cta-section .free-tool-stats + .free-tool-stats {
        border-left: 1px solid rgba(37, 70, 120, 0.1);
    }

    .free-tool-cta-section .free-tool-stats i {
        display: none;
    }

    .free-tool-cta-section .free-tool-stats .content {
        text-align: center;
    }

        /* green - blue - purple gradient across the figure and its "+" */
        .free-tool-cta-section .free-tool-stats .content h3 {
            display: inline-block;
            /* font-size: 2.6em; */
            line-height: 1.1;
            letter-spacing: -0.5px;
            color: #2563b8;
            background: linear-gradient(90deg, #13ad7a 0%, #2f80d0 58%, #a64bd0 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .free-tool-cta-section .free-tool-stats .content p {
            margin-top: 8px;
            font-family: work-sans-medium, Arial, Helvetica, sans-serif;
            /* font-size: 0.85em; */
            letter-spacing: 1.5px;
            /* text-transform: uppercase; */
            color: #6b7a8c;
        }

.free-tool-cta-section .free-toot-btn-wrap {
    width: auto;
    /* margin-top: 36px; */
}

/* outlined button, fills blue on hover */
.free-tool-cta-section .explore-rept-btn {
    gap: 10px;
    padding: 12px 24px;
    background: #ffffff;
    border: 1px solid #2563b8;
    border-radius: 8px;
    color: #2563b8;
    font-size: 1em;
    box-shadow: none;
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

    .free-tool-cta-section .explore-rept-btn:hover {
        background: #2563b8;
        color: #ffffff;
        transform: none;
        box-shadow: 0px 6px 16px rgba(37, 99, 184, 0.22);
    }

@media (max-width: 1200px) {
    .free-tool-cta-section .free-tool-cta-conatiner.droid-container.droid-section-outer-wrapper {
        padding: 64px 56px 60px;
    }
}

@media (max-width: 1092px) {
    .free-tool-cta-section .free-tool-stats {
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .free-tool-cta-section {
        padding: 18px 10px;
    }

        .free-tool-cta-section .free-tool-cta-conatiner.droid-container.droid-section-outer-wrapper {
            padding: 40px 20px 36px;
            border-radius: 14px;
        }

        .free-tool-cta-section .new-wrapper {
            margin-bottom: 28px;
            padding: 8px 14px;
        }

        .free-tool-cta-section .free-rept-count-tag .ftc-label {
            letter-spacing: 1.2px;
        }

        .free-tool-cta-section .free-tool-cta-title.droid-section-main-title {
            font-size: 1.8em;
        }

        .free-tool-cta-section .reports-container-wrap {
            margin-top: 32px;
        }

        .free-tool-cta-section .free-tool-report-wrap {
            padding: 9px 16px;
        }

        /* only the button remains in this block, so keep the same single gap as desktop */
        .free-tool-cta-section .btn-content-wrap {
            margin-top: 0px;
            padding: 0px;
        }

        .free-tool-cta-section .free-tool-stats-wrap {
            margin-top: 24px;
            width: 100%;
        }

        .free-tool-cta-section .free-tool-stats {
            flex: 1 1 0px;
            min-width: 0px;
            padding: 4px 8px;
        }

            .free-tool-cta-section .free-tool-stats .content h3 {
                font-size: 1.8em;
            }

            .free-tool-cta-section .free-tool-stats .content p {
                font-size: 0.72em;
                letter-spacing: 0.8px;
            }

        .free-tool-cta-section .free-toot-btn-wrap {
            width: 100%;
            margin-top: 0px;
        }
}
