/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 17 2026 | 07:05:33 */
/*
 * AR Craftix categorized CSS
 * Source: Appearance > Customize > Additional CSS
 * Original lines: 4842-5588
 * Category: Homepage Simple / Transparent payment process section
 * Kept verbatim from the supplied Additional CSS.
 */

/* ==========================================================
   AR CRAFTIX - PAYMENT PROCESS
   Target: section#fitness_hub_class-5

   Primary:   #003da3
   Secondary: #797979
   ========================================================== */

section#fitness_hub_class-5,
section#fitness_hub_class-5 *{
    box-sizing:border-box;
}


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

section#fitness_hub_class-5{
    margin:0 !important;
    padding:80px 0 18px !important;

    background:#f4f4f6 !important;

    overflow:hidden;
}

section#fitness_hub_class-5 > .container{
    width:100%;
    max-width:1200px;

    margin:0 auto;
    padding:0 22px;
}


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

section#fitness_hub_class-5 > .container::before{
    content:"PAYMENT PROCESS.\A CREATE WITH CONFIDENCE.";

    display:block;

    margin:0 0 36px;

    color:#003da3;

    font-family:'Montserrat', Arial, sans-serif;

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

    font-weight:800;

    letter-spacing:3px;
}


/* ==========================================================
   EXISTING ROW
   ========================================================== */

section#fitness_hub_class-5 > .container > div{
    display:grid !important;

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

    column-gap:32px;
    row-gap:0;

    width:100%;

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


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

section#fitness_hub_class-5 > .container > div::before{
    content:"Simple. Transparent.";

    grid-column:1 / -1;

    order:1;

    display:block;

    margin:0;

    color:#0b0c13;

    font-family:'Montserrat', Arial, sans-serif;

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

    font-weight:800;

    letter-spacing:-4px;
}


/* Blue italic second line */
section#fitness_hub_class-5 > .container > div::after{
    content:"No surprises.";

    grid-column:1 / -1;

    order:2;

    display:block;

    margin:4px 0 57px;

    color:#003da3;

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

    font-size:68px;
    line-height:.95;

    font-weight:400;
    font-style:italic;

    letter-spacing:-3px;
}


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

section#fitness_hub_class-5 .single-list{
    order:3;

    width:auto !important;

    float:none !important;

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


/* ==========================================================
   REMOVE FITNESS HUB CARD DESIGN
   ========================================================== */

section#fitness_hub_class-5 .class-item{
    position:relative !important;

    width:100%;

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

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;
}

section#fitness_hub_class-5 .class-author{
    position:relative;

    width:100%;

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


/* No image */
section#fitness_hub_class-5 .class-img-box{
    display:none !important;
}


/* ==========================================================
   OVERRIDE ORIGINAL WHITE FLOATING CARD
   ========================================================== */

section#fitness_hub_class-5 .classs-details,
section#fitness_hub_class-5 .classs-details.class-no-img{
    position:relative !important;

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

    width:100% !important;

    margin:0 !important;

    padding:
        63px
        0
        25px !important;

    background:transparent !important;

    box-shadow:none !important;
}


/* ==========================================================
   ICONS
   ========================================================== */

section#fitness_hub_class-5 .classs-details::before{
    position:absolute;

    top:0;
    left:0;

    color:#003da3;

    font-family:FontAwesome;

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

    font-weight:normal;
}


/* 30% Upfront */
section#fitness_hub_class-5
.single-list:nth-child(1)
.classs-details::before{
    content:"\f0d6";
}


/* We Create */
section#fitness_hub_class-5
.single-list:nth-child(2)
.classs-details::before{
    content:"\f0d0";
}


/* Review & Changes */
section#fitness_hub_class-5
.single-list:nth-child(3)
.classs-details::before{
    content:"\f021";
}


/* 70% After Approval */
section#fitness_hub_class-5
.single-list:nth-child(4)
.classs-details::before{
    content:"\f058";
}


/* ==========================================================
   PROCESS LINE
   ========================================================== */

