.main-header {
    background: #2B1851;
    color: #fff;
    padding: 10px 15px 15px !important;
}

.image-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 53vh;
    box-shadow: 0px 0px 4px 0px rgba(43, 24, 81, 0.25);
    border-radius: 1.5rem;
}

hr {
    border-bottom: 1px solid #555 !important;
    padding-top: 25px !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    border-top: 0 !important;
}

.testimonial-image {
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
}

.modal-body {
    padding: 10px 0 !important;
}

.name {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    line-height: 26px;
    text-align: center;
    /* border-bottom: 1px solid #fff; */
}

    .name span {
        font-weight: 500;
        font-size: 20px;
    }

.designation {
    font-size: 20px;
    color: #2B1851;
    font-weight: 500;
    margin-bottom: 0px;
    padding: 5px 0;
}

.faq-new {
    background-color: #fff !important;
}

    .faq-new .btn-header-link:after {
        top: 15px;
    }

.stepcard {
    box-shadow: 0 0 2px 0 rgba(183, 174, 255, 0.72) !important;
    border-radius: 4px;
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: none !important;
}

.steps .modal-content {
    max-height: 770px !important;
}

.stepcard .card-header {
    padding: 0;
    background-color: #F2F1FF;
}

.stepcard .card-body {
    padding: 5px 15px 15px;
}

.stepcard .btn-header-link {
    padding: 2px 11px 8px;
}

.tab-head {
    width: 70% !important;
}

.quote {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.75;
}

.arrow-buttons {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.arrow-button {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .arrow-button svg {
        width: 20px;
        height: 20px;
        fill: #2B1851;
        transition: transform 0.3s;
    }

    .arrow-button:hover svg {
        fill: #2B1851;
        box-shadow: none;
    }

    .arrow-button:focus,
    .arrow-button:hover {
        box-shadow: none !important;
    }

.close {
    color: #000;
    opacity: 1 !important;
    font-size: 20px !important;
    line-height: 20px;
}

.step-header {
    font-size: 24px;
    font-weight: 700;
    color: #2B1851;
    margin: 2rem 0 0 0;
    opacity: 1 !important;
}

.step-text {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    color: #555555;
}

.note-list > ul > li {
    color: #3f0f64;
    padding-left: 35px;
    position: relative;
    margin-bottom: 15px;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: normal;
    color: #2C3039;
}

    .note-list > ul > li:before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #B266ED;
        border-radius: 50%;
        top: 5px;
        left: 15px;
    }


.name {
    font-size: 24px !important;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    line-height: 26px;
    text-align: center;
    /* border-bottom: 1px solid #fff; */
}

.modalclose {
    border: 1px solid #ffffff !important;
    width: 25px;
    height: 25px;
    padding: 0 !important;
    margin: 0 auto !important;
    position: absolute !important;
    right: 13px !important;
    line-height: 23px !important;
    border-radius: 50%;
    font-size: 21px !important;
    /* color: #fff !important; */
    background-color: #fff !important;
}


/*.stepcard .card-header .btn-header-link {
    background-color: #ffffff;
}*/

.cardactive {
    background-color: #F2F1FF !important;
}

.check-icon {
    color: green;
    margin-right: 8px;
}

.more-info {
    font-weight: 700;
    position: relative;
    color: rgb(43, 24, 81) !important;
}

    .more-info .badge {
        animation: pulse 3s infinite;
        font-size: 13px;
        padding: 5px 9px;
        border-radius: 50rem;
        background: linear-gradient(45deg, #6c3ec1, #9b59b6);
        color: #fff;
        font-weight: 500;
    }

.tab-head {
    width: 70% !important;
}

.faq .btn-header-link:after {
    content: "";
    background: url("../images/arrow-up.png")no-repeat 0 0;
    float: right;
    width: 25px;
    height: 25px;
    display: inline-block;
    top: 2.5rem;
    right: 1.5rem;
    position: absolute;
}

.faq .btn-header-link.collapsed:after {
    content: "";
    background: url("../images/arrow-down.png")no-repeat 0 0
}


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.more-info:hover {
    text-decoration: underline;
    color: rgb(43, 24, 81) !important;
}

@media only screen and (max-width:1440px) {
    .modal-open .modal {
        max-height: 94%;
    }

    .modal {
        top: 45px !important;
    }
}

@media only screen and (max-width:1366px) {
    .image-container {
        height: auto;
    }
}

@media only screen and (max-width:1024px) {
    .name {
        font-size: 22px;
    }

    .designation {
        font-size: 18px;
    }
}

@media only screen and (max-width: 768px) {
    ul.pay-list li {
        width: calc(47% - 0px) !important;
    }
}

@media only screen and (max-width: 670px) {
    section {
        padding: 4rem 0 0rem 0 !important;
    }

    .modalclose {
        right: 0px !important;
        top: 0px !important;
    }

    .faq .btn-header-link:after {
        background-size: 68% 57% !important;
    }

    .name {
        font-size: 20px;
    }

    .designation {
        font-size: 16px;
    }

    ul.pay-list li {
        width: calc(100% - 0px) !important;
    }

    .tab-head {
        width: 100% !important;
    }

    ul.find-box li:nth-child(5), ul.find-box li:nth-child(6), ul.find-box li:nth-child(7), ul.find-box li:nth-child(8) {
        margin: 0 1rem 0rem 1rem !important;
    }
}



.step-card {
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

    .step-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 12px 40px rgba(108, 62, 193, 0.3);
    }

.step-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(45deg, #6c3ec1, #9b59b6);
    color: white;
    padding: 10px 24px;
    font-weight: 700;
    clip-path: polygon(0% 0%, 100% 0%, 111% 100%, 25% 105%);
    font-size: 14px;
    letter-spacing: 0.5px;
    z-index: 2;
    width: 135px;
    text-align: center;
}

.step-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.step-card:hover .step-img {
    transform: scale(1.05);
}

.step-description {
    padding: 18px;
    font-size: 17px;
    font-weight: 700;
    background-color: #f4efff;
    color: #3c2674;
    transition: background-color 0.3s ease;
    text-align: center;
}

.step-card:hover .step-description {
    background-color: #e4d9ff;
}

@media (max-width: 767px) {
    .step-img {
        height: 200px;
    }

    .step-title {
        font-size: 1.8rem;
    }
}

.modal.show .modal-dialog {
    z-index: 9999 !important;
}

.main-header {
    background: #2B1851 !important;
    color: #fff !important;
    padding: 10px 15px 15px !important;
}