.cfa-bg-image {
    background-color: #100A25;
    background-repeat: no-repeat;
    background-size: cover;
}
.main-wrapper{
    padding-left: 4rem;
    padding-right: 4rem;
    max-width: 100%;

}
.main-glow{
    position: absolute;
    top: 0;
    z-index: -1
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.contact-button{
    background-color: #7654FF;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 50px;
    padding: 1.25rem;
}

.cfa-card-header{
    color: #7654FF;
    font-weight: 600;
    font-size: 1.25rem;
}
.cfa-card-white{
    background-color: white;
    border-radius: 1rem;
    flex: 1;
    z-index: -2;
}
.bg-purple{
    background-color: #5015B0BD;
}
.team-card-height{
    max-height: 15.75rem;
}

.cfa-card-purple {
    position: relative;
    border-radius: 1rem;
    border-width: 1px;

&::before {
     content: '';
     position: absolute;
     top: -1px;
     left: -1px;
     right: -1px;
     bottom: -1px;
     z-index: -1;

     background: linear-gradient(152deg, rgba(255, 255, 255, 0.5), rgba(80, 21, 176, 0.74));
     border-radius: inherit;
 }
}

.bg-light-purple{
    background-color: #7654FF !important;
}
.rounded-card{
    border-radius: 30px;
}
.round-top{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.round-bottom{
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.text-decoration-underline{
    text-decoration: underline;
}

.gap-3{
    gap: 1rem;
}
.gap-4{
    gap: 1.5rem;
}
.gap-5{
    gap: 3rem;
}
.ms-4{
    margin-left: 1.5rem;
}
.ps-4{
    padding-left: 1.5rem;
}

.fs-1 {
    font-size: 0.625rem !important;
}

.fs-2 {
    font-size: 0.75rem !important;
}

.fs-3 {
    font-size: 0.875rem !important;
}

.fs-4 {
    font-size: 1rem !important;
}

.fs-5 {
    font-size: 1.125rem !important;
}

.fs-6 {
    font-size: 1.25rem !important;
}
.fs-7{
    font-size: 1.5rem !important;
}
.fs-8{
    font-size: 1.75rem !important;
}
.fs-9{
    font-size: 2rem !important;
}
.fs-10{
    font-size: 2.25rem !important;
}
.fs-11{
    font-size: 2.5rem !important;
}
.fs-12{
    font-size: 2.75rem !important;
}
.fs-13{
    font-size: 3rem !important;
}
.footer-container {
    background: linear-gradient(0deg, rgba(120, 123, 184, 0.1) 0%, rgba(117, 179, 226, 0.1) 100%);
    padding: 24px 60px;
    gap: 32px;
    border-radius: 50px 50px 0 0;
    opacity: 0.9;
    display: flex;
    flex-direction: column;
    position: relative; /* Required for the pseudo-element positioning */
    overflow: hidden; /* Ensure content stays inside rounded corners */


&::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px 50px 0 0; /* Match the .footer-container border-radius */
    padding: 1.69px 1.69px 0 0;
    background: linear-gradient(124deg, rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 0%) 100%);
    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
}
.footer-card {
    position: relative;
    border-radius: 10px; /* Add the border radius here */
    overflow: hidden;

&::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px; /* Match this to the .footer-card border-radius */
    padding: 2px; /* Border width */
    background: linear-gradient(124deg, rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 0%) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
}
}

.cfa-card-glass {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 14rem;
    padding-top: 0.75rem;
    padding-bottom: 0.9rem;
&::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: inherit; /* Match this to the .footer-card border-radius */
     padding: 1.69px; /* Border width */
     background: linear-gradient(167deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 0%) 50%);
     -webkit-mask:
             linear-gradient(#fff 0 0) content-box,
             linear-gradient(#fff 0 0);
     mask-composite: exclude;
     z-index: -1;
 }
}

.mb-n1 {
    margin-bottom: -0.25rem !important;
}

.mb-n2 {
    margin-bottom: -0.5rem !important;
}

.mb-n3 {
    margin-bottom: -1rem !important;
}

.mb-n4 {
    margin-bottom: -1.5rem !important;
}

.mb-n5 {
    margin-bottom: -3rem !important;
}
.mt-n1  {
    margin-top: -0.25rem !important;
}

.mt-n2 {
    margin-top: -0.5rem !important;
}

.mt-n3 {
    margin-top: -1rem !important;
}

.mt-n4 {
    margin-top: -1.5rem !important;
}

.mt-n5 {
    margin-top: -3rem !important;
}

.potential-chart {
    width: 60%;

}

.chart-wrapper {
    min-height: 40rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
#potential-chart td {
    background: linear-gradient(175.69deg, #BD69FF -41.92%, #140548 168.65%);
    width: 2rem;
    position: relative;
    color: #8360FF;
}
#potential-chart td:nth-child(1)  {
    background-image: linear-gradient(180deg, #0B77C4 0, #93D2FF 50.45%);
    color: #6db9ee;
}

#potential-chart tbody {
    height: 36.25rem;
}

#potential-chart table {
    --primary-axis-color: rgba(255, 255, 255, 50%);
    --primary-axis-style: solid;
    --primary-axis-width: 1px;
}

