.elementor-1217 .elementor-element.elementor-element-a736c0f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1217 .elementor-element.elementor-element-275a3f7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-275a3f7 *//* =========================================================
   NAFIYAN DIGITAL
   PRICING PAGE
   HOME PAGE BRANDING SYSTEM
   FULL CSS
========================================================= */


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

.ndlp-pricing-section {

    --nd-orange: #FFA719;
    --nd-orange-hover: #FFB52E;
    --nd-orange-dark: #E89400;

    --nd-black: #080808;
    --nd-black-2: #0C0C0C;

    --nd-surface: #101010;
    --nd-card: #141414;
    --nd-card-hover: #181818;

    --nd-white: #FFFFFF;
    --nd-soft-white: #F4F4F4;

    --nd-text: #EAEAEA;

    --nd-muted: #9B9B9B;
    --nd-muted-dark: #707070;

    --nd-border: #292929;
    --nd-border-soft: #202020;

    width: 100%;

    position: relative;

    padding:
        40px 20px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,167,25,.075),
            transparent 32%
        ),

        linear-gradient(
            180deg,
            #080808 0%,
            #0A0A0A 50%,
            #080808 100%
        );

    color: var(--nd-white);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    overflow: hidden;

}


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

.ndlp-pricing-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );

}


/* =========================================================
   ORANGE GLOW
========================================================= */

.ndlp-pricing-section::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    left: 50%;

    transform:
        translateX(-50%);

    background:
        rgba(255,167,25,.08);

    filter:
        blur(100px);

    border-radius: 50%;

    pointer-events: none;

}


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

.ndlp-container {

    position: relative;

    z-index: 2;

    width: min(
        1180px,
        100%
    );

    margin:
        0 auto;

}


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

.ndlp-pricing-header {

    max-width:
        850px;

    margin:
        0 auto 65px;

    text-align:
        center;

}


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

.ndlp-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 14px;

    border:
        1px solid
        rgba(255,167,25,.30);

    border-radius:
        50px;

    background:
        rgba(255,167,25,.055);

    color:
        var(--nd-orange);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    line-height:
        1;

}


/* glowing dot */

.ndlp-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        var(--nd-orange);

    box-shadow:
        0 0 0 4px
        rgba(255,167,25,.08),

        0 0 15px
        rgba(255,167,25,.75);

}


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

.ndlp-pricing-header h1 {

    margin:
        25px 0 18px;

    color:
        var(--nd-white);

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

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -2.7px;

}


/* orange heading */

.ndlp-pricing-header h1 span {

    display:
        inline;

    color:
        var(--nd-orange);

}


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

.ndlp-pricing-header > p {

    max-width:
        690px;

    margin:
        0 auto;

    color:
        var(--nd-muted);

    font-size:
        15px;

    line-height:
        1.85;

}


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

.ndlp-header-links {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        30px;

}


/* outline button */

.ndlp-outline-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 19px;

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

    border-radius:
        7px;

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

    color:
        var(--nd-white);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        all .3s ease;

}


.ndlp-outline-link:hover {

    border-color:
        var(--nd-orange);

    color:
        var(--nd-orange);

    background:
        rgba(255,167,25,.04);

}


/* secondary */

.ndlp-text-link {

    color:
        var(--nd-orange);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

}


.ndlp-text-link span {

    margin-left:
        5px;

}


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

.ndlp-pricing-grid {

    display:
        grid;

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

    gap:
        18px;

    align-items:
        stretch;

}


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

.ndlp-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        650px;

    padding:
        32px 28px 27px;

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

    border-radius:
        14px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            transparent 28%
        ),

        var(--nd-card);

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.20);

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

}


/* card hover */

.ndlp-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(255,167,25,.38);

    background:
        var(--nd-card-hover);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.38);

}


/* =========================================================
   PLAN LABEL
========================================================= */

.ndlp-plan-label {

    display:
        inline-block;

    color:
        var(--nd-orange);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.7px;

}


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

