/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1789709260
Updated: 2026-09-18 05:27:40

*/

/* =========================================================
   MAIN SECTION
========================================================= */

.es-dashboard-slider {
    overflow: hidden !important;
    color: #222 !important;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;
}

.es-dashboard-slider *,
.es-dashboard-slider *::before,
.es-dashboard-slider *::after {
    box-sizing: border-box !important;
}

.es-slider-container {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}


/* =========================================================
   WARNING
========================================================= */

.es-slider-warning {
    max-width: 900px !important;
    margin: 30px auto !important;
    padding: 20px !important;
    background: #fff8e5 !important;
    border: 1px solid #f0d993 !important;
    border-radius: 10px !important;
    font-family: Arial, sans-serif !important;
}


/* =========================================================
   TAB OUTER
========================================================= */

.es-tabs-outer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 0 32px !important;
    padding: 0 !important;
}


/* =========================================================
   TAB CONTAINER
========================================================= */

.es-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 2px !important;

    width: fit-content !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 4px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    background: #e8e8ed !important;

    border-radius: 40px !important;

    scrollbar-width: none !important;

    box-shadow:
        inset
        0
        1px
        1px
        rgba(255,255,255,.85) !important;
}

.es-tabs::-webkit-scrollbar {
    display: none !important;
}


/* =========================================================
   TAB BUTTON
========================================================= */

.es-tab {
    position: relative !important;

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

    flex: 0 0 auto !important;

    min-width: 95px !important;
    min-height: 42px !important;

    appearance: none !important;

    border: 0 !important;
    outline: none !important;

    margin: 0 !important;

    padding:
        10px
        18px
        14px !important;

    overflow: hidden !important;

    background: transparent !important;

    border-radius: 30px !important;

    color: #686870 !important;

    font-family: inherit !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    text-align: center !important;

    text-transform: none !important;

    letter-spacing: 0 !important;

    white-space: nowrap !important;

    box-shadow: none !important;

    cursor: pointer !important;

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


/* =========================================================
   TAB LABEL - PERFECT CENTER
========================================================= */

.es-tab-label {
    position: relative !important;
    z-index: 5 !important;

    display: flex !important;

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

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;

    text-align: center !important;

    vertical-align: middle !important;
}


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

.es-tab.is-active {
    background: #ffffff !important;

    color: #242428 !important;

    box-shadow:
        0
        2px
        8px
        rgba(0,0,0,.08) !important;
}


/* =========================================================
   PROGRESS LINE
========================================================= */

.es-tab-progress {
    position: absolute !important;

    z-index: 20 !important;

    left: 16px !important;
    right: 16px !important;

    bottom: 9px !important;

    display: block !important;

    width: auto !important;

    height: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            100deg,
            #2a64ff 0%,
            #43b8ff 38%,
            #34e6a0 72%,
            #12a45e 100%
        ) !important;

    border: 0 !important;

    border-radius: 50px !important;

    box-shadow: none !important;

    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center !important;

    pointer-events: none !important;
}

/*
IMPORTANT:
transform aur opacity par !important mat lagana
kyunki JS inko animate karti hai.
*/

.es-tab.is-active .es-tab-progress {
    opacity: 1;
}


/* =========================================================
   LAPTOP AREA
========================================================= */

.es-laptop-area {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.es-laptop {
    position: relative !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}


/* =========================================================
   LAPTOP DISPLAY
========================================================= */

.es-laptop-display {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        10px
        10px
        11px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            #34353a 0%,
            #121316 52%,
            #292a2e 100%
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.04) !important;

    border-radius:
        22px
        22px
        14px
        14px !important;
}


/* =========================================================
   CAMERA
========================================================= */

.es-laptop-camera {
    position: absolute !important;

    z-index: 50 !important;

    top: 4px !important;
    left: 50% !important;

    display: block !important;

    width: 5px !important;
    height: 5px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    background: #2c2d31 !important;

    border-radius: 50% !important;
}


/* =========================================================
   SCREEN
   MORE HEIGHT + LESS WIDTH LOOK
========================================================= */

.es-screen {
    position: relative !important;

    width: 100% !important;

    aspect-ratio: 19 / 10 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border-radius: 10px !important;
}


/* =========================================================
   SCREEN SLIDE
========================================================= */

.es-screen-slide {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    background: #ffffff !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translateX(25px)
        scale(.995) !important;

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease !important;
}

.es-screen-slide.is-active {
    z-index: 5 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateX(0)
        scale(1) !important;
}


/* =========================================================
   SCREEN IMAGE
   NO CROP + TOP ALIGN
========================================================= */

.es-screen-slide img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: top center !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   EMPTY IMAGE
========================================================= */

.es-empty-image {
    display: flex !important;

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

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    padding: 20px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f0f1f6
        ) !important;

    color: #888 !important;

    font-size: 15px !important;

    text-align: center !important;
}


/* =========================================================
   LAPTOP BASE
========================================================= */

.es-laptop-base {
    position: relative !important;

    left: -20px !important;

    width: calc(100% + 40px) !important;

    height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            to bottom,
            #f4f5f6 0%,
            #d4d7db 42%,
            #aeb2b9 100%
        ) !important;

    border-radius:
        0
        0
        11px
        11px !important;

    box-shadow:
        0
        18px
        28px
        rgba(28,32,43,.22) !important;
}

.es-laptop-base::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 6px !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #dfe1e4
        ) !important;
}


/* =========================================================
   LAPTOP GROOVE
========================================================= */

.es-laptop-groove {
    position: absolute !important;

    z-index: 5 !important;

    top: 1px !important;
    left: 50% !important;

    width: 90px !important;
    height: 5px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    background: #aeb1b7 !important;

    border-radius:
        0
        0
        8px
        8px !important;
}


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

.es-content-row {
    display: flex !important;

    align-items: flex-end !important;

    justify-content: space-between !important;

    gap: 40px !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        45px
        0
        0 !important;
}

.es-content-left {
    flex:
        1
        1
        auto !important;

    width: 100% !important;

    max-width: 700px !important;

    margin: 0 !important;

    padding: 0 !important;
}


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

.es-slider-heading {
    margin:
        0
        0
        9px !important;

    padding: 0 !important;

    color: #252528 !important;

    font-family: inherit !important;

    font-size:
        clamp(
            25px,
            2.5vw,
            32px
        ) !important;

    font-weight: 750 !important;

    line-height: 1.12 !important;

    letter-spacing: -.035em !important;

    text-transform: none !important;
}


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

.es-slider-description {
    margin: 0 !important;
    padding: 0 !important;

    color: #77777e !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 1.65 !important;
}

.es-slider-description p {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}


/* =========================================================
   BUTTON AREA
========================================================= */

.es-content-right {
    flex:
        0
        0
        auto !important;

    margin: 0 !important;

    padding: 0 !important;
}


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

.es-guided-button {
    display: inline-flex !important;

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

    gap: 13px !important;

    min-height: 50px !important;

    margin: 0 !important;

    padding:
        13px
        23px !important;

    background: #242426 !important;

    border: 0 !important;

    border-radius: 100px !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 13px !important;
    font-weight: 650 !important;

    line-height: 1 !important;

    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;

    transition:
        transform .2s ease,
        background .2s ease !important;
}

.es-guided-button:hover {
    background: #111113 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
}

.es-guided-arrow {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform .2s ease !important;
}

.es-guided-button:hover .es-guided-arrow {
    transform: translateX(4px) !important;
}


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

@media (max-width: 991px) {

    .es-slider-container {
        max-width: 900px !important;
    }

    .es-content-row {
        gap: 30px !important;
    }

    .es-laptop {
        max-width: 920px !important;
    }

    .es-screen {
        aspect-ratio: 19 / 10 !important;
    }

    .es-screen-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: top center !important;
    }
}


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

@media (max-width: 767px) {

    .es-dashboard-slider {
        padding:
            18px
            12px
            30px !important;
    }

    .es-tabs-outer {
        justify-content: flex-start !important;
        margin-bottom: 23px !important;
    }

    .es-tabs {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .es-tab {
        min-width: 90px !important;
        min-height: 40px !important;
        padding:
            10px
            15px
            14px !important;
        font-size: 12px !important;
    }

    .es-tab-progress {
        left: 13px !important;
        right: 13px !important;
        bottom: 4px !important;
    }

    .es-laptop {
        max-width: 100% !important;
    }

    .es-laptop-display {
        padding:
            6px
            6px
            7px !important;

        border-radius:
            14px
            14px
            8px
            8px !important;
    }

    .es-screen {
        width: 100% !important;
        aspect-ratio: 19 / 10 !important;
        border-radius: 7px !important;
    }

    .es-screen-slide {
        width: 100% !important;
        height: 100% !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .es-screen-slide img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: top center !important;
    }

    .es-laptop-base {
        left: -8px !important;
        width: calc(100% + 16px) !important;
        height: 10px !important;
    }

    .es-laptop-groove {
        width: 65px !important;
        height: 4px !important;
    }

    .es-content-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 22px !important;
        padding-top: 31px !important;
    }

    .es-slider-heading {
        font-size: 24px !important;
    }

    .es-slider-description {
        font-size: 13px !important;
    }

    .es-guided-button {
        min-height: 46px !important;
        padding:
            12px
            20px !important;
    }
}


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

@media (max-width: 480px) {

    .es-tab {
        min-width: 82px !important;
        padding:
            9px
            13px
            13px !important;
    }

    .es-slider-heading {
        font-size: 22px !important;
    }

    .es-screen {
        aspect-ratio: 19 / 10 !important;
    }

    .es-screen-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: top center !important;
    }
}


/* =========================
   GOOGLE FONTS
========================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');


/* =========================
   VARIABLES
========================== */

