/* whatscommerce Industries Premium - scoped to industry pages only */

.industry-page, .industries-page {
    --wc-green: #000000;
    --wc-green-dark: #078d48;
    --wc-green-soft: #edf9f3;
    --wc-navy: #0f172a;
    --wc-text: #1e293b;
    --wc-muted: #475569;
    --wc-soft: #f8fafc;
    --wc-border: #dbe5ee;
    font-family: 'Inter', sans-serif;
    color: var(--wc-text);
    background: #fff;
    overflow: hidden
}

.industry-page *, .industries-page * {
    box-sizing: border-box
}

.industry-page .container, .industries-page .container {
    /* width: min(1180px, calc(100% - 40px)); */
    /* max-width: 1180px; */
    margin: auto;
    padding: 0
}

.industry-page .industry-hero {
    position: relative;
    isolation: isolate;
    /* padding: 96px 0 92px !important; */
    text-align: center;
    /* background: radial-gradient(circle at 85% 20%, rgba(11, 168, 88, .12), transparent 25%), radial-gradient(circle at 5% 80%, rgba(11, 168, 88, .07), transparent 25%), linear-gradient(135deg, #f8fafc, #fff 58%, #f1faf6); */
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
    border-bottom: 1px solid var(--wc-border)
}

.industry-page .industry-hero:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 280px;
    height: 280px;
    right: -110px;
    top: -110px;
    border: 42px solid rgba(11, 168, 88, .05);
    border-radius: 50%
}

.industry-page .industry-hero .container {
    /* max-width: 920px */
}

.industry-page .industry-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px !important;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: var(--wc-green-soft);
    border: 1px solid rgba(11, 168, 88, .18);
    color: var(--wc-green);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
    font-size: 28px
}

.industry-page .industry-hero h1 {
    margin: 0 auto 22px;
    color: var(--wc-navy);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.08;
    /* letter-spacing: -2.6px */
}

.industry-page .industry-hero .lead {
    /* max-width: 760px; */
    color: var(--wc-muted);
    font-size: 1.2rem;
    /* line-height: 1.8 */
}

.industry-page .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 27px !important;
    border: 1px solid var(--wc-green) !important;
    border-radius: 12px !important;
    background: var(--wc-green) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(11, 168, 88, .22);
    transition: .25s
}

.industry-page .btn-primary:hover {
    background: var(--wc-green-dark) !important;
    border-color: var(--wc-green-dark) !important;
    transform: translateY(-3px)
}

.industry-page .industry-section {
    position: relative;
    padding: 94px 0 !important;
    background: #cfe7da;
}

.industry-page .industry-section:nth-of-type(odd) {
    background: var(--wc-soft)
}

.industry-page .industry-section+.industry-section:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 40px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--wc-border), transparent)
}

.industry-page .industry-section .container>h2 {
    /* max-width: 850px; */
    margin: 0 0 34px;
    color: var(--wc-navy);
    font-size: 3rem;
    font-weight: 700;
    /* line-height: 1.18;
    letter-spacing: -1.35px */
}

.industry-page .section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 7px 18px;
    border: 1px solid rgba(11, 168, 88, .16);
    border-radius: 5px;
    background: var(--wc-green-soft);
    color: var(--wc-green-dark);
    font-size: 1rem;
    font-weight: 600;
}

.industry-page .section-label:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #21955a;
    box-shadow: 0 0 0 4px rgba(11, 168, 88, .09)
}

.industry-page .industry-section .container>.mt-3 {
    max-width: 860px;
    margin-top: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.industry-page .industry-section .container>.mt-3 p {
    margin: 0;
    padding: 22px;
    border: 1px solid var(--wc-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .9);
    color: var(--wc-muted);
    font-size: 1rem;
    line-height: 1.75;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .035)
}

.industry-page .industry-section .container>.mt-3 p:first-child {
    color: var(--wc-navy);
    font-weight: 700
}

.industry-page .industry-section .row {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px
}

.industry-page .industry-card {
    position: relative;
    height: 100%;
    padding: 27px 26px;
    border: 1px solid var(--wc-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045);
    overflow: hidden;
    transition: .28s
}

.industry-page .industry-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    width: 38px;
    height: 3px;
    border-radius: 0 0 5px 5px;
    background: var(--wc-green)
}

.industry-page .industry-card:after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -34px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(11, 168, 88, .035);
    transition: .3s
}

.industry-page .industry-card:hover {
    transform: translateY(-7px);
    border-color: rgba(11, 168, 88, .28);
    box-shadow: 0 20px 45px rgba(15, 23, 42, .09)
}

.industry-page .industry-card h3 {
    position: relative;
    z-index: 1;
    margin: 5px 0 11px;
    color: var(--wc-navy);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4
}

.industry-page .industry-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--wc-muted);
    font-size: 1rem;
    line-height: 1.75
}

.industry-page .conversation-flow {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 34px 34px 34px 54px;
    border: 1px solid var(--wc-border);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(237, 249, 243, .85), rgba(248, 250, 252, .95));
    box-shadow: 0 18px 48px rgba(15, 23, 42, .07)
}

