﻿
.guide-sec{
    position:relative;
}
    .guide-sec::before {
        content: "";
        background-image: url('/assets/images/guide-before.png');
        background-repeat: no-repeat;
        background-size: contain;
        width: 408px;
        height: 408px;
        position: absolute;
        right: 0;
        z-index:-1;
    }
.guide-list {
    padding: 0;
    margin: 10px 0;
}

    .guide-list li {
        list-style: none;
        font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 500;
        color: #495C6E;
        margin-bottom: 8px;
        position: relative;
        padding-left: 15px;
    }

        .guide-list li::before {
            content: "";
            background-image: url('/assets/images/icons/tri-icon.png');
            background-repeat: no-repeat;
            background-size: contain;
            width: 7px;
            height: 7px;
            position: absolute;
            left: 0;
            top: 8px;
        }

.next-sec {
    background: linear-gradient(180deg, #F7F5FB 0%, rgba(247, 245, 251, 0) 100%);
    position:relative;
}

.fd-box {
    border: 1px solid #F9A822;
    padding: 60px 40px;
    max-width: 620px;
    margin: 0 auto;
    border-radius: 24px;
}

.feed-backholder {
    max-width: 190px;
    margin: 0 auto;
    position: relative;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .feed-backholder a {
        padding: 10px 15px;
        border-radius: 9px;
        color: #070707;
        font-weight: 400;
        font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
        border: 1px solid #A8A4A4;
        display: flex;
        text-decoration: none;
    }

        .feed-backholder a img {
            margin-right: 12px;
        }

.next-list {
    padding: 0;
    margin: 10px 0;
    position:relative;
}

.next-sec:before {
    content: "";
    background-image: url(/assets/images/icons/before-line.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1px;
    height: 100%;
    position: absolute;
    left: -14px;
    top: 147px;
    right: 0;
    margin: 0 auto;
}

    .next-list li {
        list-style: none;
        font-size: calc(13px + (18 - 13) * ((100vw - 300px) / (1920 - 300)));
        font-weight: 400;
        color: #141F39;
        margin-bottom: 30px;
        position: relative;
        padding-left: 24px;
    }

        .next-list li::before {
            content: "";
            background-image: url('/assets/images/icons/purple-check.png');
            background-repeat: no-repeat;
            background-size: contain;
            width: 14px;
            height: 14px;
            position: absolute;
            left: 0;
            top: 8px;
        }

        .next-list li span {
            font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
            display: block;
            color: #060606;
            font-weight: 400;
        }

        .next-list li a {
            color: #650984;
            text-decoration: underline
        }

.steps-sec {
    background: linear-gradient(180deg, #F7F5FB 0%, rgba(247, 245, 251, 0) 100%);
    z-index: 0;
    position: relative;
}

ol.steps {
    margin: 0 0 0rem;
    padding: 0;
    position: relative;
    /* counter-reset: section-number;*/
}

    ol.steps li {
        counter-increment: section-number;
        display: grid;
        grid-template-columns: 1fr 2rem 1fr;
        gap: 2rem;
        margin-bottom:5rem;
    }


       /* ol.steps li:not(:last-of-type) {
            margin-bottom: 8rem;
        }*/

        ol.steps li::before {
            /*content: counter(section-number);*/
            content: "";
            order: 2;
            width: 2px;
            height: 2px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: 9px solid #6F2F86;
            margin-inline: 0.5rem;
            color: transparent;
            z-index: -1;
            margin: auto;
        }

       /* ol.steps li::before {
            content: "";
            grid-column: 2;
            width: 2px;
            height: 2px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: 1rem solid #000;
            color: white;
            z-index: -1;
            margin: auto;
        }*/

ol.steps::after {
    content: "";
    display: inline-block;
    height: calc(95% + 4rem); /* or just 100% if padding used */
    width: 2px;
    background: #6F2F86;
    position: absolute;
    left: calc(50% - 0px);
    top: 9rem;
    z-index: -2;
}

    ol.steps li:last-child::before {
       /* content: none;
        display: none;*/
       position:absolute;
       left:0;
       right:0;
       bottom:-3.6rem;
    }




/*.block {
    background: #F6F6F6;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    height: 348px;
}*/

.block--left {
    order: 1;
    position: relative;
}

.block--right {
    order: 3;
}

.block-cnt {
    /* padding: 43px 40px 55px 70px;*/
    display: grid;
    align-items: center;
    padding-top: 20%;
}

    .block-cnt a {
        /*padding: 15px 30px 15px 30px;
        background-color: #3AB54A;
        display: inline-flex;
        gap: 30px;*/
        text-decoration: underline;
        font-weight: 500;
        color: #2922F0;
    }

    .block-cnt h4 {
        font-weight: bold;
        font-size: calc(24px + (32 - 24) * ((100vw - 300px) / (1920 - 300)));
        /*line-height: 120%;*/
        color: #320B3C;
        padding-bottom: 10px;
    }

    .block-cnt p {
        font-weight: 400;
        font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 300)));
        /*line-height: 120%;*/
        color: #495C6E;
        margin: 0;
    }

/*.block--left img {
    width: 100%;
    height: 100%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}
*/
.block-img {
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), url(image.png);
    box-shadow: 0px 0px 14px rgba(157, 94, 201, 0.17);
    border-radius: 22px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    padding: 20px;
}

.block-img img {
 

    width: 100%;
    /* height: 100%;
        object-fit: cover;
        border-radius: 30px;*/
}
/*
.arrow {
    width: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.block span {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50px;
    border: 3px solid #34C759;
    background-color: #AFF9B9;
    right: -57px;
    top: 62px;
}
*/