.j-booking-scroll {

    --gut: clamp(20px, 3vw, 40px);

    --heading-font: "Figtree", sans-serif;
    --body-font: "Inter", sans-serif;

  

    --panel: #0f1116;

    --border: #272b34;

    --text: #f7f8fb;

    --muted: #a5aec2;

    --muted-title: #727b93;

    --blue: #2784ff;

    --cyan: #39c8ff;

    --green: #24dfa0;

    position: relative;

    min-height:
        calc(
            var(--booking-step-count)
            *
            110vh
        );

    background: var(--bg);

    font-family: var(--body-font);
}


/* =========================
   MAIN STICKY ROW
========================== */

.j-sticky {

    position: sticky;

    top: 0;

    width: 100%;

    min-height: 100vh;

    height: 100vh !important;

    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.28fr);

    gap:
        clamp(
            46px,
            5vw,
            74px
        );

    align-items: center;

   

    overflow: hidden;
}


/* =========================
   LEFT SIDE
========================== */

.j-booking-content {

    width: 100%;

    max-width: 520px;

    min-width: 0;

    margin: 0;
}


/* =========================
   EYEBROW
========================== */

.j-booking-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 23px;

    color: #768098;

    font-family: var(--body-font);

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.j-booking-eyebrow::before {

    content: "";

    display: block;

    width: 18px;

    height: 1px;

    flex-shrink: 0;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );
}


/* =========================
   MAIN HEADING
========================== */

.j-booking-heading {

    margin: 0;

    color: var(--text);

    font-family: var(--heading-font);

    font-size:
        clamp(
            54px,
            5vw,
            76px
        );

    font-weight: 700;

    line-height: .98;

    letter-spacing: -3px;
}


.j-heading-main {

    display: block;

    font-family: var(--heading-font);

    font-weight: 700;
}


.j-heading-highlight {

    display: block;

    width: max-content;

    max-width: 100%;

    margin-top: 4px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;

    font-style: italic;

    letter-spacing: -2px;

    background:
        linear-gradient(
            90deg,
            #2b82ff 0%,
            #42c2ff 55%,
            #28e19f 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


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

.j-booking-description {

    max-width: 470px;

    margin-top: 20px;

    margin-bottom: 31px;

    color: var(--muted);

    font-family: var(--body-font);

    font-size: 15px;

    font-weight: 400;

    line-height: 1.7;
}


.j-booking-description p {

    margin: 0;
}


/* =========================
   STEPS
========================== */

.j-booking-steps {

    display: flex;

    flex-direction: column;

    gap: 5px;

    width: 100%;
}


/* =========================
   STEP
========================== */

.j-booking-step {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 17px;

    width: 100%;

    min-height: 67px;

    padding:
        15px
        17px;

    border:
        1px solid
        transparent;

    border-radius: 19px;

    background: transparent;

    box-shadow: none;

    transition:
        min-height .35s ease,
        background .35s ease,
        border-color .35s ease,
        padding .35s ease;
}


/* =========================
   CLOSED STEP
========================== */

.j-booking-step:not(.is-active) {

    min-height: 67px;

    border-color: transparent;

    background: transparent;

    box-shadow: none;
}


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

.j-booking-step.is-active {

    min-height: 138px;

    padding-top: 17px;

    padding-bottom: 17px;

    background:
        linear-gradient(
            180deg,
            #101218 0%,
            #0c0e13 100%
        );

    border-color: var(--border);
}


/* =========================
   NUMBER
========================== */

.j-step-number {

    width: 29px;

    height: 29px;

    flex:
        0
        0
        29px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        #293040;

    border-radius: 50%;

    color: #707a92;

    font-family: var(--body-font);

    font-size: 11px;

    font-weight: 500;

    line-height: 1;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.j-booking-step.is-active .j-step-number {

    border-color: transparent;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2d8aff 0%,
            #42caff 48%,
            #27df9f 100%
        );

    box-shadow:
        0
        0
        20px
        rgba(43,145,255,.28);
}


/* =========================
   STEP CONTENT
========================== */

.j-step-info {

    width: 100%;

    min-width: 0;
}


/* =========================
   STEP TITLE
========================== */

.j-step-title {

    color: var(--muted-title);

    font-family: var(--heading-font);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -.3px;

    transition:
        color .3s ease;
}


.j-booking-step.is-active .j-step-title {

    color: #ffffff;
}


/* =========================
   STEP DESCRIPTION
========================== */

.j-step-description {

    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    opacity: 0;

    color: #adb5c7;

    font-family: var(--body-font);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.55;

    transition:
        opacity .3s ease,
        max-height .35s ease,
        margin-top .35s ease;
}


.j-step-description p {

    margin: 0;
}


.j-booking-step.is-active
.j-step-description {

    max-height: 160px;

    margin-top: 7px;

    opacity: 1;
}


/* =========================
   PROGRESS LINE
========================== */

.j-step-progress {

    width: 100%;

    height: 2px;

    margin-top: 13px;

    overflow: hidden;

    border-radius: 50px;

    background: #262a31;

    opacity: 0;
}


.j-booking-step.is-active
.j-step-progress {

    opacity: 1;
}


.j-booking-step.is-completed
.j-step-progress {

    display: none;
}


.j-step-progress-fill {

    width: 0%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--blue) 0%,
            var(--cyan) 50%,
            var(--green) 100%
        );

    will-change: width;
}


/* =========================
   RIGHT SIDE
========================== */

.j-booking-visual {

    position: relative;

    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================
   BROWSER
   BIGGER LIKE TARGET
========================== */

.j-browser {

    position: relative;

    width: 100%;

    max-width: 765px;

    padding: 7px;

    overflow: hidden;

    border:
        1px solid
        #303543;

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #272c3a,
            #151821
        );

    box-shadow:
        0
        35px
        90px
        rgba(0,0,0,.4);
}


/* =========================
   BROWSER TOP
========================== */

.j-browser-top {

    position: relative;

    height: 43px;

    display: flex;

    align-items: center;

    padding-inline: 14px;

    border-radius:
        15px
        15px
        0
        0;

    background: #eceef3;
}


/* =========================
   BROWSER DOTS
========================== */

.j-browser-dots {

    display: flex;

    gap: 7px;
}


.j-browser-dots span {

    display: block;

    width: 10px;

    height: 10px;

    border-radius: 50%;
}


.j-browser-dots span:nth-child(1) {

    background: #ff6258;
}


.j-browser-dots span:nth-child(2) {

    background: #ffbd2e;
}


.j-browser-dots span:nth-child(3) {

    background: #29c941;
}


/* =========================
   URL
========================== */