.industry-page .conversation-flow:before {
    content: "";
    position: absolute;
    left: 28px;
    top: 32px;
    bottom: 32px;
    width: 2px;
    background: linear-gradient(var(--wc-green), rgba(11, 168, 88, .08))
}

.industry-page .conversation-flow p {
    position: relative;
    margin: 0 0 13px;
    padding: 11px 15px;
    border-radius: 12px;
    color: var(--wc-muted);
    font-size: 13px;
    line-height: 1.65;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(219, 229, 238, .8)
}

.industry-page .conversation-flow p:last-child {
    margin-bottom: 0;
    color: var(--wc-navy);
    font-weight: 800;
    background: var(--wc-green-soft);
    border-color: rgba(11, 168, 88, .14)
}

.industry-page .industry-cta {
    position: relative;
    isolation: isolate;
    padding: 92px 0 !important;
    background: radial-gradient(circle at 85% 15%, rgba(11, 168, 88, .18), transparent 25%), var(--wc-navy);
    color: #fff
}

.industry-page .industry-cta .container {
    /* max-width: 850px; */
    text-align: center
}

.industry-page .industry-cta h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    /* line-height: 1.15;
    letter-spacing: -1.4px */
}

.industry-page .industry-cta p {
    /* max-width: 760px; */
    margin: 0 auto 14px;
    color: rgba(255, 255, 255, .72);
    font-size: 1rem;
    /* line-height: 1.8 */
}

.industry-page .industry-cta .lead {
    color: #9be8bf;
    font-weight: 700;
    font-size: 1.2rem
}

.industry-page .industry-cta .btn-primary {
    margin-top: 18px;
    background: #fff !important;
    border-color: #fff !important;
    color: var(--wc-green-dark) !important
}

.industry-page .faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
}

.industry-page .faq-item {
    position: relative;
    padding: 25px 25px 24px 29px;
    border: 1px solid var(--wc-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    transition: .25s
}

.industry-page .faq-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    width: 4px;
    height: 28px;
    border-radius: 0 5px 5px 0;
    background: var(--wc-green)
}

.industry-page .faq-item:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 168, 88, .25);
    box-shadow: 0 15px 35px rgba(15, 23, 42, .07)
}

.industry-page .faq-item h3 {
    margin: 0 0 9px;
    color: var(--wc-navy);
    font-size: 1.2rem;
    line-height: 1.55
}

.industry-page .faq-item p {
    margin: 0;
    color: var(--wc-muted);
    font-size: 1rem;
    line-height: 1.75
}



/* index */

.industries-page .ind-hero {
    padding: 96px 0 90px;
    background: radial-gradient(circle at 82% 20%, rgba(11, 168, 88, .12), transparent 24%), linear-gradient(135deg, #f8fafc, #fff 58%, #f1faf6);
    text-align: center
}

.industries-page .ind-hero-inner {
    max-width: 850px;
    margin: auto
}

.industries-page .ind-label {
    display: inline-flex;
    padding: 8px 13px;
    border: 1px solid rgba(11, 168, 88, .16);
    border-radius: 999px;
    background: var(--wc-green-soft);
    color: var(--wc-green-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.industries-page .ind-hero h1 {
    margin: 18px 0;
    color: var(--wc-navy);
    font-size: clamp(40px, 5.3vw, 62px);
    line-height: 1.08;
    letter-spacing: -2.4px
}

.industries-page .ind-hero p {
    color: var(--wc-muted);
    font-size: 16px;
    line-height: 1.85
}

.industries-page .ind-grid {
    padding: 92px 0;
    background: #fff
}

.industries-page .ind-grid-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 38px
}

.industries-page .ind-grid-head h2 {
    margin: 15px 0 0;
    color: var(--wc-navy);
    font-size: clamp(30px, 3.5vw, 42px);
    letter-spacing: -1.3px
}

.industries-page .ind-grid-head>p {
    max-width: 500px;
    color: var(--wc-muted);
    line-height: 1.8
}

.industries-page .ind-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.industries-page .ind-card {
    position: relative;
    min-height: 265px;
    padding: 27px;
    border: 1px solid var(--wc-border);
    border-radius: 20px;
    background: #fff;
    color: var(--wc-navy);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
    transition: .28s;
    overflow: hidden
}

.industries-page .ind-card:after {
    content: "→";
    position: absolute;
    right: 23px;
    bottom: 19px;
    color: var(--wc-green);
    font-size: 22px
}

.industries-page .ind-card:hover {
    transform: translateY(-7px);
    border-color: rgba(11, 168, 88, .28);
    box-shadow: 0 22px 45px rgba(15, 23, 42, .1)
}

.industries-page .ind-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 23px;
    border: 1px solid rgba(11, 168, 88, .14);
    border-radius: 15px;
    background: var(--wc-green-soft);
    color: var(--wc-green);
    font-size: 20px
}

.industries-page .ind-card h3 {
    margin: 0 0 10px;
    color: var(--wc-navy);
    font-size: 17px
}

.industries-page .ind-card p {
    margin: 0;
    padding-right: 18px;
    color: var(--wc-muted);
    font-size: 12px;
    line-height: 1.75
}

@media(max-width:992px) {
    .industry-page .industry-section .container>.mt-3 {
        grid-template-columns: 1fr
    }

    .industry-page .faq-list {
        grid-template-columns: 1fr
    }

    .industries-page .ind-cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:767px) {
    .industry-page .container, .industries-page .container {
        width: calc(100% - 28px)
    }

    .industry-page .industry-hero {
        padding: 72px 0 !important
    }

    .industries-page .ind-hero h1 {
        font-size: 39px;
        letter-spacing: -1.5px
    }

    .industry-page .industry-section {
        padding: 65px 0 !important
    }

    .industry-page .industry-section .container>h2 {
        font-size: 30px
    }

    .industry-page .conversation-flow {
        padding: 24px 20px 24px 40px;
        border-radius: 18px
    }

    .industry-page .conversation-flow:before {
        left: 19px
    }

    .industries-page .ind-grid-head {
        display: block
    }

    .industries-page .ind-cards {
        grid-template-columns: 1fr
    }
}





/* =========================================================

   AUTOMOBILE - SEE IT IN ACTION

   ========================================================= */



.auto-action-section {

    position: relative;

    overflow: hidden;

}



.auto-action-heading {

    max-width: 850px;

    margin: 0 auto 45px;

}



.auto-action-heading h2 {
    margin-top: 16px;
    margin-bottom: 15px;
    font-size: 3rem;
    font-weight: 700;

}



.auto-action-intro {
    /* max-width: 700px; */
    margin: 0 auto;
    color: #64748b;
    font-size: 1.2rem;
    line-height: 1.7;

}



.label-dot {

    width: 7px;

    height: 7px;

    background: #0aa85f;

    border-radius: 50%;

    display: inline-block;

    margin-right: 8px;

    box-shadow: 0 0 0 5px rgba(10, 168, 95, .08);

}





/* =========================

   JOURNEY NAVIGATION

   ========================= */



.auto-journey-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    /* max-width: 1150px; */
    margin: 0 auto 35px;
}