section#fitness_hub_class-5 .classs-details::after{
    content:"";

    position:absolute;

    top:31px;
    left:0;

    width:100%;
    height:10px;

    background:

        radial-gradient(
            circle at right center,
            #f4f4f6 0,
            #f4f4f6 2px,
            #003da3 2px,
            #003da3 4px,
            transparent 4px
        )
        right center / 10px 10px no-repeat,

        linear-gradient(
            to right,
            #d3d3d8,
            #d3d3d8
        )
        left center / calc(100% - 4px) 1px no-repeat;
}


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

section#fitness_hub_class-5 .class-name{
    margin:0 0 11px !important;
    padding:0 !important;

    font-family:'Montserrat', Arial, sans-serif;

    font-size:17px !important;
    line-height:1.3;

    font-weight:800 !important;

    letter-spacing:-.2px;

    text-align:left !important;

    text-transform:none !important;
}

section#fitness_hub_class-5 .class-name a,
section#fitness_hub_class-5 .class-name a:hover,
section#fitness_hub_class-5 .class-name a:focus{
    color:#090a10 !important;

    font-weight:800 !important;

    text-decoration:none !important;
}


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

section#fitness_hub_class-5 .class-info{
    margin:0;
    padding:0;
}

section#fitness_hub_class-5 .class-info p{
    margin:0 !important;
    padding:0 !important;

    color:#696b75;

    font-family:Arial, sans-serif;

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

    font-weight:400;

    text-align:left !important;
}


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

section#fitness_hub_class-5 > .container::after{
    content:"✓   YOU DON'T PAY THE FINAL 70% UNTIL YOU'VE REVIEWED AND APPROVED THE COMPLETED WORK.";

    position:relative;

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

    width:100%;

    margin:38px 0 0;
    padding:24px 38px;

    /* TEXT */
    color:#ffffff;

    font-family:'Montserrat', Arial, sans-serif;

    font-size:13px;
    line-height:1.5;
    font-weight:800;

    letter-spacing:.15px;

    text-align:center;

    /* LUXURY DARK CRYSTAL BACKGROUND */
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(20,103,230,.24) 0%,
            rgba(20,103,230,0) 34%
        ),
        radial-gradient(
            circle at 85% 100%,
            rgba(0,61,163,.22) 0%,
            rgba(0,61,163,0) 38%
        ),
        linear-gradient(
            110deg,
            #07101f 0%,
            #0a1730 38%,
            #071328 65%,
            #050c18 100%
        );

    border:1px solid rgba(73,137,235,.55);

    border-radius:14px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.18),
        0 8px 25px rgba(0,61,163,.13),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.35);

    text-shadow:
        0 1px 1px rgba(0,0,0,.35);

    overflow:hidden;

    cursor:default;

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


/* ==========================================================
   PREMIUM BLUE EDGE / GLOW
   ========================================================== */

section#fitness_hub_class-5 > .container:hover::after{

    transform:translateY(-3px);

    border-color:rgba(76,150,255,.85);

    box-shadow:
        0 23px 55px rgba(0,0,0,.22),
        0 10px 34px rgba(0,61,163,.23),
        0 0 28px rgba(22,100,220,.12),
        inset 0 1px 0 rgba(255,255,255,.17),
        inset 0 -1px 0 rgba(0,0,0,.38);
}


/* ==========================================================
   OPTIONAL - MAKE CHECK LOOK MORE PREMIUM
   Text stays same, but gives it visual emphasis
   ========================================================== */

section#fitness_hub_class-5 > .container{
    position:relative;
}




/* ==========================================================
   DISABLE ALL LINKS IN THIS SECTION
   ========================================================== */

section#fitness_hub_class-5 a,
section#fitness_hub_class-5 a:hover,
section#fitness_hub_class-5 a:focus,
section#fitness_hub_class-5 a:active{
    pointer-events:none !important;

    cursor:default !important;

    text-decoration:none !important;
}


/* ==========================================================
   SMALL DESKTOP
   ========================================================== */