.ndlp-card h2 {

    margin:
        12px 0 10px;

    color:
        var(--nd-white);

    font-size:
        24px;

    font-weight:
        750;

    line-height:
        1.25;

    letter-spacing:
        -.5px;

}


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

.ndlp-card-description {

    min-height:
        54px;

    margin:
        0;

    color:
        var(--nd-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


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

.ndlp-price {

    display:
        flex;

    align-items:
        baseline;

    gap:
        3px;

    margin-top:
        28px;

}


.ndlp-currency {

    color:
        var(--nd-orange);

    font-size:
        20px;

    font-weight:
        800;

}


.ndlp-price strong {

    color:
        var(--nd-white);

    font-size:
        46px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -2px;

}


.ndlp-price-note {

    color:
        var(--nd-muted-dark);

    font-size:
        12px;

}


.ndlp-old-price {

    margin:
        8px 0 0;

    color:
        #666;

    font-size:
        11px;

}


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

.ndlp-divider {

    width:
        100%;

    height:
        1px;

    margin:
        25px 0;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--nd-border),
            transparent
        );

}


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

.ndlp-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    flex:
        1;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.ndlp-features li {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        #C3C3C3;

    font-size:
        12.5px;

    line-height:
        1.55;

}


/* check */

.ndlp-features li span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    margin-top:
        1px;

    border-radius:
        50%;

    background:
        rgba(255,167,25,.09);

    color:
        var(--nd-orange);

    font-size:
        10px;

    font-weight:
        900;

}


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

.ndlp-featured {

    border-color:
        rgba(255,167,25,.65);

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,167,25,.09),
            transparent 40%
        ),

        var(--nd-card);

    box-shadow:

        0 20px 65px
        rgba(255,167,25,.07);

}


/* top orange line */

.ndlp-featured::before {

    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        15%;

    width:
        70%;

    height:
        1px;

    background:
        var(--nd-orange);

    box-shadow:
        0 0 15px
        rgba(255,167,25,.6);

}


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

.ndlp-popular {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    padding:
        7px 11px;

    border-radius:
        50px;

    background:
        var(--nd-orange);

    color:
        #111;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1px;

}


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

.ndlp-card-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    width:
        100%;

    margin-top:
        28px;

    padding:
        14px 17px;

    border-radius:
        7px;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        800;

    transition:
        all .3s ease;

}


/* light button */

.ndlp-button-light {

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

    background:
        #191919;

    color:
        var(--nd-white);

}


.ndlp-button-light:hover {

    border-color:
        var(--nd-orange);

    color:
        var(--nd-orange);

    background:
        rgba(255,167,25,.04);

}


/* orange button */

.ndlp-button-orange {

    border:
        1px solid
        var(--nd-orange);

    background:
        var(--nd-orange);

    color:
        #111;

    box-shadow:
        0 8px 25px
        rgba(255,167,25,.13);

}


.ndlp-button-orange:hover {

    background:
        var(--nd-orange-hover);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(255,167,25,.20);

}


/* =========================================================
   INCLUDED BAR
========================================================= */

.ndlp-included {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    margin-top:
        18px;

    padding:
        19px 23px;

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

    border-radius:
        10px;

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

}


/* title */

.ndlp-included-title {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    white-space:
        nowrap;

    color:
        var(--nd-text);

    font-size:
        12px;

}


/* small dot */

.ndlp-small-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--nd-orange);

}


/* items */

.ndlp-included-items {

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;

}


.ndlp-included-items div {

    color:
        var(--nd-muted);

    font-size:
        11px;

}


.ndlp-included-items span {

    color:
        var(--nd-orange);

    margin-right:
        4px;

}


/* =========================================================
   PORTFOLIO SECTION
========================================================= */

.ndlp-portfolio-box {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        85px;

    padding:
        43px;

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

    border-radius:
        14px;

    background:

        radial-gradient(
            circle at 0% 50%,
            rgba(255,167,25,.07),
            transparent 45%
        ),

        #101010;

    overflow:
        hidden;

}


/* subtle orange line */

.ndlp-portfolio-box::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        120px;

    height:
        1px;

    background:
        var(--nd-orange);

}


