.iol-txt-link{
    color: #fff;
    /*text-decoration: underline #0086cb;*/
    border-bottom: 1px solid #0086cb;
}

.iol-bg-wrapper-right{
    position: absolute;
    top: 40%;
    right: -50%;
}

.iol-bg-wrapper-left{
    position: absolute;
    top: 40%;
    left: -50%;
}
/* ---------- WORKFLOW CARDS ------ */
.iol_flow_number_bg_one,
.iol_flow_number_bg_two,
.iol_flow_number_bg_three,
.iol_flow_number_bg_four {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.iol_flow_number_bg_one .fusion-column-wrapper > *,
.iol_flow_number_bg_two .fusion-column-wrapper > *,
.iol_flow_number_bg_three .fusion-column-wrapper > *,
.iol_flow_number_bg_four .fusion-column-wrapper > * {
    z-index: 1;
}

.iol_flow_number_bg_one .fusion-column-wrapper,
.iol_flow_number_bg_two .fusion-column-wrapper,
.iol_flow_number_bg_three .fusion-column-wrapper,
.iol_flow_number_bg_four .fusion-column-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.iol_flow_number_bg_one .fusion-column-wrapper::before ,
.iol_flow_number_bg_two .fusion-column-wrapper::before,
.iol_flow_number_bg_three .fusion-column-wrapper::before,
.iol_flow_number_bg_four .fusion-column-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: -1;
}

.iol_flow_number_bg_one:hover .fusion-column-wrapper::before,
.iol_flow_number_bg_two:hover .fusion-column-wrapper::before,
.iol_flow_number_bg_three:hover .fusion-column-wrapper::before,
.iol_flow_number_bg_four:hover .fusion-column-wrapper::before {
    opacity: 1;
}

/* Normal */
#iol-workflow .iol_flow_number_bg_one .fusion-column-wrapper {  background: linear-gradient(90deg, rgba(151, 71, 255, 0.3) 0%, rgba(151, 71, 255, 0) 100%);}
#iol-workflow .iol_flow_number_bg_two .fusion-column-wrapper {  background: linear-gradient(90deg, rgba(119, 115, 255, 0.3) 0%, rgba(151, 71, 255, 0) 100%);}
#iol-workflow .iol_flow_number_bg_three .fusion-column-wrapper {  background: linear-gradient(90deg, rgba(95, 144, 254, 0.3) 0%, rgba(151, 71, 255, 0) 100%);}
#iol-workflow .iol_flow_number_bg_four .fusion-column-wrapper{  background: linear-gradient(90deg, rgba(63, 187, 254, 0.3) 0%, rgba(151, 71, 255, 0) 100%);}

/* Hover-Layer */
.iol_flow_number_bg_one .fusion-column-wrapper::before {  background: linear-gradient(90deg, rgba(151, 71, 255, 0.5) 0%, rgba(151, 71, 255, 0) 100%);}
.iol_flow_number_bg_two .fusion-column-wrapper::before {  background: linear-gradient(90deg, rgba(119, 115, 255, 0.5) 0%, rgba(151, 71, 255, 0) 100%);}
.iol_flow_number_bg_three .fusion-column-wrapper::before {  background: linear-gradient(90deg, rgba(95, 144, 254, 0.5) 0%, rgba(151, 71, 255, 0) 100%);}
.iol_flow_number_bg_four .fusion-column-wrapper::before {  background: linear-gradient(90deg, rgba(63, 187, 254, 0.5) 0%, rgba(151, 71, 255, 0) 100%);}

/* ---------- WORKFLOW NUMBERS ------ */

.iol_flow_number_bg_one:after,
.iol_flow_number_bg_two:after,
.iol_flow_number_bg_three:after,
.iol_flow_number_bg_four:after {
    position: absolute;
    right: 26px;
    font-size: 500px;
    color: #000;
    top: calc(50% - 30px);
    transform: translate(0px, -50%);
    line-height: .65;
    font-weight: 700;
    text-align: end;
    width: 50%;
}

.iol_flow_number_bg_one::after {  content: "1";}
.iol_flow_number_bg_two::after {  content: "2";}
.iol_flow_number_bg_three::after {  content: "3";}
.iol_flow_number_bg_four::after {  content: "4";}

/* ---------- SECTION TITLE GRARIENTS ---------- */
.iol_bg_gradient_one{
    border-radius: 20px;
    background: linear-gradient(90deg,rgba(151, 71, 255, 0.3) 0%, rgba(151, 71, 255, 0) 30%);}

.iol_bg_gradient_two{
    border-radius: 20px;
    background: linear-gradient(90deg,rgba(119, 115, 255, 0.3) 0%, rgba(151, 71, 255, 0) 30%);}

.iol_bg_gradient_three{
    border-radius: 20px;
    background: linear-gradient(90deg,rgba(95, 144, 254, 0.3) 0%, rgba(151, 71, 255, 0) 30%);}

.iol_bg_gradient_four{
    border-radius: 20px;
    background: linear-gradient(90deg,rgba(63, 187, 254, 0.3) 0%, rgba(151, 71, 255, 0) 30%);}


.iol_bg_gradient_one:before, .iol_bg_gradient_two:before, .iol_bg_gradient_three:before, .iol_bg_gradient_four:before   {
    font-size: 40px;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
}

