/* Gradient bg start */
.gradient-bg {
    &-one {
        background: linear-gradient(180deg, rgba(19, 81, 216, 0.07) 0%, rgba(245, 245, 248, 0.32) 100%);
    }
    &-two {
        background: linear-gradient(131.31deg, #0B163F 12.26%, #0D1C5D 48.46%, #301996 91.93%);
    }
    &-three {
        background: linear-gradient(131.31deg, #0B163F 12.26%, #0D1C5D 48.46%, #301996 91.93%);
    }
    &-four {
        background: linear-gradient(180deg, rgba(245, 245, 248, 0) 0%, rgba(240, 240, 250, 0.37) 38.09%, rgba(236, 236, 251, 0.67) 100%);
    }

    &-five {
        background: linear-gradient(69.92deg, #003D3D 28.63%, #00664E 87.07%, #008C63 112.98%);
    }
    &-six {
        background: linear-gradient(270deg, #06766E 0%, #20BA8B 100%);
    }
    &-seven {
        background: linear-gradient(180deg, #D7F2FF 0%, #F5F5FD 74.92%, #FFFFFF 100%);
    }
    &-eight {
        background: linear-gradient(0deg, #DAF2FF 0%, #DAF2FF 100%);
    }
    &-nine {
        background: linear-gradient(0deg, #ACE7EB 0%, #F5F5FD 74.92%, #FFFFFF 100%);
    }
    &-ten {
        background: linear-gradient(180deg, #D7F2FF 0%, #F5F5FD 74.92%, #FFFFFF 100%);
    }
    &-80-percent {
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 80%;
            background: linear-gradient(180deg, rgba(231, 249, 247, 0) 0%, rgba(240, 244, 250, 0.614257) 65.67%, rgba(240, 244, 250, 0.79) 100%);
            z-index: -1;
        }
    }
}


.hover-gradient-bg {
    &-five {
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #06766E 0%, #20BA8B 100%);
            border-radius: inherit;
            inset-block-start: 0;
            inset-inline-start: 0;
            visibility: hidden;
            opacity: 0;
            z-index: -1;
            transition: .3s linear;
            z-index: -1;
        }
        &:hover {
            &::before {
                visibility: visible;
                opacity: 1;
                background: linear-gradient(90deg, #06766E 0%, #20BA8B 100%);
            }
        }
    }
}


.gradient-overlay {
    position: relative;
    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(28, 28, 28, 0) 0%, #000000 89.89%);
        inset-inline-start: 0;
        inset-block-start: 0;
    }
}

.gradient-bg-top-bottom {
    background: linear-gradient(0deg, #e7e7ea 0%, rgba(238, 238, 252, 0) 100%);
}

.gradient-bg-bottom-top {
    background: linear-gradient(0deg, #F7F6FC 0%, #F5F5FD 74.92%, #FFFFFF 100%);
}

.gradient-line {
    background: linear-gradient(90deg, #FFFFFF 0%, #E5E3E3 7%, #E6E3E3 50%, #E5E3E3 94%, #FFFFFF 100%);
}

.gradient-bg-70-top-bottom {
    position: relative;
    &::before {
        position: absolute;
        content: ""; 
        width: 100%;
        height: 84%;
        background: linear-gradient(180deg, #D7F2FF 0%, #F5F5FD 74.92%, #FFFFFF 100%);
        inset-inline-start: 0;
        inset-block-end: 0;
        z-index: -1;
        border-radius: inherit;
    }
}
/* Gradient bg end */