/* =========================================================
   ASSIGNSALES CRM / SAAS LIGHT UI v3
   ---------------------------------------------------------
   Use AFTER the existing AssignSales custom.css rules.

   Design direction:
   - Light CRM/SaaS
   - Soft tinted section backgrounds
   - White cards
   - Navy typography
   - Coral primary actions
   - No dark purple sections
   - No blue/orange/purple gradients
   ========================================================= */

:root {
    --as-primary: #ff4f2d;
    --as-primary-hover: #DF493F;
    --as-secondary: #00e1be;
    --as-navy: #17234F;
    --as-text: #647089;
    --as-muted: #8A94A8;

    --as-blue: #3B82F6;
    --as-green: #22B889;
    --as-orange: #F3A34B;
    --as-yellow: #F5B83D;

    --as-blue-soft: #F2F7FF;
    --as-blue-soft-2: #EAF3FF;
    --as-lavender-soft: #F6F5FF;
    --as-peach-soft: #FFF3EF;
    --as-peach-soft-2: #FFF8F5;
    --as-mint-soft: #F1FAF7;
    --as-yellow-soft: #FFF9EC;

    --as-card: #FFFFFF;
    --as-border: #E6EBF3;
    --as-shadow: 0 12px 35px rgba(23, 35, 79, .065);

    --bs-primary: #F25A4F;
    --bs-primary-rgb: 242, 90, 79;
    --bs-heading-color: #17234F;
    --bs-body-color: #647089;
    --bs-link-color: #3B82F6;
}


/* =========================================================
   01. GLOBAL TYPOGRAPHY
   ========================================================= */

html,
body {
    background: #FFFFFF;
    color: var(--as-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--as-navy);
}

p {
    color: var(--as-text);
}

.text-white,
.text-white-50 {
    color: var(--as-text) !important;
}

a {
    color: var(--as-blue);
}


.text-heading {
    color: var(--as-navy);
}



.more-link{
    color: var(--as-primary);

    .ms-1{

        path{

            stroke: var(--as-primary);
            fill: var(--as-primary);

        }

    }

    &:hover {
        color: var(--as-secondary);

        .ms-1{

            path{

                stroke: var(--as-secondary);
                fill: var(--as-secondary);

            }

        

        }

    }

}

/* =========================================================
   02. BRAND BUTTONS
   ========================================================= */