.j-browser-url {

    position: absolute;

    left: 50%;

    top: 50%;

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

    max-width: 70%;

    padding:
        5px
        17px;

    overflow: hidden;

    border-radius: 7px;

    background: #ffffff;

    color: #707a91;

    font-family: var(--body-font);

    font-size: 11px;

    font-weight: 500;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================
   SCREEN
   IMPORTANT:
   TALLER BOX SO IMAGE DOES NOT CUT
========================================= */

.j-screen {

    position: relative;

    width: 100%;

    /*
       Lower ratio = more height.
       Target screenshot ke closer.
    */
    aspect-ratio: 1.43 / 1;

    overflow: hidden;

    border-radius:
        0
        0
        15px
        15px;

    background: #eef1f7;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================
   SCREEN IMAGE
   COMPLETE IMAGE FIT
========================================= */

.j-screen-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    max-width: 100%;

    max-height: 100%;

    display: block;

    margin: 0;

    padding: 0;

    object-fit: contain;

    object-position:
        center center;

    background: #eef1f7;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(.985);

    transition:
        opacity .4s ease,
        transform .4s ease,
        visibility .4s ease;
}


.j-screen-image.is-active {

    opacity: 1;

    visibility: visible;

    transform:
        scale(1);
}


/* =========================
   COUNTER
========================== */

.j-counter {

    position: absolute;

    right: 21px;

    bottom: 18px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        7px
        13px;

    border-radius: 50px;

    background:
        rgba(
            15,
            17,
            22,
            .84
        );

    color: #ffffff;

    font-family: var(--body-font);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;
}


/* =========================
   LARGE TABLET / SMALL PC
========================== */

@media (max-width: 1180px) {

    .j-sticky {

        grid-template-columns:
            .82fr
            1.18fr;

        gap: 36px;

        padding:
            28px
            24px;
    }


    .j-browser {

        max-width: 710px;
    }


    .j-booking-heading {

        font-size:
            clamp(
                46px,
                5vw,
                64px
            );
    }
}


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

@media (max-width: 991px) {

    .j-booking-scroll {

        min-height:
            calc(
                var(--booking-step-count)
                *
                140vh
            );
    }


    .j-sticky {

        height: 100svh !important;

        min-height: 100svh;

        grid-template-columns:
            .9fr
            1.1fr;

        gap: 28px;

        padding:
            32px
            22px;
    }


    .j-booking-heading {

        font-size:
            clamp(
                42px,
                6vw,
                56px
            );
    }


    .j-step-title {

        font-size: 17px;
    }


    .j-step-description {

        font-size: 13px;
    }


    .j-browser {

        width: 100%;

        max-width: 650px;
    }


    .j-screen {

        aspect-ratio:
            1.43 / 1;
    }


    .j-screen-image {

        width: 100%;

        height: 100%;

        object-fit: contain;

        object-position:
            center center;
    }
}


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

@media (max-width: 767px) {

    .j-booking-scroll {

        min-height:
            calc(
                var(--booking-step-count)
                *
                160vh
            );
    }


    .j-sticky {
    position: sticky;
    top: 0;
    height: 100svh !important;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 28px;
    overflow-y: auto;
    padding: 35px
           0px;
}


    .j-booking-content {

        max-width: 100%;
    }


    .j-booking-heading {

        font-size: 44px;

        line-height: 1;

        letter-spacing: -2px;
    }


    .j-booking-description {

        margin-top: 18px;

        margin-bottom: 20px;

        font-size: 14px;
    }


    .j-booking-step {

        min-height: 58px;

        padding:
            12px
            10px;
    }


    .j-booking-step.is-active {

        min-height: 112px;

        padding:
            14px
            12px;
    }


    .j-step-number {

        width: 27px;

        height: 27px;

        flex-basis: 27px;
    }


    .j-step-title {

        font-size: 17px;
    }


    .j-step-description {

        font-size: 13px;
    }


    .j-booking-visual {

        width: 100%;
    }


    .j-browser {

        width: 100%;

        max-width: 100%;
    }


    .j-browser-top {

        height: 38px;
    }


    .j-screen {

        width: 100%;

        aspect-ratio:
            1.43 / 1;
    }


    .j-screen-image {

        width: 100%;

        height: 100%;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;

        object-position:
            center center;
    }
}


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

@media (max-width: 480px) {

    .j-booking-heading {

        font-size: 39px;
    }


    .j-booking-eyebrow {

        margin-bottom: 17px;

        font-size: 10px;

        letter-spacing: 3px;
    }


    .j-booking-steps {

        gap: 2px;
    }


    .j-browser-url {

        max-width: 160px;
    }


    .j-browser {

        border-radius: 16px;

        padding: 5px;
    }


    .j-browser-top {

        height: 34px;
    }


    .j-screen {

        aspect-ratio:
            1.43 / 1;
    }


    .j-screen-image {

        object-fit: contain;

        object-position:
            center center;
    }
}


/* =========================================================
   SERVICE STATS
========================================================= */

.ss-service-stats {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.ss-service-item {
    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 0 !important;
}


.ss-service-item:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   TOP ROW
========================================================= */

.ss-service-head {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    gap: 20px !important;

    margin: 0 0 8px !important;
    padding: 0 !important;
}


/* =========================================================
   SERVICE NAME
========================================================= */

.ss-service-name {
    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f5f6fa !important;

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

    line-height: 1.35 !important;

    text-align: left !important;
}


/* =========================================================
   COUNT
========================================================= */

.ss-service-count {
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #9ea7bb !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    text-align: right !important;
}


/* =========================================================
   PROGRESS TRACK
========================================================= */

.ss-progress-track {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #181b24 !important;

    border: 0 !important;

    border-radius: 100px !important;
}


/* =========================================================
   PROGRESS FILL
========================================================= */

.ss-progress-fill {
    display: block !important;

    height: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            100deg,
            #2a64ff 0%,
            #43b8ff 38%,
            #34e6a0 72%,
            #12a45e 100%
        ) !important;

    border-radius: 100px !important;

    transition:
        width .5s ease !important;
}


/* =========================================================
   ADMIN ERROR MESSAGE
========================================================= */

.ss-empty-message {
    padding: 15px !important;

    background: #fff7df !important;

    border: 1px solid #e6d49c !important;

    border-radius: 8px !important;

    color: #333 !important;

    font-size: 14px !important;
}


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

@media (max-width: 767px) {

    .ss-service-name,
    .ss-service-count {
        font-size: 13px !important;
    }

    .ss-service-item {
        margin-bottom: 16px !important;
    }

    .ss-progress-track {
        height: 7px !important;
    }

}










































/* =========================================================
   SLOTON DARK STACKING FEATURES
   ORIGINAL FRAMED DESIGN + IMAGE SLIDER
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

.sloton-dark-stack-section,
.sloton-dark-stack-section * {
    box-sizing: border-box;
}

.sloton-dark-stack-section {
    --sloton-blue: #2a64ff;
    --sloton-cyan: #43b8ff;
    --sloton-green: #34e6a0;
    --sloton-bg: #050912;
    --sloton-card: #090f18;
    --sloton-text: #f7f8fb;
    --sloton-muted: #929daf;

    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: 30px 0 110px;

    font-family: "Inter", sans-serif;
    position: relative;
}

/* =========================================================
   STACK WRAPPER
========================================================= */

.sloton-dark-stack {
    position: relative;
    isolation: isolate;
}

/* =========================================================
   MAIN CARD
========================================================= */

.sloton-dark-card {
    position: sticky;
    top: calc(24px + var(--sloton-offset));
    z-index: var(--sloton-index);

    min-height: 600px;
    margin: 0 0 72px;
    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #0b111b,
            #070b12
        );

    border:
        1px solid
        rgba(255,255,255,.095);

    box-shadow:
        0 28px 65px rgba(0,0,0,.38),
        0 8px 25px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);

    opacity: 1;
    transform: none;
    filter: none;
}

.sloton-dark-card::before {
    content: "";
    position: absolute;
    z-index: 20;

    top: 0;
    left: 5%;

    width: 90%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #2a64ff 20%,
            #43b8ff 52%,
            #34e6a0 80%,
            transparent 100%
        );

    opacity: .7;
    pointer-events: none;
}

.sloton-dark-card::after {
    content: "";
    position: absolute;

    top: -120px;
    right: -150px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        rgba(42,100,255,.065);

    filter: blur(100px);
    pointer-events: none;
}

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

.sloton-dark-card-inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 47% 53%;

    min-height: 600px;
}

/* =========================================================
   LEFT SIDE
========================================================= */

.sloton-dark-copy {
    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: 25px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.012),
            rgba(255,255,255,0)
        );
}

/* =========================================================
   TOP LABEL
========================================================= */

.sloton-dark-topline {
    display: flex;
    align-items: center;

    gap: 13px;
    margin-bottom: 28px;
}

.sloton-dark-number {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;
    flex: 0 0 45px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(42,100,255,.22),
            rgba(67,184,255,.06)
        );

    border:
        1px solid
        rgba(67,184,255,.18);

    color: #72a0ff;

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

    box-shadow:
        inset 0 0 20px rgba(42,100,255,.07);
}

.sloton-dark-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: .14em;
    text-transform: uppercase;

    background:
        linear-gradient(
            120deg,
            #2a64ff,
            #43b8ff 50%,
            #34e6a0
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* =========================================================
   TITLE
========================================================= */

.sloton-dark-title {
    max-width: 500px;

    margin: 0 0 18px;

    font-family: "Figtree", sans-serif;

    font-size:
        clamp(
            34px,
            3.6vw,
            38px
        );

    line-height: 1.4;
    letter-spacing: -.045em;

    font-weight: 600;
    color: #f7f8fb;
}

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

.sloton-dark-description {
    max-width: 500px;

    margin: 0 0 29px;

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

    font-weight: 400;
    color: #909cad;
}

/* =========================================================
   POINTS
========================================================= */

.sloton-dark-points {
    display: grid;

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

    gap: 14px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255,255,255,.075);
}

.sloton-dark-point {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    min-width: 0;
    padding: 15px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius: 16px;

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

    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease;
}

.sloton-dark-point:hover {
    transform: translateY(-3px);

    border-color:
        rgba(67,184,255,.22);

    background:
        rgba(255,255,255,.042);
}

/* =========================================================
   POINT ICON
========================================================= */

.sloton-dark-point-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    margin-top: 1px;

    overflow: hidden;

    border-radius: 10px;

    background:
        rgba(52,230,160,.09);

    border:
        1px solid
        rgba(52,230,160,.22);

    color: #34e6a0;
}

.sloton-dark-point-icon img,
.sloton-dark-point-icon-image {
    display: block !important;

    width: 18px !important;
    height: 18px !important;

    max-width: 18px !important;
    max-height: 18px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;
}

.sloton-dark-point-icon svg {
    display: block;

    width: 14px;
    height: 14px;
}

.sloton-dark-point-content {
    min-width: 0;
}

/* POINT TITLE */

.sloton-dark-point h4 {
    margin: 0 0 5px;

    font-family: "Figtree", sans-serif;

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

    font-weight: 600;
    color: #f4f6f9;
}

/* POINT TEXT */

.sloton-dark-point p {
    margin: 0;

    font-size: 13px;
    line-height: 1.55;

    font-weight: 400;
    color: #8490a1;
}

/* =========================================================
   RIGHT VISUAL
   SAME OLD DESIGN
========================================================= */

.sloton-dark-visual {
    position: relative;

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

    min-width: 0;
    min-height: 600px;

    padding: 36px;

    overflow: hidden;
    isolation: isolate;

    border-left:
        1px solid
        rgba(255,255,255,.075);

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(42,100,255,.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(52,230,160,.065),
            transparent 32%
        ),
        #080d15;
}

/* =========================================================
   SLIDER = OLD IMAGE SHELL
========================================================= */

.sloton-dark-slider {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 620px;

    height: 430px;

    padding: 13px;

    overflow: visible;

    margin-bottom: 58px;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.016)
        );

    border:
        1px solid
        rgba(255,255,255,.105);

    box-shadow:
        0 28px 75px rgba(0,0,0,.46),
        0 0 75px rgba(42,100,255,.045);

    opacity: 1;
    transform: translateZ(0);
}

/* =========================================================
   EACH SLIDE
========================================================= */

.sloton-dark-slide {
    position: absolute;

    top: 13px;
    right: 13px;
    bottom: 13px;
    left: 13px;

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

    overflow: hidden;

    border-radius: 18px;

    background: #0a111b;

    border:
        1px solid
        rgba(255,255,255,.055);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .55s ease,
        visibility .55s ease;
}

.sloton-dark-slide.is-active {
    z-index: 3;

    opacity: 1;
    visibility: visible;
}

/* =========================================================
   SLIDER IMAGE
   COMPLETE IMAGE VISIBLE - NO CROP
========================================================= */

.sloton-dark-slide img,
.sloton-dark-slider-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   OLD SINGLE IMAGE FALLBACK
   SAME FRAMED DESIGN
========================================================= */

.sloton-dark-single-image {
    position: relative;
    z-index: 3;

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

    width: 100%;
    max-width: 620px;
    height: 430px;

    padding: 13px;

    overflow: hidden;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.016)
        );

    border:
        1px solid
        rgba(255,255,255,.105);

    box-shadow:
        0 28px 75px rgba(0,0,0,.46),
        0 0 75px rgba(42,100,255,.045);
}