#potential-chart th {
    color: #777777;
    margin-bottom: -2rem;
}

#chart-wrapper {
    position: relative;
    margin: 0 auto;

}

#forecast-big span {
    position: absolute;
    top: 7%;
    left: 43%;
}
#forecast-big hr{
    position: absolute;
    top: 11%;
    left: 68%;
    width: 15%;
}
#forecast-big p{
    position: absolute;
    top: 5%;
    left: 97.5%;
    color:#FFFFFF99;

}

#forecast-medium span{
    position: absolute;
    top: 28%;
    left: 33%;
}
#forecast-medium hr {
    position: absolute;
    top: 32%;
    left: 56%;
    width: 15%;
}
#forecast-medium p{
    position: absolute;
    top: 28.5%;
    left: 84.9%;
    color:#FFFFFF99;

}


#forecast-small span{
    position: absolute;
    top: 47%;
    left: 15%;
}
#forecast-small hr{
    position: absolute;
    top: 51%;
    left: 46%;
    width: 15%;
}

#forecast-tiny span{
    position: absolute;
    top: 67%;
    left: 0;
}

#forecast-tiny hr{
    position: absolute;
    top: 71%;
    left: 29%;
    width: 8%;
}
#forecast-tiny p{
    position: absolute;
    top: 67.5%;
    left: 49%;
    color:#FFFFFF99;

}
.w-15{
    width:15%!important
}
#forecast-card{
    position: absolute;
    top: 81%;
    left: 0;
}
.main-blob {
    position: absolute;
    right: 0;
    top:0;
    z-index: -1;
}
.standard-spring-1{
    position: absolute;
    left:  0;
    z-index: -4;
}
.standard-spring-2{
    position: absolute;
    right:  5%;
}
.mudaraba-blob{
    position: absolute;
    left:  0;
    z-index:  -5;
}
.mudaraba-glow{
    position: absolute;
    right:  0;
    z-index:  -1;
}
.sukuk-spring{
    position: absolute;
    right:  0;
    z-index:  2;
}
.advantages-blob{
    position: absolute;
    left:  0;
    z-index:  -1;
}
.example-blob-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.success-example-blob {
    position: absolute;
    z-index: -1;
    padding-bottom: 8rem;
}
.potenial-blob{
    position: absolute;
    left:  0;
    padding-top: 35rem;
    z-index:  -1;
}
.team-blob{
    position: absolute;
    right:  0;
    margin-top: -7rem;
}

.contact-blob{
    position: absolute;
    left:  0;
    width: 770px;
    z-index:  -1;
}

.contact-spring{
    position: absolute;
    right:  0;
    z-index: -1;
}
::-webkit-scrollbar {
    display: none;
}
.cfa-card-purple span{
    position: relative;
    z-index:  3;
}
.cfa-card-white span{
    position: relative;
    z-index:  1;
}
.cfa-card-white h4{
    position: relative;
    z-index:  1;
}
img{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.desktop-hidden {
    display: none !important;
}


.min-w-50 {
    min-width: 50%;
}

#main h1 {
    width: 100%;
}

.cfa-gap {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (max-width: 1400px) {

    .main-blob {
        width: 90%;
    }

    .mudaraba-blob {
        width: 55%;
    }




    #potential td span{
        font-size: 1.5rem !important;
    }
    #potential td span span {
        font-size: 1rem !important;
    }
    .forecast span{
        font-size: 1.25rem !important;
    }
}

@media (max-width: 1200px) {

    .team-blob {
        display: none;
    }
    .advantages-blob {
        display: none;
    }
    .example-blob-container {
        display: none;
    }

    .contact-blob {
        display: none;
    }
    .main-blob {
        width: 80%;
        top: 21%;
        left: 20%;
    }
    .sukuk-spring {
        padding-top: 4rem;
    }


    .potenial-blob {
        display: none;
    }
    #potential td span{
        font-size: 1.125rem !important;
    }
    #potential td span span {
        font-size: 0.875rem !important;
    }
    .forecast span{
        font-size: 1.125rem !important;
    }
}

@media screen and (max-width: 1024px){

    .sukuk-spring {
        display: none !important;
    }
    #standards-container{
        flex-direction: column;
    }
    #potential .desktop-hidden{
        display: initial !important;
    }
    #potential .mobile-hidden{
        display: none !important;
    }
    /*.standard-spring-2 {*/
    /*    display: none!important;*/
    /*}*/
}