.btn-primary,
.crm-primary-btn {
    background: var(--as-primary) !important;
    background-image: none !important;
    border-color: var(--as-primary) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.crm-primary-btn:hover,
.crm-primary-btn:focus,
.crm-primary-btn:active {
    background: var(--as-primary-hover) !important;
    background-image: none !important;
    border-color: var(--as-primary-hover) !important;
    color: #FFFFFF !important;
}

.btn-outline-primary {
    background: #FFFFFF !important;
    background-image: none !important;
    color: var(--as-primary) !important;
    border-color: var(--as-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: var(--as-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--as-primary) !important;
}


/* /* =========================================================
   03. HEADER
   ========================================================= */

/* .main-header {

    .dropdown-menu {

        .support-menu-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 20px;
            align-items: start;
        }

        .support-menu-column {
            display: flex;
            flex-direction: column;
        }

        .dropdown-link {
            display: flex;
            align-items: center;
            min-height: 42px;

            >span {
                width: 22px;
                min-width: 22px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-right: 8px !important;

                i {
                    font-size: 14px;
                    line-height: 1;
                    color: #7B8498;
                    transition: color .2s ease;
                }
            }

            .drop-title {
                line-height: 1.35;
                white-space: nowrap;
            }

            &:hover {

                >span {

                    i {
                        color: var(--as-primary);
                    }
                }
            }
        }
    }
}

.main-header,
.main-header .navbar {
    background: #FFFFFF !important;
    background-image: none !important;
}

.main-header .nav-link {
    color: #4F5C73 !important;
}

.main-header .nav-link:hover,
.main-header .nav-link:focus,
.main-header .nav-link.active {
    color: var(--as-primary) !important;
}

.main-header .dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid var(--as-border) !important;
    box-shadow: 0 18px 45px rgba(23, 35, 79, .09) !important;
}

.main-header .dropdown-link:hover {
    color: var(--as-primary) !important;
    background: var(--as-peach-soft) !important;
} */
/* ============= PRODUCTS MEGA MENU ===================== */

/* .products-mega-menu-item {

    .products-mega-menu {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        width: 1020px;
        max-width: calc(100vw - 40px);
        padding: 0 !important;
        margin: 0;
        border-radius: 12px !important;
        background: #ffffff;
        box-shadow: 0 22px 55px rgba(17, 15, 13, 0.12);
        transform: translateX(-50%);
        overflow: hidden;
    }

    .products-mega-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
    } */


    /* ================= MAIN CONTENT ==================== */

    /* .products-mega-content {
        padding: 24px 22px 22px;
        background: #ffffff;
    }

    .products-mega-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 16px;

        h6 {
            margin: 0 0 4px;
            color: #110f0d;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.3;
        }

        p {
            margin: 0;
            color: #7a7d87;
            font-size: 10px;
            line-height: 1.4;
        }
    }

    .products-view-all {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding-top: 2px;
        color: #ff4f2d;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        transition: color 0.2s ease;

        span {
            font-size: 13px;
            transition: transform 0.2s ease;
        }

        &:hover {
            color: #110f0d;

            span {
                transform: translateX(3px);
            }
        }
    } */


    /* ==================== PRODUCT GRID ==================== */

    /* .products-menu-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }
 */

    /* ==================== PRODUCT CARD ==================== */

    /* .product-menu-card {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 13px;
        border: 1px solid #e9edf3;
        border-radius: 8px;
        background: #ffffff;
        text-decoration: none;
        transition:
            transform 0.22s ease,
            border-color 0.22s ease,
            box-shadow 0.22s ease;

        &:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 79, 45, 0.20);
            box-shadow: 0 8px 22px rgba(17, 15, 13, 0.07);

            .product-menu-explore {

                span {
                    transform: translateX(3px);
                }
            }
        }
    }

    .product-menu-card-top {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
    }

    .product-menu-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        color: #ffffff;
        font-size: 14px;
    }

    .product-menu-name {
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 2px;

        strong {
            color: #14213d;
            font-size: 13px;
            font-weight: 800;
            line-height: 1.2;
        }

        span {
            color: #6f7480;
            font-size: 10px;
            font-weight: 500;
            line-height: 1.2;
        }
    }

    .product-menu-card {

        p {
            margin: 10px 0 8px;
            color: #707681;
            font-size: 9px;
            line-height: 1.55;
        }
    } */


    /* Product Colors */

    /* .product-sales {

        .product-menu-icon {
            background: #ff4f2d;
        }
    }

    .product-teams {

        .product-menu-icon {
            background: #367cf4;
        }
    }

    .product-hours {

        .product-menu-icon {
            background: #8c52e8;
        }
    }

    .product-chat {

        .product-menu-icon {
            background: #28b979;
        }
    }

    .product-voice {

        .product-menu-icon {
            background: #f4a623;
        }
    }


    .product-menu-explore {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: auto;
        color: #ff4f2d;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.2;
        margin-top: 10px;
        justify-content: end;

        span {
            font-size: 12px;
            transition: transform 0.2s ease;
        }
    } */


    /* ==================== PROMOTIONAL PANEL ==================== */

    /* .products-mega-promo {
        position: relative;
        padding: 22px 20px 18px;
        overflow: hidden;
        background:
            linear-gradient(
                145deg,
                #fff5f1 0%,
                #fff0eb 58%,
                #fff8f6 100%
            );
    }

    .products-promo-content {
        position: relative;
        z-index: 3;
    }

    .products-promo-label {
        display: inline-block;
        margin-bottom: 8px;
        color: #ff4f2d;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .products-promo-content {

        h5 {
            max-width: 210px;
            margin: 0 0 8px;
            color: #110f0d;
            font-size: 22px;
            font-weight: 800;
            line-height: 1.12;

            span {
                color: #ff4f2d;
            }
        }

        p {
            max-width: 220px;
            margin: 0;
            color: #6d6b6a;
            font-size: 9px;
            line-height: 1.6;
        }
    }

    .products-promo-btn {
        position: relative;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 13px;
        padding: 7px 10px;
        border-radius: 5px;
        color: #ffffff;
        background: #ff4f2d;
        font-size: 9px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 6px 15px rgba(255, 79, 45, 0.18);
        transition:
            background 0.2s ease,
            transform 0.2s ease;

        span {
            font-size: 11px;
        }

        &:hover {
            color: #ffffff;
            background: #110f0d;
            transform: translateY(-1px);
        }
    } */


    /* ==================== PROMO VISUAL ==================== */

    /* .products-promo-visual {
        position: absolute;
        right: -20px;
        bottom: -8px;
        width: 245px;
        height: 160px;
    }

    .promo-dashboard-card {
        position: absolute;
        right: 12px;
        bottom: 8px;
        width: 180px;
        height: 108px;
        padding: 9px;
        border: 1px solid rgba(17, 15, 13, 0.08);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 12px 28px rgba(17, 15, 13, 0.08);
        transform: rotate(-3deg);
    }

    .promo-dashboard-top {
        display: flex;
        gap: 4px;
        margin-bottom: 9px;

        span {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #d8dbe2;
        }
    }

    .promo-chart {
        position: relative;
        height: 50px;
        overflow: hidden;
        border-radius: 4px;
        background:
            linear-gradient(
                to bottom,
                transparent 32%,
                #edf0f4 33%,
                transparent 34%,
                transparent 65%,
                #edf0f4 66%,
                transparent 67%
            );
    }

    .promo-chart-line {
        position: absolute;
        height: 2px;
        border-radius: 10px;
        background: #ff4f2d;
        transform-origin: left center;
    }

    .line-one {
        top: 70%;
        left: 4%;
        width: 40%;
        transform: rotate(-16deg);
    }

    .line-two {
        top: 54%;
        left: 40%;
        width: 25%;
        transform: rotate(21deg);
    }

    .line-three {
        top: 62%;
        left: 64%;
        width: 28%;
        transform: rotate(-25deg);
    }

    .promo-dashboard-items {
        display: flex;
        gap: 5px;
        margin-top: 8px;

        span {
            width: 28px;
            height: 5px;
            border-radius: 4px;
            background: #e9edf3;

            &:first-child {
                width: 45px;
                background: #ffe0d9;
            }
        }
    } */


    /* Floating Product Labels */

    /* .promo-floating-card {
        position: absolute;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 8px;
        border: 1px solid rgba(17, 15, 13, 0.06);
        border-radius: 6px;
        background: #ffffff;
        box-shadow: 0 7px 18px rgba(17, 15, 13, 0.08);
        color: #14213d;
        font-size: 8px;
        font-weight: 700;

        i {
            font-size: 9px;
        }
    }

    .floating-sales {
        top: 23px;
        left: 2px;

        i {
            color: #ff4f2d;
        }
    }

    .floating-support {
        top: 77px;
        left: -8px;

        i {
            color: #367cf4;
        }
    }

    .floating-chat {
        right: 0;
        bottom: 28px;

        i {
            color: #28b979;
        }
    } */


    /* Decorative Shapes */

    /* .products-promo-shape {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;

        &.shape-one {
            top: -90px;
            right: -70px;
            width: 190px;
            height: 190px;
            border: 30px solid rgba(255, 79, 45, 0.08);
        }

        &.shape-two {
            left: -60px;
            bottom: -80px;
            width: 160px;
            height: 160px;
            background: rgba(255, 79, 45, 0.05);
        }
    } */


    /* ==================== RESPONSIVE ==================== */

    /* @media (max-width: 1199px) {

        .products-mega-menu {
            width: 900px;
        }

        .products-mega-inner {
            grid-template-columns: minmax(0, 1fr) 250px;
        }

        .products-menu-grid {
            gap: 8px;
        }

        .product-menu-card {
            padding: 11px;
        }
    }
}  */




/* =========================================================
   AKASHIC SOFT GLOBAL HEADER
   ========================================================= */

.akashic-global-header {

    position: relative;
    z-index: 1100;
    width: 100%;
    /* background: #f8f9fc;
    border-bottom: 1px solid #e7ebf2; */


    /* =====================================================
       NAVBAR
    ===================================================== */

    .navbar {

        min-height: 68px;
        padding: 0;
        background: #edfaf8 !important;
    }


    .container {

        min-height: 68px;
        margin-left: 0px;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .akashic-brand {

        img {
            width: 170px;
            max-width: 205px;
            height: auto;
        }
    }


    /* =====================================================
       MAIN MENU
    ===================================================== */

    .akashic-main-menu {
        margin-left: 60px;

        > li {

            position: relative;
            margin: 0 1px;


            > .nav-link {

                display: flex;
                align-items: center;
                gap: 5px;

                padding: 22px 15px;

                color: #293654 !important;

                font-size: 14px;
                font-weight: 600;
                line-height: 1;

                border-radius: 9px;

                transition:
                    color .2s ease,
                    background .2s ease;


                &:hover,
                &:focus {

                    color: #ff5032;
                }
            }
        }


        /* =================================================
           PRODUCTS ACTIVE / OPEN STATE
        ================================================== */

        .akashic-products-item {

            > .nav-link {

                &::after {

                    margin-left: 2px;

                    border-top-color: currentColor;

                    border-right-width: 4px;
                    border-left-width: 4px;
                }
            }


            &.show {

                > .nav-link {

                    color: #ff5032;

                    background: #fff0ed;
                }
            }
        }
    }


    /* =====================================================
       HEADER ACTIONS
    ===================================================== */

    .akashic-header-actions {

        display: flex;
        align-items: center;
        gap: 9px;
    }


    .akashic-blog-btn {

        min-height: 40px;

        padding: 8px 17px;

        border: 1px solid #d8deea;
        border-radius: 7px;

        background: #ffffff;

        color: #293654;

        font-size: 12px;
        font-weight: 600;

        transition: all .2s ease;


        &:hover {

            color: #ff5032;

            border-color: rgba(255, 80, 50, .35);

            background: #ffffff;
        }
    }


    .akashic-demo-btn {

        min-height: 40px;

        padding: 9px 19px;

        border: 1px solid #ff5032;
        border-radius: 7px;

        background: #ff5032;

        color: #ffffff;

        font-size: 12px;
        font-weight: 700;

        box-shadow:
            0 7px 18px rgba(255, 80, 50, .13);

        transition: all .2s ease;


        &:hover {

            color: #ffffff;

            background: #eb4327;

            border-color: #eb4327;

            transform: translateY(-1px);
        }
    }


    /* =====================================================
       PRODUCTS MEGA MENU
       ===================================================== */

    .akashic-products-item {

        position: static;
    }


    .akashic-products-mega-menu {

        position: absolute;

        top: calc(100% + 8px);
        left: 20%;

        width: 1095px;
        max-width: calc(100vw - 30px);

        padding: 0 !important;
        margin: 0;

        border: 1px solid #e4e9f1 !important;
        border-radius: 13px !important;

        background: #ffffff !important;

        box-shadow:
            0 22px 55px rgba(23, 39, 79, .13) !important;

        transform: translateX(-20%);

        overflow: hidden;
    }


    /* =====================================================
       MEGA MENU MAIN GRID
       ===================================================== */

    .akashic-products-mega-inner {

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            365px;

        min-height: 270px;
    }


    /* =====================================================
       LEFT PRODUCT SECTION
       ===================================================== */

    .akashic-products-content {

        padding: 20px 22px 21px;

        background: #ffffff;
    }


    /* =====================================================
       PRODUCT HEADING
       ===================================================== */

    .akashic-products-heading {

        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 20px;

        margin-bottom: 15px;
    }


    .akashic-products-heading-copy {

        min-width: 0;


        .akashic-products-eyebrow {

            display: block;

            margin-bottom: 3px;

            color: #ff5032;

            font-size: 8px;
            font-weight: 800;

            letter-spacing: .75px;

            line-height: 1;

            text-transform: uppercase;
        }


        h6 {

            margin: 0 0 4px;

            color: #17234f;

            font-size: 15px;
            font-weight: 800;

            line-height: 1.2;
        }


        p {

            margin: 0;

            color: #788296;

            font-size: 8.5px;

            line-height: 1.45;
        }
    }


    /* =====================================================
       VIEW ALL PRODUCTS
    ===================================================== */

    .akashic-products-view-all {

        display: inline-flex;

        align-items: center;

        gap: 5px;

        padding-top: 8px;

        color: #ff5032;

        font-size: 8.5px;
        font-weight: 700;

        white-space: nowrap;

        text-decoration: none;

        transition: color .2s ease;


        span {

            font-size: 11px;

            transition:
                transform .2s ease;
        }


        &:hover {

            color: #17234f;


            span {

                transform: translateX(3px);
            }
        }
    }


    /* =====================================================
       PRODUCT GRID
       ===================================================== */

    .akashic-products-grid {

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 9px 10px;
    }


    /* =====================================================
       PRODUCT CARD
       ===================================================== */

    .akashic-product-card {

        position: relative;

        display: flex;

        align-items: center;

        min-width: 0;

        min-height: 59px;

        padding: 10px 10px;

        border: 1px solid #e5eaf2;

        border-radius: 8px;

        background: #ffffff;

        text-decoration: none;

        box-shadow:
            0 3px 9px rgba(26, 48, 91, .025);

        transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;


        &:hover {

            border-color: #d8e0ed;

            box-shadow:
                0 8px 18px rgba(26, 48, 91, .07);

            transform: translateY(-1px);


            .akashic-product-arrow {

                transform: translateX(3px);
            }
        }


        /* PRODUCT COLORS */

        &.product-sales {

            .akashic-product-icon {

                background: #ff5032;
            }
        }


        &.product-teams {

            .akashic-product-icon {

                background: #438bf5;
            }
        }


        &.product-hours {

            .akashic-product-icon {

                background: #8b68e9;
            }
        }


        &.product-chat {

            .akashic-product-icon {

                background: #20bc78;
            }
        }


        &.product-voice {

            .akashic-product-icon {

                background: #f4b51d;
            }
        }
    }


    /* =====================================================
       PRODUCT ICON
    ===================================================== */

    .akashic-product-icon {

        width: 32px;
        min-width: 32px;

        height: 32px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        margin-right: 9px;

        border-radius: 7px;

        color: #ffffff;

        font-size: 12px;
    }


    /* =====================================================
       PRODUCT NAME
    ===================================================== */

    .akashic-product-info {

        min-width: 0;

        display: flex;

        flex-direction: column;

        gap: 2px;


        strong {

            display: block;

            overflow: hidden;

            color: #17234f;

            font-size: 9px;
            font-weight: 800;

            line-height: 1.2;

            white-space: nowrap;

            text-overflow: ellipsis;
        }


        small {

            display: block;

            overflow: hidden;

            color: #788296;

            font-size: 7.5px;
            font-weight: 500;

            line-height: 1.2;

            white-space: nowrap;

            text-overflow: ellipsis;
        }
    }


    /* =====================================================
       PRODUCT ARROW
    ===================================================== */

    .akashic-product-arrow {

        margin-left: auto;

        color: #7c879a;

        font-size: 12px;
        font-weight: 500;

        transition:
            transform .2s ease,
            color .2s ease;
    }


    .akashic-product-card:hover {

        .akashic-product-arrow {

            color: #ff5032;
        }
    }


    /* =====================================================
       RIGHT ECOSYSTEM PANEL
       ===================================================== */

    .akashic-products-side {

        position: relative;

        min-height: 270px;

        padding: 25px 21px;

        overflow: hidden;

        background:

            linear-gradient(
                135deg,
                #edf5ff 0%,
                #eaf5ff 42%,
                #eef6ff 70%,
                #f9f2f7 100%
            );
    }


    /* =====================================================
       RIGHT PANEL CONTENT
    ===================================================== */

    .akashic-products-side-content {

        position: relative;

        z-index: 10;

        width: 205px;
    }


    .akashic-products-side h5 {

        margin: 0 0 8px;

        color: #17234f;

        font-size: 18px;

        line-height: 1.12;

        font-weight: 800;


        span {

            display: block;

            color: #ff5032;
        }
    }


    .akashic-products-side p {

        width: 205px;

        margin: 0;

        color: #738096;

        font-size: 8px;

        line-height: 1.5;
    }


    /* =====================================================
       ECOSYSTEM CTA
    ===================================================== */

    .akashic-products-side-btn {

        display: inline-flex;

        align-items: center;

        gap: 5px;

        margin-top: 13px;

        padding: 7px 12px;

        border: 1px solid #5c91f8;

        border-radius: 18px;

        background: rgba(255, 255, 255, .88);

        color: #2769db;

        font-size: 8px;
        font-weight: 700;

        text-decoration: none;

        box-shadow:
            0 5px 13px rgba(46, 103, 210, .08);

        transition: all .2s ease;


        span {

            font-size: 10px;

            transition:
                transform .2s ease;
        }


        &:hover {

            color: #ffffff;

            background: #2769db;

            border-color: #2769db;


            span {

                transform: translateX(3px);
            }
        }
    }


    /* =====================================================
       ECOSYSTEM VISUAL
    ===================================================== */

    .akashic-ecosystem-visual {

        position: absolute;

        right: 3px;
        bottom: 1px;

        width: 175px;
        height: 185px;

        z-index: 3;
    }


    /* =====================================================
       CONNECTION RINGS
    ===================================================== */

    .ecosystem-ring {

        position: absolute;

        left: 50%;
        top: 52%;

        border: 1px dashed rgba(75, 126, 222, .23);

        border-radius: 50%;

        transform: translate(-50%, -50%);
    }


    .ring-one {

        width: 143px;
        height: 143px;
    }


    .ring-two {

        width: 108px;
        height: 108px;

        border-style: solid;

        border-color:
            rgba(75, 126, 222, .08);
    }


    /* =====================================================
       CENTER LOGO
    ===================================================== */

    .ecosystem-center {

        position: absolute;

        left: 50%;
        top: 52%;

        width: 45px;
        height: 45px;

        display: flex;

        align-items: center;
        justify-content: center;

        border: 5px solid rgba(255, 255, 255, .8);

        border-radius: 50%;

        background: #ffffff;

        box-shadow:
            0 8px 22px rgba(31, 69, 135, .12);

        transform: translate(-50%, -50%);
    }


    .ecosystem-center-mark {

        width: 29px;
        height: 29px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        color: #182a5d;

        font-size: 17px;
        font-weight: 800;

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #eaf1ff
            );

        box-shadow:
            inset 0 0 0 1px #e2e9f4;
    }


    /* =====================================================
       FLOATING PRODUCT ICONS
    ===================================================== */

    .ecosystem-floating {

        position: absolute;

        width: 31px;
        height: 31px;

        display: flex;

        align-items: center;
        justify-content: center;

        border: 4px solid rgba(255, 255, 255, .85);

        border-radius: 7px;

        background: #ffffff;

        box-shadow:
            0 7px 17px rgba(35, 64, 116, .13);

        font-size: 11px;

        z-index: 5;
    }


    .ecosystem-sales {

        top: 16px;
        right: 19px;

        color: #ff5032;

        background: #ffffff;
    }


    .ecosystem-teams {

        top: 53px;
        left: 16px;

        color: #4286f3;
    }


    .ecosystem-chat {

        top: 83px;
        right: 4px;

        color: #18b978;
    }


    .ecosystem-voice {

        bottom: 13px;
        right: 20px;

        color: #e8aa14;
    }


    .ecosystem-support {

        bottom: 37px;
        left: 12px;

        color: #4286f3;
    }


    /* =====================================================
       DECORATIVE DOTS
    ===================================================== */

    .ecosystem-dot {

        position: absolute;

        width: 4px;
        height: 4px;

        border-radius: 50%;

        background: #9bbdf7;

        z-index: 2;
    }


    .dot-one {

        top: 25px;
        right: 84px;
    }


    .dot-two {

        top: 96px;
        right: 12px;

        background: #ffb4a6;
    }


    .dot-three {

        bottom: 27px;
        right: 94px;

        background: #8cd9be;
    }


    /* =====================================================
       SOFT DECORATIVE SHAPES
    ===================================================== */

    .akashic-products-side::before {

        content: "";

        position: absolute;

        width: 135px;
        height: 135px;

        right: -60px;
        top: -55px;

        border-radius: 50%;

        border:
            20px solid rgba(82, 138, 235, .08);
    }


    .akashic-products-side::after {

        content: "";

        position: absolute;

        width: 100px;
        height: 48px;

        right: -20px;
        bottom: -15px;

        border-radius: 50%;

        background:
            rgba(255, 121, 154, .09);

        transform: rotate(-20deg);
    }


    /* =====================================================
       MOBILE TOGGLE
    ===================================================== */

    .akashic-mobile-toggle {

        i {

            color: #24315a;

            font-size: 22px;
        }
    }


    /* =====================================================
       MOBILE OFFCANVAS
    ===================================================== */

    .akashic-offcanvas {

        .offcanvas-header {

            padding: 20px;

            border-bottom: 1px solid #e8edf4;


            img {

                width: 185px;
                max-width: 185px;
            }
        }


        .close-btn {

            width: 38px;
            height: 38px;

            display: inline-flex;

            align-items: center;
            justify-content: center;

            border: 0;
            border-radius: 8px;

            background: #f3f5f9;


            i {

                font-size: 15px;
            }
        }


        .offcanvas-body {

            padding: 20px;
        }
    }


    /* =====================================================
       MOBILE MENU
    ===================================================== */

    .akashic-mobile-menu {

        > li {

            margin-bottom: 3px;


            > .nav-link {

                padding: 13px 10px;

                border-radius: 7px;

                color: #4f5c73 !important;

                font-size: 14px;
                font-weight: 600;


                &:hover {

                    color: #ff5032;

                    background: #f7f8fb;
                }
            }
        }


        .dropdown-menu {

            position: static !important;

            width: 100%;

            margin: 3px 0 10px;

            padding: 7px;

            border:
                1px solid #e8edf4 !important;

            border-radius: 9px;

            background: #fafbfe !important;

            box-shadow: none !important;
        }


        .dropdown-item {

            display: flex;

            align-items: center;

            gap: 10px;

            padding: 10px 11px;

            border-radius: 6px;

            color: #58657b;

            font-size: 13px;
            font-weight: 600;


            i {

                width: 20px;

                text-align: center;

                color: #7b8498;
            }


            &:hover {

                color: #ff5032;

                background: #ffffff;


                i {

                    color: #ff5032;
                }
            }
        }
    }


    /* =====================================================
       MOBILE ACTIONS
    ===================================================== */

    .akashic-mobile-actions {

        display: flex;

        gap: 10px;

        margin-top: 25px;

        padding-top: 20px;

        border-top: 1px solid #e8edf4;


        .btn {

            flex: 1;
        }
    }
}


/* ============================================
   AKASHICSOFT HEADER STRIP
   Reference-inspired light decorative background
   ============================================ */

.akashic-global-header {
    position: relative;
    z-index: 1100;
    isolation: isolate;
    overflow: visible;
    background: #f5fbff;
    border-bottom: 1px solid rgba(45, 76, 120, 0.08);
    box-shadow: 0 12px 28px rgba(25, 43, 75, 0.10);
}

.akashic-global-header .navbar {
    position: relative;
    min-height: 80px;
    padding: 0;
    background:
        radial-gradient(
            ellipse 260px 145px at 0% 100%,
            rgba(255, 91, 65, 0.17),
            transparent 72%
        ),
        radial-gradient(
            ellipse 360px 190px at 100% 0%,
            rgba(66, 151, 255, 0.20),
            transparent 74%
        ),
        linear-gradient(
            105deg,
            #fff8f5 0%,
            #f6fbff 36%,
            #eefaff 70%,
            #eaf4ff 100%
        ) !important;
}

.akashic-global-header .container {
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* Decorative flowing curves */
.akashic-global-header .navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
    background:
        radial-gradient(
            ellipse 270px 170px at -20px 125%,
            transparent 66%,
            rgba(255, 111, 86, 0.16) 66.5%,
            transparent 67.2%
        ),
        radial-gradient(
            ellipse 420px 220px at 16% 155%,
            transparent 69%,
            rgba(96, 174, 224, 0.15) 69.5%,
            transparent 70.1%
        ),
        radial-gradient(
            ellipse 400px 210px at 105% -45%,
            transparent 67%,
            rgba(64, 143, 245, 0.20) 67.5%,
            transparent 68.2%
        );
}

/* Keep actual header content above decoration */
.akashic-global-header .container > * {
    position: relative;
    z-index: 1;
}

/* Logo */
.akashic-global-header .akashic-brand img {
    width: 205px;
    max-width: 100%;
    height: auto;
}

/* Main menu spacing */
.akashic-global-header .akashic-main-menu {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 0;
}

/* Menu links */
.akashic-global-header .akashic-main-menu > li > .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 23px 12px;
    border-radius: 0;
    background: transparent;
    color: #17254d !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.25s ease;
}

/* Reference-style orange underline */
.akashic-global-header .akashic-main-menu > li > .nav-link::before {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 8px;
    left: 12px;
    height: 4px;
    border-radius: 8px;
    background: #ff542f;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.akashic-global-header .akashic-main-menu > li > .nav-link:hover,
.akashic-global-header .akashic-main-menu > li > .nav-link:focus,
.akashic-global-header .akashic-main-menu > li > .nav-link.active {
    color: #ff542f !important;
    background: transparent !important;
}

.akashic-global-header .akashic-main-menu > li > .nav-link:hover::before,
.akashic-global-header .akashic-main-menu > li > .nav-link:focus::before,
.akashic-global-header .akashic-main-menu > li > .nav-link.active::before {
    transform: scaleX(1);
}

/* Blue dotted detail */
.akashic-global-header .container::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.65;
    background-image: radial-gradient(
        circle,
        #59a9d7 1.7px,
        transparent 2px
    );
    background-size: 13px 13px;
}

/* Keep products dropdown above the strip */
.akashic-global-header .akashic-products-mega-menu {
    z-index: 1200;
}

/* Tablet */
@media (max-width: 1199px) {
    .akashic-global-header .navbar,
    .akashic-global-header .container {
        min-height: 84px;
    }

    .akashic-global-header .akashic-main-menu {
        gap: 5px;
    }

    .akashic-global-header .akashic-main-menu > li > .nav-link {
        padding: 18px 9px;
        font-size: 15px;
    }

    .akashic-global-header .container::after {
        display: none;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .akashic-global-header .navbar,
    .akashic-global-header .container {
        min-height: 72px;
    }

    .akashic-global-header .akashic-brand img {
        width: 175px;
    }
}



/* =====================================
   AKASHIC SOFT - NAVBAR BACKGROUND ART
===================================== */

.akashic-navbar {
    position: relative;
    isolation: isolate;
    /* overflow: hidden; */
    min-height: 88px;

    background:
        linear-gradient(
            105deg,
            #fff8f5 0%,
            #f5fbff 43%,
            #eaf8ff 72%,
            #f7fbff 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(27, 48, 91, 0.10);
}

/* Keep logo and menu above decorations */
.akashic-navbar > *:not(.nav-bg-decoration) {
    position: relative;
    z-index: 2;
}

/* Decorative layer */
.akashic-navbar .nav-bg-decoration {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Left orange-pink circular shape */
.akashic-navbar .nav-shape-left {
    position: absolute;
    left: -76px;
    top: -105px;
    width: 205px;
    height: 205px;
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        rgba(255, 77, 57, 0.24),
        rgba(255, 139, 115, 0.06)
    );
}

/* Right blue circular shape */
.akashic-navbar .nav-shape-right {
    position: absolute;
    right: -80px;
    top: -145px;
    width: 250px;
    height: 250px;
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        rgba(44, 137, 255, 0.22),
        rgba(92, 174, 255, 0.05)
    );
}

/* Blue dotted pattern */
.akashic-navbar .nav-dot-pattern {
    position: absolute;
    right: 23%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);

    background-image: radial-gradient(
        circle,
        rgba(50, 151, 210, 0.55) 1.7px,
        transparent 2px
    );

    background-size: 14px 14px;
}

/* Thin curved strokes on both sides */
.akashic-navbar .nav-curve {
    position: absolute;
    width: 360px;
    height: 180px;
    border: 1px solid rgba(91, 175, 224, 0.20);
    border-radius: 50%;
}

/* Left flowing curves */
.akashic-navbar .nav-curve-left {
    left: -105px;
    top: -125px;
    transform: rotate(24deg);
}

.akashic-navbar .nav-curve-left::after {
    content: "";
    position: absolute;
    inset: 15px -22px -15px 20px;
    border: 1px solid rgba(91, 175, 224, 0.16);
    border-radius: 50%;
}

/* Right flowing curves */
.akashic-navbar .nav-curve-right {
    right: -155px;
    top: -115px;
    transform: rotate(-22deg);
    border-color: rgba(58, 142, 240, 0.22);
}

.akashic-navbar .nav-curve-right::after {
    content: "";
    position: absolute;
    inset: 15px 20px -15px -22px;
    border: 1px solid rgba(58, 142, 240, 0.16);
    border-radius: 50%;
}

/* Keep decorations subtle on small screens */
@media (max-width: 767px) {
    .akashic-navbar {
        min-height: 72px;
        border-radius: 8px;
    }

    .akashic-navbar .nav-dot-pattern {
        right: 8%;
        opacity: 0.55;
    }

    .akashic-navbar .nav-shape-left {
        left: -125px;
    }

    .akashic-navbar .nav-shape-right {
        right: -175px;
    }
}



/* =========================================================
   AKASHIC HEADER NON-STICKY
   ASSIGNSALES HEADER STICKY
========================================================= */

.akashic-global-header {

    position: relative;
}


.akashic-global-header + .main-header {

    position: relative;

    z-index: 1050;


    .sticky-header {

        position: sticky;

        top: 0;

        z-index: 1050;

        background: #ffffff !important;

        border-bottom: 1px solid #edf0f5;

        box-shadow:
            0 5px 18px rgba(23, 35, 79, .045);
    }
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

    .akashic-global-header {

        .navbar,
        .container {

            min-height: 66px;
        }


        .akashic-brand {

            img {

                width: 190px;
                max-width: 190px;
            }
        }


        .akashic-products-mega-menu {

            width: 920px;
        }


        .akashic-products-mega-inner {

            grid-template-columns:
                minmax(0, 1fr)
                315px;
        }


        .akashic-products-side {

            min-height: 270px;
        }
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .akashic-global-header {

        .navbar,
        .container {

            min-height: 64px;
        }


        .akashic-brand {

            img {

                width: 175px;
                max-width: 175px;
            }
        }
    }
}





/* =========================================================
   ASSIGNSALES HEADER
========================================================= */

.main-header {

    width: 100%;

    .sticky-header {

        min-height: 72px;

        padding: 0;

        background: rgba(255, 255, 255, .98) !important;

        border-bottom: 1px solid #edf0f5;

        box-shadow:
            0 4px 20px rgba(25, 42, 82, .035);

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

        transition:
            background .25s ease,
            box-shadow .25s ease;
    }


    .container {

        min-height: 72px;

        max-width: 1240px;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .assignsales-brand {

        flex-shrink: 0;

        padding: 0;

        margin-right: 48px;


        img {

            width: 145px;

            max-width: 145px;

            height: auto;

            display: block;
        }
    }


    /* =====================================================
       MAIN MENU
    ===================================================== */

    .assignsales-main-menu {

        display: flex;

        align-items: center;

        gap: 5px;

        margin: 0;

        padding: 0;


        > li {

            margin: 0;

            position: relative;


            > .nav-link {

                position: relative;

                display: inline-flex;

                align-items: center;

                justify-content: center;

                gap: 6px;

                min-height: 42px;

                padding: 10px 17px;

                border-radius: 8px;

                color: #263454 !important;

                font-family:
                    "DM Sans",
                    sans-serif;

                font-size: 14px;

                font-weight: 600;

                line-height: 1;

                text-decoration: none;

                transition:
                    color .2s ease,
                    background .2s ease,
                    box-shadow .2s ease;


                &:hover {

                    color: #ff5032;
                }
            }
        }


        /* =================================================
           ACTIVE
        ================================================== */

        > li > .nav-link.active {

            color: #ff5032;

            background: #fff1ed;

            box-shadow:
                0 5px 15px rgba(255, 80, 50, .07);
        }


        /* =================================================
           RESOURCES TOGGLE
        ================================================== */

        .assignsales-resources-item {

            > .nav-link {

                &::after {

                    width: 6px;

                    height: 6px;

                    margin-left: 3px;

                    border: 0;

                    border-right:
                        1.5px solid currentColor;

                    border-bottom:
                        1.5px solid currentColor;

                    transform:
                        rotate(45deg)
                        translateY(-2px);

                    transition:
                        transform .2s ease;
                }
            }


            &.show {

                > .nav-link {

                    color: #ff5032;

                    background: #fff1ed;


                    &::after {

                        transform:
                            rotate(225deg)
                            translateY(-1px);
                    }
                }
            }
        }
    }


    /* =====================================================
       RESOURCES MEGA MENU
    ===================================================== */

    .assignsales-resources-menu {

        position: absolute;

        top: calc(100% + 10px);

        left: 60%;

        width: 790px;

        min-width: 790px;

        padding: 0 !important;

        margin: 0;

        border:
            1px solid #e4e9f1 !important;

        border-radius: 14px !important;

        background: #ffffff !important;

        box-shadow:
            0 25px 65px rgba(24, 42, 82, .14) !important;

        transform:
            translateX(-60%);

        overflow: hidden;

        animation:
            assignsalesMenuIn .18s ease-out;
    }


    /* =====================================================
       INNER
    ===================================================== */

    .assignsales-resources-inner {

        padding:
            22px 23px 0;
    }


    /* =====================================================
       MENU HEADER
    ===================================================== */

    .assignsales-resources-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 30px;

        padding:
            0 2px 17px;

        border-bottom:
            1px solid #edf0f5;


        span {

            display: block;

            margin-bottom: 5px;

            color: #ff5032;

            font-size: 9px;

            font-weight: 800;

            letter-spacing: 1px;

            line-height: 1;

            text-transform: uppercase;
        }


        h6 {

            margin: 0 0 5px;

            color: #17244e;

            font-family:
                "Plus Jakarta Sans",
                sans-serif;

            font-size: 16px;

            font-weight: 800;

            line-height: 1.2;
        }


        p {

            margin: 0;

            color: #7b8699;

            font-size: 10px;

            line-height: 1.5;
        }
    }


    /* =====================================================
       TOP LINK
    ===================================================== */

    .assignsales-resource-top-link {

        display: inline-flex;

        align-items: center;

        gap: 7px;

        color: #ff5032;

        font-size: 11px;

        font-weight: 700;

        white-space: nowrap;

        text-decoration: none;


        i {

            font-size: 9px;

            transition:
                transform .2s ease;
        }


        &:hover {

            color: #e9472c;


            i {

                transform:
                    translateX(3px);
            }
        }
    }


    /* =====================================================
       THREE COLUMN GRID
    ===================================================== */

    .assignsales-resources-grid {

        display: grid;

        grid-template-columns:
            1fr
            1fr
            1.08fr;

        gap: 0;

        padding:
            18px 0 16px;
    }


    .assignsales-resource-group {

        min-width: 0;

        padding:
            0 17px;

        border-right:
            1px solid #edf0f5;


        &:first-child {

            padding-left: 0;
        }


        &:last-child {

            padding-right: 0;

            border-right: 0;
        }
    }


    /* =====================================================
       GROUP HEADING
    ===================================================== */

    .assignsales-group-heading {

        display: flex;

        align-items: center;

        gap: 9px;

        margin-bottom: 11px;

        color: #293652;

        font-size: 12px;

        font-weight: 700;


        .assignsales-group-icon {

            width: 28px;

            min-width: 28px;

            height: 28px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            border-radius: 7px;

            font-size: 11px;


            &.resources {

                background: #edf5ff;

                color: #4a88ee;
            }


            &.crm {

                background: #f1edff;

                color: #8060e5;
            }


            &.support {

                background: #fff0ec;

                color: #ff694b;
            }
        }
    }


    /* =====================================================
       RESOURCE ITEM
    ===================================================== */

    .assignsales-resource-item {

        display: flex;

        align-items: center;

        gap: 10px;

        min-height: 58px;

        padding:
            7px 7px;

        margin-bottom: 3px;

        border:
            1px solid transparent;

        border-radius: 9px;

        text-decoration: none;

        transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease,
            box-shadow .2s ease;


        &:hover {

            background: #fafbfe;

            border-color: #e8edf4;

            transform:
                translateX(2px);

            box-shadow:
                0 5px 15px rgba(25, 45, 85, .045);


            > i {

                color: #ff5032;

                transform:
                    translateX(3px);
            }


            .assignsales-item-content strong {

                color: #ff5032;
            }
        }


        > i {

            margin-left: auto;

            color: #a2aaba;

            font-size: 9px;

            transition:
                color .2s ease,
                transform .2s ease;
        }
    }


    /* =====================================================
       ITEM ICON
    ===================================================== */

    .assignsales-item-icon {

        width: 34px;

        min-width: 34px;

        height: 34px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        border-radius: 8px;

        color: #ffffff;

        font-size: 12px;


        &.blue {

            background:
                linear-gradient(
                    135deg,
                    #4488f4,
                    #6b9df5
                );
        }


        &.green {

            background:
                linear-gradient(
                    135deg,
                    #20b979,
                    #4acb93
                );
        }


        &.cyan {

            background:
                linear-gradient(
                    135deg,
                    #32aec8,
                    #5fc9db
                );
        }


        &.purple {

            background:
                linear-gradient(
                    135deg,
                    #8060e5,
                    #a180ef
                );
        }


        &.orange {

            background:
                linear-gradient(
                    135deg,
                    #ff835b,
                    #ffa16e
                );
        }


        &.indigo {

            background:
                linear-gradient(
                    135deg,
                    #526fd9,
                    #7389e6
                );
        }


        &.yellow {

            background:
                linear-gradient(
                    135deg,
                    #e9a915,
                    #f2c14d
                );
        }


        &.red {

            background:
                linear-gradient(
                    135deg,
                    #ed5d69,
                    #f37f89
                );
        }


        &.violet {

            background:
                linear-gradient(
                    135deg,
                    #865de2,
                    #a77de9
                );
        }
    }


    /* =====================================================
       ITEM CONTENT
    ===================================================== */

    .assignsales-item-content {

        min-width: 0;

        display: flex;

        flex-direction: column;

        gap: 4px;


        strong {

            color: #273553;

            font-size: 11px;

            font-weight: 700;

            line-height: 1.2;

            transition:
                color .2s ease;
        }


        small {

            overflow: hidden;

            color: #8a94a6;

            font-size: 9px;

            font-weight: 500;

            line-height: 1.2;

            white-space: nowrap;

            text-overflow: ellipsis;
        }
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .assignsales-resources-footer {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 20px;

        min-height: 48px;

        padding:
            10px 2px;

        border-top:
            1px solid #edf0f5;


        > div {

            display: flex;

            align-items: center;

            gap: 7px;

            color: #8791a3;

            font-size: 9px;


            i {

                color: #ff9b58;

                font-size: 10px;
            }
        }


        > a {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            color: #ff5032;

            font-size: 10px;

            font-weight: 700;

            white-space: nowrap;

            text-decoration: none;


            i {

                font-size: 9px;

                transition:
                    transform .2s ease;
            }


            &:hover {

                color: #e8472b;


                i {

                    transform:
                        translateX(3px);
                }
            }
        }
    }


    /* =====================================================
       HEADER ACTIONS
    ===================================================== */

    .assignsales-header-actions {

        display: flex;

        align-items: center;

        gap: 18px;

        margin-left: 35px;

        white-space: nowrap;
    }


    /* =====================================================
       SIGN IN
    ===================================================== */

    .assignsales-signin {

        display: inline-flex;

        align-items: center;

        gap: 7px;

        padding:
            8px 2px;

        color: #58647a;

        font-family:
            "DM Sans",
            sans-serif;

        font-size: 13px;

        font-weight: 500;

        text-decoration: none;

        transition:
            color .2s ease;


        i {

            color: #778399;

            font-size: 13px;

            transition:
                color .2s ease;
        }


        &:hover {

            color: #ff5032;


            i {

                color: #ff5032;
            }
        }
    }


    /* =====================================================
       TALK TO SALES
    ===================================================== */

    .assignsales-talk-btn {

        min-height: 40px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 9px;

        padding:
            10px 17px;

        border:
            1px solid #ff5032;

        border-radius: 8px;

        background:
            linear-gradient(
                135deg,
                #ff5939,
                #ff4b2e
            );

        color: #ffffff;

        font-family:
            "DM Sans",
            sans-serif;

        font-size: 12px;

        font-weight: 700;

        text-decoration: none;

        box-shadow:
            0 7px 18px rgba(255, 80, 50, .14);

        transition:
            transform .2s ease,
            box-shadow .2s ease,
            background .2s ease;


        i {

            font-size: 9px;

            transition:
                transform .2s ease;
        }


        &:hover {

            color: #ffffff;

            background:
                linear-gradient(
                    135deg,
                    #f44f30,
                    #e94528
                );

            transform:
                translateY(-1px);

            box-shadow:
                0 10px 22px rgba(255, 80, 50, .2);


            i {

                transform:
                    translateX(3px);
            }
        }
    }


    /* =====================================================
       MOBILE TOGGLE
    ===================================================== */

    .assignsales-mobile-toggle {

        i {

            color: #263454;

            font-size: 21px;
        }
    }
}


/* =========================================================
   DROPDOWN ANIMATION
========================================================= */

@keyframes assignsalesMenuIn {

    from {

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(-6px);
    }

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


/* =========================================================
   MOBILE OFFCANVAS
========================================================= */

.assignsales-offcanvas {

    width: 330px !important;

    border: 0;

    background: #ffffff;


    /* =====================================================
       MOBILE HEADER
    ===================================================== */

    .offcanvas-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding:
            20px;

        border-bottom:
            1px solid #edf0f5;


        .navbar-brand {

            margin: 0;


            img {

                width: 150px;

                max-width: 150px;

                height: auto;
            }
        }
    }


    /* =====================================================
       CLOSE BUTTON
    ===================================================== */

    .assignsales-mobile-close {

        width: 36px;

        height: 36px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        padding: 0;

        border: 0;

        border-radius: 8px;

        background: #fff1ed;

        color: #ff5032;

        transition:
            background .2s ease,
            transform .2s ease;


        i {

            font-size: 13px;
        }


        &:hover {

            background: #ffe2dc;

            transform:
                rotate(90deg);
        }
    }


    /* =====================================================
       BODY
    ===================================================== */

    .offcanvas-body {

        padding:
            18px;
    }


    /* =====================================================
       MOBILE MENU
    ===================================================== */

    .assignsales-mobile-menu {

        margin: 0;

        padding: 0;


        > li {

            margin-bottom: 4px;


            > .nav-link {

                min-height: 48px;

                display: flex;

                align-items: center;

                justify-content: space-between;

                padding:
                    10px 13px;

                border-radius: 8px;

                color: #3d4961;

                font-size: 14px;

                font-weight: 600;

                text-decoration: none;


                > i {

                    color: #9ba4b4;

                    font-size: 9px;
                }


                &:hover {

                    color: #ff5032;

                    background: #fff5f2;
                }
            }


            &.show > .nav-link {

                color: #ff5032;

                background: #fff5f2;
            }
        }


        /* =================================================
           MOBILE RESOURCE DROPDOWN
        ================================================== */

        .dropdown-menu {

            position: static !important;

            width: 100%;

            margin:
                4px 0 8px;

            padding: 7px;

            border:
                1px solid #e8edf4 !important;

            border-radius: 9px;

            background: #fafbfe !important;

            box-shadow: none !important;

            transform: none !important;
        }


        .mobile-resource-heading {

            padding:
                9px 9px 5px;

            color: #a0a8b6;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: .7px;

            text-transform: uppercase;
        }


        .dropdown-item {

            display: flex;

            align-items: center;

            gap: 10px;

            min-height: 42px;

            padding:
                8px 9px;

            border-radius: 7px;

            color: #536078;

            font-size: 13px;

            font-weight: 600;


            i {

                width: 22px;

                text-align: center;

                color: #8791a3;

                font-size: 11px;
            }


            &:hover {

                color: #ff5032;

                background: #ffffff;


                i {

                    color: #ff5032;
                }
            }
        }
    }
}


/* =========================================================
   MOBILE ACTIONS
========================================================= */

.assignsales-mobile-actions {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid #edf0f5;


    .assignsales-mobile-signin {

        min-height: 45px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        border:
            1px solid #e1e6ee;

        border-radius: 8px;

        color: #536078;

        font-size: 13px;

        font-weight: 600;

        text-decoration: none;


        i {

            color: #7c8799;
        }


        &:hover {

            color: #ff5032;

            border-color:
                rgba(255, 80, 50, .25);

            background: #fff7f4;


            i {

                color: #ff5032;
            }
        }
    }


    .assignsales-mobile-sales {

        min-height: 45px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        border-radius: 8px;

        background: #ff5032;

        color: #ffffff;

        font-size: 13px;

        font-weight: 700;

        text-decoration: none;


        i {

            font-size: 9px;
        }
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .main-header {

        .container {

            max-width: 1320px;
        }


        .assignsales-brand {

            margin-right: 60px;
        }


        .assignsales-main-menu {

            gap: 7px;
        }


        .assignsales-header-actions {

            margin-left: 45px;
        }
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .main-header {

        .sticky-header {

            min-height: 66px;
        }


        .container {

            min-height: 66px;
        }


        .assignsales-brand {

            margin-right: 20px;


            img {

                width: 140px;

                max-width: 140px;
            }
        }


        .assignsales-header-actions {

            margin-left: 15px;

            gap: 10px;
        }


        .assignsales-talk-btn {

            padding:
                9px 13px;
        }


        .assignsales-resources-menu {

            width: 720px;

            min-width: 720px;
        }
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .main-header {

        .sticky-header {

            min-height: 64px;
        }


        .container {

            min-height: 64px;
        }


        .assignsales-brand {

            margin-right: 0;


            img {

                width: 135px;

                max-width: 135px;
            }
        }
    }


    .assignsales-offcanvas {

        width: 320px !important;
    }
}




/* =========================================================
   04. HERO
   ========================================================= */

.hero-section {
    /* background: var(--as-blue-soft) !important; */
    /* background-image: none !important; */
}

/*
   The hero has an inline particle image in the HTML.
   Keep the theme visual but prevent a dark bottom strip.
*/
.hero-section>.bg-dark {
    background-color: #f6f9fe !important;
    /* background-image: none !important; */
    opacity: 1;
}

.hero-section h1 {
    color: var(--as-navy) !important;
}

.hero-section .lead {
    color: var(--as-text) !important;
}

.hero-section .text-primary,
.hero-section h1 span,
.hero-section h1 strong {
    color: var(--as-primary) !important;
}


/* =========================================================
   05. VALUE PROPOSITION
   Current HTML:
   <section class="customer-review pb-120 bg-dark">
   ========================================================= */

.customer-review {
    background-color: #f6f9fe !important;
    background-image: none !important;
}

.customer-review .section-heading h2,
.customer-review .section-heading h3,
.customer-review h2,
.customer-review h3 {
    color: var(--as-navy) !important;
}

.customer-review p,
.customer-review .text-white,
.customer-review .text-white-50 {
    color: var(--as-navy) !important;
}

.customer-review .review-info-wrap {
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 18px;
    transition: .25s ease;
    cursor: pointer;
}

.customer-review .review-info-wrap:hover {
    background: #FFFFFF !important;
    border-color: var(--as-border);
    box-shadow: var(--as-shadow);
}

.customer-review .link-with-icon {
    color: var(--as-primary) !important;
}

.customer-review .link-with-icon:hover {
    color: var(--as-primary-hover) !important;
}


/* Logo was previously inverted for the dark section */
.customer-review .assignsales-dark-logo img,
.assignsales-dark-logo img {
    filter: none !important;
    opacity: 1 !important;
}


/* Value icons */
.customer-review .value-icon {
    background: #FFFFFF !important;
    border: 1px solid var(--as-border) !important;
    color: var(--as-blue) !important;
    box-shadow: 0 8px 22px rgba(23, 35, 79, .07);
}

.customer-review .value-icon span {
    border-color: #FFFFFF !important;
}

.customer-review .review-info-wrap:nth-child(1) .value-icon {
    background: #fff !important;
    color: #3478E8 !important;
}

.customer-review .review-info-wrap:nth-child(1) .value-icon span {
    background: #3478E8 !important;
}

.customer-review .review-info-wrap:nth-child(2) .value-icon {
    background: #FFF0ED !important;
    color: var(--as-primary) !important;
}

.customer-review .review-info-wrap:nth-child(2) .value-icon span {
    background: var(--as-primary) !important;
}

.customer-review .review-info-wrap:nth-child(3) .value-icon {
    background: #EAF9F5 !important;
    color: var(--as-green) !important;
}

.customer-review .review-info-wrap:nth-child(3) .value-icon span {
    background: var(--as-green) !important;
}


/* =========================================================
   06. OMNI-CHANNEL CRM SUPPORT BLOCK
   ========================================================= */

.crm-support-area {
    background: #FFFFFF !important;
}

.crm-support-box {
    background: var(--as-peach-soft-2) !important;
    background-image: none !important;
    border: 1px solid #FFE2DC;
    border-radius: 24px;
    box-shadow: none;
}

.crm-support-box h1,
.crm-support-box h2,
.crm-support-box h3,
.crm-support-box h4,
.crm-support-box h5,
.crm-support-box h6 {
    color: var(--as-navy) !important;
}

.crm-support-box p,
.crm-support-box .text-white,
.crm-support-box .text-white-50 {
    color: var(--as-text) !important;
}

.crm-support-box .crm-subtitle {
    color: var(--as-primary) !important;
}

.crm-support-box .btn {
    color: #FFFFFF !important;
}

.crm-support-box .feature-card,
.crm-support-box .single-feature-card {
    background: #FFFFFF !important;
    border-color: var(--as-border);
}


/* =========================================================
   07. HOW IT WORKS
   ========================================================= */

.crm-how-it-works {
    /* background: var(--as-blue-soft) !important;
    background-image: none !important; */

}

.crm-how-it-works::before,
.crm-how-it-works::after {
    background-color: var(--as-peach-soft-2);
}

.crm-how-it-works .crm-title h2,
.crm-how-it-works .crm-title h3,
.crm-how-it-works h2,
.crm-how-it-works h3 {
    color: var(--as-navy) !important;
}

.crm-how-it-works .crm-title p,
.crm-how-it-works p,
.crm-how-it-works .text-white,
.crm-how-it-works .text-white-50 {
    color: var(--as-text) !important;
}

.crm-how-it-works .crm-subtitle {
    color: var(--as-primary) !important;
}

.crm-htw-single {
    background: #FFFFFF !important;
    border: 1px solid var(--as-border);
    box-shadow: 0 8px 25px rgba(23, 35, 79, .055);
}

.crm-htw-single h6 {
    color: var(--as-navy) !important;
}

.crm-htw-single p {
    color: var(--as-text) !important;
}

.crm-htw-single .read-more-link {
    color: var(--as-blue) !important;
}

.crm-htw-single .read-more-link:hover {
    color: var(--as-primary) !important;
}


/* =========================================================
   08. ADVANCED FEATURES / REPORTING
   ========================================================= */

.feature-section,
.two-bg-dark-light {
    /* background: var(--as-lavender-soft) !important;
    background-image: none !important; */
}

.two-bg-dark-light::before,
.two-bg-dark-light::after {
    background: transparent !important;
    background-image: none !important;
}

.feature-section h1,
.feature-section h2,
.feature-section h3,
.feature-section h4,
.feature-section h5,
.feature-section h6 {
    color: var(--as-navy) !important;
}

.feature-section p {
    color: var(--as-text) !important;
}

.feature-section .text-primary {
    color: var(--as-primary) !important;
}


/* Feature icons stay colorful, but softer */
.feature-icon-leads {
    background: #3478E8 !important;
}

.feature-icon-mobile {
    background: var(--as-primary) !important;
}

.feature-icon-revenue {
    background: var(--as-green) !important;
}

.feature-icon-telephony {
    background: var(--as-orange) !important;
}


/* =========================================================
   09. INTEGRATIONS
   ========================================================= */

.integration-section {
    /* background: var(--as-mint-soft) !important;
    background-image: none !important; */
}

.integration-section h1,
.integration-section h2,
.integration-section h3,
.integration-section h4,
.integration-section h5,
.integration-section h6 {
    color: var(--as-navy) !important;
}

.integration-section p {
    color: var(--as-text) !important;
}

.integration-section .text-primary {
    color: var(--as-primary) !important;
}

.integration-list li .single-integration {
    background: #FFFFFF !important;
    border: 1px solid var(--as-border);
    box-shadow: 0 7px 22px rgba(23, 35, 79, .045);
    transition: .25s ease;
    padding: 14px;
}

.integration-list li .single-integration:hover {
    border-color: rgba(242, 90, 79, .20);
    box-shadow: 0 13px 30px rgba(23, 35, 79, .08);
    transform: translateY(-3px);
}

.integration-list li .single-integration h6 {
    color: var(--as-navy) !important;
}

.integration-list {

    .smartflo-li {

        .single-integration {

            padding: 0px 0px 10px 0px;

        }

        img {

            max-width: 70px !important;
            max-height: fit-content !important;
            padding: 0px !important;

        }

    }

}


.integration-section {

    .integration-wrapper {
        margin-top: 42px;
    }

    .integration-list {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 24px;

        > li {
            min-width: 0;
        }
    }

    .single-integration {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        /* height: 132px; */
        padding: 18px 18px 16px;
        background: #ffffff;
        border: 1px solid #e5e9f2;
        border-radius: 8px;
        text-decoration: none;
        overflow: hidden;
        transition:
            transform 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;

        &:hover {
            transform: translateY(-4px);
            border-color: rgba(13, 110, 253, 0.22);
            box-shadow: 0 12px 28px rgba(31, 45, 61, 0.08);

            .integration-arrow {
                transform: translateX(3px);
                opacity: 1;
            }
        }
    }

    .integration-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        height: 52px;
    }

    .integration-logo {
        display: block;
        width: auto !important;
        max-width: 105px !important;
        height: 38px !important;
        object-fit: contain;
        object-position: left center;
        margin: 0px !important;
        box-shadow: none;
    }

    .integration-category {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 22px;
        padding: 3px 7px;
        border-radius: 3px;
        font-size: 9px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;

        &.crm {
            color: #2474d8;
            background: #edf5ff;
        }

        &.telephony {
            color: #14a68a;
            background: #e9fbf6;
        }

        &.social {
            color: #8c52d8;
            background: #f4edff;
        }

        &.forms {
            color: #d05b9a;
            background: #fff0f7;
        }
    }

    .integration-card-bottom {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        margin-top: auto;

        h6 {
            min-width: 0;
            margin: 0;
            padding-right: 4px;
            color: #14213d;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .integration-arrow {
        position: relative;
        flex: 0 0 22px;
        display: inline-block;
        width: 22px;
        height: 16px;
        margin-left: auto;
        transition: transform 0.25s ease;
/* 
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 18px;
            height: 1.5px;
            background: #2474d8;
            transform: translateY(-50%);
            transition: width 0.25s ease;
        }

        &::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 1px;
            width: 8px;
            height: 8px;
            border-top: 1.5px solid #2474d8;
            border-right: 1.5px solid #2474d8;
            transform: translateY(-50%) rotate(45deg);
        } */
    }

    .single-integration {

        &:hover {

            .integration-arrow {
                transform: translateX(4px);

                &::before {
                    width: 20px;
                }
            }
        }
    }

    @media (max-width: 1399px) {

        .integration-list {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
    }

    @media (max-width: 1199px) {

        .integration-list {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (max-width: 991px) {

        .integration-list {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }
    }

    @media (max-width: 767px) {

        .integration-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .single-integration {
            height: 126px;
            padding: 16px;
        }

        .integration-logo {
            max-width: 92px;
            height: 34px;
        }

        .integration-card-bottom {

            h6 {
                font-size: 13px;
            }
        }
    }

    @media (max-width: 480px) {

        .integration-list {
            grid-template-columns: 1fr;
        }

        .single-integration {
            height: 118px;
        }
    }
}

/* =========================================================
   10. CRM BUSINESS TABS
   Current HTML uses:
   <section class="ptb-120 bg-dark">
   ========================================================= */

#assign-crm-tabs-content {
    /* background: var(--as-peach-soft) !important;
    background-image: none !important;
    color: var(--as-text) !important; */
}

#assign-crm-tabs-content h1,
#assign-crm-tabs-content h2,
#assign-crm-tabs-content h3,
#assign-crm-tabs-content h4,
#assign-crm-tabs-content h5,
#assign-crm-tabs-content h6,
#assign-crm-tabs-content .text-white {
    color: var(--as-navy) !important;
}

#assign-crm-tabs-content p,
#assign-crm-tabs-content .text-white-50,
#assign-crm-tabs-content li,
#assign-crm-tabs-content span.text-white {
    color: var(--as-text) !important;
}

#assign-crm-tabs-content .fa-check,
#assign-crm-tabs-content .mdi-check {
    color: var(--as-primary) !important;
}

#assign-crm-tabs-content .link-with-icon,
#assign-crm-tabs-content a.text-white {
    color: var(--as-primary) !important;
}

#assign-crm-tabs {
    gap: 8px;
}

#assign-crm-tabs .nav-link {
    /* background: #FFFFFF !important; */
    color: var(--bs-nav-link-color) !important;
    padding-bottom: 10px;
    /* border: 1px solid var(--as-border) !important;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(23, 35, 79, .035); */
}

#assign-crm-tabs .nav-link:hover {
    /* background: var(--as-peach-soft-2) !important; */
    color: var(--bs-nav-link-hover-color) !important;
    /* border-color: #FFD8D1 !important; */
}

#assign-crm-tabs .nav-link.active {
    /* background: var(--as-primary) !important; */
    color: var(--bs-nav-pills-link-active-bg) !important;
    /* border-color: var(--as-primary) !important;
    box-shadow: 0 8px 20px rgba(242, 90, 79, .18); */
}