@media (max-width:1199px){

    section#fitness_hub_class-5 > .container{
        max-width:1000px;

        padding-left:28px;
        padding-right:28px;
    }

    section#fitness_hub_class-5 > .container > div{
        column-gap:26px;
    }

    section#fitness_hub_class-5
    > .container > div::before{
        font-size:55px;

        letter-spacing:-3px;
    }

    section#fitness_hub_class-5
    > .container > div::after{
        font-size:59px;

        margin-bottom:50px;
    }

    section#fitness_hub_class-5 .class-name{
        font-size:16px !important;
    }

}


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

@media (max-width:991px){

    section#fitness_hub_class-5{
        padding:
            50px
            0
            35px !important;
    }

    section#fitness_hub_class-5 > .container{
        max-width:760px;

        padding:
            0
            25px;
    }

    section#fitness_hub_class-5 > .container::before{
        margin-bottom:30px;
    }

    section#fitness_hub_class-5 > .container > div{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        column-gap:35px;
        row-gap:25px;
    }

    section#fitness_hub_class-5
    > .container > div::before{
        font-size:48px;

        letter-spacing:-2.5px;
    }

    section#fitness_hub_class-5
    > .container > div::after{
        font-size:51px;

        margin-bottom:35px;

        letter-spacing:-2px;
    }

    section#fitness_hub_class-5 .classs-details,
    section#fitness_hub_class-5 .classs-details.class-no-img{
        padding-top:58px !important;
    }

   section#fitness_hub_class-5 > .container::after{

        margin-top:30px;

        padding:22px 28px;

        font-size:12px;

        border-radius:12px;
    }


}


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

@media (max-width:767px){

    section#fitness_hub_class-5{
        padding:
            45px
            0
            30px !important;
    }

    section#fitness_hub_class-5 > .container{
        padding:
            0
            22px;
    }

    section#fitness_hub_class-5 > .container::before{
        margin-bottom:25px;

        font-size:9px;

        letter-spacing:2.2px;
    }

    section#fitness_hub_class-5 > .container > div{
        grid-template-columns:1fr;

        row-gap:0;
    }

    section#fitness_hub_class-5
    > .container > div::before{
        font-size:42px;

        line-height:1.03;

        letter-spacing:-2px;
    }

    section#fitness_hub_class-5
    > .container > div::after{
        margin:
            5px
            0
            35px;

        font-size:45px;

        line-height:1;

        letter-spacing:-1.5px;
    }

    section#fitness_hub_class-5 .classs-details,
    section#fitness_hub_class-5 .classs-details.class-no-img{
        padding:
            60px
            0
            28px !important;
    }

    section#fitness_hub_class-5 .class-name{
        font-size:16px !important;
    }

    section#fitness_hub_class-5 .class-info p{
        font-size:13px;

        line-height:1.75;
    }

    section#fitness_hub_class-5 > .container::after{

        margin-top:20px;

        padding:20px 22px;

        font-size:12px;
        line-height:1.65;

        text-align:left;

        justify-content:flex-start;

        border-radius:11px;

        box-shadow:
            0 14px 32px rgba(0,0,0,.17),
            0 7px 22px rgba(0,61,163,.13),
            inset 0 1px 0 rgba(255,255,255,.10);
    }


}


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

@media (max-width:480px){

    section#fitness_hub_class-5 > .container{
        padding:
            0
            18px;
    }

    section#fitness_hub_class-5
    > .container > div::before{
        font-size:36px;

        letter-spacing:-1.5px;
    }

    section#fitness_hub_class-5
    > .container > div::after{
        font-size:39px;
    }

    section#fitness_hub_class-5 .classs-details::before{
        font-size:17px;
    }

    section#fitness_hub_class-5 .class-name{
        font-size:15px !important;
    }

    section#fitness_hub_class-5 .class-info p{
        font-size:12px;
    }

}

section#fitness_hub_class-5 .single-list:hover {
    background: #ededed;
    padding-left: 10px !important;
    cursor: default;
}