.auto-step {
    border: 1px solid #e4e9ee;
    background: #fff;
    border-radius: 18px;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all .3s ease;
    text-align: left;
    min-width: 220px;
}



.auto-step:hover {

    border-color: rgba(0, 168, 95, .35);

    transform: translateY(-2px);

}



.auto-step.active {

    background: #071c13;

    border-color: #071c13;

    color: #fff;

    box-shadow: 0 15px 35px rgba(7, 28, 19, .15);

}



.step-number {
    font-size: 1rem;
    font-weight: 700;
    opacity: .55;
    align-self: flex-start;
    margin-top: 3px;
}



.step-icon {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf9f3;
    color: #079456;
    flex-shrink: 0;
}



.auto-step.active .step-icon {

    background: #0aa85f;

    color: #fff;

}



.step-content {

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.step-content strong {
    font-size: 1rem;
    line-height: 1.3;
}



.step-content small {
    font-size: 1rem;
    opacity: .65;
}



.journey-line {

    width: 35px;

    height: 1px;

    background: #dce4df;

}





/* =========================

   MAIN SHOWCASE

   ========================= */



.auto-showcase {

    max-width: 1180px;

    margin: 0 auto;

    border: 1px solid #dfe8e3;

    border-radius: 28px;

    background: #f6fbf8;

    padding: 12px;

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 12px;

    box-shadow: 0 25px 70px rgba(20, 50, 35, .08);

}





/* =========================

   IMAGE SIDE

   ========================= */



.auto-showcase-visual {

    min-height: 560px;

    background: #071c13;

    border-radius: 21px;

    overflow: hidden;

    position: relative;

}



.visual-topbar {

    height: 58px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255, 255, 255, .75);

    font-size: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}



.live-dot {

    width: 7px;

    height: 7px;

    background: #19c875;

    border-radius: 50%;

    box-shadow: 0 0 0 5px rgba(25, 200, 117, .12);

}



.visual-step-count {

    margin-left: auto;

    font-weight: 700;

    color: #fff;

}



.auto-image-wrapper {

    position: absolute;

    inset: 58px 0 0;

    overflow: hidden;

}



.auto-image-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: opacity .25s ease, transform .5s ease;

}



.auto-image-wrapper::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(180deg,

            rgba(7, 28, 19, .05) 35%,

            rgba(7, 28, 19, .78) 100%);

    pointer-events: none;

}



.image-overlay-card {

    position: absolute;

    left: 24px;

    right: 24px;

    bottom: 24px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px 17px;

    border-radius: 16px;

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

    backdrop-filter: blur(14px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, .18);

}



.overlay-icon {

    width: 40px;

    height: 40px;

    background: #0aa85f;

    color: #fff;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.image-overlay-card strong {

    display: block;

    color: #111827;

    font-size: 14px;

    margin-bottom: 3px;

}



.image-overlay-card span:not(.overlay-icon) {

    color: #64748b;

    font-size: 11px;

    display: block;

}