/* =========================================================
   11. PRICING
   ========================================================= */

.pricing-section {
    /* background: var(--as-blue-soft) !important;
    background-image: none !important; */
}

.pricing-section .single-pricing-wrap {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid var(--as-border);
    box-shadow: var(--as-shadow);
}

.pricing-section .single-pricing-wrap.bg-dark {
    background: var(--as-peach-soft) !important;
    background-image: none !important;
    border-color: #FFDCD6 !important;
}

.pricing-section .single-pricing-wrap.bg-dark h1,
.pricing-section .single-pricing-wrap.bg-dark h2,
.pricing-section .single-pricing-wrap.bg-dark h3,
.pricing-section .single-pricing-wrap.bg-dark h4,
.pricing-section .single-pricing-wrap.bg-dark h5,
.pricing-section .single-pricing-wrap.bg-dark h6,
.pricing-section .single-pricing-wrap.bg-dark .package-name,
.pricing-section .single-pricing-wrap.bg-dark .pricing-amount,
.pricing-section .single-pricing-wrap.bg-dark .text-white {
    color: var(--as-navy) !important;
}

.pricing-section .single-pricing-wrap.bg-dark p,
.pricing-section .single-pricing-wrap.bg-dark .text-white-50 {
    color: var(--as-text) !important;
}

.pricing-section .pricing-feature-list li i,
.pricing-section .pricing-feature-list li .fa-check {
    color: var(--as-green) !important;
}

.pricing-section .pricing-feature-list li .fa-times {
    color: #C7CED9 !important;
}


/* =========================================================
   12. FAQ / SUPPORT
   ========================================================= */

.hd-faq-section {
    /* background: var(--as-lavender-soft) !important; */
}

.hd-chat-box {
    background: var(--as-peach-soft) !important;
    background-image: none !important;
    border-radius: 20px;
}

.hd-chat-box h1,
.hd-chat-box h2,
.hd-chat-box h3,
.hd-chat-box h4,
.hd-chat-box h5,
.hd-chat-box h6 {
    color: var(--as-navy) !important;
}

.hd-chat-box p,
.hd-chat-box .text-white,
.hd-chat-box .text-white-50 {
    color: var(--as-text) !important;
}

.accordion-item {
    background: #FFFFFF !important;
    border-color: var(--as-border) !important;
}

.accordion-button {
    background: #FFFFFF !important;
    color: var(--as-navy) !important;
}

.accordion-button:not(.collapsed) {
    background: var(--as-peach-soft) !important;
    color: var(--as-navy) !important;
}

.accordion-button:focus {
    border-color: rgba(242, 90, 79, .22) !important;
    box-shadow: 0 0 0 .2rem rgba(242, 90, 79, .07) !important;
}


/* =========================================================
   13. FREE TRIAL CTA
   Current HTML:
   <section class="cta-subscribe bg-dark text-white ...">
   ========================================================= */

.cta-subscribe {
    background: var(--as-peach-soft) !important;
    background-image: none !important;
    color: var(--as-text) !important;
}

.cta-subscribe h1,
.cta-subscribe h2,
.cta-subscribe h3,
.cta-subscribe h4,
.cta-subscribe h5,
.cta-subscribe h6 {
    color: var(--as-navy) !important;
}

.cta-subscribe p,
.cta-subscribe .text-white,
.cta-subscribe .text-white-50,
.cta-subscribe .subscribe-feature-list span {
    color: var(--as-text) !important;
}

.cta-subscribe .text-warning {
    color: var(--as-primary) !important;
}

.cta-subscribe .subscribe-feature-list i {
    color: var(--as-green) !important;
}


/* Keep CTA decorative circles soft */
.cta-subscribe .bg-circle {
    opacity: .45;
}

.cta-subscribe .bg-dark-light {
    background: #222362 !important;
}

.cta-subscribe .bg-warning {
    background: #fd9503 !important;
}

.cta-subscribe .watch-now-btn {
    color: var(--as-navy);

    i {
        color: var(--as-navy);
    }
}


/* =========================================================
   14. RELATED BLOGS
   ========================================================= */

.related-blog-list {
    background: #FFFFFF !important;
}

.related-blog-list .single-article {
    background: #FFFFFF !important;
    border: 1px solid var(--as-border);
    box-shadow: 0 8px 25px rgba(23, 35, 79, .045);
}

.related-blog-list .article-title {
    color: var(--as-navy) !important;
}

.related-blog-list .article-content p {
    color: var(--as-text) !important;
}


/* =========================================================
   15. GENERIC DARK BLOCKS
   ---------------------------------------------------------
   This is intentionally scoped to MAIN content.
   Footer is NOT touched.
   ========================================================= */

main section.bg-dark:not(.footer-section),
main div.bg-dark {
    background: var(--as-lavender-soft) !important;
    background-image: none !important;
}

main section.bg-dark:not(.footer-section) h1,
main section.bg-dark:not(.footer-section) h2,
main section.bg-dark:not(.footer-section) h3,
main section.bg-dark:not(.footer-section) h4,
main section.bg-dark:not(.footer-section) h5,
main section.bg-dark:not(.footer-section) h6 {
    color: var(--as-navy) !important;
}

main section.bg-dark:not(.footer-section) p,
main section.bg-dark:not(.footer-section) li,
main section.bg-dark:not(.footer-section) .text-white,
main section.bg-dark:not(.footer-section) .text-white-50 {
    color: var(--as-text) !important;
}


/* =========================================================
   16. CARDS / SHADOWS
   ========================================================= */

.single-feature-card,
.single-service-card,
.single-blog-card {
    background: #FFFFFF !important;
    border-color: var(--as-border) !important;
    box-shadow: 0 9px 28px rgba(23, 35, 79, .05);
}


/* =========================================================
   17. FORMS
   ========================================================= */

.form-control,
.form-select {
    background: #FFFFFF !important;
    border-color: var(--as-border) !important;
    color: var(--as-navy);
}

.form-control::placeholder {
    color: #9AA3B3;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(242, 90, 79, .45) !important;
    box-shadow: 0 0 0 .2rem rgba(242, 90, 79, .07) !important;
}


/* =========================================================
   18. RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .customer-review {
        background: var(--as-lavender-soft) !important;
    }

    .crm-support-box {
        border-radius: 18px;
    }

    #assign-crm-tabs-content {
        background: var(--as-peach-soft) !important;
    }

    .feature-section,
    .two-bg-dark-light {
        background: var(--as-lavender-soft) !important;
    }

    .integration-section {
        background: var(--as-mint-soft) !important;
    }

    .pricing-section {
        background: var(--as-blue-soft) !important;
    }

    .cta-subscribe {
        background: var(--as-peach-soft) !important;
    }
}


@media (max-width: 575px) {

    .crm-support-box {
        border-radius: 15px;
    }

    .customer-review .review-info-wrap:hover {
        transform: none;
    }

    #assign-crm-tabs {
        gap: 6px;
    }

    #assign-crm-tabs .nav-link {
        margin-right: 0 !important;
        font-size: 13px;
        padding: 9px 12px;
    }
}


/* =========================================================
   END - ASSIGNSALES CRM / SAAS LIGHT UI v3
   ========================================================= */




/* .bg-dark{
    background: linear-gradient(145deg,rgba(255, 79, 45, 1) 0%, rgba(69, 42, 90, 1) 24%, rgba(34, 35, 98, 1) 100%);
} */


.navbar-brand {
    width: 200px;
}

.widget-img-1 {
    width: 34%;
    box-shadow: 0px 0px 12px -6px #444 !important;
}

.widget-img-3 {
    width: 34%;
    box-shadow: 0px 0px 12px -6px #444 !important;
}


.crm-support-area {
    .container {
        max-width: 1420px;
    }
}


.crm-support-box {
    /* background-color: #111827; */
    /* background: linear-gradient(145deg,rgba(255, 79, 45, 1) 0%, rgba(69, 42, 90, 1) 24%, rgba(34, 35, 98, 1) 100%); */
}

/* .crm-how-it-works::before{
    background-color: #111827;
    background: linear-gradient(145deg,rgba(255, 79, 45, 1) 0%, rgba(69, 42, 90, 1) 24%, rgba(34, 35, 98, 1) 100%);
} */

/* =========================================
   AssignSales Advanced Features
   ========================================= */
.feature-section {

    margin-top: 8rem;

}

.two-bg-dark-light {

    /* background-image: linear-gradient(-90deg, #ebeffb  40%, #fff 0); */
    /* background: linear-gradient(145deg,rgba(255, 79, 45, 1) 0%, rgba(69, 42, 90, 1) 24%, rgba(34, 35, 98, 1) 100%); */
    background: transparent;

}


.hd-faq-section {

    padding-top: 15rem;

    .accordion {

        max-height: 700px;
        overflow: auto;

    }

}


.feature-main-title {
    position: relative;
    line-height: 1.15;
}

/* .feature-main-title mark {
    display: inline-block;
    position: relative;
    color: inherit;
}

.feature-line-shape {
    position: absolute;
    width: 105px;
    max-width: none;
    height: auto;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    pointer-events: none;
} */


/* Feature Icons */

.feature-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;

    .text-white {
        color: var(--bs-white) !important;
    }
}


/* Lead Capture */
.feature-icon-leads {
    background: #2563eb;
}


/* Web & Mobile CRM */
.feature-icon-mobile {
    background: #ff5a3d;
}


/* Revenue Intelligence */
.feature-icon-revenue {
    background: #16b9a3;
}


/* Cloud Telephony */
.feature-icon-telephony {
    background: #f59e0b;
}


/* Larger Dashboard */

.feature-dashboard-image {
    width: 115%;
    max-width: none;
    margin-left: 3%;
    position: relative;
    z-index: 2;
}

.feature-dashboard-image img {
    width: 100%;
    height: auto;
    display: block;
}


/* Tablet */

@media (max-width: 1199px) {

    .feature-dashboard-image {
        width: 108%;
        margin-left: -2%;
    }

}


/* Mobile */

@media (max-width: 991px) {

    .feature-dashboard-image {
        width: 100%;
        margin-left: 0;
        margin-top: 30px;
    }

    .feature-line-shape {
        width: 90px;
        bottom: -10px;
    }

}


@media (max-width: 575px) {

    .feature-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 17px;
    }

    .feature-line-shape {
        width: 75px;
        bottom: -8px;
    }

}

/* =========================================================
   AssignSales Value Proposition
   ========================================================= */

.assignsales-dark-logo {
    /* display: inline-flex;
    align-items: center;
    justify-content: center; */
}

.assignsales-dark-logo img {
    max-width: 180px;
    width: 100%;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}


/* Icon + Number */

.value-icon {
    position: relative;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 16px;

    color: #4f8cff;

    transition: all 0.3s ease;
}


/* Main icon */

.value-icon i {
    font-size: 22px;
    line-height: 1;
}


/* Small number */

.value-icon span {
    position: absolute;
    top: -8px;
    right: -8px;

    min-width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #2563eb;
    color: #ffffff;

    border: 3px solid #101828;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 700;
}


/* Hover */

.review-info-wrap:hover .value-icon {
    transform: translateY(-4px);

    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.45);

    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.12);
}


/* Individual icon colors */

.review-info-wrap:nth-child(1) .value-icon {
    color: #4f8cff;
}

.review-info-wrap:nth-child(1) .value-icon span {
    background: #2563eb;
}


.review-info-wrap:nth-child(2) .value-icon {
    color: #ff6b6b;
}

.review-info-wrap:nth-child(2) .value-icon span {
    background: #ff4b4b;
}


.review-info-wrap:nth-child(3) .value-icon {
    color: #42d6a4;
}

.review-info-wrap:nth-child(3) .value-icon span {
    background: #10b981;
}


/* Mobile */

@media (max-width: 767px) {

    .assignsales-dark-logo img {
        max-width: 150px;
    }

    .value-icon {
        width: 52px;
        height: 52px;
    }

}





/* =========================================================
   Assign Brand - Common Heading Line Shape
   ========================================================= */