.ndlp-eyebrow-dark {

    margin-bottom:
        13px;

}


.ndlp-portfolio-box h2 {

    max-width:
        700px;

    margin:
        0;

    color:
        var(--nd-white);

    font-size:
        30px;

    line-height:
        1.2;

    letter-spacing:
        -.8px;

}


.ndlp-portfolio-box h2 span {

    color:
        var(--nd-orange);

}


.ndlp-portfolio-box p {

    max-width:
        650px;

    margin:
        11px 0 0;

    color:
        var(--nd-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* portfolio button */

.ndlp-portfolio-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    flex:
        0 0 auto;

    padding:
        14px 20px;

    border:
        1px solid
        var(--nd-orange);

    border-radius:
        7px;

    background:
        var(--nd-orange);

    color:
        #111;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        900;

    transition:
        all .3s ease;

}


.ndlp-portfolio-button:hover {

    background:
        var(--nd-orange-hover);

    transform:
        translateY(-2px);

}


/* =========================================================
   WEBSITE CROSS SELL
========================================================= */

.ndlp-website-box {

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        22px;

    margin-top:
        15px;

    padding:
        25px 27px;

    border:
        1px solid
        rgba(255,167,25,.18);

    border-radius:
        11px;

    background:

        linear-gradient(
            90deg,
            rgba(255,167,25,.045),
            rgba(255,255,255,.01)
        );

}


/* icon */

.ndlp-website-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    border:
        1px solid
        rgba(255,167,25,.45);

    border-radius:
        10px;

    color:
        var(--nd-orange);

    font-size:
        19px;

}


/* content */

.ndlp-website-content span {

    color:
        var(--nd-orange);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


.ndlp-website-content h3 {

    margin:
        4px 0;

    color:
        var(--nd-white);

    font-size:
        18px;

    font-weight:
        750;

}


.ndlp-website-content p {

    margin:
        0;

    color:
        var(--nd-muted);

    font-size:
        11px;

}


/* website button */

.ndlp-website-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        12px 16px;

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

    border-radius:
        7px;

    color:
        var(--nd-white);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        750;

    transition:
        all .3s ease;

}


.ndlp-website-button:hover {

    border-color:
        var(--nd-orange);

    color:
        var(--nd-orange);

}


/* =========================================================
   FINAL CTA
========================================================= */

.ndlp-final-cta {

    position:
        relative;

    margin-top:
        85px;

    padding:
        70px 25px;

    text-align:
        center;

    border:
        1px solid
        rgba(255,167,25,.22);

    border-radius:
        15px;

    background:

        radial-gradient(
            circle at 50% 100%,
            rgba(255,167,25,.12),
            transparent 48%
        ),

        #101010;

    overflow:
        hidden;

}


/* top glow line */

.ndlp-final-cta::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        20%;

    width:
        60%;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--nd-orange),
            transparent
        );

    box-shadow:
        0 0 15px
        rgba(255,167,25,.35);

}


/* heading */

.ndlp-final-cta h2 {

    position:
        relative;

    max-width:
        750px;

    margin:
        19px auto 14px;

    color:
        var(--nd-white);

    font-size:
        clamp(
            32px,
            4vw,
            47px
        );

    font-weight:
        800;

    line-height:
        1.1;

    letter-spacing:
        -1.5px;

}


.ndlp-final-cta h2 span {

    color:
        var(--nd-orange);

}


.ndlp-final-cta p {

    max-width:
        580px;

    margin:
        0 auto;

    color:
        var(--nd-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


/* =========================================================
   CTA BUTTONS
========================================================= */

.ndlp-cta-buttons {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        27px;

}


.ndlp-main-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        14px 22px;

    border-radius:
        7px;

    background:
        var(--nd-orange);

    color:
        #111;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        900;

    transition:
        all .3s ease;

}


.ndlp-main-cta:hover {

    background:
        var(--nd-orange-hover);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(255,167,25,.18);

}


.ndlp-secondary-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        13px 19px;

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

    border-radius:
        7px;

    color:
        var(--nd-white);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        all .3s ease;

}