/* =========================

   CONVERSATION

   ========================= */



.auto-conversation {

    background: #fff;

    border-radius: 21px;

    overflow: hidden;

    min-height: 560px;

    display: flex;

    flex-direction: column;

    border: 1px solid #e6ece8;

}



.conversation-header {

    height: 70px;

    padding: 0 20px;

    border-bottom: 1px solid #edf0ee;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.wa-profile {

    display: flex;

    align-items: center;

    gap: 11px;

}



.wa-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #0aa85f;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}



.wa-profile strong {
    display: block;
    color: #111827;
    font-size: 1rem;

}



.wa-profile span {

    display: block;

    color: #7a8794;

    font-size: 11px;

    margin-top: 3px;

}



.wa-profile span i {

    color: #0aa85f;

    font-size: 6px;

    vertical-align: middle;

    margin-right: 3px;

}



.conversation-menu {

    color: #9aa5ae;

}



.conversation-panel {

    display: none;

    padding: 25px 25px 30px;

    overflow-y: auto;

    flex: 1;

    animation: autoPanelIn .35s ease;

}



.conversation-panel.active {

    display: block;

}



@keyframes autoPanelIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.chat-date {
    text-align: center;
    color: #a0a9b2;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 24px;
}



.chat-message {

    margin-bottom: 20px;

    max-width: 90%;

}



.chat-message.customer {

    margin-left: auto;

}



.chat-message.ai {

    margin-right: auto;

}



.message-label {
    display: block;
    color: #7a8794;
    font-size: 0.8rem;
    margin-bottom: 6px;
}



.chat-message.ai .message-label {

    color: #079456;

}



.chat-message.ai .message-label i {

    margin-right: 3px;

}



.bubble {

    border-radius: 15px;

    padding: 13px 15px;

    font-size: 13px;

    line-height: 1.6;

    color: #334155;

}



.customer .bubble {

    background: #eaf7f0;

    border-bottom-right-radius: 4px;

}



.ai .bubble {

    background: #f3f6f5;

    border-bottom-left-radius: 4px;

}



.chat-message small {
    display: block;
    margin-top: 5px;
    color: #a5adb4;
    font-size: 0.7rem;

}



.customer small {

    text-align: right;

}



.quick-options {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 10px;

}



.quick-options button {
    border: 1px solid #bce8d1;
    color: #078b51;
    background: #fff;
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: default;
}





/* =========================

   VEHICLE MINI CARD

   ========================= */