.assign-line-word {
    position: relative;
    display: inline-block;
    background-color: transparent;
    background-image: url("../img/shape/line-shape.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 9px;

    padding: 0 0 3px;
    margin: 0;
    color: #ff4f2d;
    line-height: 1.15;
    z-index: 1;
}


/* Slightly lower line for larger headings */
.assign-line-word--large {
    .assign-line-shape {
        bottom: -9px;
    }
}


/* For smaller headings */
.assign-line-word--small {
    .assign-line-shape {
        bottom: -5px;
    }
}


/* Responsive adjustment */
@media (max-width: 767px) {
    .assign-line-word {
        .assign-line-shape {
            bottom: -5px;
        }
    }

    .assign-line-word--large {
        .assign-line-shape {
            bottom: -6px;
        }
    }
}

/* ---------- Blog single page ---------- */

/* =========================================================
   ASSIGNSALES CUSTOM CSS
   Common styles for AssignSales Blog Single Pages

   Used by:
   blog-1.html
   blog-2.html
   blog-3.html
   blog-4.html
   ...
========================================================= */


/* =========================================================
   01. ASSIGNSALES BRAND VARIABLES
========================================================= */

:root {

    /* Primary Brand */
    --assign-primary: #EF3D3D;
    --assign-primary-dark: #D92F2F;
    --assign-primary-light: #FFF5F5;

    /* Secondary Theme Accents */
    --assign-green: #20FF7E;
    --assign-cyan: #4CD9ED;
    --assign-yellow: #FFC02D;

    /* Dark Theme */
    --assign-dark: #111827;
    --assign-dark-soft: #1B2432;

    /* Text */
    --assign-text: #273142;
    --assign-muted: #687386;

    /* Background */
    --assign-light: #F7F8FA;
    --assign-white: #FFFFFF;

    /* Border */
    --assign-border: #E8EBF0;

}


/* =========================================================
   02. BLOG SINGLE PAGE BASE
========================================================= */

.assign-blog-page {
    background: var(--assign-white);
    color: var(--assign-text);
}

.assign-blog-page img {
    max-width: 100%;
}

.assign-blog-page a {
    transition: all 0.25s ease;
}


/* =========================================================
   03. BLOG PAGE HEADER
========================================================= */

.assign-blog-header {

    position: relative;

    overflow: hidden;

    padding: 120px 0 125px;

    background-color: var(--assign-dark);

    background-image:
        url("../img/page-header-bg.svg");

    background-repeat: no-repeat;

    background-position: bottom left;

    background-size: cover;

}


/* Red Decorative Circle */

.assign-blog-header::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background: rgba(239, 61, 61, 0.11);

    right: -150px;
    top: -190px;

}


/* Outline Circle */

.assign-blog-header::after {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.08);

    right: 18%;
    bottom: -110px;

}


/* Container */

.assign-blog-header .container {

    position: relative;

    z-index: 2;

}


/* =========================================================
   04. BLOG BREADCRUMB
========================================================= */

.assign-blog-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 28px;

    font-size: 14px;

}


.assign-blog-breadcrumb a {

    color: rgba(255, 255, 255, 0.62);

    text-decoration: none;

}


.assign-blog-breadcrumb a:hover {

    color: var(--assign-white);

}


.assign-blog-breadcrumb span {

    color: rgba(255, 255, 255, 0.30);

}


.assign-blog-breadcrumb .current {

    color: rgba(255, 255, 255, 0.85);

}


/* =========================================================
   05. BLOG CATEGORY
========================================================= */

.assign-blog-category {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 15px;

    margin-bottom: 22px;

    border-radius: 50px;

    background: rgba(239, 61, 61, 0.14);

    border: 1px solid rgba(239, 61, 61, 0.25);

    color: #FF7777;

    font-size: 13px;

    font-weight: 700;

}


.assign-blog-category::before {

    content: "";

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--assign-primary);

}


/* =========================================================
   06. BLOG MAIN TITLE
========================================================= */

.assign-blog-header h1 {

    max-width: 920px;

    margin: 0;

    color: var(--assign-white);

    line-height: 1.13;

}


/* =========================================================
   07. DECORATIVE DOT GRID
========================================================= */

.assign-blog-dot-grid {

    position: absolute;

    right: 7%;

    bottom: 55px;

    width: 112px;

    height: 80px;

    opacity: 0.35;

    background-image:
        radial-gradient(rgba(255, 255, 255, 0.65) 1.3px,
            transparent 1.3px);

    background-size: 14px 14px;

}


/* =========================================================
   08. BLOG DETAILS SECTION
========================================================= */

.assign-blog-details {

    padding: 120px 0;

    background: var(--assign-white);

}


/* =========================================================
   09. BLOG ARTICLE
========================================================= */

.assign-blog-main {

    max-width: 850px;

}


.assign-blog-main p {

    color: var(--assign-text);

    font-size: 17px;

    line-height: 1.85;

    margin-bottom: 24px;

}


.assign-blog-main strong {

    font-weight: 700;

}


/* =========================================================
   10. BLOG SECTION HEADINGS
========================================================= */

.assign-blog-main h2 {

    position: relative;

    color: var(--assign-dark);

    font-size: 30px;

    line-height: 1.3;

    font-weight: 700;

    margin-top: 65px;

    margin-bottom: 28px;

    padding-left: 18px;

}


/* Red Heading Accent */

.assign-blog-main h2::before {

    content: "";

    position: absolute;

    left: 0;

    top: 4px;

    width: 4px;

    height: calc(100% - 8px);

    border-radius: 10px;

    background: var(--assign-primary);

}


/* =========================================================
   11. BLOG FEATURED IMAGE
========================================================= */

.assign-blog-feature {

    position: relative;

    margin-bottom: 55px;

}


.assign-blog-feature img {

    width: 100%;

    display: block;

    border-radius: 18px;

}


/* Decorative Circle */

.assign-blog-feature::after {

    content: "";

    position: absolute;

    width: 75px;
    height: 75px;

    border-radius: 50%;

    background: var(--assign-cyan);

    opacity: 0.18;

    right: -25px;

    bottom: -25px;

    z-index: -1;

}


/* =========================================================
   12. BLOG LIST
========================================================= */

.assign-blog-list {

    list-style: none;

    padding: 0;

    margin: 25px 0 30px;

}


.assign-blog-list li {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 12px 16px;

    margin-bottom: 8px;

    border-radius: 10px;

    background: #F8F9FB;

    color: var(--assign-text);

    line-height: 1.6;

    transition: all 0.25s ease;

}


.assign-blog-list li::before {

    content: "\f00c";

    flex: 0 0 21px;

    width: 21px;
    height: 21px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 2px;

    border-radius: 50%;

    background: rgba(239, 61, 61, 0.10);

    color: var(--assign-primary);

    font-family: "Font Awesome 5 Free";

    font-size: 10px;

    font-weight: 900;

}


.assign-blog-list li:hover {

    transform: translateX(4px);

    background: rgba(239, 61, 61, 0.04);

}


/* =========================================================
   13. BLOG FEATURE / REQUIREMENT GRID
========================================================= */

.assign-feature-grid,
.assign-lookfor-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 25px;

}


/* =========================================================
   14. FEATURE CARD
========================================================= */

.assign-feature-item,
.assign-lookfor-card {

    position: relative;

    min-height: 92px;

    padding: 23px 22px 23px 62px;

    border: 1px solid var(--assign-border);

    border-radius: 13px;

    background: var(--assign-white);

    box-shadow:
        0 8px 28px rgba(17, 24, 39, 0.04);

    transition: all 0.3s ease;

}


/* Hover */

.assign-feature-item:hover,
.assign-lookfor-card:hover {

    transform: translateY(-4px);

    border-color: rgba(239, 61, 61, 0.20);

    box-shadow:
        0 14px 35px rgba(17, 24, 39, 0.08);

}


/* =========================================================
   15. FEATURE NUMBER / ICON
========================================================= */

.assign-feature-number,
.assign-lookfor-icon {

    position: absolute;

    left: 20px;

    top: 22px;

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: rgba(239, 61, 61, 0.09);

    color: var(--assign-primary);

    font-size: 12px;

    font-weight: 800;

}


/* =========================================================
   16. FEATURE CARD TITLE
========================================================= */

.assign-feature-item h3,
.assign-lookfor-card h3 {

    margin: 0;

    color: var(--assign-dark);

    font-size: 16px;

    line-height: 1.4;

}


/* =========================================================
   17. ASSIGNSALES HIGHLIGHT BLOCK
========================================================= */

.assign-sales-block {

    position: relative;

    overflow: hidden;

    margin-top: 50px;

    padding: 38px;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            #FFF5F5 0%,
            #FFFFFF 65%);

    border: 1px solid rgba(239, 61, 61, 0.13);

}


/* Cyan Decorative Shape */

.assign-sales-block::before {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background: rgba(76, 217, 237, 0.10);

    right: -95px;

    top: -85px;

}


/* Green Decorative Shape */

.assign-sales-block::after {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: rgba(32, 255, 126, 0.08);

    left: -55px;

    bottom: -55px;

}


/* Keep content above decorations */

.assign-sales-block h2,
.assign-sales-block p,
.assign-sales-block ul {

    position: relative;

    z-index: 2;

}


/* Heading inside highlight */

.assign-sales-block h2 {

    margin-top: 0;

}


/* =========================================================
   18. ASSIGNSALES INTEGRATION TAGS
========================================================= */

.assign-integrations {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;

}


.assign-integration {

    padding: 9px 14px;

    border-radius: 8px;

    background: var(--assign-white);

    border: 1px solid var(--assign-border);

    color: var(--assign-text);

    font-size: 13px;

    font-weight: 600;

    transition: all 0.25s ease;

}


.assign-integration:hover {

    border-color: rgba(239, 61, 61, 0.25);

    color: var(--assign-primary);

}


/* =========================================================
   19. CONCLUSION BLOCK
========================================================= */

.assign-conclusion {

    position: relative;

    overflow: hidden;

    margin-top: 55px;

    padding: 38px;

    border-radius: 18px;

    background: var(--assign-dark);

}


/* Outline Circle */

.assign-conclusion::before {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.07);

    right: -60px;

    top: -80px;

}


/* Green Circle */

.assign-conclusion::after {

    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    border-radius: 50%;

    background: rgba(32, 255, 126, 0.08);

    left: -30px;

    bottom: -35px;

}


/* Conclusion Heading */

.assign-conclusion h2 {

    position: relative;

    z-index: 2;

    color: var(--assign-white);

    margin-top: 0;

}


/* Green heading line */

.assign-conclusion h2::before {

    background: var(--assign-green);

}


/* Conclusion Text */

.assign-conclusion p {

    position: relative;

    z-index: 2;

    color: rgba(255, 255, 255, 0.82);

}


.assign-conclusion strong {

    color: var(--assign-white);

}


/* =========================================================
   20. BLOG SIDEBAR
========================================================= */

.assign-blog-sidebar {

    position: sticky;

    top: 100px;

}


/* =========================================================
   21. TABLE OF CONTENTS
========================================================= */

.assign-toc {

    padding: 30px;

    border-radius: 18px;

    background: var(--assign-light);

    border: 1px solid var(--assign-border);

}


/* Label */

.assign-toc-label {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--assign-primary);

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}


/* Title */

.assign-toc h3 {

    margin-bottom: 22px;

    color: var(--assign-dark);

    font-size: 21px;

    line-height: 1.35;

}


/* List */

.assign-toc ul {

    list-style: none;

    padding: 0;

    margin: 0;

}


/* List Item */

.assign-toc li {

    border-bottom: 1px solid #E6E9EE;

}


.assign-toc li:last-child {

    border-bottom: 0;

}


/* Links */

.assign-toc a {

    display: block;

    padding: 13px 0;

    color: var(--assign-text);

    font-size: 14px;

    line-height: 1.45;

    text-decoration: none;

}


.assign-toc a:hover {

    color: var(--assign-primary);

    padding-left: 5px;

}


/* =========================================================
   22. SIDEBAR BRAND CARD
========================================================= */

.assign-sidebar-accent {

    position: relative;

    overflow: hidden;

    margin-top: 20px;

    padding: 28px;

    border-radius: 18px;

    background: var(--assign-dark);

}


/* Green Decoration */

.assign-sidebar-accent::before {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: rgba(32, 255, 126, 0.11);

    right: -45px;

    top: -45px;

}


/* Cyan Decoration */

.assign-sidebar-accent::after {

    content: "";

    position: absolute;

    width: 60px;
    height: 60px;

    border-radius: 50%;

    background: rgba(76, 217, 237, 0.10);

    left: -25px;

    bottom: -25px;

}


/* Small Text */

.assign-sidebar-accent span {

    position: relative;

    z-index: 2;

    color: rgba(255, 255, 255, 0.65);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}


/* Main Text */

.assign-sidebar-accent strong {

    position: relative;

    z-index: 2;

    display: block;

    margin-top: 8px;

    color: var(--assign-white);

    font-size: 20px;

    line-height: 1.4;

}


/* =========================================================
   23. BLOG CTA WRAPPER
========================================================= */

.assign-blog-cta-wrap {

    margin-top: 100px;

}


/* =========================================================
   24. BLOG CTA
========================================================= */

.assign-blog-cta {

    position: relative;

    overflow: hidden;

    padding: 65px 50px;

    border-radius: 20px;

    background:

        url("../img/page-header-bg.svg") center bottom / cover no-repeat,

        var(--assign-dark);

}


/* Red Decoration */

.assign-blog-cta::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(239, 61, 61, 0.10);

    left: -110px;

    bottom: -150px;

}


/* Green Decoration */

.assign-blog-cta::after {

    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: rgba(32, 255, 126, 0.08);

    right: 8%;

    top: -55px;

}


/* CTA Content */

.assign-blog-cta-content {

    position: relative;

    z-index: 2;

}


/* =========================================================
   25. BLOG BUTTONS
========================================================= */

.assign-blog-page .btn-primary {

    background: var(--assign-primary);

    border-color: var(--assign-primary);

}


.assign-blog-page .btn-primary:hover {

    background: var(--assign-primary-dark);

    border-color: var(--assign-primary-dark);

}


/* =========================================================
   26. BLOG OUTLINE BUTTON
========================================================= */

.assign-blog-page .btn-outline-primary {

    color: var(--assign-primary);

    border-color: var(--assign-primary);

}


.assign-blog-page .btn-outline-primary:hover {

    color: var(--assign-white);

    background: var(--assign-primary);

    border-color: var(--assign-primary);

}


/* =========================================================
   27. BLOG INLINE LINKS
========================================================= */

.assign-blog-main a:not(.btn) {

    color: var(--assign-primary);

}


.assign-blog-main a:not(.btn):hover {

    color: var(--assign-primary-dark);

}


/* =========================================================
   28. COMMON BLOG SECTION SPACING
========================================================= */

.assign-blog-main section {

    scroll-margin-top: 100px;

}


/* =========================================================
   29. RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1199px) {

    .assign-blog-header {

        padding: 100px 0 105px;

    }

    .assign-blog-details {

        padding: 100px 0;

    }

    .assign-blog-main {

        max-width: 100%;

    }

}


/* =========================================================
   30. RESPONSIVE - MOBILE / TABLET
========================================================= */

@media (max-width: 991px) {

    .assign-blog-header {

        padding: 90px 0;

    }


    .assign-blog-details {

        padding: 80px 0;

    }


    .assign-blog-sidebar {

        position: static;

        margin-top: 55px;

    }


    .assign-blog-main h2 {

        font-size: 27px;

    }


    .assign-blog-feature {

        margin-bottom: 45px;

    }


    .assign-blog-cta-wrap {

        margin-top: 70px;

    }

}


/* =========================================================
   31. RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .assign-blog-header {

        padding: 75px 0 80px;

    }


    .assign-blog-header h1 {

        font-size: 38px;

        line-height: 1.18;

    }


    .assign-blog-breadcrumb {

        margin-bottom: 22px;

        font-size: 13px;

    }


    .assign-blog-details {

        padding: 65px 0;

    }


    .assign-blog-main p {

        font-size: 16px;

        line-height: 1.8;

    }


    .assign-blog-main h2 {

        font-size: 25px;

        margin-top: 50px;

        margin-bottom: 24px;

    }


    .assign-feature-grid,
    .assign-lookfor-grid {

        grid-template-columns: 1fr;

    }


    .assign-blog-list li {

        padding: 11px 13px;

    }


    .assign-sales-block,
    .assign-conclusion {

        padding: 28px 22px;

    }


    .assign-blog-cta {

        padding: 45px 25px;

    }


    .assign-blog-dot-grid {

        right: 4%;

        bottom: 25px;

        transform: scale(0.75);

        transform-origin: right bottom;

    }

}


/* =========================================================
   32. RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .assign-blog-header h1 {

        font-size: 32px;

    }


    .assign-blog-category {

        font-size: 12px;

        padding: 6px 13px;

    }


    .assign-blog-feature img {

        border-radius: 14px;

    }


    .assign-blog-feature::after {

        width: 55px;

        height: 55px;

        right: -15px;

        bottom: -15px;

    }


    .assign-toc {

        padding: 24px;

    }


    .assign-sidebar-accent {

        padding: 24px;

    }


    .assign-blog-cta {

        border-radius: 16px;

    }

}


/* =========================================================
   END - ASSIGNSALES BLOG SINGLE PAGE CSS
========================================================= */


.hd-chat-box {
    background: linear-gradient(145deg, rgba(255, 79, 45, 1) 0%, rgba(69, 42, 90, 1) 24%, rgba(34, 35, 98, 1) 100%);
}


/* 
.integration-list li .single-integration img {
    max-width: fit-content;
    padding: 0px 10px;
} */

/* =========================================================
   Integration Single Pages
   Common Styles
========================================================= */

/* .integration-content-block h2 {
    margin-bottom: 25px;
}


/* Workflow */

.integration-workflow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 25px;
    background: var(--bs-light);
    border-radius: 12px;
}

.integration-workflow span {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-heading-color);
    white-space: nowrap;
}

.integration-workflow i {
    font-size: 13px;
    color: var(--bs-primary);
}


/* Integration Feature */

.integration-feature-info {
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.integration-feature-info:last-child {
    border-bottom: 0;
}

.integration-feature-info h3 {
    margin-bottom: 12px;
}

.integration-feature-info p {
    margin-bottom: 0;
    line-height: 1.8;
}


/* Support */

.integration-support-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.integration-support-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.integration-support-item i {
    width: 20px;
    margin-top: 4px;
    color: var(--bs-primary);
    flex-shrink: 0;
}

.integration-support-item a {
    color: var(--bs-body-color);
    text-decoration: none;
    word-break: break-word;
    line-height: 1.5;
}

.integration-support-item a:hover {
    color: var(--bs-primary);
}


/* Sidebar CTA */

.integration-sidebar-cta .btn {
    min-height: 48px;
}


/* Responsive */

@media (max-width: 767px) {

    .integration-workflow {
        padding: 20px;
    }

    .integration-workflow span {
        width: 100%;
        justify-content: center;
    }

    .integration-workflow i {
        display: none;
    }

    .integration-feature-info {
        padding-bottom: 20px;
    }

} */



/* =====================================================
    GLOSSARY HERO
====================================================== */

.assignsales-glossary-hero {
    background:
        url('../img/page-header-bg.svg') no-repeat center center;
    background-size: cover;
}


.assignsales-glossary-hero .hero-content-wrap {
    max-width: 850px;
    margin: 0 auto;
}


.assignsales-glossary-hero h1 {
    margin-bottom: 15px;
}


.assignsales-glossary-hero p {
    max-width: 700px;
    margin: 0 auto;
}


/* =====================================================
    ALPHABET NAVIGATION
====================================================== */

.glossary-alphabet-wrap {
    position: sticky;
    top: 75px;
    z-index: 8;
    background: #fff;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
}


.glossary-alphabet {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 18px 0;
}


.glossary-alphabet a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-body-color);
    background: #f7f8fa;
    text-decoration: none;
    transition: all .2s ease;
}


.glossary-alphabet a:hover,
.glossary-alphabet a.active {
    color: #fff;
    background: var(--primary-color, #175cff);
}


/* =====================================================
    GLOSSARY CONTENT
====================================================== */

.glossary-content-section {
    padding: 90px 0 120px;
}


.glossary-letter-section {
    scroll-margin-top: 145px;
    margin-bottom: 65px;
}


.glossary-letter-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}


.glossary-letter-heading span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-color, #175cff);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}


.glossary-letter-heading h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}


.glossary-letter-line {
    flex: 1;
    height: 1px;
    background: #e9e9e9;
}


/* =====================================================
    TERM
====================================================== */

.glossary-term {
    padding: 0 0 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
}


.glossary-term:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}


.glossary-term h3 {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--heading-color, #1d2939);
}


.glossary-term p {
    max-width: 900px;
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: #667085;
}


/* =====================================================
    ACRONYM SECTION
====================================================== */

.glossary-acronym-section {
    margin-top: 20px;
    padding-top: 10px;
}


.glossary-acronym-table {
    border: 1px solid #eeeeee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}


.glossary-acronym-table table {
    margin: 0;
}


.glossary-acronym-table th {
    background: #f7f8fa;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 18px;
}


.glossary-acronym-table td {
    padding: 13px 18px;
    font-size: 14px;
    color: #667085;
    vertical-align: middle;
}


.glossary-acronym-table td:first-child {
    width: 180px;
    font-weight: 700;
    color: var(--heading-color, #1d2939);
}


/* =====================================================
    RESPONSIVE
====================================================== */

@media (max-width: 991px) {

    .glossary-alphabet-wrap {
        position: relative;
        top: auto;
    }

    .glossary-content-section {
        padding: 70px 0 90px;
    }

}


@media (max-width: 575px) {

    .glossary-alphabet {
        gap: 5px;
        padding: 14px 8px;
    }


    .glossary-alphabet a {
        width: 31px;
        height: 31px;
        font-size: 12px;
    }


    .glossary-content-section {
        padding: 55px 0 70px;
    }


    .glossary-letter-section {
        margin-bottom: 50px;
        scroll-margin-top: 20px;
    }


    .glossary-letter-heading h2 {
        font-size: 22px;
    }


    .glossary-term h3 {
        font-size: 16px;
    }


    .glossary-term p {
        font-size: 13px;
    }


    .glossary-acronym-table {
        overflow-x: auto;
    }


    .glossary-acronym-table table {
        min-width: 500px;
    }

}



/* =========================================================
   ASSIGNSALES - JOIN ASPL
   Page-specific additions for assets/css/custom.css
   Existing Quiety/AssignSales theme classes remain the base.
   ========================================================= */

.join-aspl-hero {
    background: #f7f9fc;
    isolation: isolate;
}

.join-aspl-hero-content {
    position: relative;
    z-index: 4;
}

.join-aspl-hero-content h1 {
    max-width: 760px;
}

.join-aspl-hero-content .lead {
    max-width: 720px;
    color: #687386;
    line-height: 1.75;
}

.join-aspl-hero-visual {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.join-aspl-hero-card {
    position: relative;
    z-index: 3;
    max-width: 360px;
    padding: 38px;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .08);
}

.join-aspl-hero-card p {
    color: #687386;
    line-height: 1.7;
}

.join-aspl-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(37, 99, 235, .12);
}

.orbit-one {
    width: 300px;
    height: 300px;
}

.orbit-two {
    width: 210px;
    height: 210px;
    border-color: rgba(239, 76, 76, .10);
}

.join-aspl-dot-pattern {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 420px;
    height: 250px;
    background-image: radial-gradient(rgba(37, 99, 235, .16) 1.1px, transparent 1.1px);
    background-size: 15px 15px;
    opacity: .42;
    mask-image: linear-gradient(to right, #000, transparent);
    z-index: 1;
}

.join-aspl-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.join-aspl-shape-one {
    width: 220px;
    height: 220px;
    right: -100px;
    top: -100px;
    border: 35px solid rgba(38, 31, 117, .07);
}

.join-aspl-shape-two {
    width: 140px;
    height: 140px;
    right: 10%;
    bottom: -85px;
    border: 24px solid rgba(239, 76, 76, .06);
}

.join-aspl-value-card {
    border: 1px solid #e9edf3;
    transition: transform .2s ease, box-shadow .2s ease;
}

.join-aspl-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, .08);
}

.join-aspl-value-card p {
    color: #687386;
    line-height: 1.7;
}

.career-opportunities-panel {
    position: relative;
    overflow: hidden;
}

.career-opportunities-panel::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    top: -120px;
    border: 35px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.join-aspl-talent-section {
    border-top: 1px solid #e9edf3;
}