.sloton-dark-single-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: #0a111b;

    border-radius: 18px;
}

/* =========================================================
   SLIDER ARROWS
========================================================= */

.sloton-slider-arrow {
    position: absolute !important;
    z-index: 15 !important;

    top: auto !important;
    bottom: -52px !important;

    display: grid !important;
    place-items: center !important;

    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 50% !important;

    background: #2a64ff !important;
    color: #ffffff !important;

    cursor: pointer !important;

    transform: none !important;

    box-shadow: 0 7px 22px rgba(0,0,0,.28) !important;

    transition:
        background .22s ease,
        border-color .22s ease,
        transform .22s ease !important;
}

.sloton-slider-arrow:hover {
    background: #1d52e6 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.36) !important;
    transform: translateY(-2px) !important;
}

.sloton-slider-arrow-prev {
    left: calc(50% - 96px) !important;
}

.sloton-slider-arrow-next {
    right: calc(50% - 96px) !important;
}

.sloton-slider-arrow svg {
    display: block;

    width: 18px;
    height: 18px;
}

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

.sloton-slider-dots {
    position: absolute !important;
    z-index: 15 !important;

    left: 50% !important;
    bottom: -47px !important;

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

    gap: 7px !important;

    min-height: 30px !important;

    padding: 7px 10px !important;

    border-radius: 999px !important;

    background: #172235 !important;

    box-shadow: 0 7px 22px rgba(0,0,0,.24) !important;

    transform: translateX(-50%) !important;
}

.sloton-slider-dot {
    display: block !important;

    width: 8px !important;
    height: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #55729d !important;

    cursor: pointer !important;

    transition:
        transform .2s ease,
        background .2s ease !important;
}

.sloton-slider-dot.is-active {
    background: #ffffff !important;
    transform: scale(1.22) !important;
}

/* =========================================================
   PLACEHOLDER
========================================================= */

.sloton-dark-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 570px;

    min-height: 330px;

    padding: 30px;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.016)
        );

    border:
        1px solid
        rgba(255,255,255,.105);

    color: #8692a4;

    text-align: center;
    font-size: 14px;
}

/* =========================================================
   PROMO STYLE
========================================================= */

.sloton-style-promo
.sloton-dark-visual {
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(52,230,160,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 20% 90%,
            rgba(42,100,255,.14),
            transparent 34%
        ),
        #071018;
}

.sloton-style-promo
.sloton-dark-slider,
.sloton-style-promo
.sloton-dark-single-image {
    max-width: 590px;

    background:
        rgba(255,255,255,.035);
}

/* =========================================================
   ANALYTICS STYLE
========================================================= */

.sloton-style-analytics
.sloton-dark-visual {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(42,100,255,.16),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 85%,
            rgba(52,230,160,.08),
            transparent 32%
        ),
        #07101a;
}

/* =========================================================
   DESKTOP STACK DEPTH
========================================================= */

@media (min-width: 992px) {

    .sloton-dark-card {
        transform-origin: top center;
        will-change: transform;
    }

    .sloton-dark-card:last-child {
        margin-bottom: 0;
    }
}

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