.vehicle-mini-card {

    margin-top: 11px;

    border: 1px solid #e0e9e4;

    border-radius: 13px;

    padding: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.vehicle-mini-icon {

    width: 37px;

    height: 37px;

    border-radius: 10px;

    background: #eaf8f0;

    color: #0aa85f;

    display: flex;

    align-items: center;

    justify-content: center;

}



.vehicle-mini-card strong {

    display: block;

    font-size: 11px;

    color: #1e293b;

}



.vehicle-mini-card span {

    display: block;

    font-size: 9px;

    color: #89949e;

    margin-top: 2px;

}



.vehicle-mini-card>i {

    margin-left: auto;

    color: #b2bbb8;

    font-size: 10px;

}



.chat-action-btn {

    border: 0;

    background: #0aa85f;

    color: #fff;

    padding: 10px 14px;

    border-radius: 10px;

    font-size: 11px;

    font-weight: 600;

    margin-top: 12px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

}



.automation-success {

    margin-top: 25px;

    padding: 14px;

    border-radius: 13px;

    background: #edf9f3;

    display: flex;

    align-items: center;

    gap: 11px;

}



.success-icon {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    background: #0aa85f;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}



.automation-success strong {

    display: block;

    font-size: 11px;

    color: #166534;

}



.automation-success span {

    display: block;

    font-size: 9px;

    color: #6b7c73;

    margin-top: 3px;

}





/* =========================

   RESULT BAR

   ========================= */



.auto-result-bar {

    max-width: 1180px;

    margin: 18px auto 0;

    padding: 18px 20px;

    border: 1px solid #e1e9e5;

    border-radius: 17px;

    background: #fff;

}



.result-flow {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

}



.result-flow span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #44525d;
    font-size: 1rem;
    font-weight: 600;
}



.result-flow span i {

    color: #0aa85f;

}



.result-flow>i {

    color: #b5c0ba;

    font-size: 10px;

}





/* =========================

   RESPONSIVE

   ========================= */



@media (max-width: 1100px) {



    .auto-journey-nav {

        flex-wrap: wrap;

        gap: 10px;

    }



    .journey-line {

        display: none;

    }



    .auto-step {

        flex: 1 1 220px;

    }

}





@media (max-width: 991px) {



    .auto-showcase {

        grid-template-columns: 1fr;

    }



    .auto-showcase-visual,

    .auto-conversation {

        min-height: 500px;

    }

}





@media (max-width: 575px) {



    .auto-action-heading {

        margin-bottom: 30px;

    }



    .auto-action-heading h2 {

        font-size: 28px;

    }



    .auto-action-intro {

        font-size: 14px;

    }



    .auto-journey-nav {

        display: grid;

        grid-template-columns: 1fr 1fr;

    }



    .auto-step {

        min-width: 0;

        padding: 11px;

        border-radius: 14px;

    }



    .step-number {

        display: none;

    }



    .step-icon {

        width: 34px;

        height: 34px;

    }



    .step-content strong {

        font-size: 11px;

    }



    .step-content small {

        font-size: 9px;

    }



    .auto-showcase {

        border-radius: 20px;

        padding: 7px;

    }



    .auto-showcase-visual {

        min-height: 350px;

        border-radius: 15px;

    }



    .auto-conversation {

        min-height: 450px;

        border-radius: 15px;

    }



    .image-overlay-card {

        left: 14px;

        right: 14px;

        bottom: 14px;

    }



    .conversation-panel {

        padding: 20px 17px;

    }



    .result-flow {

        justify-content: flex-start;

    }



    .result-flow>i {

        display: none;

    }

}







/* =========================================================

   HEALTHCARE - SEE IT IN ACTION

   ========================================================= */



.healthcare-action-section {

    position: relative;

    overflow: hidden;

}



.healthcare-action-heading {

    max-width: 850px;

    margin: 0 auto 42px;

}



.healthcare-action-heading h2 {
    margin-top: 16px;
    margin-bottom: 14px;
    font-size: 3rem;
    font-weight: 700;
}



.healthcare-action-heading p {
    /* max-width: 720px; */
    margin: 0 auto;
    color: #64748b;
    font-size: 1.2rem;
    line-height: 1.75;
}



.healthcare-label-dot {

    width: 7px;

    height: 7px;

    display: inline-block;

    background: #0aa85f;

    border-radius: 50%;

    margin-right: 8px;

    box-shadow: 0 0 0 5px rgba(10, 168, 95, .08);

}





/* =========================================================

   JOURNEY NAV

   ========================================================= */



.healthcare-journey-nav {

    max-width: 1180px;

    margin: 0 auto 30px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.healthcare-step {

    min-width: 225px;

    padding: 13px 16px;

    border: 1px solid #e1e9e5;

    background: #fff;

    border-radius: 17px;

    display: flex;

    align-items: center;

    gap: 11px;

    text-align: left;

    cursor: pointer;

    transition: all .3s ease;

}



.healthcare-step:hover {

    border-color: rgba(10, 168, 95, .4);

    transform: translateY(-2px);

}



.healthcare-step.active {

    background: #071c13;

    border-color: #071c13;

    color: #fff;

    box-shadow: 0 16px 35px rgba(7, 28, 19, .14);

}



.health-step-number {
    font-size: 1rem;
    font-weight: 700;
    opacity: .5;

}



.health-step-icon {

    width: 40px;

    height: 40px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf8f1;

    color: #079456;

    flex-shrink: 0;

}



.healthcare-step.active .health-step-icon {

    background: #0aa85f;

    color: #fff;

}



.health-step-content {

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.health-step-content strong {
    font-size: 0.9rem;
    line-height: 1.3;
}



.health-step-content small {
    font-size: 0.9rem;
    opacity: .62;
}



.health-journey-line {

    width: 32px;

    height: 1px;

    background: #dce6e0;

}





/* =========================================================

   MAIN SHOWCASE

   ========================================================= */



.healthcare-showcase {

    max-width: 1180px;

    margin: 0 auto;

    padding: 11px;

    display: grid;

    grid-template-columns: 1.08fr .92fr;

    gap: 12px;

    background: #f4faf7;

    border: 1px solid #dfe9e4;

    border-radius: 28px;

    box-shadow: 0 25px 70px rgba(22, 60, 40, .08);

}





/* =========================================================

   IMAGE AREA

   ========================================================= */



.healthcare-visual {

    min-height: 575px;

    position: relative;

    overflow: hidden;

    border-radius: 21px;

    background: #071c13;

}



.healthcare-visual-topbar {

    height: 58px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    color: rgba(255, 255, 255, .72);

    font-size: 11px;

    position: relative;

    z-index: 5;

}



.healthcare-live-status {

    display: flex;

    align-items: center;

    gap: 8px;

}



.healthcare-live-status span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #20c879;

    box-shadow: 0 0 0 5px rgba(32, 200, 121, .12);

}



.healthcare-step-counter {

    margin-left: auto;

}



.healthcare-step-counter strong {

    color: #fff;

    font-size: 14px;

}



.healthcare-step-counter span {

    opacity: .5;

}



.healthcare-image-container {

    position: absolute;

    inset: 58px 0 0;

    overflow: hidden;

}



.healthcare-image-container img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: opacity .25s ease, transform .45s ease;

}



.healthcare-image-container::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(180deg,

            rgba(7, 28, 19, .02) 35%,

            rgba(7, 28, 19, .82) 100%);

}



.healthcare-image-info {

    position: absolute;

    z-index: 4;

    left: 24px;

    right: 24px;

    bottom: 24px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 16px;

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

    backdrop-filter: blur(14px);

    box-shadow: 0 18px 45px rgba(0, 0, 0, .2);

}