@media (max-width: 991px) {
    .join-aspl-hero {
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .join-aspl-hero-visual {
        min-height: 300px;
    }
}

@media (max-width: 575px) {
    .join-aspl-hero {
        padding-top: 70px;
        padding-bottom: 65px;
    }

    .join-aspl-hero-content h1 {
        font-size: 34px;
    }

    .join-aspl-hero-content .lead {
        font-size: 15px;
    }

    .join-aspl-hero-card {
        padding: 28px;
    }

    .join-aspl-orbit {
        transform: scale(.8);
    }

    .join-aspl-dot-pattern {
        width: 240px;
        height: 180px;
    }
}



/* -------- Footer -------- */

.footer-section {

    .footer-top {

        background: var(--as-peach-soft);


        .footer-single-col {

            img {
                max-width: 180px;
            }

            p {
                color: vavar(--assign-dark-soft);
            }

        }

        .footer-nav-list {

            a {
                color: var(--assign-dark-soft);
            }

        }

    }

}

/* =========================================================
   ASSIGNSALES HOME PAGE
   PRICING SECTION
========================================================= */

.assignsales-home-pricing {

    background: #ffffff;


    /* =====================================================
       SECTION HEADING
    ===================================================== */

    .section-heading {

        h4 {
            color: #f45b52;
        }

        h2 {
            color: #071a52;
        }

        p {
            max-width: 680px;
            margin-left: auto;
            margin-right: auto;

            color: #667085;
            line-height: 1.7;
        }
    }


    /* =====================================================
       MONTHLY / YEARLY SWITCH
    ===================================================== */

    .pricing-switch-wrap {
        display: flex;
        justify-content: center;
    }


    .pricing-tab-list {
        display: inline-flex;

        padding: 5px;

        gap: 4px;

        background: #f1f3f7;
        border-radius: 50px;


        .nav-link {
            min-width: 100px;

            padding: 9px 22px;

            border: 0;
            border-radius: 40px;

            background: transparent;

            color: #071a52;

            font-size: 14px;
            font-weight: 600;

            transition: all 0.25s ease;


            &:hover {
                color: #f45b52;
            }


            &.active {
                background: #f45b52;
                color: #ffffff;
            }
        }
    }


    /* =====================================================
       PRICING CARD
    ===================================================== */

    .qty-price-card {

        position: relative;

        height: 100%;
        min-height: 570px;

        padding: 30px 30px 105px;

        background: #f3f5f8;

        border: 0;

        border-radius: 16px 16px 16px 16px;

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;

        .qty-price-card__price {

            .qty-price-card__price-is {

                color: #000139;

            }

        }

        .qty-price-card__feature-title{
            color: #000139;
        }
        

        .qty-price-card__users {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 14px;
            margin-top: 10px;
            font-size: 13px;
            font-weight: 600;
            color: #596780;

            i {
                font-size: 12px;
                color: #ff5a4f;
            }
        }
        

        .qty-price-card__plan-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            margin-bottom: 5px;
            padding: 8px 10px;
            border-radius: 15px;
            background: rgba(244, 91, 82, 0.10);
            border: 1px solid rgba(244, 91, 82, 0.16);
            color: #f45b52;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.2px;
            white-space: nowrap;
            position: absolute;
            top: 0px;
            right: 0px;

            &top-choice{

                background: rgb(0 1 57 / 16%);
                border: 1px solid rgb(0 1 57 / 16%);
                color: #071a52;

            }

        }

        .qty-price-card__title-name {
            display: block;
        }

        &:hover {

            transform: translateY(-5px);

            box-shadow: 0 18px 45px rgba(7, 26, 82, 0.08);




            .qty-price-card__head-icon {

                background: #f45b52;

                img {
                    filter: brightness(0) invert(1);
                }

            }


            .qty-price-card__feature-icon {

                i {
                    color: #f45b52;
                }
            }

            .qty-price-card__btn-content {

                background: #f45b52;
            }

            .qty-price-card__price {

                .qty-price-card__price-is {

                    color: #f45b52;

                }

            }

            .qty-price-card__feature-title {

                color: #f45b52;

            }

        }


        /* =================================================
           CARD HEADER
        ================================================= */

        &__head {

            display: flex;
            align-items: center;

            gap: 16px;

            min-height: 72px;

            margin-bottom: 25px;
        }


        &__head-icon {

            width: 72px;
            height: 72px;

            display: flex;
            align-items: center;
            justify-content: center;

            flex: 0 0 72px;

            background: #d9dbde;

            border-radius: 14px;


            img {

                max-width: 42px;
                max-height: 42px;

                object-fit: contain;
            }
        }


        &__title {

            &-sub {

                display: block;

                margin-bottom: 4px;

                color: #667085;

                font-size: 12px;
                line-height: 1.4;
                font-weight: 500;
            }


            &-name {

                display: block;

                color: #071a52;

                font-size: 23px;
                line-height: 1.2;
                font-weight: 600;
            }
        }


        /* =================================================
           CARD DESCRIPTION
        ================================================= */

        &__details {

            min-height: 50px;

            margin-bottom: 25px;

            color: #667085;

            font-size: 15px;
            line-height: 1.65;
        }


        /* =================================================
           PRICE
        ================================================= */

        &__price {

            display: flex;
            align-items: baseline;

            gap: 8px;

            margin-bottom: 25px;


            &-is {

                color: #004b59;

                font-size: 46px;
                line-height: 1;

                font-weight: 700;

                letter-spacing: -1px;
            }


            &-text {

                color: #667085;

                font-size: 17px;
                line-height: 1;
            }
        }


        /* =================================================
           FEATURE HEADING
        ================================================= */

        &__feature-title {

            display: block;

            margin-bottom: 20px;

            color: #071a52;

            font-size: 17px;
            font-weight: 700;
        }


        /* =================================================
           FEATURE LIST
        ================================================= */

        >.list {

            display: flex;
            flex-direction: column;

            gap: 14px !important;

            margin: 0;

            padding: 0;

            list-style: none;


            li {

                margin: 0;
                padding: 0;

                color: #071a52;

                font-size: 15px;
                line-height: 1.5;


                >div {

                    min-height: 24px;
                }
            }
        }


        /* =================================================
           FEATURE ICON
        ================================================= */

        &__feature-icon {

            width: 17px;
            height: 17px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            flex: 0 0 17px;


            i {

                color: #071a52;

                font-size: 15px;

                transition: color 0.2s ease;
            }
        }


        /* =================================================
           FADED FEATURES
        ================================================= */

        >.list {

            li.opacity-25 {

                opacity: 0.24 !important;


                .qty-price-card__feature-icon {

                    i {
                        color: #6f7785;
                    }
                }


                .qty-price-card__feature-text {
                    color: #071a52;
                }
            }
        }


        /* =================================================
           POPULAR / MIDDLE CARD
        ================================================= */

        &.popular {

            background: #f3f5f8;


            .qty-price-card__head-icon {

                background: #f45b52;


                img {
                    filter: brightness(0) invert(1);
                }
            }


            .qty-price-card__feature-icon {

                i {
                    color: #f45b52;
                }
            }

            .qty-price-card__price {

                .qty-price-card__price-is {

                    color: #f45b52;

                }

            }

            .qty-price-card__feature-title {

                color: #f45b52;

            }
        }


        /* =================================================
           FLOATING ARROW BUTTON
        ================================================= */

        &__btn {

            position: absolute;

            right: 12px;
            bottom: 12px;

            width: 104px;
            height: 94px;

            display: flex;
            align-items: flex-end;
            justify-content: flex-end;

            padding: 12px;

            background: #ffffff;

            border-radius: 20px 0 16px 0;

            text-decoration: none;

            z-index: 5;


            &-content {

                width: 72px;
                height: 80px;

                display: flex;
                align-items: center;
                justify-content: center;

                background: #d8dadd;

                border-radius: 14px;

                transition:
                    transform 0.25s ease,
                    background 0.25s ease;


                img {

                    width: 34px;
                    height: 34px;

                    object-fit: contain;
                }
            }


            &:hover {

                .qty-price-card__btn-content {

                    transform: translate(3px, 3px);
                }
            }
        }


        /* =================================================
           POPULAR ARROW
        ================================================= */

        &.popular {

            .qty-price-card__btn-content {

                background: #f45b52;
            }
        }


        /* =================================================
           YEARLY LABEL
        ================================================= */

        small {

            display: block;

            color: #667085 !important;

            font-size: 12px;
        }
    }


    /* =====================================================
       COMPARISON LINK
    ===================================================== */

    .pricing-comparison-link {

        display: inline-flex;
        align-items: center;

        color: #f45b52;

        font-size: 15px;
        font-weight: 600;

        text-decoration: none;


        &:hover {
            color: #071a52;
        }
    }


    /* =====================================================
       TABLET
    ===================================================== */

    @media (max-width: 991px) {

        .qty-price-card {

            min-height: 560px;

            padding-left: 30px;
            padding-right: 30px;


            &__price {

                &-is {
                    font-size: 40px;
                }
            }
        }
    }


    /* =====================================================
       MOBILE
    ===================================================== */

    @media (max-width: 767px) {

        .pricing-tab-list {

            .nav-link {

                min-width: 90px;

                padding: 8px 16px;
            }
        }


        .qty-price-card {

            min-height: auto;

            padding: 28px 28px 100px;


            &__title {

                &-name {
                    font-size: 21px;
                }
            }


            &__price {

                &-is {
                    font-size: 38px;
                }
            }


            &__btn {

                width: 94px;
                height: 86px;


                &-content {

                    width: 66px;
                    height: 70px;
                }
            }
        }
    }



}



/* --------------- Feature Page ------------------- */


.feature-section {

    .feature-grid {

        .feature-card {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;

            .feature-icon {
                width: 46px;
                height: 46px;
                min-width: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                line-height: normal;
                margin-bottom: 18px;
            }

            .feature-content {
                flex: 1;
                display: flex;
                flex-direction: column;

                ul {
                    li {
                        font-size: 0.9rem;
                        color: var(--as-text)
                    }
                }

            }

            .ins-service-explore {
                display: inline-flex;
                align-items: center;
                align-self: flex-end;
                gap: 4px;
                margin-top: auto;
                padding-top: 24px;
                color: #ff4f2d;
                font-size: 14px;
                font-weight: 700;
                line-height: 1.2;
                text-decoration: none;
                transition: color 0.25s ease;

                span {
                    display: inline-flex;
                    align-items: center;
                    transition: transform 0.25s ease;
                }

                svg {
                    display: block;
                    width: 53px;
                    height: 9px;
                }

                &:hover {
                    color: var(--as-secondary);

                    span {
                        transform: translateX(4px);
                    }

                    svg path {
                        stroke: var(--as-secondary);
                    }

                    svg path:last-child {
                        fill: var(--as-secondary);
                    }
                }
            }
            &:hover{
                border-color: var(--as-primary) !important;
            }
        }
    }
}






/* =========================================================
   ASSIGNSALES
   PRICING COMPARISON PAGE
========================================================= */

.assignsales-pricing-compare {

    position: relative;
    background: #fff8f6;

    /* SECTION HEADING */
    .crm-title {

        .crm-subtitle {
            display: inline-flex;
            align-items: center;
            color: #f45b52;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;

            img {
                width: 28px;
                height: auto;
            }
        }

        .clr-text {
            color: #071a52;
            font-weight: 700;
        }
    }

    /* SPECIAL FEATURES */
    .crm-special-features {
        gap: 8px 22px;
        margin-top: 12px !important;

        li {
            display: inline-flex;
            align-items: center;
            color: #667085;
            font-size: 14px;
            line-height: 1.5;
        }

        .dot {
            width: 7px;
            height: 7px;
            display: inline-block;
            flex: 0 0 7px;
            background: #f45b52;
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(244, 91, 82, 0.10);
        }
    }

    /* MAIN PLAN TABLE */
    .crm-pricing-table {
        overflow: hidden;
        background: #ffffff !important;
        border: 1px solid #edf0f5;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(7, 26, 82, 0.06);

        table {
            margin-bottom: 0;
            color: #071a52;
            border-color: #edf0f5;

            th {
                background: #ffffff;
                border-color: #e9edf3;
                vertical-align: middle;
            }
        }
    }

    /* FEATURE COLUMN HEADER */
    /* =========================================================
   FEATURE COLUMN HEADER
========================================================= */

.crm-pricing-switch-wrapper {
    min-width: 280px;
    padding: 24px 24px 24px !important;
    background: #ffffff !important;
    vertical-align: middle;

    .title {
        display: block;
        margin-bottom: 16px;
        color: #071a52;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.4;
    }

    .crm-offer-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: 24px;
        margin-bottom: 10px;
        padding: 4px 9px;
        background: rgba(244, 91, 82, 0.08);
        border: 1px solid rgba(244, 91, 82, 0.12);
        border-radius: 20px;
        color: #f45b52;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        margin-left: 70%;
    }

    .arrow-shape {
        position: absolute;
        left: 214px;
        top: 30px;
        width: 80px;
        max-width: 110px;
        height: auto;
        opacity: 0.75;
        pointer-events: none;
        transform: rotate(-100deg);
    }
}


/* =========================================================
   MONTHLY / YEARLY PRICING SWITCH
========================================================= */

.crm-pricing-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 0;
    position: relative;
    left: 28%;

    button {
        position: relative;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #98a2b3;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        transition:
            color 0.25s ease,
            font-weight 0.25s ease;

        &:hover {
            color: #f45b52;
        }

        &.active {
            color: #071a52;
            font-weight: 700;
        }
    }

    .crm-switch {
        position: relative;
        display: inline-block;
        flex: 0 0 46px;
        width: 46px;
        height: 25px;
        margin: 0 1px;

        .crm-checkbox-switch {
            position: absolute;
            inset: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }

        .crm-switch-dot {
            position: absolute;
            inset: 0;
            display: block;
            width: 46px;
            height: 25px;
            background: #e9edf3;
            border: 1px solid #dfe4ea;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: inset 0 1px 2px rgba(7, 26, 82, 0.06);
            transition:
                background 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
            left: 0px;
            top: 11px;
            width: 44px;
            height: 23px;

            &::after {
                content: "";
                position: absolute;
                top: 3px;
                left: 3px;
                width: 17px;
                height: 17px;
                background: #ffffff;
                border: 1px solid rgba(7, 26, 82, 0.08);
                border-radius: 50%;
                box-shadow: 0 2px 5px rgba(7, 26, 82, 0.18);
                transition:
                    left 0.25s ease,
                    box-shadow 0.25s ease;
            }
        }

        .crm-checkbox-switch:checked + .crm-switch-dot {
            background: #f45b52;
            border-color: #f45b52;
            box-shadow: 0 4px 10px rgba(255, 79, 45, 0.20);

            left: 0px;
            top: 11px;
            width: 44px;
            height: 23px;

            &::after {
                left: 24px;
            }
        }

        .crm-checkbox-switch:not(:checked) + .crm-switch-dot {
            background: #222362;
            border-color: #222362;
            box-shadow: 0 4px 10px rgba(34, 35, 98, 0.18);

            &::after {
                left: 3px;
                border-color: rgba(34, 35, 98, 0.08);
            }
        }

        .crm-checkbox-switch:focus-visible + .crm-switch-dot {
            box-shadow:
                0 0 0 3px rgba(244, 91, 82, 0.15),
                0 4px 10px rgba(7, 26, 82, 0.08);
        }
    }
}

    /* PLAN HEADER */
    .crm-package-wrapper {
        min-width: 180px;
        padding: 22px 15px !important;
        background: #ffffff !important;
        position: relative;

        .title-sm {
            display: block;
            min-height: 38px;
            margin-bottom: 8px;
            color: #071a52;
            font-size: 14px;
            line-height: 1.35;
            font-weight: 700;
        }

        .crm-package-price {
            display: block;
            color: #071a52;
            font-size: 25px;
            line-height: 1.2;
            font-weight: 700;
        }

        .crm-package-unit {
            display: block;
            margin-top: 3px;
            color: #475467;
            font-size: 10px;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: 0.1px;
        }

        .crm-package-subtitle {
            margin-top: 3px;
            color: #98a2b3;
            font-size: 10px;
            line-height: 1.3;
        }

        .crm-package-btn {
            padding: 7px 16px;
            border: 1px solid #f45b52;
            background: transparent;
            color: #f45b52;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.25s ease;

            &:hover {
                background: #f45b52;
                border-color: #f45b52;
                color: #ffffff;
            }
        }

        .crm-plan-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 22px;
            margin-bottom: 7px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 9px;
            line-height: 1;
            font-weight: 700;
            letter-spacing: 0.2px;
            white-space: nowrap;
            position: absolute;
            top: -15px;
            left: 60px;
        }

        .crm-plan-badge-best {
            background: rgba(244, 91, 82, 0.10);
            border: 1px solid rgba(244, 91, 82, 0.16);
            color: #f45b52;
        }

        .crm-plan-badge-choice {
            background: rgba(7, 26, 82, 0.07);
            border: 1px solid rgba(7, 26, 82, 0.12);
            color: #071a52;
        }

        .title-sm {

        }
    }
    .crm-users-row {

        background: #fffaf8;

        td {
            height: 62px;
            padding-top: 12px !important;
            padding-bottom: 12px !important;
            border-top: 1px solid rgba(255, 79, 45, 0.08);
            border-bottom: 1px solid rgba(255, 79, 45, 0.08);
            vertical-align: middle !important;
        }

        .crm_pricing_features_name {
            color: #110f0d !important;
            font-size: 13px;
            font-weight: 700;
        }

        .crm-users-label {
            display: inline-flex;
            align-items: center;
            gap: 9px;
        }

        .crm-users-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            color: #ffffff;
            background: #222362;
            font-size: 12px;
            box-shadow: 0 4px 10px rgba(34, 35, 98, 0.12);
        }

        .crm_pricing_feature_check {
            color: #110f0d;
        }

        .crm-user-value {
            display: block;
            color: #222362;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
        }

        .crm-user-unlimited {
            color: #ff4f2d;
        }

        .crm-user-label {
            display: block;
            margin-top: 3px;
            color: #98a2b3;
            font-size: 10px;
            font-weight: 500;
            line-height: 1.2;
        }
    }

    /* FEATURE ACCORDION */
    .crm_pricing_feature_accordion {
        overflow: hidden;
        margin-top: 16px;
        background: #ffffff !important;
        border: 1px solid #edf0f5;
        border-radius: 14px;
        box-shadow: 0 12px 35px rgba(7, 26, 82, 0.04);

        .accordion-item {
            background: #ffffff;
            border-bottom: 1px solid #edf0f5 !important;

            &:last-child {
                border-bottom: 0 !important;
            }
        }
    }

    /* FEATURE CATEGORY HEADER */
    .accordion-header {
        background: #f8f9fb !important;

        a {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 22px;
            color: #071a52;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.25s ease;

            &::after {
                content: "\f078";
                font-family: "Font Awesome 5 Free";
                font-size: 10px;
                font-weight: 900;
                color: #667085;
                transition: transform 0.25s ease;
            }

            &:hover {
                background: rgba(244, 91, 82, 0.04);
                color: #f45b52;
            }
        }
    }

    /* FEATURE TABLE */
    .crm_pricing_feature_table {
        background: #ffffff;

        table {
            margin-bottom: 0;
            border-color: #edf0f5;

            td {
                padding: 9px 14px;
                border-color: #edf0f5;
                color: #667085;
                font-size: 12px;
                vertical-align: middle;
            }

            tr {
                transition: background 0.2s ease;

                &:hover {
                    background: #fff9f8;
                }
            }
        }
    }

    /* FEATURE NAME */
    .crm_pricing_features_name {
        width: 45%;
        padding-left: 24px !important;
        color: #475467 !important;
        font-weight: 500;
    }

    /* FEATURE CHECK */
    .crm_pricing_feature_check {
        width: 18.33%;
        color: #667085;
        text-align: center;

        .crm-feature-check {
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 5px;
            background: transparent;
            color: #f45b52;
            border: 1px solid #f45b52;
            border-radius: 4px;
            font-size: 10px;
            line-height: 1;
            vertical-align: middle;

            .fa-check{
                font-size: 20px;
                margin-right: -10px;
                margin-bottom: 3px;
            }
        }

        .crm-feature-value {
            color: #667085;
            font-size: 12px;
            font-weight: 500;
            vertical-align: middle;
        }

        .crm-feature-na {
            color: #aeb5c0;
            font-size: 12px;
            font-weight: 500;
        }
    }

    .crm-pricing-switch {

        button {
            padding: 0;
            border: 0;
            background: transparent;
            color: #667085;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.25s ease;

            &:hover {
                color: #f45b52;
            }

            &.active {
                color: #071a52;
                font-weight: 700;
            }
        }

        .crm-switch {

            .crm-checkbox-switch {

                &:checked + .crm-switch-dot {

                    &::after {
                        left: 20px;
                    }
                }

                &:not(:checked) + .crm-switch-dot {

                    &::after {
                        left: 3px;
                    }
                }
            }
        }
    }

    /* RESPONSIVE */
    @media (max-width: 991px) {

        .crm-pricing-table {
            border-radius: 10px;
        }

        .crm-pricing-switch-wrapper {
            min-width: 220px;
        }

        .crm-package-wrapper {
            min-width: 160px;
        }
    }

    @media (max-width: 767px) {

        padding-top: 80px;

        .crm-title {
            .clr-text {
                font-size: 28px;
            }
        }

        .crm-special-features {
            flex-direction: column;
            gap: 10px;
        }

        .crm-pricing-table {
            overflow-x: auto;
        }

        .crm_pricing_feature_accordion {
            border-radius: 10px;
        }

        .accordion-header {
            a {
                padding: 13px 16px;
                font-size: 13px;
            }
        }

        .crm_pricing_features_name {
            min-width: 180px;
            padding-left: 16px !important;
        }
    }
}






 .assignsales-contact-page {

    /* =========================================================
       CONTACT HERO SECTION
    ========================================================= */

    .assignsales-contact-hero {
        position: relative;
        overflow: hidden;
        padding: 70px 0 75px;
        background:
            radial-gradient(
                circle at 85% 45%,
                rgba(255, 113, 95, 0.12),
                transparent 30%
            ),
            linear-gradient(
                135deg,
                #fff3f0 0%,
                #fff8f7 52%,
                #fef0ed 100%
            );

        .container {
            position: relative;
            z-index: 2;
        }

        .contact-hero-content {

            .contact-hero-kicker {
                display: inline-block;
                margin-bottom: 14px;
                color: #7b8ca8;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 1.5px;
                line-height: 1.4;
            }

            h1 {
                margin: 0 0 17px;
                color: #071a52;
                font-size: 48px;
                font-weight: 800;
                line-height: 1.08;
                letter-spacing: -0.6px;

                span {
                    color: #f45b52;
                }
            }

            .contact-hero-description {
                max-width: 590px;
                margin: 0 0 25px;
                color: #33456b;
                font-size: 16px;
                font-weight: 400;
                line-height: 1.65;
            }
        }

        .contact-hero-points {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 22px;

            .contact-hero-point {
                display: inline-flex;
                align-items: center;
                gap: 9px;
                color: #344563;
                font-size: 13px;
                font-weight: 600;
                line-height: 1.4;

                .point-icon {
                    width: 17px;
                    height: 17px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex: 0 0 17px;
                    border-radius: 50%;
                    background: #f45b52;
                    color: #ffffff;
                    font-size: 8px;
                    line-height: 1;
                }
            }
        }

        .contact-hero-visual {
            position: relative;
            min-height: 300px;

            .hero-orange-circle {
                position: absolute;
                top: 20px;
                right: 70px;
                width: 220px;
                height: 220px;
                border-radius: 50%;
                background: #ffd4c8;
            }

            img {
                position: relative;
                z-index: 2;
                display: block;
                width: 330px;
                max-width: 100%;
                height: auto;
                margin: 0 auto;
            }

            .hero-growth-text {
                position: absolute;
                top: 12px;
                left: 25px;
                z-index: 3;
                display: flex;
                flex-direction: column;
                color: #071a52;
                font-size: 13px;
                font-style: italic;
                line-height: 1.15;
                transform: rotate(-5deg);

                span {
                    display: block;
                }

                strong {
                    display: block;
                    font-weight: 700;
                }

                i {
                    margin-top: 10px;
                    margin-left: 50px;
                    color: #4879d9;
                    font-size: 18px;
                    transform: rotate(35deg);
                }
            }

            .hero-help-card {
                position: absolute;
                right: 5px;
                bottom: 22px;
                z-index: 4;
                display: flex;
                align-items: center;
                gap: 10px;
                min-width: 155px;
                padding: 12px 15px;
                border-radius: 10px;
                background: #ffffff;
                box-shadow: 0 12px 30px rgba(16, 24, 40, 0.10);

                .help-icon {
                    width: 40px;
                    height: 40px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    flex: 0 0 40px;
                    border-radius: 9px;
                    background: #fff0ed;
                    color: #f45b52;
                    font-size: 17px;
                }

                div:last-child {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;

                    strong {
                        color: #071a52;
                        font-size: 11px;
                        font-weight: 700;
                        line-height: 1.3;
                    }

                    span {
                        color: #667085;
                        font-size: 11px;
                        font-weight: 400;
                        line-height: 1.3;
                    }
                }
            }

            .hero-dot-pattern {
                position: absolute;
                top: 15px;
                right: -5px;
                width: 80px;
                height: 75px;
                opacity: 0.35;
                background-image: radial-gradient(
                    #f45b52 1.2px,
                    transparent 1.2px
                );
                background-size: 10px 10px;
            }
        }
    }


    /* =========================================================
       CONTACT OPTIONS / THREE CARDS
    ========================================================= */

    .assignsales-contact-options {
        position: relative;
        z-index: 5;
        margin-top: -1px;
        padding: 10px 0 70px;
        background: #ffffff;

        .contact-option-card {
            height: 100%;
            min-height: 235px;
            padding: 28px 28px 25px;
            text-align: center;
            border-radius: 9px;
            background: #ffffff;
            box-shadow: 0 10px 35px rgba(16, 24, 40, 0.08);
            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;

            &:hover {
                transform: translateY(-4px);
                box-shadow: 0 16px 40px rgba(16, 24, 40, 0.11);
            }

            .contact-option-icon {
                width: 50px;
                height: 50px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 14px;
                border-radius: 10px;
                font-size: 20px;
                line-height: 1;

                &.chat-icon {
                    background: #fff0ed;
                    color: #f45b52;
                }

                &.email-icon {
                    background: #edf3ff;
                    color: #5383df;
                }

                &.phone-icon {
                    background: #e7f9f5;
                    color: #13ad9d;
                }
            }

            h4 {
                margin: 0 0 12px;
                color: #071a52;
                font-size: 18px;
                font-weight: 700;
                line-height: 1.3;
            }

            p {
                max-width: 290px;
                min-height: 68px;
                margin: 0 auto 20px;
                color: #75829a;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.65;

                strong {
                    color: #344563;
                    font-weight: 600;
                }
            }

            > a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                color: #f45b52;
                font-size: 13px;
                font-weight: 700;
                line-height: 1.4;
                text-decoration: none;
                transition: color 0.2s ease;

                i {
                    font-size: 10px;
                }

                &:hover {
                    color: #071a52;
                }
            }

            .contact-option-btn {
                min-width: 150px;
                padding: 10px 20px;
                border-radius: 4px;
                background: #f45b52;
                color: #ffffff;

                &:hover {
                    color: #ffffff;
                    background: #e94c43;
                }
            }
        }
    }


    /* =========================================================
       CONTACT FORM SECTION
    ========================================================= */

    .assignsales-contact-form-section {
        padding: 55px 0 100px;
        background: #ffffff;

        .contact-form-wrapper {
            max-width: 700px;

            .contact-section-kicker {
                display: inline-block;
                margin-bottom: 12px;
                color: #8391aa;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 1.4px;
                line-height: 1.4;
            }

            h2 {
                margin: 0 0 15px;
                color: #071a52;
                font-size: 36px;
                font-weight: 800;
                line-height: 1.18;
                letter-spacing: -0.35px;
            }

            .contact-form-description {
                max-width: 650px;
                margin: 0 0 32px;
                color: #718096;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.7;
            }
        }

        .assignsales-contact-form {

            .row {
                --bs-gutter-x: 18px;
            }

            .contact-form-group {
                margin-bottom: 21px;

                label {
                    display: block;
                    margin-bottom: 8px;
                    color: #071a52;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 1.4;

                    span {
                        color: #f45b52;
                    }
                }

                .form-control,
                .form-select {
                    width: 100%;
                    min-height: 48px;
                    padding: 11px 14px;
                    border: 1px solid #e2e7ef;
                    border-radius: 5px;
                    outline: none;
                    background: #ffffff;
                    color: #071a52;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.5;
                    box-shadow: none;
                    transition:
                        border-color 0.2s ease,
                        box-shadow 0.2s ease;

                    &::placeholder {
                        color: #b0b8c5;
                        opacity: 1;
                    }

                    &:focus {
                        border-color: #f45b52;
                        box-shadow: 0 0 0 3px rgba(244, 91, 82, 0.07);
                    }
                }

                .form-select {
                    cursor: pointer;
                }

                textarea.form-control {
                    min-height: 135px;
                    resize: vertical;
                }
            }

            .contact-submit-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 9px;
                min-width: 145px;
                min-height: 44px;
                padding: 10px 18px;
                border: 0;
                border-radius: 5px;
                background: #f45b52;
                color: #ffffff;
                font-size: 13px;
                font-weight: 600;
                line-height: 1.4;
                box-shadow: none;
                transition:
                    background 0.2s ease,
                    transform 0.2s ease;

                i {
                    font-size: 11px;
                }

                &:hover {
                    background: #e94c43;
                    color: #ffffff;
                    transform: translateY(-1px);
                }

                &:focus {
                    color: #ffffff;
                    background: #e94c43;
                    box-shadow: 0 0 0 3px rgba(244, 91, 82, 0.12);
                }
            }

            .contact-privacy {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 16px;
                color: #7b879c;
                font-size: 11px;
                font-weight: 400;
                line-height: 1.5;

                i {
                    flex: 0 0 auto;
                    color: #071a52;
                    font-size: 12px;
                }
            }
        }


        /* =====================================================
           RIGHT SIDE FORM ILLUSTRATION
        ===================================================== */

        .contact-form-visual {
            position: relative;
            min-height: 560px;
            padding-top: 20px;

            .form-visual-background {
                position: absolute;
                top: 60px;
                right: 15px;
                width: 320px;
                height: 260px;
                border-radius: 50%;
                background: #f2f6ff;
            }

            > img {
                position: relative;
                z-index: 2;
                display: block;
                width: 360px;
                max-width: 100%;
                height: auto;
                margin: 0 auto;
            }

            .connect-bubble {
                position: absolute;
                top: 15px;
                right: 65px;
                z-index: 4;
                display: flex;
                flex-direction: column;
                align-items: center;
                min-width: 95px;
                padding: 10px 16px;
                border-radius: 12px;
                background: #7ca7ff;
                color: #ffffff;
                font-size: 12px;
                font-weight: 400;
                line-height: 1.2;
                text-align: center;
                box-shadow: 0 10px 25px rgba(80, 120, 220, 0.16);

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -7px;
                    left: 20px;
                    width: 15px;
                    height: 15px;
                    background: #7ca7ff;
                    transform: rotate(45deg);
                }

                span {
                    font-weight: 500;
                }

                strong {
                    font-weight: 700;
                }
            }

            /* =================================================
               WHY ASSIGNSALES CARD
            ================================================= */

            .why-assignsales-card {
                position: relative;
                z-index: 5;
                width: 320px;
                max-width: 100%;
                margin: -5px auto 0;
                padding: 22px 24px;
                border-radius: 7px;
                background: #f6f9ff;
                box-shadow: 0 10px 30px rgba(16, 24, 40, 0.04);

                h4 {
                    margin: 0 0 18px;
                    color: #071a52;
                    font-size: 15px;
                    font-weight: 700;
                    line-height: 1.4;
                }

                ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;

                    li {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        margin-bottom: 13px;
                        color: #3c4c6a;
                        font-size: 13px;
                        font-weight: 400;
                        line-height: 1.5;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        > span {
                            width: 19px;
                            height: 19px;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            flex: 0 0 19px;
                            border-radius: 50%;
                            background: #f45b52;
                            color: #ffffff;
                            font-size: 8px;
                            line-height: 1;
                        }
                    }
                }
            }
        }
    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1199.98px) {

        .assignsales-contact-hero {

            .contact-hero-content {

                h1 {
                    font-size: 44px;
                }
            }
        }

        .assignsales-contact-form-section {

            .contact-form-wrapper {

                h2 {
                    font-size: 33px;
                }
            }

            .contact-form-visual {

                .form-visual-background {
                    right: 0;
                    width: 290px;
                    height: 240px;
                }

                .why-assignsales-card {
                    width: 300px;
                }
            }
        }
    }


    /* =========================================================
       MOBILE / TABLET
    ========================================================= */

    @media (max-width: 991.98px) {

        .assignsales-contact-hero {
            padding: 60px 0;

            .contact-hero-content {
                text-align: center;

                .contact-hero-description {
                    margin-right: auto;
                    margin-left: auto;
                    font-size: 15px;
                }
            }

            .contact-hero-points {
                justify-content: center;
            }

            .contact-hero-visual {
                margin-top: 35px;
            }
        }


        .assignsales-contact-options {
            padding-top: 35px;

            .contact-option-card {
                min-height: 250px;
            }
        }


        .assignsales-contact-form-section {

            .contact-form-wrapper {
                max-width: 100%;
                margin-bottom: 50px;
            }

            .contact-form-visual {
                min-height: auto;
                padding-top: 10px;
            }
        }
    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 767.98px) {

        .assignsales-contact-hero {

            .contact-hero-content {

                h1 {
                    font-size: 42px;
                }
            }

            .contact-hero-visual {

                .hero-orange-circle {
                    right: 50%;
                    transform: translateX(50%);
                }

                .hero-growth-text {
                    left: 10px;
                }

                .hero-help-card {
                    right: 10px;
                }
            }
        }


        .assignsales-contact-options {

            .contact-option-card {
                min-height: auto;
            }
        }


        .assignsales-contact-form-section {

            .contact-form-wrapper {

                h2 {
                    font-size: 31px;
                }
            }

            .contact-form-visual {

                .connect-bubble {
                    right: 20px;
                }
            }
        }
    }


    /* =========================================================
       SMALL MOBILE
    ========================================================= */

    @media (max-width: 575.98px) {

        .assignsales-contact-hero {
            padding: 50px 0;

            .contact-hero-content {

                .contact-hero-kicker {
                    margin-bottom: 11px;
                    font-size: 11px;
                }

                h1 {
                    margin-bottom: 14px;
                    font-size: 38px;
                    letter-spacing: -0.3px;
                }

                .contact-hero-description {
                    margin-bottom: 22px;
                    font-size: 14px;
                    line-height: 1.65;
                }
            }

            .contact-hero-points {
                flex-direction: column;
                align-items: center;
                gap: 10px;

                .contact-hero-point {
                    font-size: 12px;
                }
            }

            .contact-hero-visual {
                min-height: 275px;

                .hero-orange-circle {
                    top: 25px;
                    width: 190px;
                    height: 190px;
                }

                .hero-growth-text {
                    top: 8px;
                    left: 0;
                    font-size: 11px;
                }

                .hero-help-card {
                    right: 0;
                    bottom: 15px;
                    min-width: 145px;
                    padding: 10px 12px;

                    .help-icon {
                        width: 35px;
                        height: 35px;
                        flex-basis: 35px;
                        font-size: 15px;
                    }

                    div:last-child {

                        strong,
                        span {
                            font-size: 10px;
                        }
                    }
                }

                .hero-dot-pattern {
                    right: 0;
                    width: 65px;
                    height: 60px;
                }
            }
        }


        .assignsales-contact-options {
            padding: 25px 0 55px;

            .contact-option-card {
                padding: 28px 22px;

                .contact-option-icon {
                    width: 48px;
                    height: 48px;
                    font-size: 19px;
                }

                h4 {
                    font-size: 18px;
                }

                p {
                    min-height: auto;
                    font-size: 14px;
                }

                > a {
                    font-size: 13px;
                }
            }
        }


        .assignsales-contact-form-section {
            padding: 45px 0 70px;

            .contact-form-wrapper {

                .contact-section-kicker {
                    margin-bottom: 10px;
                    font-size: 10px;
                }

                h2 {
                    margin-bottom: 13px;
                    font-size: 28px;
                    line-height: 1.2;
                }

                .contact-form-description {
                    margin-bottom: 26px;
                    font-size: 14px;
                }
            }


            .assignsales-contact-form {

                .row {
                    --bs-gutter-x: 12px;
                }

                .contact-form-group {
                    margin-bottom: 18px;

                    label {
                        margin-bottom: 7px;
                        font-size: 12px;
                    }

                    .form-control,
                    .form-select {
                        min-height: 46px;
                        padding: 10px 12px;
                        font-size: 14px;
                    }

                    textarea.form-control {
                        min-height: 120px;
                    }
                }

                .contact-submit-btn {
                    min-width: 140px;
                    min-height: 44px;
                    font-size: 13px;
                }

                .contact-privacy {
                    align-items: flex-start;
                    font-size: 10px;
                }
            }


            .contact-form-visual {

                .form-visual-background {
                    top: 45px;
                    right: 50%;
                    width: 270px;
                    height: 220px;
                    transform: translateX(50%);
                }

                > img {
                    width: 320px;
                }

                .connect-bubble {
                    top: 5px;
                    right: 5px;
                    min-width: 85px;
                    padding: 9px 12px;
                    font-size: 11px;
                }

                .why-assignsales-card {
                    width: 100%;
                    margin-top: 0;
                    padding: 20px;

                    h4 {
                        margin-bottom: 16px;
                        font-size: 15px;
                    }

                    ul {

                        li {
                            margin-bottom: 11px;
                            font-size: 12px;

                            > span {
                                width: 18px;
                                height: 18px;
                                flex-basis: 18px;
                            }
                        }
                    }
                }
            }
        }
    }


    /* =========================================================
       EXTRA SMALL DEVICES
    ========================================================= */

    @media (max-width: 375px) {

        .assignsales-contact-hero {

            .contact-hero-content {

                h1 {
                    font-size: 34px;
                }

                .contact-hero-description {
                    font-size: 13px;
                }
            }

            .contact-hero-visual {
                min-height: 250px;

                .hero-orange-circle {
                    width: 165px;
                    height: 165px;
                }

                .hero-help-card {
                    min-width: 135px;
                }
            }
        }


        .assignsales-contact-form-section {

            .contact-form-wrapper {

                h2 {
                    font-size: 25px;
                }
            }
        }
    }
}