@media screen and (max-width: 781px) {


    .main-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: -webkit-center;
    }

    .cfa-gap {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    h1 span {
        font-size: 1.5rem !important;
    }

    .cfa-card-glass {
        width: 7.25rem !important;
        height: 3rem !important;
        gap: 0.75rem !important;
    }

    .cfa-card-glass img {
        width: 2rem !important;
        height: 2rem !important;
    }

    #header-wrapper {
        padding: 0 !important;
    }

    #header-wrapper img {
        width: 122px;
        height: 27.74px;
    }

    .fs-13 {
        font-size: 2rem !important;
    }



    .example-blob-container {
        display: initial !important;
    }
    .standard-spring-1 {
        top: 44rem;
        height: 500px;
    }
    .standard-spring-2 {
        height: 88px;
        width: 78px;
        position: absolute !important;
        left: 81% !important;
        bottom: -43% !important;
    }
    .mudaraba-blob{
        display: none;
    }
    /*.mudaraba-blob-mob{*/
    /*    position: absolute !important;*/
    /*    z-index: 2;*/
    /*    right: -43px;*/
    /*    top: 148%;            }*/


    #main h1 span:nth-child(2) {
        justify-content: center !important;
    }

    #main {
        padding-top: 0 !important;
    }

    #main button {
        width: 10rem !important;
        height: 2.5rem !important;
        font-size: 1rem !important;
        margin-top: 1rem !important;
        padding: 0 !important;
    }

    /*#standards div:nth-child(1) {*/
    /*    display: block !important;*/
    /*}*/

    #standards .main-swiper > div {
        display: flex !important;
    }
    #team .team-swiper > div {
        display: flex !important;
    }

    .team-blob {
        display: initial !important;
        width: 200px;
        transform: scaleX(-1);
        left: 0;
        z-index: -3;
    }


    #standards .col-sm-6:nth-of-type(2) {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important;
    }

    #standards .col-sm-6:nth-child(1) {
        padding-bottom: 0.5rem !important;
    }

    .mobile-header {
        margin-bottom: 0 !important;
        font-size: 1.25rem !important;
    }

    #standards span {
        font-size: 0.75rem !important;
        font-weight: 400 !important;
    }

    h4 {
        font-size: 1rem !important;
        text-align: start !important;
    }

    #standards .cfa-card-white {
        text-align: left !important;
    }

    .main-swiper .cfa-card-white {
        flex: none !important;
    }



    .main-swiper, .team-swiper{
        padding-bottom: 4rem !important;
    }

    #standards {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    #standards-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 1rem !important;
    }


    #cfa-mudaraba {
        padding-bottom: 0 !important;
        padding-top: 1rem !important;
    }


    #cfa-sukuk {
        padding-bottom: 0 !important;
        padding-top: 1rem !important;
    }

    #cfa-sukuk h1 {
        margin-top: 0 !important;
    }

    #cfa-musharaka {
        padding-bottom: 0 !important;
        padding-top: 1rem !important;

    }

    #cfa-musharaka h1 {
        margin-top: 0 !important;
    }

    #total-advantages {
        padding-bottom: 2rem !important;
        padding-top: 1rem !important;
        margin-bottom: 0 !important;
    }

    #total-advantages > div:nth-child(1) {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #total-advantages > div:nth-child(2) span {
        text-align: start !important;
    }


    #total-advantages h1 {
        margin-top: 0 !important;

    }

    #total-advantages img {
        width: 3rem !important;
        height: 3rem !important;
    }

    #total-advantages .col:nth-child(odd) div {
        flex-direction: row-reverse !important;
        justify-content: space-between !important;
        background-color: #5015B0BD !important;
    }

    #total-advantages .col:nth-child(even) div {
        background-color: #7654FF !important;

    }

    #total-advantages .col:nth-child(odd) div img {
        margin-left: 0 !important;
        margin-right: 1.5rem !important;
    }
    #total-advantages > div > div > span{
        width: 100% !important;
    }

    #success-example {
        padding-bottom: 2rem !important;
        padding-top: 2rem !important;
    }

    #success-example span span {
        font-size: 1rem !important;
    }

    #success-example span {
        font-size: 0.875rem !important;
    }

    #success-example h1 {
        margin-top: .5rem !important;
        padding-bottom: 1rem !important;
    }

    #success-example div {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
        margin: 2rem 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        justify-content: center !important;
        padding-top: 1rem !important;
    }

    .footer-container {
        padding: 1.5rem 1.5rem !important;
    }

    #total-advantages .mobile-block {
        padding-top: 1.5rem !important;
    }

    #total-advantages > div:nth-child(1) {
        margin-bottom: .5rem !important;
    }


    #example-text div {
        padding: 0.75rem 0 !important;
    }

    #example-text div:nth-child(2) {
        margin-bottom: 0.75rem !important;
    }

    #success-example div img:nth-child(1) {
        width: 98px !important;
        height: 22px !important;
        padding: 0 !important;
        margin: 0.5rem;
    }

    #success-example div img:nth-child(2) {
        width: 160px !important;
        height: 27px !important;
        padding: 0 !important;
        margin: 0.5rem;
    }

    #success-example div img:nth-child(3) {
        width: 98px !important;
        height: 42px !important;
        padding: 0 !important;
        margin: 0.5rem;
    }

    #success-example div img:nth-child(4) {
        width: 160px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0.5rem;
    }

    #success-example div img:nth-child(5) {
        width: 37px !important;
        height: 55px !important;
        padding: 0 !important;
        margin: 0.5rem;
    }

    #potential {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }


    .sources {
        justify-content: center !important;
        margin-top: 1.5rem !important;
    }

    #team {
        margin-bottom: 0 !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #team > div:nth-of-type(1) {
        margin-top: 0 !important;
        padding-bottom: 2rem !important;
    }

    #team h1 {
        padding-bottom: 0.5rem !important;
    }

    #team span {
        font-size: 0.875rem !important;
    }

    #team .desktop-hidden {
        display: flex !important;
    }

    .mobile-block {
        display: block !important;
        padding-top: 2rem !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        text-align: start !important;
    }

    span {
        font-size: 0.875rem !important;
    }

    a {
        font-size: 0.875rem !important;
    }

    #total-advantages .mobile-block div:nth-child(2) {
        padding-top: 1.5rem !important;
    }


    .mobile-block img {
        width: 3rem !important;
        height: 3rem !important;
    }

    .w-mob-100 {
        width: 100% !important;
    }


    .px-mob-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-mob-0 h4 {
        margin-top: 1rem !important;
    }

    .px-mob-0 span {
        margin-bottom: 1rem !important;
    }

    .desktop-hidden {
        display: initial !important;
    }

    .advantages {
        display: block !important;
        text-align: start !important;
    }

    .advantages > div:nth-child(1) {
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .advantages > div:nth-child(2) {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-top: 1rem !important;
    }

    #potential {
        /*display: none;*/
        width: auto !important;
        height: auto !important;
        font-size: 0.875rem !important;
    }

    #potential .mobile-header {
        max-width: 85% !important;
        padding-bottom: 2rem !important;
    }

    .contact-spring {
        display: none !important;
    }

    #contact {
        padding-top: 2rem !important;
        text-align: start !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    #contact h1 {
        margin-bottom: 0 !important;
        padding-bottom: 2rem !important;
    }


    #contact div:nth-of-type(1) {
        margin-top: 0 !important;
    }

    #contact .container{
        max-width: 100% !important;
    }

    .mobile-text-end {
        text-align: end !important;
    }

    .swiper-wrapper {
        margin-top: 0 !important;
    }

    .swiper-button-prev {
        position: absolute;
        width: 48px;
        height: 48px;
        right: 60px;
        left: inherit;
    }

    .swiper-button-prev:after {
        content: none;
    }

    .swiper-button-next {
        position: absolute;
        width: 48px;
        height: 48px;
        right: 0;
        left: inherit;
    }

    .stagesNewSwiper .swiper-button-prev {
        top: 86%
    }

    .stagesNewSwiper .swiper-button-next {
        top: 86%
    }

    #cfa-sukuk .swiper-button-prev, #cfa-sukuk .swiper-button-next{
        top: 90%
    }
    #team .swiper-button-prev, #team .swiper-button-next{
        top: 88%
    }

    .swiper-button-next:after {
        content: none;
    }

    .advantages .desktop-hidden {
        display: block !important;
    }

    #standards .desktop-hidden {
        display: block !important;
    }


    .steps-navigation {
        padding-top: .25rem !important;
    }

    .mobile-hidden {
        display: none !important;
    }

    .team-card-height {
        height: 12.25rem !important;
    }

    .form-check label{
        font-size: 0.875rem!important;
    }
    /*.sukuk-spring {*/
    /*    display: initial !important;*/
    /*    width: 200px !important;*/
    /*}*/
    .mudaraba-glow-1{
        position: absolute !important;
        right: 0 !important;
    }

}


@media screen and (max-width: 575px) {

}
@media screen and (max-width: 372px) {
    #cfa-sukuk .swiper-button-prev {
        top: 92%
    }

    #cfa-sukuk .swiper-button-next {
        top: 92%
    }
    #team .fs-6{
        font-size: 0.7rem !important;
    }
    #main .d-flex{
        display: block!important;
        padding: .5rem
    }

}


@media (max-width: 991px) {
    .links-wrapper {
        display: block !important;
    }

    #links-wrapper div:nth-child(2) {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    #links-wrapper div {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

}