.healthcare-info-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0aa85f;

    color: #fff;

    border-radius: 12px;

}



.healthcare-image-info strong {

    display: block;

    color: #111827;

    font-size: 13px;

    line-height: 1.4;

}



.healthcare-image-info span {

    display: block;

    color: #64748b;

    font-size: 10px;

    line-height: 1.5;

    margin-top: 3px;

}





/* =========================================================

   CHAT AREA

   ========================================================= */



.healthcare-chat {

    min-height: 575px;

    background: #fff;

    border: 1px solid #e4ebe7;

    border-radius: 21px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.healthcare-chat-header {

    height: 70px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #edf1ef;

}



.healthcare-profile {

    display: flex;

    align-items: center;

    gap: 10px;

}



.healthcare-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0aa85f;

    color: #fff;

    font-size: 20px;

}



.healthcare-profile strong {
    display: block;
    color: #17212b;
    font-size: 1rem;
}



.healthcare-profile span {
    display: block;
    color: #7d8a94;
    font-size: 0.9rem;
    margin-top: 3px;
}



.healthcare-profile span i {

    color: #0aa85f;

    font-size: 6px;

    margin-right: 3px;

}



.healthcare-chat-menu {

    color: #9da8b0;

}





/* =========================================================

   CHAT PANELS

   ========================================================= */



.healthcare-chat-panel {

    display: none;

    padding: 24px 25px 30px;

    flex: 1;

    animation: healthcarePanelIn .35s ease;

}



.healthcare-chat-panel.active {

    display: block;

}



@keyframes healthcarePanelIn {



    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }



}



.healthcare-chat-date {
    text-align: center;
    color: #a1abb2;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 22px;
}



.health-message {

    max-width: 90%;

    margin-bottom: 20px;

}



.health-message.patient {

    margin-left: auto;

}



.health-message.ai {

    margin-right: auto;

}



.health-message-label {
    display: block;
    color: #7d8991;
    font-size: 0.8rem;
    margin-bottom: 6px;
}



.health-message.ai .health-message-label {

    color: #078e53;

}



.health-message-label i {

    margin-right: 3px;

}



.health-bubble {

    padding: 13px 15px;

    border-radius: 15px;

    color: #334155;

    font-size: 12px;

    line-height: 1.65;

}



.health-message.patient .health-bubble {

    background: #eaf8f1;

    border-bottom-right-radius: 4px;

}



.health-message.ai .health-bubble {

    background: #f3f6f5;

    border-bottom-left-radius: 4px;

}



.health-message small {
    display: block;
    color: #a3adb4;
    font-size: 0.8rem;
    margin-top: 5px;
}



.health-message.patient small {

    text-align: right;

}





/* =========================================================

   QUESTION CARD

   ========================================================= */



.health-question-card {

    margin-top: 10px;

    padding: 12px;

    border: 1px solid #e2ebe6;

    border-radius: 13px;

    background: #fff;

}



.health-question-card>span {
    display: block;
    color: #52606b;
    font-size: 1rem;
    margin-bottom: 8px;
}



.health-options {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}



.health-options button {
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid #bfe8d2;
    background: #fff;
    color: #078c51;
    font-size: 0.9rem;
    font-weight: 600;
}





/* =========================================================

   QUALIFIED CARD

   ========================================================= */



.healthcare-qualified {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    margin-top: 18px;

    background: #edf9f3;

    border-radius: 13px;

}