.inner-page-hero {
    position: relative;
    min-height: 410px;
    display: flex;
    align-items: center;
    padding: 82px 0 78px;
    overflow: hidden;
    background: #fff8f6;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(
                circle at 8% 20%,
                rgba(255, 79, 45, 0.08) 0,
                rgba(255, 79, 45, 0.08) 1px,
                transparent 1px
            );
        background-size: 18px 18px;
        opacity: 0.5;
        pointer-events: none;
    }

    .container {
        z-index: 2;
    }

    .inner-page-hero-pattern {
        position: absolute;
        top: -160px;
        left: -100px;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(255, 79, 45, 0.08);
        border-radius: 50%;
        pointer-events: none;

        &::before,
        &::after {
            content: "";
            position: absolute;
            border: 1px solid rgba(255, 79, 45, 0.07);
            border-radius: 50%;
        }

        &::before {
            inset: 45px;
        }

        &::after {
            inset: 95px;
        }
    }

    .inner-page-hero-shape {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;

        &.inner-page-hero-shape-one {
            right: -95px;
            top: -120px;
            width: 300px;
            height: 300px;
            background: #110f0d;
            opacity: 0.95;
        }

        &.inner-page-hero-shape-two {
            right: 24%;
            bottom: -180px;
            width: 300px;
            height: 300px;
            border: 70px solid rgba(255, 79, 45, 0.08);
        }
    }

    .inner-page-hero-content {
        position: relative;
        max-width: 700px;
        padding-right: 35px;
    }

    .inner-page-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        color: #ff4f2d;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.02em;
    }

    .eyebrow-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff4f2d;
        box-shadow: 0 0 0 5px rgba(255, 79, 45, 0.10);
    }

    h1 {
        max-width: 680px;
        margin: 0 0 20px;
        color: #110f0d;
        font-size: clamp(42px, 4.2vw, 62px);
        font-weight: 800;
        line-height: 1.06;
        letter-spacing: -0.035em;

        span {
            color: #ff4f2d;
        }
    }

    p {
        max-width: 650px;
        margin: 0;
        color: #625f5c;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.75;
    }

    .inner-page-hero-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px 24px;
        margin-top: 25px;

        span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #110f0d;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;

            i {
                color: #ff4f2d;
                font-size: 16px;
            }
        }
    }


    /*  ---------------------------------------------------------
    //  Hero Visual
        --------------------------------------------------------- */

    .inner-page-hero-visual {
        position: relative;
        width: 100%;
        height: 330px;
        margin-left: auto;
        max-width: 450px;
    }

    .hero-visual-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 270px;
        height: 270px;
        border-radius: 50%;
        background: rgba(255, 79, 45, 0.10);
        transform: translate(-50%, -50%);
        filter: blur(2px);
    }

    .hero-feature-card {
        position: absolute;
        background: #ffffff;
        border: 1px solid rgba(17, 15, 13, 0.08);
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(17, 15, 13, 0.10);
    }

    .hero-feature-card-main {
        top: 35px;
        left: 40px;
        z-index: 3;
        width: 310px;
        min-height: 230px;
        padding: 20px;
    }

    .hero-feature-card-head {
        display: flex;
        align-items: center;
        gap: 12px;

        .hero-feature-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            color: #ffffff;
            background: #110f0d;
            font-size: 19px;
        }

        div:last-child {
            display: flex;
            flex-direction: column;
            gap: 3px;

            span {
                color: #77716d;
                font-size: 10px;
                font-weight: 600;
            }

            strong {
                color: #110f0d;
                font-size: 16px;
                font-weight: 800;
            }
        }
    }


    /*  ---------------------------------------------------------
        Fake Chart
        --------------------------------------------------------- */

    .hero-chart {
        position: relative;
        height: 100px;
        margin-top: 22px;
        overflow: hidden;
        border-bottom: 1px solid #eeeeee;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(
                    to bottom,
                    transparent 24%,
                    #f1f1f1 25%,
                    transparent 26%,
                    transparent 49%,
                    #f1f1f1 50%,
                    transparent 51%,
                    transparent 74%,
                    #f1f1f1 75%,
                    transparent 76%
                );
        }
    }

    .chart-line {
        position: absolute;
        display: block;
        height: 3px;
        border-radius: 10px;
        background: #ff4f2d;
        transform-origin: left center;
    }

    .chart-line-one {
        left: 5%;
        top: 72%;
        width: 25%;
        transform: rotate(-17deg);
    }

    .chart-line-two {
        left: 29%;
        top: 55%;
        width: 28%;
        transform: rotate(20deg);
    }

    .chart-line-three {
        left: 55%;
        top: 65%;
        width: 35%;
        transform: rotate(-31deg);
    }

    .chart-dot {
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid #ff4f2d;
        border-radius: 50%;
        background: #ffffff;
        z-index: 2;
    }

    .dot-one {
        left: 27%;
        top: 64%;
    }

    .dot-two {
        left: 54%;
        top: 64%;
    }

    .dot-three {
        left: 78%;
        top: 38%;
    }

    .dot-four {
        right: 3%;
        top: 20%;
    }

    .hero-chart-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 13px;

        span {
            color: #77716d;
            font-size: 10px;
            font-weight: 600;
        }

        strong {
            color: #110f0d;
            font-size: 13px;
            font-weight: 800;
        }
    }


    /*  ---------------------------------------------------------
        Small Floating Cards
        --------------------------------------------------------- */

    .hero-feature-card-small {
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 4;
        min-width: 175px;
        padding: 12px 14px;

        span {
            display: block;
            margin-bottom: 2px;
            color: #77716d;
            font-size: 9px;
            font-weight: 600;
        }

        strong {
            display: block;
            color: #110f0d;
            font-size: 12px;
            font-weight: 800;
        }
    }

    .automation-card {
        top: 12px;
        right: 0;
    }

    .deal-card {
        right: 4px;
        bottom: 18px;
    }

    .hero-small-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        color: #ffffff;
        background: #110f0d;
        font-size: 16px;

        &.orange {
            background: #ff4f2d;
        }
    }

    .hero-status-dot {
        width: 7px;
        height: 7px;
        margin-left: auto;
        border-radius: 50%;
        background: #2dbb76;
        box-shadow: 0 0 0 4px rgba(45, 187, 118, 0.10);
    }

    .hero-floating-accent {
        position: absolute;
        right: 105px;
        bottom: 70px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        color: #ffffff;
        background: #ff4f2d;
        box-shadow: 0 10px 25px rgba(255, 79, 45, 0.28);
        transform: rotate(8deg);

        i {
            font-size: 20px;
        }
    }


    /*  ---------------------------------------------------------
        Responsive
        --------------------------------------------------------- */

    @media (max-width: 1199px) {

        .inner-page-hero-content {
            padding-right: 10px;
        }

        .inner-page-hero-visual {
            transform: scale(0.92);
            transform-origin: center right;
        }
    }

    @media (max-width: 991px) {

        min-height: auto;
        padding: 75px 0 65px;

        .inner-page-hero-content {
            max-width: 760px;
            margin: 0 auto;
            padding-right: 0;
            text-align: center;
        }

        .inner-page-hero-eyebrow {
            justify-content: center;
        }

        h1 {
            margin-right: auto;
            margin-left: auto;
        }

        p {
            margin-right: auto;
            margin-left: auto;
        }

        .inner-page-hero-meta {
            justify-content: center;
        }

        .inner-page-hero-visual {
            margin: 35px auto 0;
            transform: none;
        }
    }

    @media (max-width: 575px) {

        padding: 60px 0 50px;

        h1 {
            font-size: 38px;
        }

        p {
            font-size: 14px;
            line-height: 1.7;
        }

        .inner-page-hero-meta {
            gap: 9px 15px;

            span {
                font-size: 11px;
            }
        }

        .inner-page-hero-visual {
            height: 280px;
            transform: scale(0.82);
            transform-origin: top center;
            margin-bottom: -45px;
        }

        .hero-feature-card-main {
            left: 20px;
        }

        .automation-card {
            right: -10px;
        }

        .deal-card {
            right: -10px;
        }

        .hero-floating-accent {
            right: 85px;
        }
    }
}



/* =========================================================
   ASSIGNSALES CRM SOLUTIONS PAGE
========================================================= */