/*Timeline end*/


/*--------------- Samit Payment Details-new ------------------*/


.cardField select {
    margin-bottom: 34px;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    height: 40px;
    color: #212529db;
    width: 100%;
}


.GoBack:hover {
    background-color: var(--pri-color);
    color: #000;
}

.GoBack {
    transition:0.3s ease-in-out;
}


.step-box-unchecked {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.step-box-unchecked .step-c {
    background-color: #D9D9D9;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50px;
}

/*.step-box-unchecked:before {
    position: absolute;
    content: "";
    height: 2px;
    width: 184px; 
    background-color: #D9D9D9;
    right: 70px;
    top: 11px;
    z-index: -1;
}*/

.half-stepBox:before {
    position: absolute !important;
    background-color: #B526E6 !important;
    content: '' !important;
    width: 38% !important;
    height: 2px !important;
    left: 53px !important;
    margin: 0 auto !important;
    top: 25% !important;
    z-index: -1 !important;
}

.half-stepBox:after {
    position: absolute !important;
    background-color: #D9D9D9 !important;
    content: '' !important;
    width: 40% !important;
    height: 2px !important;
    right: -180px !important;
    margin: 0 auto !important;
    top: 25% !important;
    z-index: -1 !important;
}




.step-box-unchecked .step-t {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
}

.greenTick-div {
    background-color: #59C715;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    position: relative;
    right: 46px;
    top: 14px;
}

.email-fieldDiv {
    display: flex;
}

.email-fieldDiv input {
    border-radius: 0;
    padding: 14px;
    border: 1px solid #D9D9D9;
}

.email-fieldDiv input::placeholder {
    color: #B4B6C4;
    font-weight: 300;
}

.creatAcc-card {
    border: 1px solid #D9D9D9;
    border-radius: 20px;
    padding: 39px 42px 47px 41px;
}

.creatAcc-card h4 {
    font-weight: 700;
    font-size: 36px;
    line-height: 46px;
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    color: #320B3C;
    margin-bottom: 60px;
}

.creatAcc-card p {
    color: #000;
    margin-bottom: 4px;
}

.createAcc-btn {
    background: #24052F;
    border-radius: 84px;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    padding: 18px 50px;
    display: block;
}

.createAcc-div {
    display: flex;
    justify-content: center;
    text-align: center;
}

.createAcc-btn {
    background: #24052F;
    border-radius: 84px;
    font-weight: 700;
    font-size: 18px;
    /*line-height: 140%;*/
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    padding: 18px 50px;
    display: block;
    transition: 0.3s ease-in-out;
}

.createAcc-div {
    display: flex;
    justify-content: center;
    text-align: center;
}

.privacyLink {
    color: #000;
}

.createAcc-btn:hover {
    background-color: var(--pri-color);
    color: #000;
}



/*---------------- Media Query -------------------*/



@media (max-width: 1399.98px) {

    ol.steps::after {
        top: 8rem;
    }

    .half-stepBox:after {
        width: 36% !important;
        right: -170px !important;
    }

}


@media (max-width: 1199.98px) {

    ol.steps::after {
        top: 6rem;
    }

    .next-sec:before {
        left: -7px;
        top: 136px;
    }

    ol.steps li {
        display: block;
        margin-bottom: 20px;
    }

        ol.steps li::before {
            display: none;
        }

    ol.steps::after {
        display: none;
    }

    .block-cnt {
        padding: 20px;
    }

    .half-stepBox:after {
        width: 34% !important;
        right: -140px !important;
    }

    .half-stepBox:before {
        width: 34% !important;
        left: 44px !important;
    }

}


@media (max-width: 991.98px) {

    ol.steps::after {
        top: 7rem;
    }

    .next-sec:before {
        display:none;
    }

    .half-stepBox:after {
        width: 42% !important;
        right: -264px !important;
    }

    .half-stepBox:before {
        width: 42% !important;
        left: 50px !important;
    }

}


@media (max-width: 767.98px) {

    .half-stepBox:after {
        width: 38% !important;
        right: -190px !important;
    }

    .half-stepBox:before {
        width: 40% !important;
        left: 46px !important;
    }

    .creatAcc-card h4 {
        font-size: 30px;
        line-height: 20px;
        margin-bottom: 50px;
    }

    .createAcc-btn {
        font-size: 16px;
        text-align: center;
        color: #FFFFFF;
        text-decoration: none;
        padding: 16px 40px;
    }

    .creatAcc-card {
        padding: 30px;
    }

}


@media (max-width: 575.98px) {

    .creatAcc-card {
        padding: 20px;
    }

        .creatAcc-card h4 {
            font-size: 24px;
            line-height: 20px;
            margin-bottom: 40px;
        }

    .email-fieldDiv input {
        padding: 10px;
    }

    .createAcc-btn {
        padding: 14px 30px;
    }

    span.greenTick-div {
        right: 40px;
        top: 10px;
    }

}


@media (max-width: 480px) {

    .steps .step-box .step-box1 .step-t {
        font-size: 14px !important;
    }

    .step-box-unchecked .step-t {
        font-size: 14px;
        margin-top: 10px;
        font-size: 14px;
    }


    .half-stepBox:after {
        width: 34% !important;
        right: -116px !important;
    }

    .half-stepBox:before {
        width: 36% !important;
        left: 60px !important;
    }

    .creatAcc-card h4 {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 20px;
    }

    .creatAcc-card {
        padding: 16px 10px;
    }

    .createAcc-btn {
        padding: 10px 20px;
        font-size: 15px;
    }


}