.qualified-icon {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #0aa85f;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}



.healthcare-qualified strong {
    display: block;
    color: #166534;
    font-size: 0.9rem;
}



.healthcare-qualified span {
    display: block;
    color: #708078;
    font-size: 0.9rem;
    margin-top: 3px;
}





/* =========================================================

   DOCTOR CARD

   ========================================================= */



.health-doctor-card {

    margin-top: 12px;

    padding: 12px;

    border: 1px solid #e0e9e4;

    border-radius: 13px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.doctor-avatar {

    width: 38px;

    height: 38px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf8f1;

    color: #0aa85f;

}



.doctor-details {

    flex: 1;

}



.doctor-details strong {

    display: block;

    color: #26333d;

    font-size: 10px;

}



.doctor-details span {

    display: block;

    color: #8b969e;

    font-size: 9px;

    margin-top: 3px;

}



.health-doctor-card>i {

    color: #adb6bb;

    font-size: 9px;

}



.health-slot-title {

    margin-top: 13px;

    margin-bottom: 7px;

    color: #67737b;

    font-size: 9px;

    font-weight: 600;

}



.health-slots {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}



.health-slots button {

    border: 1px solid #dce6e1;

    background: #fff;

    color: #4b5962;

    border-radius: 9px;

    padding: 8px 11px;

    font-size: 9px;

}



.health-slots button.selected {

    background: #eaf8f1;

    color: #078c51;

    border-color: #a9dfc1;

    font-weight: 700;

}



.health-primary-btn {

    border: 0;

    background: #0aa85f;

    color: #fff;

    padding: 10px 13px;

    margin-top: 12px;

    border-radius: 10px;

    font-size: 10px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 7px;

}





/* =========================================================

   REMINDER CARD

   ========================================================= */



.health-reminder-card {

    margin-top: 11px;

    padding: 12px;

    border-radius: 13px;

    border: 1px solid #e0e9e4;

    display: flex;

    align-items: center;

    gap: 10px;

}



.reminder-icon {

    width: 37px;

    height: 37px;

    border-radius: 10px;

    background: #edf9f3;

    color: #0aa85f;

    display: flex;

    align-items: center;

    justify-content: center;

}



.health-reminder-card div:nth-child(2) {

    flex: 1;

}



.health-reminder-card strong {

    display: block;

    color: #293640;

    font-size: 10px;

}



.health-reminder-card span {

    display: block;

    color: #8b969e;

    font-size: 9px;

    margin-top: 3px;

}



.health-reminder-card>i {

    color: #0aa85f;

    font-size: 15px;

}



.health-automation-note {

    margin-top: 15px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #63716a;

    font-size: 9px;

}



.health-automation-note i {

    color: #0aa85f;

}





/* =========================================================

   REPORT CARD

   ========================================================= */



.health-report-card {

    margin-top: 11px;

    padding: 12px;

    border-radius: 13px;

    border: 1px solid #e0e9e4;

    display: flex;

    align-items: center;

    gap: 10px;

}



.report-icon {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    background: #eaf8f1;

    color: #0aa85f;

    display: flex;

    align-items: center;

    justify-content: center;

}



.health-report-card div {

    flex: 1;

}



.health-report-card strong {

    display: block;

    color: #293640;

    font-size: 10px;

}



.health-report-card span {

    display: block;

    color: #8b969e;

    font-size: 9px;

    margin-top: 3px;

}



.health-report-card button {

    border: 0;

    background: #edf9f3;

    color: #078c51;

    border-radius: 8px;

    padding: 7px 10px;

    font-size: 9px;

    font-weight: 600;

}





/* =========================================================

   BOTTOM FLOW

   ========================================================= */



.healthcare-result-bar {

    max-width: 1180px;

    margin: 17px auto 0;

    padding: 17px 20px;

    border-radius: 16px;

    border: 1px solid #e0e9e4;

    background: #fff;

}



.health-result-flow {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}



.health-result-flow span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #46545d;
    font-size: 1rem;
    font-weight: 600;
}



.health-result-flow span i {

    color: #0aa85f;

}



.health-result-flow>i {
    color: #b5c0ba;
    font-size: 1rem;
}





/* =========================================================

   HIGHLIGHTS

   ========================================================= */



.healthcare-feature-highlights {
    /* max-width: 1050px; */
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}



.healthcare-feature-highlights>div {

    padding: 17px;

    border: 1px solid #e3ebe7;

    border-radius: 15px;

    background: #fff;

    display: grid;

    grid-template-columns: auto 1fr;

    column-gap: 11px;

    align-items: center;

}



.health-highlight-icon {

    grid-row: span 2;

    width: 39px;

    height: 39px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf9f3;

    color: #0aa85f;

}



.healthcare-feature-highlights strong {
    color: #26343d;
    font-size: 1rem;
}



.healthcare-feature-highlights small {
    color: #829099;
    font-size: 0.9rem;
    line-height: 1.5;
}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1100px) {



    .healthcare-journey-nav {

        flex-wrap: wrap;

        gap: 9px;

    }



    .health-journey-line {

        display: none;

    }



    .healthcare-step {

        flex: 1 1 220px;

    }



}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 991px) {



    .healthcare-showcase {

        grid-template-columns: 1fr;

    }



    .healthcare-visual,

    .healthcare-chat {

        min-height: 500px;

    }



    .healthcare-feature-highlights {

        grid-template-columns: 1fr;

    }



}





@media (max-width: 575px) {



    .healthcare-action-heading h2 {

        font-size: 28px;

    }



    .healthcare-action-heading p {

        font-size: 14px;

    }



    .healthcare-journey-nav {

        display: grid;

        grid-template-columns: 1fr 1fr;

    }



    .healthcare-step {

        min-width: 0;

        padding: 10px;

        border-radius: 13px;

    }



    .health-step-number {

        display: none;

    }



    .health-step-icon {

        width: 34px;

        height: 34px;

        border-radius: 10px;

    }



    .health-step-content strong {

        font-size: 10px;

    }



    .health-step-content small {

        font-size: 8px;

    }



    .healthcare-showcase {

        padding: 7px;

        border-radius: 20px;

    }



    .healthcare-visual {

        min-height: 350px;

        border-radius: 15px;

    }



    .healthcare-chat {

        min-height: 470px;

        border-radius: 15px;

    }



    .healthcare-image-info {

        left: 13px;

        right: 13px;

        bottom: 13px;

        padding: 12px;

    }



    .healthcare-info-icon {

        width: 36px;

        height: 36px;

    }



    .healthcare-chat-panel {

        padding: 20px 16px 25px;

    }



    .health-result-flow {

        justify-content: flex-start;

    }



    .health-result-flow>i {

        display: none;

    }



}