.crm-solutions-page {

    color: #110f0d;


    /* =====================================================
       HERO
    ====================================================== */

    .crm-solutions-hero {
        position: relative;
        min-height: 455px;
        display: flex;
        align-items: center;
        padding: 82px 0 76px;
        overflow: hidden;
        background: #fff8f6;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(
                rgba(255, 79, 45, 0.16) 1px,
                transparent 1px
            );
            background-size: 17px 17px;
            opacity: 0.35;
        }
    }

    .crm-solutions-hero-pattern {
        position: absolute;
        top: -170px;
        left: -100px;
        width: 430px;
        height: 430px;
        border: 1px solid rgba(255, 79, 45, 0.08);
        border-radius: 50%;

        &::before,
        &::after {
            content: "";
            position: absolute;
            border: 1px solid rgba(255, 79, 45, 0.07);
            border-radius: 50%;
        }

        &::before {
            inset: 45px;
        }

        &::after {
            inset: 95px;
        }
    }

    .crm-solutions-hero-circle {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;

        &.circle-one {
            right: -120px;
            top: -155px;
            width: 350px;
            height: 350px;
            border: 70px solid rgba(34, 35, 98, 0.10);
        }

        &.circle-two {
            right: 35%;
            bottom: -220px;
            width: 330px;
            height: 330px;
            border: 70px solid rgba(255, 79, 45, 0.08);
        }
    }

    .crm-solutions-hero-content {
        position: relative;
        z-index: 2;
        max-width: 680px;
        padding-right: 35px;
    }

    .crm-solutions-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 17px;
        color: #ff4f2d;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;

        span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff4f2d;
            box-shadow: 0 0 0 5px rgba(255, 79, 45, 0.10);
        }
    }

    .crm-solutions-hero-content {

        h1, .crm-hero-title {
            margin: 0 0 20px;
            color: #110f0d;
            font-size: clamp(42px, 4.3vw, 62px);
            font-weight: 800;
            line-height: 1.06;
            letter-spacing: -0.035em;

            span {
                display: block;
                color: #ff4f2d;
            }
        }

        > p {
            max-width: 650px;
            margin: 0;
            color: #65615e;
            font-size: 15px;
            line-height: 1.75;
        }
    }

    .crm-solutions-hero-points {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 23px;
        margin-top: 25px;

        span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #110f0d;
            font-size: 11px;
            font-weight: 700;

            i {
                color: #ff4f2d;
                font-size: 14px;
            }
        }
    }


    /* =====================================================
       HERO VISUAL
    ====================================================== */

    .crm-solutions-hero-visual {
        position: relative;
        width: 100%;
        max-width: 455px;
        height: 330px;
        margin-left: auto;
    }

    .crm-hero-dashboard {
        position: absolute;
        top: 38px;
        left: 40px;
        z-index: 2;
        width: 320px;
        min-height: 240px;
        padding: 20px;
        border: 1px solid rgba(17, 15, 13, 0.07);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 25px 55px rgba(17, 15, 13, 0.12);
        transform: rotate(-2deg);
    }

    .crm-dashboard-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .crm-dashboard-title {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #110f0d;
            font-size: 11px;
            font-weight: 800;

            span {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #ff4f2d;
            }
        }

        .crm-dashboard-menu {
            color: #9ca0a7;
            font-size: 12px;
        }
    }

    .crm-dashboard-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 18px;

        div {
            padding: 11px;
            border-radius: 9px;
            background: #f8f9fb;

            small {
                display: block;
                color: #8b8f98;
                font-size: 8px;
            }

            strong {
                display: block;
                margin-top: 4px;
                color: #110f0d;
                font-size: 16px;
                font-weight: 800;
            }
        }
    }

    .crm-dashboard-chart {
        position: relative;
        height: 92px;
        margin-top: 18px;
        overflow: hidden;
        border-bottom: 1px solid #edf0f3;
        background:
            linear-gradient(
                to bottom,
                transparent 24%,
                #f0f2f5 25%,
                transparent 26%,
                transparent 49%,
                #f0f2f5 50%,
                transparent 51%,
                transparent 74%,
                #f0f2f5 75%,
                transparent 76%
            );
    }

    .crm-chart-line {
        position: absolute;
        height: 3px;
        border-radius: 10px;
        background: #ff4f2d;
        transform-origin: left center;
    }

    .crm-chart-line.line-one {
        left: 4%;
        top: 68%;
        width: 27%;
        transform: rotate(-19deg);
    }

    .crm-chart-line.line-two {
        left: 29%;
        top: 53%;
        width: 28%;
        transform: rotate(19deg);
    }

    .crm-chart-line.line-three {
        left: 56%;
        top: 65%;
        width: 38%;
        transform: rotate(-30deg);
    }

    .crm-chart-dot {
        position: absolute;
        z-index: 2;
        width: 8px;
        height: 8px;
        border: 2px solid #ff4f2d;
        border-radius: 50%;
        background: #ffffff;
    }

    .crm-chart-dot.dot-one {
        left: 27%;
        top: 61%;
    }

    .crm-chart-dot.dot-two {
        left: 55%;
        top: 63%;
    }

    .crm-chart-dot.dot-three {
        right: 3%;
        top: 22%;
    }

    .crm-dashboard-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;

        span {
            color: #777b83;
            font-size: 9px;
            font-weight: 600;
        }

        strong {
            color: #ff4f2d;
            font-size: 11px;
            font-weight: 800;
        }
    }

    .crm-floating-card {
        position: absolute;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 145px;
        padding: 10px 12px;
        border: 1px solid rgba(17, 15, 13, 0.06);
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 13px 28px rgba(17, 15, 13, 0.09);

        small {
            display: block;
            color: #8a8d94;
            font-size: 8px;
        }

        strong {
            display: block;
            margin-top: 2px;
            color: #110f0d;
            font-size: 11px;
            font-weight: 800;
        }
    }

    .floating-leads {
        top: 12px;
        right: 2px;
    }

    .floating-deals {
        right: -4px;
        bottom: 28px;
    }

    .crm-floating-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        color: #ffffff;
        font-size: 12px;

        &.orange {
            background: #ff4f2d;
        }

        &.navy {
            background: #222362;
        }
    }

    .crm-floating-check {
        position: absolute;
        right: 115px;
        bottom: 50px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 11px;
        color: #ffffff;
        background: #ff4f2d;
        box-shadow: 0 12px 25px rgba(255, 79, 45, 0.25);
        transform: rotate(8deg);

        i {
            font-size: 17px;
        }
    }


    /* =====================================================
       EXPLORER
    ====================================================== */

    .crm-solutions-explorer {
        padding: 90px 0;
        background: #ffffff;
    }

    .crm-solutions-layout {
        display: grid;
        grid-template-columns: 285px minmax(0, 1fr);
        gap: 42px;
        align-items: start;
    }


    /* =====================================================
       SIDEBAR
    ====================================================== */

    .crm-solutions-sidebar {
        position: sticky;
        top: 88px;
        align-self: start;
        min-width: 0;
        max-height: calc(100vh - 105px);
    }

    .crm-sidebar-inner {
        max-height: calc(100vh - 105px);
        overflow-y: auto;
        padding: 21px 16px;
        border: 1px solid #eceef2;
        border-radius: 15px;
        background: #fbfcfd;

        scrollbar-width: thin;
        scrollbar-color: #d9dce2 transparent;

        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #d9dce2;
        }
    }

    .crm-sidebar-heading {
        padding: 5px 8px 19px;

        > span {
            display: block;
            margin-bottom: 6px;
            color: #ff4f2d;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
        }

        h6 {
            margin: 0 0 7px;
            color: #110f0d;
            font-size: 18px;
            font-weight: 800;
        }

        p {
            max-width: 225px;
            margin: 0;
            color: #858992;
            font-size: 10px;
            line-height: 1.55;
        }
    }

    .crm-solutions-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .crm-solution-nav-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 62px;
        padding: 10px 9px;
        border: 1px solid transparent;
        border-radius: 10px;
        color: inherit;
        text-decoration: none;
        transition:
            background 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;

        &:hover {
            background: #ffffff;
            border-color: #eceef2;
            transform: translateX(2px);

            .crm-nav-arrow {
                opacity: 1;
                transform: translateX(2px);
            }
        }

        &.active {
            border-color: rgba(255, 79, 45, 0.14);
            background: #fff3ef;
            box-shadow: 0 5px 15px rgba(255, 79, 45, 0.06);

            .crm-nav-number {
                color: #ff4f2d;
                background: #ffffff;
            }

            .crm-nav-content {

                strong {
                    color: #110f0d;
                }
            }

            .crm-nav-arrow {
                color: #ff4f2d;
                opacity: 1;
            }
        }
    }

    .crm-nav-number {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        color: #7f838b;
        background: #f1f3f6;
        font-size: 10px;
        font-weight: 800;
    }

    .crm-nav-content {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;

        strong {
            overflow: hidden;
            color: #42454b;
            font-size: 11px;
            font-weight: 750;
            line-height: 1.35;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        small {
            margin-top: 4px;
            overflow: hidden;
            color: #858a93;
            font-size: 9px;
            line-height: 1.3;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .crm-nav-arrow {
        color: #b0b3ba;
        font-size: 13px;
        opacity: 0;
        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }


    /* =====================================================
       RIGHT CONTENT PANEL
    ====================================================== */

    .crm-solutions-content {
        min-width: 0;
    }

    .crm-solution-panel {
        display: none;
        padding: 40px 42px 36px;
        border: 1px solid #e9ebef;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 15px 45px rgba(17, 15, 13, 0.05);
        animation: crmSolutionFade 0.35s ease both;

        &.active {
            display: block;
        }
    }

    @keyframes crmSolutionFade {

        from {
            opacity: 0;
            transform: translateY(7px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .crm-content-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .crm-content-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-right: 9px;
        border-radius: 9px;
        color: #ffffff;
        background: #110f0d;
        font-size: 11px;
        font-weight: 800;
    }

    .crm-content-category {
        color: #ff4f2d;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .crm-solution-panel {

        h2, .crm-panel-title {
            max-width: 780px;
            margin: 0 0 17px;
            color: #110f0d;
            font-size: clamp(27px, 3vw, 39px);
            font-weight: 800;
            line-height: 1.14;
            letter-spacing: -0.025em;

            span {
                display: block;
                color: #222362;
            }
        }

        .crm-content-description {
            max-width: 810px;
            margin: 0;
            color: #696d75;
            font-size: 14.5px;
            line-height: 1.8;
        }
    }


    /* =====================================================
       CAPABILITY CARDS
    ====================================================== */

    .crm-capability-section {
        margin-top: 34px;
    }

   .crm-capability-heading {
        margin-bottom: 15px;

        span {
            display: block;
            margin-bottom: 5px;
            color: #ff4f2d;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.08em;
        }

        strong {
            color: #110f0d;
            font-size: 16px;
            font-weight: 800;
        }
    }

    .crm-capability-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .crm-capability-card {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 49px;
        padding: 10px 13px;
        border: 1px solid #edf0f3;
        border-radius: 9px;
        background: #fbfcfd;
        transition:
            border-color 0.2s ease,
            background 0.2s ease,
            transform 0.2s ease;

        &:hover {
            border-color: rgba(255, 79, 45, 0.18);
            background: #fff9f7;
            transform: translateY(-1px);
        }

        i {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 21px;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            color: #ffffff;
            background: #ff4f2d;
            font-size: 8px;
        }

        span {
            color: #555960;
            font-size: 11.5px;
            font-weight: 600;
            line-height: 1.45;
        }
    }


    /* =====================================================
       SALES PIPELINE
    ====================================================== */

    .crm-solution-visual {
        margin-top: 28px;
        padding: 18px;
        border-radius: 12px;
        background: #f8f9fb;
    }

    .crm-pipeline {
        display: flex;
        align-items: center;
        gap: 10px;

        > span {
            color: #b1b4ba;
            font-size: 15px;
        }
    }

    .crm-pipeline-stage {
        flex: 1;
        padding: 13px;
        border: 1px solid #e9ebef;
        border-radius: 9px;
        background: #ffffff;

        small {
            display: block;
            color: #94979e;
            font-size: 7px;
            font-weight: 800;
        }

        strong {
            display: block;
            margin-top: 5px;
            color: #110f0d;
            font-size: 15px;
            font-weight: 800;
        }

        &.active {
            border-color: rgba(255, 79, 45, 0.25);
            background: #fff4f0;

            strong {
                color: #ff4f2d;
            }
        }
    }


    /* =====================================================
       PROCESS FLOW
    ====================================================== */

    .crm-process-flow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 30px;
        padding: 20px;
        border-radius: 12px;
        background: #f8f9fb;

        > i {
            color: #b2b5bb;
            font-size: 11px;
        }

        > div {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border: 1px solid #e7e9ed;
            border-radius: 8px;
            background: #ffffff;

            span {
                color: #ff4f2d;
                font-size: 8px;
                font-weight: 800;
            }

            strong {
                color: #555960;
                font-size: 10px;
            }

            &.active {
                border-color: rgba(255, 79, 45, 0.25);
                background: #fff4f0;
            }
        }
    }


    /* =====================================================
       LEAD FUNNEL
    ====================================================== */

    .crm-lead-funnel {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 9px;
        margin-top: 28px;
    }

    .crm-funnel-step {
        position: relative;
        padding: 16px 12px;
        border: 1px solid #e8eaee;
        border-radius: 9px;
        background: #fafbfc;
        text-align: center;

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 25px;
            height: 25px;
            margin: 0 auto 8px;
            border-radius: 50%;
            color: #777b83;
            background: #edf0f3;
            font-size: 9px;
            font-weight: 800;
        }

        strong {
            color: #565a61;
            font-size: 10px;
        }

        &.active {
            border-color: rgba(255, 79, 45, 0.20);
            background: #fff5f1;

            span {
                color: #ffffff;
                background: #ff4f2d;
            }

            strong {
                color: #110f0d;
            }
        }
    }


    /* =====================================================
       DEAL STAGES
    ====================================================== */

    .crm-deal-stages {
        display: flex;
        align-items: center;
        margin-top: 28px;
        padding: 18px;
        border-radius: 12px;
        background: #f8f9fb;
    }

    .crm-deal-stages .stage {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        padding: 11px 13px;
        border: 1px solid #e6e9ed;
        background: #ffffff;

        &:first-child {
            border-radius: 8px 0 0 8px;
        }

        &:last-child {
            border-radius: 0 8px 8px 0;
        }

        span {
            color: #777b82;
            font-size: 9px;
            font-weight: 700;
        }

        i {
            color: #a6aab1;
            font-size: 9px;
        }

        &.completed {

            span {
                color: #222362;
            }

            i {
                color: #28a76b;
            }
        }

        &.active {
            border-color: rgba(255, 79, 45, 0.25);
            background: #fff4f0;

            span {
                color: #ff4f2d;
            }

            i {
                color: #ff4f2d;
            }
        }
    }


    /* =====================================================
       ACTIVITY VISUAL
    ====================================================== */

    .crm-activity-visual {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
        margin-top: 28px;
    }

    .crm-activity-item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 13px;
        border: 1px solid #e8ebef;
        border-radius: 9px;
        background: #fafbfc;

        > span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 29px;
            height: 29px;
            border-radius: 8px;
            color: #ff4f2d;
            background: #fff0ec;
            font-size: 10px;
        }

        strong {
            display: block;
            color: #44474d;
            font-size: 9px;
        }

        small {
            display: block;
            margin-top: 3px;
            color: #989ba1;
            font-size: 8px;
        }

        &.completed {

            > span {
                color: #ffffff;
                background: #28a76b;
            }
        }
    }


    /* =====================================================
       TEAM VISUAL
    ====================================================== */

    .crm-team-visual {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
        margin-top: 28px;
    }

    .crm-team-member {
        padding: 16px;
        border: 1px solid #e8ebef;
        border-radius: 10px;
        background: #fafbfc;

        > span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin-bottom: 9px;
            border-radius: 50%;
            color: #ffffff;
            background: #222362;
            font-size: 9px;
            font-weight: 800;
        }

        strong,
        small {
            display: block;
        }

        strong {
            color: #44474d;
            font-size: 10px;
        }

        small {
            margin-top: 3px;
            color: #999ca3;
            font-size: 8px;
        }

        &.active {
            border-color: rgba(255, 79, 45, 0.20);
            background: #fff6f3;

            > span {
                background: #ff4f2d;
            }
        }
    }


    /* =====================================================
       QUOTE VISUAL
    ====================================================== */

    .crm-quote-visual {
        display: flex;
        justify-content: center;
        margin-top: 28px;
        padding: 22px;
        border-radius: 12px;
        background: #f8f9fb;
    }

    .crm-quote-document {
        width: 310px;
        padding: 17px;
        border: 1px solid #e5e8ec;
        border-radius: 9px;
        background: #ffffff;
        box-shadow: 0 10px 25px rgba(17, 15, 13, 0.05);
    }

    .crm-quote-header,
    .crm-quote-row,
    .crm-quote-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .crm-quote-header {

        strong {
            color: #110f0d;
            font-size: 12px;
        }

        span {
            color: #8c9097;
            font-size: 8px;
        }
    }

    .crm-quote-line {
        height: 1px;
        margin: 14px 0;
        background: #edf0f3;
    }

    .crm-quote-row {
        padding: 6px 0;

        span {
            color: #777b83;
            font-size: 9px;
        }
    }

    .crm-quote-total {
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid #edf0f3;

        span {
            color: #555960;
            font-size: 10px;
            font-weight: 700;
        }

        strong {
            color: #ff4f2d;
            font-size: 13px;
        }
    }


    /* =====================================================
       WORKFLOW
    ====================================================== */

    .crm-workflow-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 28px;
        padding: 18px;
        border-radius: 12px;
        background: #f8f9fb;

        > i {
            color: #b5b8be;
            font-size: 9px;
        }
    }

    .crm-workflow-node {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px 11px;
        border: 1px solid #e7e9ed;
        border-radius: 8px;
        background: #ffffff;

        i {
            color: #222362;
            font-size: 10px;
        }

        span {
            color: #555960;
            font-size: 9px;
            font-weight: 700;
        }

        &.active {
            border-color: rgba(255, 79, 45, 0.22);
            background: #fff4f0;

            i {
                color: #ff4f2d;
            }
        }
    }


    /* =====================================================
       OMNI CHANNEL
    ====================================================== */

    .crm-channel-visual {
        position: relative;
        height: 205px;
        margin-top: 28px;
        border-radius: 12px;
        background: #f8f9fb;
    }

    .crm-channel {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 11px;
        border: 1px solid #e5e8ec;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 7px 15px rgba(17, 15, 13, 0.05);
        font-size: 9px;
        font-weight: 700;

        i {
            font-size: 11px;
        }

        &.center {
            top: 50%;
            left: 50%;
            width: 80px;
            height: 80px;
            flex-direction: column;
            border: 0;
            border-radius: 50%;
            color: #ffffff;
            background: #222362;
            transform: translate(-50%, -50%);

            i {
                font-size: 18px;
            }
        }

        &.whatsapp {
            top: 25px;
            left: 19%;

            i {
                color: #25d366;
            }
        }

        &.email {
            top: 25px;
            right: 19%;

            i {
                color: #ff4f2d;
            }
        }

        &.social {
            bottom: 25px;
            left: 19%;

            i {
                color: #1877f2;
            }
        }

        &.phone {
            right: 19%;
            bottom: 25px;

            i {
                color: #222362;
            }
        }
    }


    /* =====================================================
       BUSINESS CARDS
    ====================================================== */

    .crm-business-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 13px;
    }

    .crm-business-card {
        padding: 15px 12px;
        border: 1px solid #e8ebef;
        border-radius: 9px;
        background: #fafbfc;

        .crm-business-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            margin-bottom: 10px;
            border-radius: 8px;
            color: #ffffff;
            background: #222362;
            font-size: 10px;
        }

        strong {
            display: block;
            color: #44474d;
            font-size: 10px;
        }

        small {
            display: block;
            margin-top: 4px;
            color: #92969e;
            font-size: 8px;
            line-height: 1.4;
        }

        &:nth-child(2) .crm-business-icon {
            background: #ff4f2d;
        }

        &:nth-child(3) .crm-business-icon {
            background: #4b87e8;
        }

        &:nth-child(4) .crm-business-icon {
            background: #28a76b;
        }
    }


    /* =====================================================
       ANALYTICS
    ====================================================== */

    .crm-analytics-visual {
        display: grid;
        grid-template-columns: 1fr 1fr 1.4fr;
        gap: 9px;
        align-items: stretch;
        margin-top: 28px;
        padding: 18px;
        border-radius: 12px;
        background: #f8f9fb;
    }

    .crm-analytics-kpi {
        padding: 13px;
        border: 1px solid #e8ebef;
        border-radius: 9px;
        background: #ffffff;

        small {
            display: block;
            color: #8c9098;
            font-size: 8px;
        }

        strong {
            display: block;
            margin: 6px 0 3px;
            color: #110f0d;
            font-size: 17px;
        }

        span {
            color: #28a76b;
            font-size: 8px;
            font-weight: 700;
        }
    }

    .crm-analytics-bars {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        gap: 7px;
        padding: 15px;
        border: 1px solid #e8ebef;
        border-radius: 9px;
        background: #ffffff;

        span {
            width: 13px;
            min-height: 15px;
            border-radius: 4px 4px 0 0;
            background: #ff4f2d;

            &:nth-child(even) {
                background: #222362;
            }
        }
    }


    /* =====================================================
       INDUSTRY
    ====================================================== */

    .crm-industry-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .crm-industry-card {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 49px;
        padding: 10px;
        border: 1px solid #e8ebef;
        border-radius: 9px;
        background: #fafbfc;

        i {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 25px;
            width: 25px;
            height: 25px;
            border-radius: 7px;
            color: #222362;
            background: #eef0f8;
            font-size: 9px;
        }

        span {
            color: #555960;
            font-size: 9px;
            font-weight: 700;
        }

        &:hover {
            border-color: rgba(255, 79, 45, 0.18);
            background: #fff9f7;

            i {
                color: #ffffff;
                background: #ff4f2d;
            }
        }
    }

    .crm-industry-bottom {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 13px;
        padding: 13px 15px;
        border: 1px solid rgba(255, 79, 45, 0.15);
        border-radius: 10px;
        background: #fff5f1;

        > i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            color: #ffffff;
            background: #ff4f2d;
            font-size: 11px;
        }

        strong,
        span {
            display: block;
        }

        strong {
            color: #110f0d;
            font-size: 10px;
        }

        span {
            margin-top: 3px;
            color: #898d94;
            font-size: 8px;
        }
    }


    /* =====================================================
       CONTENT CTA
    ====================================================== */

    .crm-content-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 28px;
        padding: 10px 14px;
        border-radius: 7px;
        color: #ffffff;
        background: #ff4f2d;
        font-size: 10px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 7px 16px rgba(255, 79, 45, 0.16);
        transition:
            background 0.2s ease,
            transform 0.2s ease;

        span {
            font-size: 13px;
        }

        &:hover {
            color: #ffffff;
            background: #110f0d;
            transform: translateY(-1px);
        }
    }


    /* =====================================================
       PREVIOUS / NEXT
    ====================================================== */

    .crm-content-navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 18px;
        padding: 16px 4px;
    }

    .crm-content-prev,
    .crm-content-next {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 145px;
        padding: 0;
        border: 0;
        color: inherit;
        background: transparent;
        text-align: left;
        cursor: pointer;

        > span {
            color: #ff4f2d;
            font-size: 19px;
        }

        small {
            display: block;
            color: #9b9ea5;
            font-size: 9px;
            line-height: 1.3;
        }

        strong {
            display: block;
            color: #44474d;
            font-size: 10px;
            font-weight: 700;
            line-height: 1.3;
        }

        &:hover {

            strong {
                color: #ff4f2d;
            }
        }
    }

    .crm-content-next {
        justify-content: flex-end;
        text-align: right;
    }

    .crm-content-progress {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #969aa2;
        font-size: 9px;
        font-weight: 700;

        .crm-current-number {
            color: #ff4f2d;
        }
    }

    .crm-progress-line {
        position: relative;
        display: block;
        width: 70px;
        height: 2px;
        overflow: hidden;
        border-radius: 10px;
        background: #e8eaee;

        span {
            position: absolute;
            top: 0;
            left: 0;
            width: 7.69%;
            height: 100%;
            border-radius: inherit;
            background: #ff4f2d;
            transition: width 0.3s ease;
        }
    }


    /* =====================================================
       BOTTOM CTA
    ====================================================== */

    .crm-solutions-cta {
        padding: 65px 0;
        background: #fff7f4;
    }

    .crm-solutions-cta-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        padding: 42px 48px;
        border-radius: 18px;
        background:
            radial-gradient(
                circle at 85% 30%,
                rgba(255, 79, 45, 0.09),
                transparent 30%
            ),
            #ffffff;
        box-shadow: 0 15px 40px rgba(17, 15, 13, 0.05);

        > div:first-child {

            > span {
                display: block;
                margin-bottom: 7px;
                color: #ff4f2d;
                font-size: 9px;
                font-weight: 800;
                letter-spacing: 0.08em;
            }

            h2 {
                margin: 0 0 8px;
                color: #110f0d;
                font-size: 29px;
                font-weight: 800;
                line-height: 1.2;
            }

            p {
                max-width: 590px;
                margin: 0;
                color: #777b83;
                font-size: 12px;
                line-height: 1.6;
            }
        }
    }

    .crm-solutions-cta-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 9px;

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 39px;
            padding: 8px 15px;
            border-radius: 7px;
            font-size: 10px;
            font-weight: 700;
        }

        .crm-cta-primary {
            color: #ffffff;
            background: #ff4f2d;

            &:hover {
                color: #ffffff;
                background: #110f0d;
            }
        }

        .crm-cta-secondary {
            color: #110f0d;
            border: 1px solid #dfe2e7;
            background: #ffffff;

            &:hover {
                color: #ff4f2d;
                border-color: rgba(255, 79, 45, 0.25);
            }
        }
    }


    /* =====================================================
       RESPONSIVE
    ====================================================== */

    @media (max-width: 1199px) {

        .crm-solutions-layout {
            grid-template-columns: 250px minmax(0, 1fr);
            gap: 25px;
        }

        .crm-solution-panel {
            padding: 32px;
        }

        .crm-solutions-hero-content {
            padding-right: 15px;
        }
    }

    @media (max-width: 991px) {

        .crm-solutions-hero {
            padding: 70px 0 65px;
        }

        .crm-solutions-hero-content {
            max-width: 760px;
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }

        .crm-solutions-eyebrow {
            justify-content: center;
        }

        .crm-solutions-hero-content > p {
            margin-right: auto;
            margin-left: auto;
        }

        .crm-solutions-hero-points {
            justify-content: center;
        }

        .crm-solutions-hero-visual {
            margin: 35px auto 0;
        }

        .crm-solutions-layout {
            display: block;
        }

        .crm-solutions-sidebar {
            position: relative;
            top: auto;
            margin-bottom: 20px;
        }

        .crm-sidebar-inner {
            padding: 15px;
        }

        .crm-sidebar-heading {
            padding-bottom: 13px;
        }

        .crm-solutions-nav {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
        }

        .crm-solution-nav-item {
            min-height: 55px;
        }

        .crm-solutions-content {
            margin-top: 20px;
        }
    }

    @media (max-width: 767px) {

        .crm-solutions-hero {
            min-height: auto;
            padding: 58px 0 50px;
        }

        .crm-solutions-hero-content h1, .crm-solutions-hero-content .crm-hero-title {
            font-size: 38px;
        }

        .crm-solutions-hero-content > p {
            font-size: 14px;
        }

        .crm-solutions-hero-visual {
            height: 280px;
            transform: scale(0.82);
            transform-origin: top center;
            margin-bottom: -40px;
        }

        .crm-solutions-explorer {
            padding: 55px 0;
        }

        .crm-solutions-nav {
            display: flex;
            overflow-x: auto;
            padding-bottom: 5px;
            scrollbar-width: thin;
        }

        .crm-solution-nav-item {
            flex: 0 0 205px;
        }

        .crm-solution-panel {
            padding: 25px 20px;
        }

        .crm-solution-panel h2, .crm-solution-panel .crm-panel-title {
            font-size: 27px;
        }

        .crm-content-description {
            font-size: 13px !important;
        }

        .crm-capability-grid {
            grid-template-columns: 1fr;
        }

        .crm-pipeline {
            display: grid;
            grid-template-columns: 1fr 1fr;

            > span {
                display: none;
            }
        }

        .crm-process-flow,
        .crm-workflow-visual {
            flex-wrap: wrap;
        }

        .crm-lead-funnel {
            grid-template-columns: 1fr 1fr;
        }

        .crm-activity-visual {
            grid-template-columns: 1fr;
        }

        .crm-team-visual {
            grid-template-columns: 1fr;
        }

        .crm-business-grid {
            grid-template-columns: 1fr 1fr;
        }

        .crm-analytics-visual {
            grid-template-columns: 1fr 1fr;
        }

        .crm-analytics-bars {
            grid-column: 1 / -1;
            min-height: 100px;
        }

        .crm-industry-grid {
            grid-template-columns: 1fr 1fr;
        }

        .crm-content-navigation {
            gap: 8px;
        }

        .crm-content-prev,
        .crm-content-next {
            min-width: 0;
        }

        .crm-content-prev strong,
        .crm-content-next strong {
            display: none;
        }

        .crm-content-progress {
            flex: 0 0 auto;
        }

        .crm-solutions-cta-inner {
            flex-direction: column;
            align-items: flex-start;
            padding: 30px 25px;
        }
    }

    @media (max-width: 575px) {

        .crm-solutions-hero-content h1, .crm-solutions-hero-content .crm-hero-title {
            font-size: 34px;
        }

        .crm-solutions-hero-points {
            flex-direction: column;
            align-items: center;
        }

        .crm-solutions-hero-visual {
            transform: scale(0.68);
            margin-bottom: -90px;
        }

        .crm-business-grid {
            grid-template-columns: 1fr;
        }

        .crm-industry-grid {
            grid-template-columns: 1fr;
        }

        .crm-analytics-visual {
            grid-template-columns: 1fr;
        }

        .crm-channel-visual {
            height: 230px;
        }

        .crm-channel.whatsapp {
            left: 8%;
        }

        .crm-channel.email {
            right: 8%;
        }

        .crm-channel.social {
            left: 8%;
        }

        .crm-channel.phone {
            right: 8%;
        }

        .crm-content-navigation {
            padding-right: 0;
            padding-left: 0;
        }

        .crm-progress-line {
            width: 45px;
        }

        .crm-solutions-cta-actions {
            width: 100%;
            flex-direction: column;

            .btn {
                width: 100%;
            }
        }
    }
}














