/* =========================================
   SUCCESS PATH MAIN
========================================= */

.sz-success-main{
    position:relative;

    width:100%;

    display:grid;
    grid-template-columns:58% 42%;

    align-items:center;

    min-height:360px;

    padding:22px 30px 6px;

    box-sizing:border-box;

    overflow:hidden;

    background:#ffffff;
}


/* =========================================
   LEFT VISUAL AREA
========================================= */

.sz-success-visual{
    position:relative;

    width:100%;
    height:330px;

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


/* Soft purple glow */

.sz-success-glow{
    position:absolute;

    width:390px;
    height:270px;

    left:30px;
    bottom:15px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(113,76,244,.25) 0%,
            rgba(128,91,245,.14) 42%,
            rgba(255,255,255,0) 72%
        );

    filter:blur(10px);

    z-index:0;
}


/* =========================================
   GROUP IMAGE
========================================= */

.sz-success-group-image{
    position:relative;

    z-index:2;

    display:block;

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

    height:300px;

    object-fit:contain;

    object-position:center bottom;
}


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

.sz-success-float{
    position:absolute;

    z-index:5;

    display:flex;
    align-items:center;

    min-width:150px;
    height:48px;

    padding:0 14px 0 10px;

    box-sizing:border-box;

    border-radius:11px;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #5330d9,
        #7143ef
    );

    box-shadow:
        0 10px 22px rgba(79,50,200,.22);

    transform:rotate(-7deg);
}


/* icon */

.sz-success-float-icon{
    width:27px;
    height:27px;

    flex:0 0 27px;

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

    margin-right:8px;

    border-radius:50%;

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

    font-size:11px;

    color:#ffffff;
}


/* text */

.sz-success-float div:last-child{
    display:flex;
    flex-direction:column;

    line-height:1.1;
}

.sz-success-float strong{
    display:block;

    line-height:13px;

    font-weight:700;

    color:#ffffff;
}

.sz-success-float span{
    display:block;

    margin-top:1px;

    font-size:8px;
    line-height:11px;

    font-weight:400;

    color:rgba(255,255,255,.88);
}


/* =========================================
   FLOATING CARD POSITIONS
========================================= */

.sz-success-learn{
    left:20px;
    top:35px;

    transform:rotate(-7deg);
}


.sz-success-certified{
    right:35px;
    top:60px;

    min-width:150px;

    background:#ffffff;

    color:#111a4b;

    transform:none;

    box-shadow:
        0 8px 22px rgba(48,38,120,.10);
}


.sz-success-certified .sz-success-float-icon{
    color:#ec3f8e;
    background:#ffe8f2;
}

.sz-success-certified strong{
    color:#18204c;
}

.sz-success-certified span{
    color:#6f7895;
}


/* bottom left */

.sz-success-community{
    left:18px;
    bottom:15px;

    transform:rotate(1deg);
}


/* right of image */

.sz-success-projects{
    right:8px;
    bottom:65px;

    transform:rotate(-5deg);
}


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

.sz-success-content{
    position:relative;

    z-index:3;

    padding:4px 35px 0 18px;

    box-sizing:border-box;
}


/* eyebrow */

.sz-success-eyebrow{
    margin-bottom:5px;

    color:#6540ef;

    line-height:14px;

    font-weight:800;

    letter-spacing:.7px;
}


/* heading */

.sz-success-content h2{
    margin:0 0 9px;

    color:#111a4b;

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

    font-weight:800;

    letter-spacing:-.5px;
}
.sz-success-content h2 span{
    color: #5f45ff !important;
}


/* description */

.sz-success-description{
    max-width:520px;

    margin:0 0 12px;

    color:#65708f;

   
    line-height:22px;

    font-weight:400;
}


/* =========================================
   CHECKLIST
========================================= */

.sz-success-checklist{
    display:flex;
    flex-direction:column;

    gap:5px;

    margin-bottom:15px;
}


.sz-success-check{
    display:flex;
    align-items:center;

    min-height:18px;
}


.sz-success-check > span{
    width:18px;
    height:18px;

    flex:0 0 18px;

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

    margin-right:8px;

    border-radius:5px;

    background:#7043e9;

    color:#ffffff;

    font-size:8px;
}


.sz-success-check p{
    margin:0;

    color:#5f6887;

    

    font-weight:400;
}


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

.sz-success-buttons{
    display:flex;
    align-items:center;

    gap:10px;
}


/* Primary */

.sz-success-primary-btn{
    height:42px;

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

    padding:0 14px;

    box-sizing:border-box;

    border-radius:20px;

    text-decoration:none;

    color:#ffffff;

    background:linear-gradient(
        90deg,
        #1769f5,
        #7440ed
    );

    box-shadow:
        0 7px 17px rgba(82,64,225,.22);

    

    font-weight:700;
}


.sz-success-primary-btn span{
    margin-left:9px;

    
    line-height:1;
}


/* Secondary */

.sz-success-secondary-btn{
    height:42px;

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

    padding:0 13px;

    box-sizing:border-box;

    border:1px solid #e3e4ef;

    border-radius:20px;

    background:#ffffff;

    color:#202747;

    text-decoration:none;

    

    font-weight:700;

    box-shadow:0 4px 12px rgba(30,30,70,.04);
}


.sz-success-secondary-icon{
    width:18px;
    height:18px;

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

    margin-right:7px;

    border-radius:50%;

    background:#eaf0ff;

    color:#3568e8;

    font-size:8px;
}


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

@media (min-width:1400px){

    .sz-success-main{
        min-height:390px;
    }

    .sz-success-visual{
        height:350px;
    }

    .sz-success-group-image{
        width:500px;
        height:325px;
    }

    .sz-success-content{
        padding-left:10px;
        padding-right:45px;
    }

    .sz-success-content h2{
        font-size:32px;
        line-height:35px;
    }
}

/* =========================================
   MOBILE — SUCCESS PATH
========================================= */

@media (max-width: 767px){

    .sz-success-main{
        grid-template-columns:1fr;
        min-height:auto;
padding: 0;
    }

    .sz-success-visual{
        width:100%;
        height:300px;

        margin-bottom:15px;
    }

    .sz-success-content{
        width:100%;

        padding:0;
    }

    .sz-success-group-image{
        width:100%;
        max-width:430px;
        height:270px;
    }

    .sz-success-glow{
        width:90%;
        height:220px;

        left:5%;
        bottom:10px;
    }

    .sz-success-learn{
        left:2%;
        top:28px;
    }

    .sz-success-certified{
        right:2%;
        top:18px;
    }

    .sz-success-community{
        left:2%;
        bottom:10px;
    }

    .sz-success-projects{
        right:0;
        bottom:55px;
    }

    .sz-success-content h2{
        font-size:25px;
        line-height:27px;
    }

    .sz-success-description{
        max-width:100%;

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

    .sz-success-check p{
        font-size:11px;
        line-height:15px;
    }

    .sz-success-buttons{
        flex-wrap:wrap;
    }
	.sz-success-float strong {
    line-height: 8px;
    font-weight: 400;
    font-size: 9px;
}
	.sz-success-float {
    min-width: 133px;
    height: 38px;;
}
}