@media (max-width: 991px) {

    .sloton-dark-stack-section {
        width:
            min(
                760px,
                calc(100% - 28px)
            );

        padding:
            20px 0 70px;
    }

    .sloton-dark-card {
        position: relative;

        top: auto;

        min-height: auto;

        margin-bottom: 30px;

        border-radius: 26px;
    }

    .sloton-dark-card-inner {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .sloton-dark-copy {
        padding:
            38px 30px;
    }

    .sloton-dark-visual {
        min-height: 450px;

        padding: 28px;

        border-left: 0;

        border-top:
            1px solid
            rgba(255,255,255,.075);
    }

    .sloton-dark-slider,
    .sloton-dark-single-image {
        width: 100%;
        max-width: 680px;
        height: 420px;
    }
}

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

@media (max-width: 575px) {

    .sloton-dark-stack-section {
        width:
            calc(100% - 20px);

        padding:
            15px 0 55px;
    }

    .sloton-dark-card {
        margin-bottom: 22px;

        border-radius: 22px;
    }

    .sloton-dark-copy {
        padding:
            28px 20px;
    }

    .sloton-dark-topline {
        margin-bottom: 22px;
    }

    .sloton-dark-number {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .sloton-dark-title {
        font-size: 32px;
        line-height: 1.08;
    }

    .sloton-dark-description {
        margin-bottom: 23px;

        font-size: 14px;
        line-height: 1.7;
    }

    .sloton-dark-points {
        grid-template-columns: 1fr;

        gap: 11px;
    }

    .sloton-dark-visual {
        min-height: 365px;

        padding: 18px;
    }

    .sloton-dark-slider,
    .sloton-dark-single-image {
        height: 295px;

        padding: 8px;
        margin-bottom: 55px;

        border-radius: 20px;
    }

    .sloton-dark-slide {
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: 8px;

        border-radius: 14px;
    }

    .sloton-dark-single-image img {
        border-radius: 14px;
    }

    .sloton-slider-arrow {
        width: 36px;
        height: 36px;
    }

    .sloton-slider-arrow {
        bottom: -50px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .sloton-slider-arrow-prev {
        left: calc(50% - 88px) !important;
    }

    .sloton-slider-arrow-next {
        right: calc(50% - 88px) !important;
    }

    .sloton-slider-dots {
        bottom: -45px !important;
    }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sloton-dark-card,
    .sloton-dark-point,
    .sloton-dark-slide,
    .sloton-slider-arrow,
    .sloton-slider-dot {
        transition: none !important;
        animation: none !important;
    }
}


.booking-black-text {
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}















/* ======================================================
   SLOT ON NO-SHOW CALCULATOR
====================================================== */

.sloton-calculator {
    --ink: #070a12;
    --ink-2: #0a0e18;
    --line: rgba(255, 255, 255, 0.10);
    --blue: #43b8ff;
    --green: #1fc08a;
    --white: #f8faff;
    --text: #aeb8d0;

    width: 100%;
    font-family: "Inter", sans-serif;
}

.sloton-calculator *,
.sloton-calculator *::before,
.sloton-calculator *::after {
    box-sizing: border-box;
}


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

.sloton-calculator-grid {
    width: 100%;

    display: grid;

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

    gap: 16px;
}


/* ======================================================
   CARDS
====================================================== */

.calc-in,
.calc-out {
    border-radius: 28px;

    padding:
        clamp(28px, 4vw, 44px);

    box-shadow:
        0 0 0 1px var(--line) inset;

    min-width: 0;
}


/* LEFT CARD */

.calc-in {
    background: var(--ink-2);

    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* RIGHT CARD */

.calc-out {
    background:
        linear-gradient(
            160deg,
            #0f1a3a,
            #081220 55%,
            #062018
        );

    display: flex;

    flex-direction: column;
}


/* ======================================================
   RANGE GROUPS
====================================================== */

.calc-range-group {
    margin-bottom: 46px;
}

.calc-range-group:last-child {
    margin-bottom: 0;
}


.calc-range-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


/* ======================================================
   TYPOGRAPHY
====================================================== */


/* Inter */

.calc-range-label,
.calc-result-description,
.calc-result-label,
.calc-bottom-note,
.calc-range-scale {
    font-family: "Inter", sans-serif;
}


/* Figtree */

.calc-range-value,
.calc-big-number,
.calc-result-value,
.calc-result-eyebrow {
    font-family: "Figtree", sans-serif;
}


/* ======================================================
   LEFT LABEL
====================================================== */

.calc-range-label {
    color: #aab4cc;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 500;
}


/* ======================================================
   LEFT BIG VALUES
====================================================== */

.calc-range-value {
    color: #ffffff;

    font-size: 30px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.03em;

    white-space: nowrap;
}


/* ======================================================
   SLIDER
====================================================== */

.sloton-range {
    --progress: 0%;

    width: 100%;

    height: 6px;

    display: block;

    appearance: none;

    -webkit-appearance: none;

    border: 0;

    outline: 0;

    cursor: pointer;

    border-radius: 999px;

    background:
        linear-gradient(
            to right,

            #43b8ff 0%,

            #43b8ff var(--progress),

            #292d37 var(--progress),

            #292d37 100%
        );
}


/* Chrome / Safari */

.sloton-range::-webkit-slider-thumb {
    appearance: none;

    -webkit-appearance: none;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    border: 0;

    background: #ffffff;

    cursor: pointer;

    box-shadow:
        0 0 0 8px rgba(67, 184, 255, 0.14),
        0 5px 12px rgba(0, 0, 0, 0.30);
}


/* Firefox */

.sloton-range::-moz-range-thumb {
    width: 26px;

    height: 26px;

    border-radius: 50%;

    border: 0;

    background: #ffffff;

    cursor: pointer;

    box-shadow:
        0 0 0 8px rgba(67, 184, 255, 0.14),
        0 5px 12px rgba(0, 0, 0, 0.30);
}


/* ======================================================
   RANGE SCALE
====================================================== */

.calc-range-scale {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 17px;

    color: #76809a;

    font-size: 12px;

    line-height: 1;
}


/* ======================================================
   RIGHT SIDE EYEBROW
====================================================== */

.calc-result-eyebrow {
    color: #8da2c9;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    margin-bottom: 22px;
}


/* ======================================================
   BIG RESULT NUMBER
====================================================== */

.calc-big-number {
    color: #f8f9ff;

    font-size:
        clamp(64px, 7vw, 70px);

    line-height: 0.92;

    font-weight: 700;

    letter-spacing: -0.06em;

    margin-bottom: 24px;
}


/* ======================================================
   RESULT DESCRIPTION
====================================================== */

.calc-result-description {
    color: #abb7d1;

    font-size: 16px;

    line-height: 1.6;

    font-weight: 500;
}


/* ======================================================
   DIVIDER
====================================================== */

.calc-divider {
    width: 100%;

    height: 1px;

    margin: 30px 0 32px;

    background:
        rgba(255, 255, 255, 0.14);
}


/* ======================================================
   RESULT ROWS
====================================================== */

.calc-result-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 21px;
}


.calc-result-label {
    color: #adb7cf;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 500;
}


.calc-result-value {
    color: #ffffff;

    font-size: 20px;

    line-height: 1;

    font-weight: 700;

    white-space: nowrap;
}


/* GREEN SAVED VALUE */

.calc-result-value.calc-green {
    color: #24e5ae;

    font-size: 30px;

    letter-spacing: -0.03em;
}


/* ======================================================
   SHOW ME HOW BUTTON
====================================================== */

.calc-button-wrap {
    margin-top: 14px;

    align-self: flex-start;
}


.calc-demo-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 170px;

    height: 48px;

    padding:
        0 24px;

    border-radius: 999px;

    border: none;

    outline: none;

    text-decoration: none;

    color: #ffffff;

    font-family: "Inter", sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1;

    background:
        linear-gradient(
            100deg,
            #2a64ff 0%,
            #2f8dff 48%,
            #1fc08a 100%
        );

    box-shadow:
        0 10px 26px rgba(42, 100, 255, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;

    cursor: pointer;
}


.calc-demo-btn:hover {
    color: #ffffff;

    text-decoration: none;

    transform:
        translateY(-2px);

    filter:
        brightness(1.05);

    box-shadow:
        0 14px 34px rgba(42, 100, 255, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}


.calc-demo-btn:focus,
.calc-demo-btn:visited {
    color: #ffffff;

    text-decoration: none;
}


.calc-demo-btn-text {
    display: inline-block;
}


.calc-demo-btn-arrow {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    line-height: 1;

    transition:
        transform 0.25s ease;
}


.calc-demo-btn:hover .calc-demo-btn-arrow {
    transform:
        translateX(4px);
}


/* ======================================================
   BOTTOM NOTE
====================================================== */

.calc-bottom-note {
    color: #7785a2;

    font-size: 13px;

    line-height: 1.5;

    margin-top: 18px;
}


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

@media (max-width: 900px) {

    .sloton-calculator-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 575px) {

    .calc-in,
    .calc-out {
        padding:
            28px 22px;

        border-radius:
            22px;
    }


    .calc-range-group {
        margin-bottom:
            40px;
    }


    .calc-range-label {
        font-size:
            14px;
    }


    .calc-range-value {
        font-size:
            24px;
    }


    .calc-big-number {
        font-size:
            60px;
    }


    .calc-result-row {
        gap:
            15px;
    }


    .calc-result-label {
        font-size:
            14px;
    }


    .calc-result-value.calc-green {
        font-size:
            24px;
    }


    .calc-demo-btn {
        min-width:
            165px;

        height:
            47px;

        padding:
            0 22px;

        font-size:
            14px;
    }

}












@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================
   SLOTon SERVICE CARDS — UPDATED PREMIUM VERSION
========================================================= */

.sloton-service-grid{
    --sloton-bg:#050b14;
    --sloton-card:#08111e;
    --sloton-border:rgba(91,142,220,.22);

    --sloton-text:#f5f8ff;
    --sloton-muted:#8da0bd;

    --sloton-blue:#2a64ff;
    --sloton-cyan:#43b8ff;
    --sloton-green:#27e3ad;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    width:100%;

    font-family:'Inter', sans-serif;
}


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

.sloton-service-card{
    --mouse-x:50%;
    --mouse-y:50%;

    position:relative;
    isolation:isolate;

    display:flex;
    flex-direction:column;

    min-height:390px;

    padding:22px;

    overflow:hidden;

    border-radius:16px;

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

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(42,100,255,.10),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0a1423 0%,
            #07101c 55%,
            #050c15 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 14px 35px rgba(0,0,0,.22);

    opacity:0;
    transform:translateY(24px);

    transition:
        opacity .6s ease,
        transform .55s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;

    transition-delay:calc(var(--card-index) * 65ms);

    font-family:'Inter', sans-serif;
}


/* visible on scroll */

.sloton-service-card.sloton-card-visible{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
   STATIC CARD GLOW
========================================================= */

.sloton-service-card::before{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-145px;
    top:-145px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(46,117,255,.18) 0%,
            rgba(46,117,255,.07) 38%,
            transparent 70%
        );

    pointer-events:none;
    z-index:-2;

    transition:
        transform .4s ease,
        opacity .4s ease;
}


/* mouse spotlight */

.sloton-service-card::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            310px circle at var(--mouse-x) var(--mouse-y),
            rgba(67,184,255,.09),
            transparent 60%
        );

    opacity:0;

    z-index:-1;

    transition:opacity .25s ease;
}


.sloton-service-card:hover::after{
    opacity:1;
}


.sloton-service-card:hover{
    border-color:rgba(67,160,255,.40);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 22px 55px rgba(0,0,0,.32),
        0 0 30px rgba(42,100,255,.05);
}


.sloton-service-card:hover::before{
    transform:scale(1.12);
}


/* =========================================================
   MOVING BORDER GLOW
========================================================= */

.sloton-card-glow{
    position:absolute;
    inset:0;

    border-radius:inherit;

    pointer-events:none;

    z-index:0;

    opacity:0;

    transition:opacity .3s ease;
}


.sloton-card-glow::before{
    content:"";

    position:absolute;
    inset:-1px;

    padding:1px;

    border-radius:inherit;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(42,100,255,.75) 26%,
            rgba(67,184,255,.55) 50%,
            rgba(39,227,173,.55) 68%,
            transparent 95%
        );

    background-size:250% 250%;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
    mask-composite:exclude;

    animation:slotonBorderMove 6s linear infinite;
}


.sloton-service-card:hover .sloton-card-glow{
    opacity:.72;
}


@keyframes slotonBorderMove{
    0%{
        background-position:0% 50%;
    }

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

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


/* =========================================================
   TOP AREA
========================================================= */

.sloton-card-top{
    position:relative;
    z-index:2;

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

    gap:16px;

    margin-bottom:22px;
}


/* =========================================================
   ICON BOX
========================================================= */

.sloton-card-icon{
    position:relative;

    width:52px;
    height:52px;

    flex:0 0 52px;

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

    padding:5px;

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

    border:1px solid rgba(89,152,205,.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 8px 20px rgba(0,0,0,.12);

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


/* icon glow */

.sloton-card-icon::before{
    content:"";

    position:absolute;

    width:32px;
    height:32px;

    border-radius:50%;

    background:rgba(39,227,173,.12);

    filter:blur(10px);

    opacity:.65;

    transition:.3s ease;
}


/* icon */

.sloton-card-icon img{
    position:relative;
    z-index:2;

    display:block;

    width:30px;
    height:30px !important;
    max-width:30px !important;

    object-fit:contain;

    opacity:1;

    filter:
        brightness(1.15)
        saturate(1.15)
        drop-shadow(0 0 5px rgba(39,227,173,.20));

    transition:
        transform .3s ease,
        filter .3s ease;
}


.sloton-service-card:hover .sloton-card-icon{
    transform:translateY(-2px);

    border-color:rgba(39,227,173,.32);

    background:
        linear-gradient(
            145deg,
            rgba(39,227,173,.09),
            rgba(255,255,255,.03)
        );

    box-shadow:
        0 0 20px rgba(39,227,173,.08);
}


.sloton-service-card:hover .sloton-card-icon::before{
    opacity:1;
    transform:scale(1.15);
}


.sloton-service-card:hover .sloton-card-icon img{
    transform:scale(1.06);

    filter:
        brightness(1.3)
        saturate(1.2)
        drop-shadow(0 0 7px rgba(39,227,173,.35));
}


/* =========================================================
   BADGE
========================================================= */

.sloton-card-badge{
    max-width:72%;

    padding:6px 11px;

    border-radius:999px;

    border:1px solid rgba(65,133,235,.38);

    background:
        linear-gradient(
            90deg,
            rgba(42,100,255,.10),
            rgba(67,184,255,.04)
        );

    color:#89afff;

    font-family:'Inter', sans-serif;

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

    font-weight:700;

    letter-spacing:.65px;

    text-transform:uppercase;

    white-space:nowrap;

    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   CONTENT WRAPPER
========================================================= */

.sloton-card-content{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    flex:1;
}


/* =========================================================
   TITLE
========================================================= */

.sloton-card-title{
    margin:0 0 8px;

    color:var(--sloton-text);

    font-family:'Figtree', sans-serif;

    font-size:25px;
    line-height:1.3;

    font-weight:700;

    letter-spacing:-.4px;
}


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

.sloton-card-description{
    margin:0 0 20px;

    min-height:58px;

    color:#93a8c8;

    font-family:'Inter', sans-serif;

    font-size:16px;
    line-height:1.6;

    font-weight:400;
}


.sloton-card-description p{
    margin:0;
}


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

.sloton-card-features{
    display:flex;
    flex-direction:column;

    gap:9px;

    padding:0;
    margin:0;

    list-style:none;

    font-family:'Inter', sans-serif;
}


.sloton-card-features li{
    display:flex;
    align-items:flex-start;

    gap:10px;

    padding:0;

    color:#899dbb;

    font-family:'Inter', sans-serif;

    font-size:14px;
    line-height:1.45;

    opacity:0;

    transform:translateX(-7px);

    transition:
        opacity .4s ease,
        transform .4s ease;

    transition-delay:
        calc(220ms + (var(--feature-index) * 65ms));
}


.sloton-card-visible .sloton-card-features li{
    opacity:1;
    transform:translateX(0);
}


/* tick */

.sloton-feature-check{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 16px;

    width:16px;
    height:16px;

    margin-top:1px;

    color:#29e7af;

    font-family:'Inter', sans-serif;

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

    font-weight:800;

    text-shadow:
        0 0 10px rgba(39,227,173,.30);
}


.sloton-feature-text{
    flex:1;
    font-family:'Inter', sans-serif;
}


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

.sloton-card-footer{
    position:relative;
    z-index:2;

    display:grid;

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

    align-items:center;

    gap:18px;

    margin-top:24px;

    padding-top:17px;

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


/* =========================================================
   METRIC
========================================================= */

.sloton-card-metric{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}

.sloton-metric-label{
    display:block;
    margin-bottom:5px;
    color:#657b99;
    font-family:'Inter', sans-serif;
    font-size:10px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:.85px;
    text-transform:uppercase;
}

.sloton-metric-value {
    display: block;
    color: #2fe6b0;
    font-family: 'Figtree', sans-serif;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.45px;
    text-shadow: 0 0 14px rgba(47,230,176,.12);
    transition: transform .3s ease,
        text-shadow .3s ease;
    margin-top: 10px;
}

.sloton-service-card:hover .sloton-metric-value{
    transform:translateY(-1px);

    text-shadow:
        0 0 18px rgba(47,230,176,.22);
}


/* =========================================================
   BUTTON WRAPPER ONLY
   BUTTON CSS ITSELF IS NOT CHANGED
========================================================= */

.sloton-card-footer .calc-button-wrap{
    margin:0;
    padding:0;

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

    flex-shrink:0;
}


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

@media(max-width:1024px){

    .sloton-service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


@media(max-width:767px){

    .sloton-service-grid{
        grid-template-columns:1fr;
        gap:16px;
    }


    .sloton-service-card{
        min-height:auto;

        padding:20px;
    }


    .sloton-card-description{
        min-height:auto;
    }


    .sloton-card-footer{
        grid-template-columns:minmax(0,1fr) auto;

        gap:15px;
    }

}


@media(max-width:520px){

    .sloton-service-card{
        padding:18px;
    }


    .sloton-card-icon{
        width:50px;
        height:50px;
        flex-basis:50px;
    }


    .sloton-card-icon img{
        width:30px;
        height:30px !important;
        max-width:30px !important;
    }


    .sloton-card-badge{
        max-width:70%;

        font-size:8px;
    }


    .sloton-card-footer{
        grid-template-columns:1fr;

        align-items:flex-start;

        gap:14px;
    }


    .sloton-card-footer .calc-button-wrap{
        justify-content:flex-start;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .sloton-service-card,
    .sloton-card-features li,
    .sloton-card-icon,
    .sloton-card-icon img,
    .sloton-card-icon::before,
    .sloton-metric-value{
        transition:none !important;
        animation:none !important;
    }


    .sloton-service-card{
        opacity:1 !important;
        transform:none !important;
    }


    .sloton-card-features li{
        opacity:1 !important;
        transform:none !important;
    }


    .sloton-card-glow::before{
        animation:none !important;
    }

}






.animated-circle .elementor-heading-title{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.animated-circle .elementor-heading-title::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #42e7b2;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(66, 231, 178, 0.9);

    animation: animatedDot 1.8s infinite;
}

@keyframes animatedDot {
    0% {
        box-shadow:
            0 0 0 0 rgba(66, 231, 178, 0.55),
            0 0 7px rgba(66, 231, 178, 0.9);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(66, 231, 178, 0),
            0 0 10px rgba(66, 231, 178, 1);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(66, 231, 178, 0),
            0 0 7px rgba(66, 231, 178, 0.8);
    }
}




















/* ==========================================================
   SLOTON PRICING COMPARISON
   FULL TABLE HORIZONTAL SCROLL RESPONSIVE
========================================================== */

.sloton-pricing-comparison {
    --sp-blue: #2a64ff;
    --sp-sky: #2f8dff;
    --sp-green: #1fc08a;

    --sp-bg: #0b0f17;
    --sp-bg-light: #111620;
    --sp-header: #171b25;

    --sp-border: rgba(255, 255, 255, 0.075);

    width: 100%;
    max-width: 100%;
    margin: 0 auto;

    font-family: Inter, Arial, sans-serif;

    box-sizing: border-box;
}


.sloton-pricing-comparison *,
.sloton-pricing-comparison *::before,
.sloton-pricing-comparison *::after {
    box-sizing: border-box;
}


/* ==========================================================
   OUTER SHELL
========================================================== */

.sloton-compare-shell {
    position: relative;

    width: 100%;
    max-width: 100%;

    padding: 1px;

    border-radius: 22px;

    background:
        linear-gradient(
            120deg,
            rgba(42, 100, 255, 0.85) 0%,
            rgba(47, 141, 255, 0.20) 32%,
            rgba(255, 255, 255, 0.07) 55%,
            rgba(31, 192, 138, 0.72) 100%
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.32),
        0 8px 35px rgba(42, 100, 255, 0.08);

    overflow: hidden;

    isolation: isolate;

    animation:
        slotonCompareReveal
        0.7s
        cubic-bezier(0.2, 0.75, 0.25, 1)
        both;
}


/* subtle top glow */
.sloton-compare-shell::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 220px;

    left: 38%;
    top: -170px;

    border-radius: 50%;

    background: rgba(42, 100, 255, 0.22);

    filter: blur(90px);

    pointer-events: none;

    z-index: 0;
}


/* ==========================================================
   FULL TABLE SCROLL WRAPPER
========================================================== */

.sloton-compare-scroll {
    position: relative;

    z-index: 1;

    width: 100%;
    max-width: 100%;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border-radius: 21px;

    background: var(--sp-bg);

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;

    touch-action: pan-x pan-y;

    scrollbar-width: thin;

    scrollbar-color:
        var(--sp-blue)
        var(--sp-bg);
}


/* Chrome / Edge scrollbar */
.sloton-compare-scroll::-webkit-scrollbar {
    height: 7px;
}


.sloton-compare-scroll::-webkit-scrollbar-track {
    background: #0b0f17;
}


.sloton-compare-scroll::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--sp-blue),
            var(--sp-green)
        );
}


/* ==========================================================
   TABLE
========================================================== */

.sloton-compare-table {
    width: 100%;

    min-width: 950px;

    margin: 0 !important;

    border: 0 !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;

    table-layout: fixed;

    background: transparent !important;

    color: #ffffff;

    box-shadow: none !important;
}


/* Remove theme defaults */
.sloton-compare-table,
.sloton-compare-table thead,
.sloton-compare-table tbody,
.sloton-compare-table tr,
.sloton-compare-table th,
.sloton-compare-table td {
    border-left: 0 !important;
    border-right: 0 !important;
}


.sloton-compare-table th,
.sloton-compare-table td {
    position: relative !important;

    padding: 0;

    border-top: 0 !important;

    border-bottom:
        1px solid
        var(--sp-border) !important;

    vertical-align: middle;

    white-space: normal;

    word-break: normal;

    overflow-wrap: break-word;

    box-sizing: border-box;
}


/* ==========================================================
   IMPORTANT
   REMOVE ALL STICKY BEHAVIOUR
========================================================== */

.sloton-compare-table th,
.sloton-compare-table td,
.sloton-compare-table thead th,
.sloton-feature-row td,
.sloton-category-row td {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    z-index: auto !important;
}


/* ==========================================================
   DESKTOP COLUMN WIDTHS
========================================================== */

.sloton-compare-table th:first-child,
.sloton-compare-table td:first-child {
    width: 34%;
}


.sloton-compare-table th:not(:first-child),
.sloton-compare-table td:not(:first-child) {
    width: 16.5%;

    text-align: center;
}


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

.sloton-compare-table thead tr {
    height: 68px;
}


.sloton-compare-table thead th {
    height: 68px;

    padding: 0 !important;

    background: #171b25;

    color: #f3f5fa;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.075) !important;

    font-family: Figtree, Inter, Arial, sans-serif;

    vertical-align: middle !important;
}


.sloton-header-inner {
    position: relative;

    width: 100%;
    height: 68px;

    display: flex;

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

    gap: 8px;

    padding: 0 18px;

    line-height: 1;

    box-sizing: border-box;
}


.sloton-header-left {
    justify-content: flex-start;
}


/* Core Modules */
.sloton-core-heading {
    font-size: 18px;

    font-weight: 750;

    letter-spacing: -0.025em;

    text-align: left !important;
}


/* Plan names */
.sloton-plan-name {
    display: inline-flex;

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

    font-size: 16px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.5px;

    text-align: center;
}


/* ==========================================================
   TEAM / HIGHLIGHTED PLAN
========================================================== */

.sloton-plan-heading.is-highlighted {
    position: relative !important;

    background:
        linear-gradient(
            180deg,
            rgba(42, 100, 255, 0.16),
            rgba(42, 100, 255, 0.065)
        ) !important;

    color: #bcc9ff;
}


.sloton-plan-heading.is-highlighted::before {
    content: "";

    position: absolute;

    top: 0;

    left: 14px;
    right: 14px;

    height: 2px;

    border-radius: 0 0 3px 3px;

    background:
        linear-gradient(
            90deg,
            var(--sp-blue),
            var(--sp-sky),
            var(--sp-green)
        );

    box-shadow:
        0 2px 14px
        rgba(47, 141, 255, 0.30);

    pointer-events: none;
}


/* ==========================================================
   POPULAR BADGE
========================================================== */

.sloton-plan-badge {
    display: inline-flex;

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

    height: 20px;

    padding: 0 8px;

    border:
        1px solid
        rgba(93, 169, 255, 0.30);

    border-radius: 999px;

    background:
        linear-gradient(
            100deg,
            rgba(42, 100, 255, 0.23),
            rgba(31, 192, 138, 0.12)
        );

    color: #a8d5ff;

    font-family: Inter, Arial, sans-serif;

    font-size: 8px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================
   HEADER ACCENTS
========================================================== */

.sloton-accent-default {
    color: #f3f5fa;
}


.sloton-accent-blue {
    color: #bdc8ff !important;
}


.sloton-accent-green {
    color: #3fddab !important;
}


.sloton-accent-gradient .sloton-plan-name {
    background:
        linear-gradient(
            100deg,
            #7d9eff,
            #52b2ff 45%,
            #3edaae
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* ==========================================================
   CATEGORY ROW
========================================================== */

.sloton-category-row td {
    height: 37px;

    padding: 0 !important;

    background: #141a24 !important;

    position: relative !important;
}


.sloton-category-title {
    min-height: 37px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 0 15px;

    font-size: 14px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.045em;

    text-transform: uppercase;

    color: #aebcff;

    white-space: nowrap;
}


.sloton-category-bar {
    display: block;

    flex-shrink: 0;

    width: 3px;
    height: 14px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            var(--sp-blue),
            var(--sp-green)
        );

    box-shadow:
        0 0 12px
        rgba(47, 141, 255, 0.28);
}


.sloton-category-green .sloton-category-title {
    color: #37ddb0;
}


/* ==========================================================
   FEATURE ROW
========================================================== */

.sloton-feature-row {
    height: 49px;
}


.sloton-feature-row td {
    height: 49px;

    background: #0c1119;

    transition:
        background 0.22s ease,
        color 0.22s ease;
}


.sloton-feature-row:nth-child(even) td {
    background: #0e131c;
}


.sloton-feature-row:hover td {
    background: #121823;
}


/* ==========================================================
   FEATURE NAME
========================================================== */

.sloton-feature-name {
    text-align: left !important;

    color: #d9deea;

    font-size: 14px;

    font-weight: 500;
}


.sloton-feature-name-inner {
    display: flex;

    align-items: center;

    min-height: 49px;

    padding: 0 15px;

    line-height: 1.35;
}


/* ==========================================================
   PLAN CELLS
========================================================== */

.sloton-cell-inner {
    min-height: 49px;

    display: flex;

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

    padding: 7px 12px;

    text-align: center;
}


/* highlighted Team column */
.sloton-plan-cell.is-highlighted {
    background:
        linear-gradient(
            180deg,
            rgba(42, 100, 255, 0.045),
            rgba(42, 100, 255, 0.015)
        ) !important;
}


.sloton-feature-row:hover
.sloton-plan-cell.is-highlighted {
    background:
        linear-gradient(
            180deg,
            rgba(42, 100, 255, 0.10),
            rgba(42, 100, 255, 0.035)
        ) !important;
}


/* ==========================================================
   VALUES
========================================================== */

.sloton-value {
    display: inline-block;

    max-width: 100%;

    color: #e3e7ef;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.3;

    text-align: center;

    white-space: normal;

    overflow-wrap: break-word;
}


/* Team blue */
.sloton-cell-accent-blue .sloton-value {
    color: #b7c4ff;
}


/* Business green */
.sloton-cell-accent-green .sloton-value {
    color: #3fe0ae;
}


/* Gradient */
.sloton-cell-accent-gradient .sloton-value {
    background:
        linear-gradient(
            100deg,
            #7e9fff,
            #56b1ff 45%,
            #3fd9ae
        );

    background-clip: text;

    -webkit-background-clip: text;

    color: transparent;

    -webkit-text-fill-color: transparent;
}


/* ==========================================================
   CHECK ICON
========================================================== */

.sloton-check {
    width: 17px;
    height: 17px;

    display: inline-flex;

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

    flex-shrink: 0;

    border:
        1.3px solid
        #20dfab;

    border-radius: 50%;

    background:
        rgba(31, 192, 138, 0.035);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.sloton-check svg {
    width: 10px;
    height: 10px;

    fill: none;

    stroke: #22dfac;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.sloton-feature-row:hover .sloton-check {
    transform: scale(1.1);

    background:
        rgba(31, 192, 138, 0.09);

    box-shadow:
        0 0 0 4px
        rgba(31, 192, 138, 0.05),
        0 0 17px
        rgba(31, 192, 138, 0.10);
}


/* ==========================================================
   MINUS
========================================================== */

.sloton-minus {
    color: #4d5665;

    font-size: 15px;

    font-weight: 400;

    line-height: 1;
}


/* ==========================================================
   LAST ROW
========================================================== */

.sloton-compare-table tbody tr:last-child td {
    border-bottom: 0 !important;
}


.sloton-compare-table tbody tr:last-child,
.sloton-compare-table tbody:last-child {
    border-bottom: 0 !important;
}


/* ==========================================================
   ROUNDED CORNERS
========================================================== */

.sloton-compare-table thead th:first-child {
    border-top-left-radius: 20px;
}


.sloton-compare-table thead th:last-child {
    border-top-right-radius: 20px;
}


.sloton-compare-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 20px;
}


.sloton-compare-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
}


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

@keyframes slotonCompareReveal {

    0% {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.992);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


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

@media (max-width: 1024px) {

    .sloton-compare-table {
        width: 900px !important;

        min-width: 900px !important;

        max-width: none !important;
    }


    .sloton-compare-table th:first-child,
    .sloton-compare-table td:first-child {
        width: 270px !important;
    }


    .sloton-compare-table th:not(:first-child),
    .sloton-compare-table td:not(:first-child) {
        width: 157.5px !important;
    }


    .sloton-core-heading {
        font-size: 16px;
    }


    .sloton-plan-name {
        font-size: 14px;
    }


    .sloton-value {
        font-size: 12px;
    }
}


/* ==========================================================
   MOBILE
   COMPLETE TABLE SCROLLS TOGETHER
========================================================== */

@media (max-width: 767px) {

    .sloton-pricing-comparison {
        width: 100% !important;

        max-width: 100% !important;

        overflow: visible !important;
    }


    .sloton-compare-shell {
        width: 100% !important;

        max-width: 100% !important;

        border-radius: 16px !important;

        overflow: hidden !important;
    }


    /*
       ONLY this wrapper controls scrolling.
       Whole table moves together.
    */
    .sloton-compare-scroll {
        width: 100% !important;

        max-width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        border-radius: 15px !important;

        -webkit-overflow-scrolling: touch !important;

        touch-action: pan-x pan-y !important;

        scrollbar-width: thin;
    }


    /*
       Entire table is wider than viewport.
       No column is sticky.
    */
    .sloton-compare-table {
        width: 800px !important;

        min-width: 800px !important;

        max-width: 800px !important;

        table-layout: fixed !important;
    }


    /*
       Feature / Core column
    */
    .sloton-compare-table th:first-child,
    .sloton-compare-table td:first-child {
        width: 220px !important;

        min-width: 220px !important;

        max-width: 220px !important;
    }


    /*
       Free / Solo / Team / Business
    */
    .sloton-compare-table th:not(:first-child),
    .sloton-compare-table td:not(:first-child) {
        width: 145px !important;

        min-width: 145px !important;

        max-width: 145px !important;
    }


    /* ======================================================
       ABSOLUTELY NO STICKY COLUMNS
    ====================================================== */

    .sloton-compare-table th,
    .sloton-compare-table td,
    .sloton-compare-table thead th,
    .sloton-compare-table thead th:first-child,
    .sloton-feature-row td,
    .sloton-feature-row td:first-child,
    .sloton-category-row td {
        position: relative !important;

        left: auto !important;
        right: auto !important;

        top: auto !important;

        z-index: auto !important;

        box-shadow: none !important;
    }


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

    .sloton-compare-table thead tr,
    .sloton-compare-table thead th {
        height: 60px !important;
    }


    .sloton-header-inner {
        height: 60px !important;

        min-height: 60px !important;

        padding: 0 10px !important;

        gap: 5px !important;
    }


    .sloton-header-left {
        justify-content: flex-start !important;
    }


    .sloton-core-heading {
        font-size: 14px !important;
    }


    .sloton-plan-name {
        font-size: 13px !important;

        white-space: nowrap !important;
    }


    .sloton-plan-badge {
        height: 17px !important;

        padding: 0 6px !important;

        font-size: 6.5px !important;
    }


    .sloton-plan-heading.is-highlighted::before {
        left: 8px !important;
        right: 8px !important;
    }


    /* ======================================================
       CATEGORY
    ====================================================== */

    .sloton-category-row td {
        height: 36px !important;

        background: #141a24 !important;
    }


    .sloton-category-title {
        min-height: 36px !important;

        padding: 0 11px !important;

        gap: 7px !important;

        font-size: 11px !important;

        line-height: 1 !important;

        white-space: nowrap !important;
    }


    .sloton-category-bar {
        width: 2px !important;

        height: 12px !important;
    }


    /* ======================================================
       FEATURE ROWS
    ====================================================== */

    .sloton-feature-row {
        height: 52px !important;
    }


    .sloton-feature-row td {
        height: 52px !important;

        min-height: 52px !important;
    }


    .sloton-feature-name {
        font-size: 12px !important;
    }


    .sloton-feature-name-inner {
        min-height: 52px !important;

        padding: 7px 10px !important;

        line-height: 1.25 !important;
    }


    .sloton-cell-inner {
        min-height: 52px !important;

        padding: 7px 8px !important;
    }


    .sloton-value {
        font-size: 11px !important;

        line-height: 1.25 !important;
    }


    .sloton-check {
        width: 16px !important;
        height: 16px !important;
    }


    .sloton-check svg {
        width: 9px !important;
        height: 9px !important;
    }


    .sloton-minus {
        font-size: 14px !important;
    }


    /* visible mobile scrollbar */
    .sloton-compare-scroll::-webkit-scrollbar {
        height: 5px !important;
    }
}


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

@media (max-width: 480px) {

    /*
       Keep table readable.
       User swipes entire table.
    */
    .sloton-compare-table {
        width: 760px !important;

        min-width: 760px !important;

        max-width: 760px !important;
    }


    .sloton-compare-table th:first-child,
    .sloton-compare-table td:first-child {
        width: 200px !important;

        min-width: 200px !important;

        max-width: 200px !important;
    }


    .sloton-compare-table th:not(:first-child),
    .sloton-compare-table td:not(:first-child) {
        width: 140px !important;

        min-width: 140px !important;

        max-width: 140px !important;
    }


    .sloton-core-heading {
        font-size: 13px !important;
    }


    .sloton-plan-name {
        font-size: 12px !important;
    }


    /*
       Hide badge only to keep header clean
    */
    .sloton-plan-badge {
        display: none !important;
    }


    .sloton-feature-name {
        font-size: 11.5px !important;
    }


    .sloton-value {
        font-size: 10.5px !important;
    }


    .sloton-category-title {
        font-size: 10px !important;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

    .sloton-compare-table {
        width: 730px !important;

        min-width: 730px !important;

        max-width: 730px !important;
    }


    .sloton-compare-table th:first-child,
    .sloton-compare-table td:first-child {
        width: 190px !important;

        min-width: 190px !important;

        max-width: 190px !important;
    }


    .sloton-compare-table th:not(:first-child),
    .sloton-compare-table td:not(:first-child) {
        width: 135px !important;

        min-width: 135px !important;

        max-width: 135px !important;
    }


    .sloton-core-heading {
        font-size: 12px !important;
    }


    .sloton-plan-name {
        font-size: 11px !important;
    }


    .sloton-feature-name {
        font-size: 11px !important;
    }


    .sloton-value {
        font-size: 10px !important;
    }
}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover: none) {

    .sloton-feature-row:hover .sloton-check {
        transform: none;

        box-shadow: none;
    }
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sloton-compare-shell,
    .sloton-feature-row,
    .sloton-check {
        animation: none !important;

        transition: none !important;
    }
}







/* =====================================================
   SLOTOn BLOG SECTION
===================================================== */

.sl-blog-section {
    --sl-bg: #0b0f17;
    --sl-card: #171c25;
    --sl-border: rgba(255,255,255,.07);
    --sl-text: #f7f9fc;
    --sl-muted: #9099ac;
    --sl-green: #35eba8;
    --sl-blue: #2878ff;

    width: 100%;
    color: var(--sl-text);

    font-family:
        Inter,
        Arial,
        sans-serif;
}


.sl-blog-section *,
.sl-blog-section *::before,
.sl-blog-section *::after {
    box-sizing: border-box;
}


.sl-blog-container {
    width: min(100%, 1200px);
    margin: 0 auto;
}


/* =====================================================
   FILTERS
===================================================== */

.sl-blog-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 15px;
}


.sl-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 35px;

    padding: 8px 19px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 999px;

    background: #181d27;

    color: #bbc3d2;

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

    text-decoration: none;

    transition: .25s ease;
}


.sl-filter-btn:hover {
    color: #fff;

    border-color: rgba(53,235,168,.28);

    transform: translateY(-1px);
}


.sl-filter-btn.active {
    color: #fff;

    border-color: rgba(44,154,255,.65);

    background:
        linear-gradient(
            100deg,
            #296cff 0%,
            #2d9bff 48%,
            #28dfa2 100%
        );

    box-shadow:
        0 7px 22px
        rgba(35,120,255,.2);
}


/* =====================================================
   SEARCH BAR
===================================================== */

.sl-blog-search-form {
    width: min(100%, 650px);
    margin: 0 auto;
}


.sl-search-box {
    position: relative;

    display: flex;
    align-items: center;

    height: 44px;

    padding: 0 18px;

    border: 1px solid rgba(255,255,255,.045);
    border-radius: 999px;

    background: #151a23;
}


.sl-search-icon {
    display: flex;
    align-items: center;

    margin-right: 10px;

    color: #9ba6b8;
}


.sl-search-box input {
    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #fff !important;

    font-size: 12px !important;

    font-family: inherit !important;
}


.sl-search-box input::placeholder {
    color: #697387;
}


.sl-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    border-radius: 50%;

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

    color: #aeb7c7;

    text-decoration: none;

    font-size: 17px;
}








/* =====================================================
   POPULAR SEARCHES - FIXED
===================================================== */

.sl-popular-searches {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    font-family: Inter, Arial, sans-serif;
}


.sl-popular-searches > span {
    color: #6f7a8f;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .9px;
    text-transform: uppercase;
}


/* Strong override for theme button styles */
.sl-popular-searches button,
.sl-popular-searches button[type="button"] {
    appearance: none !important;
    -webkit-appearance: none !important;

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

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    color: #7f899d !important;

    font-family: Inter, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    letter-spacing: 0 !important;
    text-transform: none !important;

    cursor: pointer !important;

    transition: color .2s ease !important;
}


.sl-popular-searches button:hover,
.sl-popular-searches button[type="button"]:hover {
    background: transparent !important;

    color: #35eba8 !important;

    box-shadow: none !important;
}


.sl-popular-searches button:focus,
.sl-popular-searches button:active {
    background: transparent !important;

    color: #35eba8 !important;

    outline: none !important;
    box-shadow: none !important;
}


/* little separators like reference */
.sl-popular-searches button:not(:last-child)::after {
    content: "•";

    display: inline-block;

    margin-left: 10px;

    color: #384151;

    pointer-events: none;
}









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

.sl-grid-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin: 62px 0 24px;
}


.sl-grid-eyebrow {
    margin-bottom: 6px;

    color: #8c97aa;

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

    letter-spacing: 1.1px;
}


.sl-grid-heading h2 {
    margin: 0;

    color: #fff;

    font-size: 25px;
    line-height: 1.2;
    font-weight: 650;

    letter-spacing: -.7px;
}


.sl-grid-heading p {
    max-width: 370px;
    margin: 0;
    color: #727d90;
    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   BLOG GRID
===================================================== */

.sl-blog-grid {
    display: grid;

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

    gap: 22px;
}


/* =====================================================
   BLOG CARD
===================================================== */

.sl-blog-card {
    position: relative;

    overflow: hidden;

    min-width: 0;

    border: 1px solid var(--sl-border);
    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #181d26 0%,
            #151a22 100%
        );

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.08);

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


.sl-blog-card:hover {
    transform: translateY(-4px);

    border-color: rgba(53,235,168,.22);

    box-shadow:
        0 20px 44px
        rgba(0,0,0,.18);
}


/* IMAGE */

.sl-card-image {
    position: relative;

    display: block;

    overflow: hidden;

    width: 100%;
    height: 198px;

    background: #0e131b;
}


.sl-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}


.sl-blog-card:hover .sl-card-image img {
    transform: scale(1.04);
}


.sl-no-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(39,117,255,.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #111825,
            #101720
        );
}