/* =========================================================
   CRM COMPARISON PAGE
   ========================================================= */

.crm-compare-page {
    background: #f7f9fc;
    color: #16213d;

    /* =====================================================
       HERO
       ===================================================== */

    .crm-compare-hero {
        position: relative;
        overflow: hidden;
        padding: 105px 0 90px;
        background:
            linear-gradient(
                135deg,
                #f8fbff 0%,
                #eef5ff 52%,
                #fff8f6 100%
            );

        &::before,
        &::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        &::before {
            width: 520px;
            height: 520px;
            top: -280px;
            right: -80px;
            background: rgba(58, 117, 255, 0.08);
        }

        &::after {
            width: 340px;
            height: 340px;
            bottom: -210px;
            left: -120px;
            background: rgba(255, 92, 62, 0.08);
        }
    }


    .crm-compare-hero-content {
        position: relative;
        z-index: 2;
    }


    .crm-compare-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 16px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.3px;
        text-transform: uppercase;
        color: #3159a7;

        span {
            width: 20px;
            height: 2px;
            display: inline-block;
            background: #ff5a3d;
            border-radius: 20px;
        }
    }


    .crm-compare-hero h1 {
        max-width: 800px;
        margin: 0 0 22px;
        font-size: clamp(40px, 5vw, 64px);
        line-height: 1.08;
        letter-spacing: -1.8px;
        font-weight: 800;
        color: #17245d;

        span {
            color: #ff5639;
        }
    }


    .crm-compare-hero-description {
        max-width: 720px;
        margin: 0;
        font-size: 17px;
        line-height: 1.75;
        color: #5d6b86;
    }


    .crm-compare-hero-points {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 24px;
        margin-top: 28px;

        span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            color: #26375f;
        }

        i {
            color: #31ad5a;
        }
    }


    /* =====================================================
       HERO COMPARISON VISUAL
       ===================================================== */

    .crm-compare-hero-visual {
        position: relative;
        min-height: 360px;
        margin-left: 20px;
    }


    .crm-compare-hero-card {
        position: absolute;
        width: 250px;
        padding: 27px 25px;
        border: 1px solid rgba(255, 255, 255, .8);
        border-radius: 20px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 25px 70px rgba(31, 59, 115, .13);
        backdrop-filter: blur(12px);

        &.assign {
            top: 20px;
            left: 0;
            z-index: 2;
        }

        &.established {
            right: 0;
            bottom: 10px;
            z-index: 1;
        }
    }


    .crm-compare-card-label {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
        font-size: 15px;
        font-weight: 800;
        color: #18285e;

        i {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: #eef4ff;
            color: #2c67df;
        }
    }


    .crm-compare-card-points {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 11px;
            font-size: 13px;
            line-height: 1.4;
            color: #68758c;

            &:last-child {
                margin-bottom: 0;
            }
        }

        i {
            margin-top: 2px;
            color: #32ad5a;
        }
    }


    .crm-compare-card-vs {
        position: absolute;
        top: 143px;
        left: 50%;
        z-index: 4;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-50%);
        border-radius: 50%;
        background: #172c6b;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 12px 30px rgba(23, 44, 107, .22);
    }


    /* =====================================================
       FEATURE COMPARISON
       ===================================================== */

    .crm-compare-section {
        padding: 85px 0 100px;
        background: #f7f9fc;
    }


    .crm-compare-table-wrap {
        overflow: hidden;
        border: 1px solid #e4eaf3;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 18px 60px rgba(29, 52, 91, .08);
    }


    .crm-compare-table-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 30px;
        padding: 30px 30px 20px;
    }


    .crm-compare-section-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 10px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.3px;
        text-transform: uppercase;
        color: #3159a7;

        span {
            width: 20px;
            height: 2px;
            display: inline-block;
            background: #ff5a3d;
            border-radius: 20px;
        }
    }


    .crm-compare-table-header h2 {
        margin: 0;
        font-size: 32px;
        line-height: 1.2;
        font-weight: 800;
        color: #17245d;
    }


    /* =====================================================
       LEGEND
       ===================================================== */

    .crm-compare-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 9px 17px;

        span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 11px;
            font-weight: 700;
            color: #6c7890;
        }
    }


    .crm-compare-dot {
        width: 9px;
        height: 9px;
        display: inline-block;
        border-radius: 50%;

        &.available {
            background: #39b85a;
        }

        &.strong {
            background: #286be6;
        }

        &.varies {
            background: #f2a91b;
        }

        &.high {
            background: #f04444;
        }

        &.building {
            background: #8791a3;
        }
    }


    /* =====================================================
       TABLE
       ===================================================== */

    .crm-compare-table-scroll {
        overflow-x: auto;
        padding: 0 24px 24px;

        scrollbar-width: thin;
        scrollbar-color: #cbd5e5 transparent;

        &::-webkit-scrollbar {
            height: 7px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 20px;
            background: #cbd5e5;
        }
    }


    .crm-compare-table {
        width: 100%;
        min-width: 850px;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 13px;

        th,
        td {
            padding: 11px 16px;
            border-right: 1px solid #e5eaf2;
            border-bottom: 1px solid #e5eaf2;
            vertical-align: middle;
        }

        th:first-child,
        td:first-child {
            width: 46%;
            text-align: left;
        }

        th:not(:first-child),
        td:not(:first-child) {
            width: 27%;
            text-align: center;
        }


        thead {

            th {
                position: sticky;
                top: 0;
                z-index: 2;
                padding-top: 15px;
                padding-bottom: 15px;
                background: #eef3fb;
                color: #17245d;
                font-size: 13px;
                font-weight: 800;
            }

            th:nth-child(2) {
                background: #e7f0ff;
            }

            th:last-child {
                border-right: 0;
            }
        }


        tbody {

            tr {

                &:last-child {

                    td {
                        border-bottom: 0;
                    }
                }

                &:hover {

                    td {
                        background: #fbfcff;
                    }

                    td.crm-highlight {
                        background:
                            linear-gradient(
                                90deg,
                                rgba(40, 107, 230, .08),
                                rgba(40, 107, 230, .13)
                            );
                    }
                }
            }


            td:last-child {
                border-right: 0;
            }
        }
    }


    .crm-compare-feature {
        font-weight: 600;
        color: #28385d;
    }


    /* =====================================================
       STATUS
       ===================================================== */

    .crm-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 100px;
        padding: 5px 10px;
        border-radius: 30px;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 700;
        white-space: nowrap;

        &::before {
            content: "";
            width: 8px;
            height: 8px;
            flex: 0 0 8px;
            border-radius: 50%;
        }


        /* Available */

        &.available {
            color: #2f8d49;
            background: #eef9f1;

            &::before {
                background: #39b85a;
            }
        }


        /* Very Strong */

        &.very-strong {
            min-width: 116px;
            padding: 7px 13px;
            color: #1455c8;
            background:
                linear-gradient(
                    135deg,
                    #e9f2ff 0%,
                    #dceaff 100%
                );
            border: 1px solid #a9caff;
            box-shadow:
                0 4px 12px rgba(40, 107, 230, .12),
                inset 0 0 0 1px rgba(255, 255, 255, .65);
            font-weight: 800;
            letter-spacing: .1px;

            &::before {
                width: 9px;
                height: 9px;
                flex-basis: 9px;
                background: #286be6;
                box-shadow: 0 0 0 4px rgba(40, 107, 230, .10);
            }
        }


        /* Varies */

        &.varies {
            color: #9a6b08;
            background: #fff8e8;

            &::before {
                background: #f2a91b;
            }
        }


        /* Established */

        &.established {
            color: #2d8d49;
            background: #eef9f1;

            &::before {
                background: #39b85a;
            }
        }


        /* Building */

        &.building {
            color: #697486;
            background: #f0f2f5;

            &::before {
                background: #8791a3;
            }
        }


        /* Emerging */

        &.emerging {
            color: #697486;
            background: #f0f2f5;

            &::before {
                background: #8791a3;
            }
        }


        /* Lower */

        &.lower {
            color: #1455c8;
            background: #eaf2ff;

            &::before {
                background: #286be6;
            }
        }


        /* Higher */

        &.higher {
            color: #c83333;
            background: #fff0f0;

            &::before {
                background: #f04444;
            }
        }
    }


    /* =====================================================
       VERY STRONG CELL HIGHLIGHT
       ===================================================== */

    .crm-compare-table {

        td.crm-highlight {
            position: relative;
            background:
                linear-gradient(
                    90deg,
                    rgba(40, 107, 230, .055),
                    rgba(40, 107, 230, .095)
                );

            &::after {
                content: "";
                position: absolute;
                left: 0;
                top: 7px;
                bottom: 7px;
                width: 3px;
                border-radius: 0 5px 5px 0;
                background: #286be6;
            }
        }
    }


    /* =====================================================
       CTA
       ===================================================== */

    .crm-compare-cta {
        padding: 0 0 90px;
        background: #f7f9fc;
    }


    .crm-compare-cta-inner {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 35px;
        padding: 45px 55px;
        border-radius: 22px;
        background:
            linear-gradient(
                135deg,
                #fff0ee 0%,
                #fff8f6 52%,
                #edf5ff 100%
            );
        border: 1px solid #f4dfdc;

        &::before,
        &::after {
            content: "";
            position: absolute;
            border: 25px solid rgba(255, 86, 57, .08);
            border-radius: 50%;
            pointer-events: none;
        }

        &::before {
            width: 170px;
            height: 170px;
            left: -100px;
            top: -85px;
        }

        &::after {
            width: 220px;
            height: 220px;
            right: -130px;
            bottom: -140px;
        }
    }


    .crm-compare-cta-copy {
        position: relative;
        z-index: 1;
    }


    .crm-compare-cta-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 10px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.3px;
        text-transform: uppercase;
        color: #3159a7;

        span {
            width: 20px;
            height: 2px;
            display: inline-block;
            background: #ff5a3d;
            border-radius: 20px;
        }
    }


    .crm-compare-cta-copy h2 {
        max-width: 650px;
        margin: 0;
        font-size: 34px;
        line-height: 1.2;
        font-weight: 800;
        color: #17245d;
    }


    .crm-compare-cta-actions {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        flex-shrink: 0;
    }


    .crm-compare-cta-primary,
    .crm-compare-cta-secondary {
        min-width: 145px;
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 22px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        transition: all .25s ease;
    }


    .crm-compare-cta-primary {
        color: #fff;
        background: #ff5639;
        border: 1px solid #ff5639;
        box-shadow: 0 10px 25px rgba(255, 86, 57, .18);

        &:hover {
            color: #fff;
            transform: translateY(-2px);
            background: #ef4930;
            border-color: #ef4930;
        }
    }


    .crm-compare-cta-secondary {
        color: #2156bd;
        background: #fff;
        border: 1px solid #8db2f4;

        &:hover {
            color: #17489f;
            background: #f4f8ff;
            transform: translateY(-2px);
        }
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .crm-compare-page {

        .crm-compare-hero {
            padding: 85px 0 75px;
        }

        .crm-compare-hero-visual {
            margin-left: 0;
            min-height: 390px;
        }

        .crm-compare-hero-card {
            width: 225px;
        }
    }
}


@media (max-width: 991px) {

    .crm-compare-page {

        .crm-compare-hero-content {
            text-align: center;
        }

        .crm-compare-eyebrow {
            justify-content: center;
        }

        .crm-compare-hero-description {
            margin-left: auto;
            margin-right: auto;
        }

        .crm-compare-hero-points {
            justify-content: center;
        }

        .crm-compare-hero-visual {
            max-width: 570px;
            margin: 45px auto 0;
        }

        .crm-compare-table-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .crm-compare-legend {
            justify-content: flex-start;
        }

        .crm-compare-cta-inner {
            align-items: flex-start;
            flex-direction: column;
        }
    }
}


@media (max-width: 767px) {

    .crm-compare-page {

        .crm-compare-hero {
            padding: 70px 0 65px;
        }

        .crm-compare-hero h1 {
            font-size: 40px;
            letter-spacing: -1px;
        }

        .crm-compare-hero-description {
            font-size: 15px;
            line-height: 1.65;
        }

        .crm-compare-hero-visual {
            min-height: 460px;
        }

        .crm-compare-hero-card {
            width: 220px;
        }

        .crm-compare-hero-card.assign {
            left: 0;
        }

        .crm-compare-hero-card.established {
            right: 0;
            bottom: 0;
        }

        .crm-compare-card-vs {
            top: 205px;
        }

        .crm-compare-section {
            padding: 65px 0 75px;
        }

        .crm-compare-table-header {
            padding: 25px 20px 18px;
        }

        .crm-compare-table-header h2 {
            font-size: 27px;
        }

        .crm-compare-table-scroll {
            padding-left: 15px;
            padding-right: 15px;
        }

        .crm-compare-cta {
            padding-bottom: 65px;
        }

        .crm-compare-cta-inner {
            padding: 35px 25px;
        }

        .crm-compare-cta-copy h2 {
            font-size: 28px;
        }

        .crm-compare-cta-actions {
            width: 100%;
        }

        .crm-compare-cta-primary,
        .crm-compare-cta-secondary {
            flex: 1;
        }
    }
}


@media (max-width: 575px) {

    .crm-compare-page {

        .crm-compare-hero h1 {
            font-size: 34px;
        }

        .crm-compare-hero-points {
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
        }

        .crm-compare-hero-visual {
            min-height: 530px;
        }

        .crm-compare-hero-card {
            width: calc(100% - 35px);
            max-width: 270px;
        }

        .crm-compare-hero-card.assign {
            left: 0;
            top: 0;
        }

        .crm-compare-hero-card.established {
            right: 0;
            bottom: 0;
        }

        .crm-compare-card-vs {
            top: 225px;
        }

        .crm-compare-cta-actions {
            flex-direction: column;
        }

        .crm-compare-cta-primary,
        .crm-compare-cta-secondary {
            width: 100%;
            flex: unset;
        }
    }
}




/* ==========================================
   ASSIGNSALES TRIAL + VIDEO SHOWCASE
========================================== */

.assign-trial-showcase {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #ff492e;
    font-family: inherit;
}

.assign-trial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 610px;
}

/* ==========================================
   LEFT ORANGE PANEL
========================================== */

.assign-trial-content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 75px clamp(35px, 5.8vw, 105px);
    background: #ff492e;
    color: #ffffff;
    isolation: isolate;
    overflow: hidden;
}

.assign-trial-inner {
    width: 100%;
    max-width: 690px;
    position: relative;
    z-index: 2;
}

.assign-trial-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.assign-eyebrow-line {
    display: inline-block;
    width: 39px;
    height: 3px;
    background: #ffffff;
    flex-shrink: 0;
}

.assign-trial-title {
    margin: 0 0 24px;
    max-width: 690px;
    color: #ffffff;
    font-size: clamp(38px, 3.5vw, 66px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.assign-trial-title span {
    display: block;
    color: #ffffff;
}

.assign-trial-description {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    line-height: 1.75;
}

/* ==========================================
   LEFT PANEL BUTTONS
========================================== */

.assign-trial-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
}

.assign-contact-btn {
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 32px;
    border: 2px solid #ffffff;
    border-radius: 14px;
    background: #ffffff;
    color: #ff492e;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease,
                transform 0.25s ease;
}

.assign-contact-btn i {
    transition: transform 0.25s ease;
}

.assign-contact-btn:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-3px);
}

.assign-contact-btn:hover i {
    transform: translateX(4px);
}

.assign-watch-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.assign-watch-link:hover {
    color: #ffffff;
}

.assign-watch-icon {
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: #ffd28c;
    color: #202653;
    font-size: 19px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.assign-watch-link:hover .assign-watch-icon {
    transform: scale(1.08);
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.12);
}

/* ==========================================
   TRIAL BENEFITS
========================================== */

.assign-trial-benefits {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.assign-trial-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    font-size: 15px;
    white-space: nowrap;
}

.assign-trial-benefits li i {
    font-size: 25px;
    color: #ffffff;
}

/* ==========================================
   ORANGE DECORATIONS
========================================== */

.assign-orange-orb {
    position: absolute;
    z-index: -1;
    left: -135px;
    bottom: -205px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

.assign-orange-dots {
    position: absolute;
    right: 7%;
    bottom: 10%;
    width: 80px;
    height: 80px;
    opacity: 0.8;
    background-image: radial-gradient(#ffd28c 2px, transparent 2.5px);
    background-size: 19px 19px;
    pointer-events: none;
}

.assign-orange-spark {
    position: absolute;
    top: 25%;
    right: 9%;
    color: #ffd28c;
    font-size: 66px;
    font-weight: 700;
    transform: rotate(35deg);
    pointer-events: none;
}

/* ==========================================
   RIGHT NAVY VIDEO PANEL
========================================== */

.assign-video-panel {
    position: relative;
    display: flex;
    align-items: center;
    padding: 65px clamp(30px, 4.3vw, 80px);
    background: #1d2258;
    color: #ffffff;
    isolation: isolate;
    overflow: hidden;
}

.assign-video-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================
   VIDEO THUMBNAIL
========================================== */

.assign-video-frame {
    position: relative;
    width: calc(100% - 35px);
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 22px;
    background: #30366e;
    padding: 10px;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.06),
                0 22px 55px rgba(5, 8, 35, 0.3);
}

.assign-video-thumbnail {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #e9edff;
    text-decoration: none;
}

.assign-video-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.assign-video-thumbnail:hover .assign-video-image {
    transform: scale(1.035);
}

.assign-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 25, 72, 0.12);
    transition: background 0.3s ease;
}

.assign-video-thumbnail:hover .assign-video-overlay {
    background: rgba(18, 25, 72, 0.24);
}

/* Central Play Button */

.assign-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    padding-left: 5px;
    border: 5px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: #ff492e;
    color: #ffffff;
    font-size: 26px;
    box-shadow: 0 0 0 12px rgba(255, 73, 46, 0.12),
                0 10px 30px rgba(0, 0, 0, 0.18);
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.assign-video-thumbnail:hover .assign-video-play {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 0 17px rgba(255, 73, 46, 0.15),
                0 12px 35px rgba(0, 0, 0, 0.2);
}

/* Thumbnail Caption */

.assign-video-caption {
    position: absolute;
    left: 50%;
    bottom: 12%;
    z-index: 2;
    display: inline-block;
    max-width: calc(100% - 30px);
    padding: 12px 22px;
    border-radius: 50px;
    background: #202653;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* Video Annotation */

.assign-video-annotation {
    position: absolute;
    top: 3%;
    right: -95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    transform: rotate(-8deg);
}

.assign-video-annotation i {
    margin-top: 10px;
    font-size: 28px;
    transform: rotate(30deg);
}

.assign-video-spark {
    position: absolute;
    top: 4%;
    left: -30px;
    color: #ff492e;
    font-size: 56px;
    font-weight: 700;
    transform: rotate(-30deg);
}

.assign-watch-thumbnail {
    width: 150px;
    height: 76px;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    background: #1d2258;
}

.assign-watch-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================
   FEATURES BELOW VIDEO
========================================== */

.assign-video-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 48px;
}

.assign-video-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 0 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.assign-video-feature:first-child {
    padding-left: 0;
}

.assign-video-feature:last-child {
    padding-right: 0;
    border-right: 0;
}

.assign-feature-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 25px;
}

.assign-icon-purple {
    background: #6261e9;
}

.assign-icon-orange {
    background: #ffc477;
}

.assign-icon-blue {
    background: #8995ff;
}

.assign-feature-text h4 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.assign-feature-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.5;
}

/* Navy Decorative Orb */

.assign-navy-orb {
    position: absolute;
    z-index: -1;
    top: -155px;
    right: -100px;
    width: 310px;
    height: 310px;
    border: 50px solid rgba(100, 100, 236, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

/* ==========================================
   RESPONSIVE: LAPTOP
========================================== */

@media (max-width: 1399px) {
    .assign-trial-content {
        padding-right: 40px;
        padding-left: 45px;
    }

    .assign-video-panel {
        padding-right: 35px;
        padding-left: 35px;
    }

    .assign-trial-title {
        font-size: clamp(40px, 4vw, 56px);
    }

    .assign-trial-description {
        font-size: 16px;
    }

    .assign-trial-actions {
        gap: 20px;
    }

    .assign-contact-btn {
        min-height: 64px;
        padding: 0 24px;
    }

    .assign-watch-icon {
        width: 65px;
        height: 65px;
    }

    .assign-video-annotation {
        right: -30px;
        font-size: 14px;
    }

    .assign-video-feature {
        gap: 10px;
        padding: 0 10px;
    }

    .assign-feature-icon {
        width: 52px;
        height: 52px;
        font-size: 21px;
    }

    .assign-feature-text h4 {
        font-size: 14px;
    }

    .assign-feature-text p {
        font-size: 12px;
    }
}

/* ==========================================
   RESPONSIVE: TABLET
========================================== */

@media (max-width: 991px) {
    .assign-trial-grid {
        grid-template-columns: 1fr;
    }

    .assign-trial-content {
        min-height: auto;
        padding: 75px 35px 70px;
    }

    .assign-trial-inner {
        max-width: 700px;
        margin: 0 auto;
    }

    .assign-trial-title {
        max-width: 650px;
        font-size: clamp(42px, 7vw, 62px);
    }

    .assign-video-panel {
        min-height: auto;
        padding: 65px 35px 70px;
    }

    .assign-video-inner {
        max-width: 760px;
    }

    .assign-video-frame {
        width: calc(100% - 30px);
    }

    .assign-video-annotation {
        right: -20px;
    }

    .assign-video-features {
        margin-top: 40px;
    }

    .assign-video-feature {
        padding: 0 12px;
    }
}

/* ==========================================
   RESPONSIVE: MOBILE
========================================== */

@media (max-width: 575px) {
    .assign-trial-content {
        padding: 58px 22px 55px;
    }

    .assign-trial-eyebrow {
        gap: 9px;
        margin-bottom: 18px;
        font-size: 11px;
        letter-spacing: 0.7px;
    }

    .assign-eyebrow-line {
        width: 25px;
    }

    .assign-trial-title {
        margin-bottom: 20px;
        font-size: clamp(36px, 10vw, 46px);
        letter-spacing: -1.1px;
        line-height: 1.1;
    }

    .assign-trial-description {
        font-size: 15px;
        line-height: 1.7;
    }

    .assign-trial-actions {
        align-items: flex-start;
        gap: 20px;
        margin-top: 26px;
    }

    .assign-contact-btn {
        min-height: 57px;
        gap: 10px;
        padding: 0 18px;
        border-radius: 11px;
        font-size: 14px;
    }

    .assign-watch-link {
        gap: 9px;
        font-size: 14px;
    }

    .assign-watch-icon {
        width: 54px;
        height: 54px;
        font-size: 15px;
    }

    .assign-trial-benefits {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        margin-top: 28px;
    }

    .assign-trial-benefits li {
        font-size: 14px;
    }

    .assign-trial-benefits li i {
        font-size: 21px;
    }

    .assign-orange-spark {
        top: 10%;
        right: 5%;
        font-size: 45px;
    }

    .assign-orange-dots {
        right: 6%;
        bottom: 5%;
    }

    .assign-video-panel {
        padding: 50px 18px 50px;
    }

    .assign-video-frame {
        width: 100%;
        padding: 6px;
        border-radius: 15px;
    }

    .assign-video-thumbnail {
        border-radius: 10px;
    }

    .assign-video-play {
        width: 60px;
        height: 60px;
        border-width: 4px;
        font-size: 19px;
    }

    .assign-video-caption {
        bottom: 8%;
        padding: 8px 13px;
        font-size: 10px;
    }

    .assign-video-annotation {
        display: none;
    }

    .assign-video-spark {
        top: -22px;
        left: -7px;
        font-size: 40px;
    }

    .assign-video-features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 32px;
    }

    .assign-video-feature,
    .assign-video-feature:first-child,
    .assign-video-feature:last-child {
        padding: 0;
        border-right: 0;
    }

    .assign-feature-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .assign-feature-text h4 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .assign-feature-text p {
        font-size: 13px;
    }
}

/* Keep wide rows (e.g. .row.g-5 gutters) from making the page scroll sideways on
   mobile. "clip" (unlike "hidden") does not break the sticky header. */
.main-wrapper {
    overflow-x: clip;
}