.ndlp-secondary-cta:hover {

    border-color:
        var(--nd-orange);

    color:
        var(--nd-orange);

}


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

@media (max-width: 950px) {

    .ndlp-pricing-grid {

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

    }


    .ndlp-card:last-child {

        grid-column:
            1 / -1;

        width:
            calc(50% - 9px);

        margin:
            0 auto;

    }


    .ndlp-included {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .ndlp-included-items {

        justify-content:
            flex-start;

    }


    .ndlp-portfolio-box {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .ndlp-portfolio-button {

        width:
            fit-content;

    }


    .ndlp-website-box {

        grid-template-columns:
            auto 1fr;

    }


    .ndlp-website-button {

        grid-column:
            1 / -1;

        width:
            fit-content;

    }

}


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

@media (max-width: 650px) {

    .ndlp-pricing-section {

        padding:
            65px 14px;

    }


    .ndlp-pricing-header {

        margin-bottom:
            42px;

    }


    .ndlp-pricing-header h1 {

        font-size:
            38px;

        letter-spacing:
            -1.8px;

    }


    .ndlp-pricing-header > p {

        font-size:
            13px;

        line-height:
            1.75;

    }


    .ndlp-header-links {

        flex-direction:
            column;

        gap:
            12px;

    }


    .ndlp-outline-link {

        width:
            fit-content;

    }


    /* pricing */

    .ndlp-pricing-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .ndlp-card {

        min-height:
            auto;

        padding:
            27px 22px 22px;

        border-radius:
            12px;

    }


    .ndlp-card:last-child {

        grid-column:
            auto;

        width:
            100%;

        margin:
            0;

    }


    .ndlp-card h2 {

        font-size:
            22px;

    }


    .ndlp-card-description {

        min-height:
            auto;

    }


    .ndlp-price {

        margin-top:
            23px;

    }


    .ndlp-price strong {

        font-size:
            42px;

    }


    .ndlp-features {

        gap:
            11px;

    }


    /* included */

    .ndlp-included {

        padding:
            19px;

    }


    .ndlp-included-title {

        white-space:
            normal;

    }


    .ndlp-included-items {

        display:
            grid;

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

        width:
            100%;

        gap:
            12px;

    }


    /* portfolio */

    .ndlp-portfolio-box {

        margin-top:
            60px;

        padding:
            27px 21px;

        border-radius:
            12px;

    }


    .ndlp-portfolio-box h2 {

        font-size:
            26px;

    }


    .ndlp-portfolio-button {

        width:
            100%;

        justify-content:
            center;

    }


    /* website */

    .ndlp-website-box {

        grid-template-columns:
            1fr;

        gap:
            15px;

        padding:
            23px 20px;

    }


    .ndlp-website-icon {

        width:
            43px;

        height:
            43px;

    }


    .ndlp-website-button {

        grid-column:
            auto;

        width:
            100%;

        justify-content:
            center;

    }


    /* final */

    .ndlp-final-cta {

        margin-top:
            60px;

        padding:
            53px 20px;

        border-radius:
            12px;

    }


    .ndlp-final-cta h2 {

        font-size:
            31px;

    }


    .ndlp-final-cta p {

        font-size:
            12px;

    }


    .ndlp-cta-buttons {

        flex-direction:
            column;

        width:
            100%;

    }


    .ndlp-main-cta,
    .ndlp-secondary-cta {

        width:
            100%;

    }

}


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

@media (max-width: 380px) {

    .ndlp-pricing-header h1 {

        font-size:
            33px;

    }


    .ndlp-price strong {

        font-size:
            39px;

    }


    .ndlp-included-items {

        grid-template-columns:
            1fr;

    }

}


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

.ndlp-pricing-section a:focus-visible {

    outline:
        2px solid
        var(--nd-orange);

    outline-offset:
        3px;

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .ndlp-pricing-section *,
    .ndlp-pricing-section *::before,
    .ndlp-pricing-section *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}/* End custom CSS */