.sl-no-image span {
    color: rgba(255,255,255,.18);

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


/* CATEGORY BADGE */

.sl-category-badge {
    position: absolute;

    top: 13px;
    left: 13px;
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid rgba(53,235,168,.25);
    border-radius: 30px;
    background: rgba(7,22,21,.78);
    backdrop-filter: blur(8px);
    color: var(--sl-green);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .55px;
    text-transform: uppercase;
}


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

.sl-card-body {
    display: flex;
    flex-direction: column;

    min-height: 245px;

    padding: 18px 18px 16px;
}


.sl-card-meta {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 8px;

    color: #737d90;

    font-size: 14px;
    line-height: 1.2;
}


.sl-card-meta i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #586171;
}


.sl-card-body h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;

    letter-spacing: -.35px;
}

.sl-card-body h3 a {
    color: inherit;
    text-decoration: none;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.sl-card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #9aa3b4 !important;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0em;
    font-weight: 400;
}


.sl-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: auto;
}


.sl-read-more {
    display: inline-flex;
    align-items: center;

    gap: 5px;
    font-size: 12px !important;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: var(--sl-green);
    font-weight: 500;
    text-decoration: none;
    transition: gap .2s ease;
}


.sl-read-more:hover {
    gap: 8px;

    color: #57f4b8;
}