/* Premium Education — See It in Action */

.education-action-section {
    position: relative;
    overflow: hidden;
    padding: 92px 0 100px;
    background: #cfe7da;
    /* background: radial-gradient(circle at 8% 18%, rgba(8, 173, 91, .055), transparent 25%), radial-gradient(circle at 92% 78%, rgba(37, 99, 235, .045), transparent 28%), #f7fafc */
}

.education-action-heading {
    /* max-width: 820px; */
    margin: 0 auto 58px;
    text-align: center
}

.education-action-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 8px 18px;
    border: 1px solid rgba(8, 173, 91, .18);
    border-radius: 5px;
    background: #eaf8f1;
    color: #078f4c;
    font-size: 1rem;
    font-weight: 600;
}

.education-action-eyebrow:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #08ad5b;
    box-shadow: 0 0 0 4px rgba(8, 173, 91, .10)
}

.education-action-heading h2 {
    margin: 0 0 13px;
    color: #14213d;
    font-size: 3rem;
    line-height: 1.12;
    font-weight: 700;
    /* letter-spacing: -1.2px */
}

.education-action-heading p {
    /* max-width: 720px; */
    margin: 0 auto;
    color: #536b83;
    font-size: 1.2rem;
    line-height: 1.75
}

.education-action-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px
}

.education-action-list:before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #d7e5df 8%, #d7e5df 92%, transparent);
    transform: translateX(-50%)
}

.education-action-item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 62px;
    min-height: 475px;
    padding: 28px;
    border: 1px solid #dce6ee;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 35px rgba(20, 33, 61, .055);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
}

.education-action-item:hover {
    transform: translateY(-4px);
    border-color: #c5dfd2;
    box-shadow: 0 20px 48px rgba(20, 33, 61, .10)
}

.education-action-item:nth-child(even) .education-action-content {
    order: 1
}

.education-action-item:nth-child(even) .education-action-visual {
    order: 2
}

.education-action-visual {
    position: relative;
    min-width: 0;
    min-height: 410px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 19px;
    background: radial-gradient(circle at 50% 45%, rgba(8, 173, 91, .09), transparent 58%), linear-gradient(145deg, #f5faf8, #edf4f8);
    overflow: hidden
}

.education-action-visual:before {
    content: "";
    position: absolute;
    width: 72%;
    height: 72%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .68);
    filter: blur(2px)
}

.education-action-visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 520px;
    height: 410px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 16px 25px rgba(20, 33, 61, .13));
    transition: transform .35s ease
}

.education-action-item:hover .education-action-visual img {
    transform: scale(1.025)
}

.education-action-step {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(8, 173, 91, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #078f4c;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(20, 33, 61, .08)
}

.education-action-step-number {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: #08ad5b;
    font-size: 10px
}

.education-action-content {
    min-width: 0;
    padding: 10px 8px
}

.education-action-mini-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #078f4c;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase
}

.education-action-content h3 {
    margin: 0 0 14px;
    color: #14213d;
    font-size: 2rem;
    /* line-height: 1.2; */
    font-weight: 700;
    letter-spacing: -.65px
}

.education-action-lead {
    margin: 0 0 17px;
    color: #14213d;
    font-size: 1.2rem;
    line-height: 1.65;
    font-weight: 500
}

.education-action-content>p:last-of-type {
    margin: 0;
    color: #536b83;
    font-size: 1rem;
    line-height: 1.85
}

.education-action-benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e5edf2;
    color: #078f4c;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 600
}

.education-action-benefit span {
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eaf8f1
}

@media(max-width:991px) {

    .education-action-section {
        padding: 75px 0 82px
    }

    .education-action-list:before {
        display: none
    }

    .education-action-item {
        gap: 35px;
        min-height: 0;
        padding: 22px
    }

    .education-action-visual {
        min-height: 340px
    }

    .education-action-visual img {
        height: 340px
    }

}

@media(max-width:767px) {

    .education-action-section {
        padding: 58px 0 65px
    }

    .education-action-heading {
        margin-bottom: 32px
    }

    .education-action-heading h2 {
        font-size: 31px;
        letter-spacing: -.7px
    }

    .education-action-heading p {
        font-size: 14px
    }

    .education-action-list {
        gap: 18px
    }

    .education-action-item {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 14px;
        border-radius: 19px
    }

    .education-action-item:nth-child(even) .education-action-content, .education-action-item:nth-child(even) .education-action-visual {
        order: initial
    }

    .education-action-visual {
        min-height: 300px;
        padding: 8px;
        border-radius: 15px
    }

    .education-action-visual img {
        height: 300px
    }

    .education-action-step {
        top: 12px;
        left: 12px
    }

    .education-action-content {
        padding: 5px 7px 12px
    }

    .education-action-content h3 {
        font-size: 25px
    }

    .education-action-lead {
        font-size: 15px
    }

    .education-action-content>p:last-of-type {
        font-size: 13px;
        line-height: 1.75
    }

    .education-action-benefit {
        margin-top: 18px;
        padding-top: 14px
    }

}