.iol_bg_gradient_one:before {    content: "1.";    color: #9747FF;}
.iol_bg_gradient_two:before {    content: "2.";    color: #7773FF;}
.iol_bg_gradient_three:before {    content: "3.";    color: #5F90FE;}
.iol_bg_gradient_four:before {    content: "4.";    color: #3FBBFE;}

/* --------- IOL TOPICS SLIDER --------- */
.iol-slider{
    position: relative;
}

.iol-slider img{
    aspect-ratio: 16/9;
    margin-bottom: 20px !important;
}

.iol-slider .iol-caption p{
    color: #fff;
    font-size: 14px;
    margin-bottom: 0 !important;
    text-align: right;
}

.iol-caption{
    margin-left: 50px;
}

.iol-slider .iol-caption .iol-caption-title{
    font-weight: 700;
    margin-bottom: 5px !important;
}

.iol-slider  .swiper-pagination-fraction{
    font-size: 14px;
    user-select: none;
    pointer-events: none;
}

.iol-slider .swiper-pagination {
    left: 0px !important;
    bottom: 0px !important;
    width: auto !important;
    font-size: 14px;
    color: #fff;
    text-align: left;
    z-index: 3;
}

.iol-slider .swiper-button-prev,
.iol-slider .swiper-button-next {
    background: #19191980;
    width: 24px;
    height: 30px;
    padding: 10px 3px;
    transition: all .3s ease-in-out;
    top: 46%;
}

.iol-slider .swiper-button-prev:hover,
.iol-slider .swiper-button-next:hover {
    background: #191919;
}


.iol-slider .swiper-button-prev {
    left: 0px;
    transform: scaleX(-1) translate(0px, -50%);

}

.iol-slider .swiper-button-next {
    right: 0px;
    transform: translate(0px, -50%);
}

@media only screen and (max-width: 768px) {
    .iol-slider .swiper-button-prev,
    .iol-slider .swiper-button-next {
        top: 43%;
    }
}

@media only screen and (max-width: 530px) {
    .iol-slider .swiper-button-prev,
    .iol-slider .swiper-button-next {
        top: 35%;
    }
}

@media only screen and (max-width: 420px) {
    .iol-slider .swiper-button-prev,
    .iol-slider .swiper-button-next {
        top: 30%;
    }
}

@media only screen and (max-width: 1024px) {
    .iol_flow_number_bg_one:after, .iol_flow_number_bg_two:after, .iol_flow_number_bg_three:after, .iol_flow_number_bg_four:after {

        top: calc(50% - 0px) !important;
    }
}

/* ----------- HERO ORBS ---------- */
.orbit {
    top: -20%;
    position: absolute;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    animation: spin 12s linear infinite;
}

.orbiter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbiter.top {
    margin-top: -200px;
}

.orbiter.bottom {
    margin-top: 200px;
}

.blob {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .6;
    animation: wobble 4s ease-in-out infinite;
}

.blue {
    background: #3FBBFE;
}

.purple {
    background: #9747FF;
    animation-delay: -1.1s;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes wobble {
    0% {
        transform: scale(1);
        border-radius: 50%;
    }
    25% {
        transform: scale(1.08, 0.94);
        border-radius: 46% 54% 52% 48%;
    }
    50% {
        transform: scale(0.94, 1.08);
        border-radius: 53% 47% 45% 55%;
    }
    75% {
        transform: scale(1.06, 0.97);
        border-radius: 48% 52% 50% 50%;
    }
    100% {
        transform: scale(1);
        border-radius: 50%;
    }
}

@media only screen and (max-width: 668px) {
    .orbiter.top {
        margin-top: -100px  !important;
    }

    .orbiter.bottom {
        margin-top: 100px  !important;
    }

    .blob {
        width: 200px !important;
        height: 200px !important;
        filter: blur(80px);
        opacity: .6;
    }
}

/* ----- WORDFLOW GRID ------*/

/* Responsive */
@media (max-width: 1023px) {

    .iol-workflod-grid-resp .fusion-builder-row{
        display: grid !important;
        gap: 0 10px;
        grid-template-columns: repeat(12, 1fr);
    }


    .iol-workflod-grid-resp .fusion-builder-row{
        grid-template-columns: 30px 1fr;
        grid-template-areas:
        "one one"
        "two two"
        "three three"
        "eight four"
        "eight five"
        "eight six"
        "eight seven";
    }

    .iol-workflod-grid-resp .iol_box-1 {
        grid-area: one;
    }

    .iol-workflod-grid-resp .iol_box-2 {
        grid-area: two;
    }

    .iol-workflod-grid-resp .iol_box-3 {
        grid-area: three;
    }

    .iol-workflod-grid-resp .iol_box-4 {
        grid-area: four;
    }

    .iol-workflod-grid-resp .iol_box-5 {
        grid-area: five;
    }

    .iol-workflod-grid-resp .iol_box-6 {
        grid-area: six;
    }

    .iol-workflod-grid-resp .iol_box-7 {
        grid-area: seven;
        margin-bottom: 0;
    }

    .iol-workflod-grid-resp .iol_box-8 {
        grid-area: eight;
        height: 100%;
    }
}

.iol_arrow-strip {
    width: 100%;
    height: 20px;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-size: 21px 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 9.75L0 0H11L21 9.75L11 20H0L10 9.75Z' fill='white' fill-opacity='0.15'/%3E%3C/svg%3E");
    animation: arrow-move 0.5s linear infinite;
}

@keyframes arrow-move {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: 21px;
    }
}

@media only screen and (max-width: 1023px) {
    .iol_arrow-strip {
        width: 20px;
        height: 100%;
        background-repeat: repeat;
        background-position: 0 0;
        background-size: 21px 20px;
        background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 10L20.5 0V11L10.5 20L0.5 11V0L10.5 10Z' fill='white' fill-opacity='0.15'/%3E%3C/svg%3E");
        animation: arrow-move 0.5s linear infinite;
    }

    @keyframes arrow-move {
        from {
            background-position-y: 0;
        }
        to {
            background-position-y: 20px;
        }
    }
}