.sl-bookmark {
    display: flex;

    color: #6e788a;
}


/* =====================================================
   PAGINATION
===================================================== */

.sl-blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 50px;
}


.sl-page-number,
.sl-page-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;

    background: #151a22;

    color: #9ca5b5;

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

    text-decoration: none;

    transition: .2s ease;
}


.sl-page-number:hover,
.sl-page-arrow:hover {
    color: #fff;

    border-color: rgba(53,235,168,.35);

    background: #1a202a;
}


.sl-page-number.active {
    color: #fff;

    border-color: rgba(46,138,255,.7);

    background:
        linear-gradient(
            135deg,
            #2b71ff,
            #27b8e7,
            #21cf91
        );

    box-shadow:
        0 7px 20px
        rgba(38,120,255,.2);
}


.sl-page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 38px;

    color: #6e7788;
}


/* =====================================================
   NO RESULTS
===================================================== */

.sl-no-results {
    padding: 70px 20px;

    border: 1px solid var(--sl-border);
    border-radius: 12px;

    background: #151a22;

    text-align: center;
}


.sl-no-results h3 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 20px;
}


.sl-no-results p {
    margin: 0 0 18px;

    color: var(--sl-muted);

    font-size: 12px;
}


.sl-no-results a {
    color: var(--sl-green);

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

    text-decoration: none;
}


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

@media (max-width: 1024px) {

    .sl-blog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 767px) {

    .sl-blog-section {
        padding:
            20px
            16px
            60px;
    }


    .sl-blog-filters {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }


    .sl-blog-filters::-webkit-scrollbar {
        display: none;
    }


    .sl-filter-btn {
        flex: 0 0 auto;
    }


    .sl-search-box {
        height: 46px;
    }


    .sl-popular-searches {
        justify-content: flex-start;
    }


    .sl-grid-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;

        margin-top: 45px;
    }


    .sl-grid-heading h2 {
        font-size: 23px;
    }


    .sl-blog-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .sl-card-image {
        height: 220px;
    }


    .sl-card-body {
        min-height: auto;
    }

}


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

@media (max-width: 420px) {

    .sl-card-image {
        height: 190px;
    }

}















.sl-popular-searches button, .sl-popular-searches button[type="button"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #7f899d !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase!important;
    cursor: pointer !important;
    transition: color .2s ease !important;
}





























.pmpu-wrap{
    padding:0px !important;
}