/*# sourceMappingURL=custom.min.css.map */

/* layout start*/
.section {
    padding: 50px 0;
    position: relative;
    /* height: calc(100vh - 0px); */
}

.hero-section {
    background-color: rgba(var(--vz-light-rgb), 0.5);
    background: linear-gradient(20deg, #ffffff, #1a6076);
    background: linear-gradient(20deg, #ffffff, #024183);
    background: radial-gradient(circle, rgba(2, 86, 27, 1) 0%, rgba(6, 16, 51, 1) 0%, rgba(2, 86, 27, 1) 100%);
    background-image: linear-gradient(to right bottom, #061033, #002141, #003045, #003d42, #00493b, #004e34, #00522a, #02561b, #02561b, #02561b, #02561b, #02561b);
    background: linear-gradient(169.75deg, #03381B -13.81%, #06223A 83.61%);
}
p {
    font-family: proxima-nova, sans-serif !important;
}
.landing .navbar {
    background: #043322;
    padding: 0px;
}

.text-yellow-light {
    color: #DFFEC8;
}
.text-green-light {
    color: #8FF574;
}
.card-blue {
    background: #1C3F60;
}
.text-success-gradient {
    background: linear-gradient(285.93deg, #24D5C3 1.38%, #8FF574 90.61%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.border-color-light {
    border-color: #fff;
}

.navbar-landing .navbar-nav .nav-item .nav-link {
    padding-top: 20px;
    padding-bottom: 20px;
}
.navbar-landing .navbar-nav .nav-item .nav-link.active {
    color: #8FF574 !important;
    border-bottom: 1px solid #8FF574;
}

.section.hero-section {
    display: flex;
    align-items: center;
}

.home-img .user-img {
    margin-left: 31px;
}

.inquiry-box {
    left: -50px;
    top: 42px;
}

.application-box {
    bottom: 50px;
    right: -200px;
}

.fit-content {
    max-width: 200px;
}

.valuex-box {
    max-width: 56%;
}

.bottom-40 {
    bottom: 40px;
}

.bottom-80 {
    bottom: 80px;
}

.line-height-2 {
    line-height: 1.6;
}
.invest-slider .swiper-pagination-dark .swiper-pagination-bullet {
    background-color: #6691e7;
}
/* layout end*/



/* Sun Light rays banner start*/
#sun div {
    content: "";
    display: block;
    position: fixed;
    bottom: 0;
    left: 38vw;
    width: 100vw;
    height: 100vh;
    --sunPos: 57vw -1vmin;
    transform-origin: var(--sunPos);
    -webkit-animation: sun 3.5s linear infinite alternate;
    animation: sun 3.5s linear infinite alternate;
    -webkit-mask-image: radial-gradient(circle at var(--sunPos), white 0%, transparent 100%);
    mask-image: radial-gradient(circle at var(--sunPos), white 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

#sun div {
    content: "";
    display: block;
    position: fixed;
    bottom: 13vw;
    left: 38vw;
    width: 59vw;
    height: 76vh;
    --sunPos: 57vw 1vmin;
    transform-origin: var(--sunPos);
    -webkit-animation: sun 3.5s linear infinite alternate;
    animation: sun 3.5s linear infinite alternate;
    -webkit-mask-image: radial-gradient(circle at var(--sunPos), white 0%, transparent 100%);
    mask-image: radial-gradient(circle at var(--sunPos), white 0%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

#sun div {
    content: "";
    display: block;
    position: fixed;
    bottom: 13vw;
    left: 74vw;
    width: 45vw;
    height: 76vh;
    --sunPos: 25vw 480px 1vmin;
    transform-origin: var(--sunPos);
    -webkit-animation: sun 3.5s linear infinite alternate;
    animation: sun 3.5s linear infinite alternate;
    -webkit-mask-image: radial-gradient(circle at var(--sunPos), white 0%, transparent 100%);
    mask-image: radial-gradient(circle at var(--sunPos), white 0%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

#sun #sun_layer1 {
    background: conic-gradient(from 135deg at var(--sunPos), transparent 10.5%, rgba(255, 255, 255, 0.15) 11%, transparent 11.5%, transparent 15%, oklch(80% 0.1 0deg/0.1) 16%, transparent 17%, transparent 18%, rgba(255, 255, 255, 0.1) 19%, transparent 20%);
}

#sun #sun_layer2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    background: conic-gradient(from 140deg at var(--sunPos), transparent 10%, rgba(255, 255, 255, 0.1) 11%, transparent 12%, transparent 15.5%, rgba(255, 255, 255, 0.1) 16%, transparent 16.5%, transparent 17%, oklch(90% 0.1 50deg/0.1) 18%, transparent 19%);
}

#sun #sun_layer3 {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 6.5s;
    animation-duration: 6.5s;
    background: conic-gradient(from 145deg at var(--sunPos), transparent 10%, oklch(90% 0.1 200deg/0.1) 11%, transparent 12%, transparent 14%, rgba(255, 255, 255, 0.1) 15%, transparent 16%, transparent 17%, rgba(255, 255, 255, 0.1) 18%, transparent 19%);
}

@keyframes sun {
    to {
        transform: skew(-42deg);
    }
}
/* Sun Light rays banner End*/

:root {
    --outer-size: 1519px;
    --ec-gap: 284px;
    --logo-s: 56px;
    --logo-m: 80px;
    --logo-l: 120px;
    --gap-2: 140px;
    --gap-3: 280px;
}

#integrations {
    height: calc(var(--outer-size) / 2);
    overflow: clip;
    display: flex;
    justify-content: center;
    position: relative;
    background: transparent;
    margin-top: -50px;
}

.arc-wrap {
    width: var(--outer-size);
    position: relative;
    left: 0;
}

.arc-1,
.arc-2,
.arc-3 {
    margin: auto;
}

.arc-1,
.arc-2 {
    view-timeline-inset: 50%;
}

.arc-1 {
    width: var(--outer-size);
    height: var(--outer-size);
}

.arc-1,
.arc-2,
.arc-3 {
    animation-fill-mode: both;
    animation-timeline: view(block);
    transform-origin: 50% 50%;
}

.arc {
    position: relative;
    overflow: clip;
    border-radius: 50%;
}

.arc-1 {
    animation-name: rotate-3;
}

.arc-1,
.arc-2,
.arc-3 {
    margin: auto;
}

.arc-1,
.arc-2 {
    view-timeline-inset: 50%;
}

#integrations {
    height: calc(var(--outer-size) / 2);
    overflow: clip;
    display: flex;
    justify-content: center;
    position: relative;
}

.arc-wrap {
    width: var(--outer-size);
    position: relative;
    left: 0;
}

.arc-2 {
    position: absolute;
    top: calc((var(--outer-size) - (var(--gap-2) / 2)) * -1);
    left: 0;
}

.int-logo,
.size-s {
    width: var(--logo-s);
    height: var(--logo-s);
}

.size-m {
    width: var(--logo-m);
    height: var(--logo-m);
}

.size-l {
    width: var(--logo-l);
    height: var(--logo-l);
}

.arc-1 {
    width: var(--outer-size);
    height: var(--outer-size);
}

    .arc-1:after {
        content: "";
        display: block;
        width: calc(var(--outer-size) - var(--logo-s) - 5px);
        height: calc(var(--outer-size) - var(--logo-s) - 5px);
        margin: auto;
        border-radius: 50%;
        border: 2px solid rgba(186, 155, 252, 0.15);
        position: absolute;
        top: calc(var(--logo-s) / 2);
        left: calc(var(--logo-s) / 2);
    }

.arc-2:after,
.arc-3:after {
    content: "";
    display: block;
    margin: 0 auto;
    position: absolute;
}

.arc-2 {
    width: calc(var(--outer-size) - var(--gap-2));
    height: calc(var(--outer-size) - var(--gap-2));
}

    .arc-2:after {
        width: calc(var(--outer-size) - (var(--gap-2) * 2));
        height: calc(var(--outer-size) - (var(--gap-2) * 2));
        border-radius: 50%;
        border: 2px solid rgba(186, 155, 252, 0.15);
        top: calc(var(--gap-2) / 2);
        left: calc(var(--gap-2) / 2);
    }

.arc-3 {
    position: absolute;
    top: calc((var(--outer-size) * 2 - var(--gap-3)) * -1);
    left: 0;
    width: calc(var(--outer-size) - var(--gap-3));
    height: calc(var(--outer-size) - var(--gap-3));
}

    .arc-3:after {
        width: calc(var(--outer-size) - (var(--gap-3) * 2));
        height: calc(var(--outer-size) - (var(--gap-3) * 2));
        border-radius: 50%;
        border: 2px solid rgba(186, 155, 252, 0.15);
        top: calc(var(--gap-3) / 2);
        left: calc(var(--gap-3) / 2);
    }

.logo-wrap {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.arc-2 .logo-wrap {
    width: 120%;
    margin: 0 -10%;
}

.arc-3 .logo-wrap {
    width: 80%;
    margin: 0 auto;
}

.int-link {
    z-index: 2;
}

.int-logo {
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 #fff;
    border-collapse: collapse;
}

    .int-logo:hover {
        box-shadow: 0 0 8px #a7a1b648;
    }

.int-1 {
    transform: translateY(calc(var(--outer-size) / 4.2)) translateX(95px);
}

.int-2,
.int-5 {
    transform: translateY(calc(var(--logo-s) * 2.6)) translateX(0);
}

.int-3,
.int-4 {
    transform: translateY(calc(var(--logo-s) / 5)) translateX(0);
}

.int-6 {
    transform: translateY(calc(var(--outer-size) / 4.2)) translateX(-95px);
}

.int-7 {
    transform: translateY(410px) translateX(215px);
    transform: translateY(450px) translateX(215px);
}

.int-12 {
    transform: translateY(410px) translateX(-215px);
    transform: translateY(460px) translateX(-215px);
}

.int-8 {
    transform: translateY(185px) translateX(65px);
    transform: translateY(205px) translateX(65px);
}

.int-11 {
    transform: translateY(185px) translateX(-65px);
    transform: translateY(195px) translateX(-65px);
}

.int-10,
.int-9 {
    transform: translateY(50px) translateX(0);
    transform: translateY(60px) translateX(0);
}

.int-15 {
    transform: translateY(239px) translateX(-125px);
}

.int-13 {
    transform: translateY(239px) translateX(125px);
}

.int-14 {
    transform: translateY(75px) translateX(0);
}

.arc-1,
.arc-2,
.arc-3 {
    animation-fill-mode: both;
    animation-timeline: view(block);
    transform-origin: 50% 50%;
}

.arc {
    position: relative;
    overflow: clip;
    border-radius: 50%;
}

.arc-1 {
    animation-name: rotate-3;
}

.arc-2 {
    /* animation-name:rotate-2; */
}

.arc-3 {
    animation-name: rotate-1;
    view-timeline-inset: 0%;
}

@keyframes rotate-1 {
    from {
        transform: rotate(-25deg);
    }

    to {
        transform: rotate(25deg);
    }
}

@keyframes rotate-2 {
    from {
        transform: rotate(15deg);
    }

    to {
        transform: rotate(-15deg);
    }
}

@keyframes rotate-3 {
    from {
        transform: rotate(-15deg);
    }

    to {
        transform: rotate(15deg);
    }
}



#integrations {
    width: 100%;
    height: 82vh;
    position: relative;
    z-index: 999999999;
    background: #ffffff;
    background: transparent;
    margin-top: -50px;
}

.arc-wrap {
    top: 100px;
}

/* .card-logo-dark {
            display: var(--vz-card-logo-light);
        }
        .card-logo-light {
            display: var(--vz-card-logo-dark);
        } */
.int-logo {
    border: 1px solid #ebebeb;
    border-radius: 50%;
    box-shadow: 0 0 0 #fff;
    border-collapse: collapse;
    padding: 3px;
}

    .int-logo:hover {
        box-shadow: 0 0 8px #a7a1b648;
        border: 5px solid #fff;
    }

.circle-effect {
    z-index: -1;
    right: -30px;
    right: -181px;
    top: 23px;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999999999;
}

.navbar-landing.is-sticky {
    background-color: var(--vz-secondary-bg);
    -webkit-box-shadow: 0 1px 16px -2px rgba(56, 65, 74, .15);
    box-shadow: 0 1px 16px -2px rgba(56, 65, 74, .15);
    background: linear-gradient(45deg, #487add, #07a756);
    background: linear-gradient(to right bottom, rgb(6, 16, 51), rgb(0, 33, 65), rgb(0, 48, 69), rgb(0, 61, 66), rgb(0, 73, 59), rgb(0, 78, 52), rgb(0, 82, 42), rgb(2, 86, 27), rgb(2, 86, 27), rgb(2, 86, 27), rgb(2, 86, 27), rgb(2, 86, 27));
  /*  background-image: linear-gradient(to right bottom, #003045, #003045, #003045, #02561b, #02561b, #02561b, #02561b, #02561b, #003045, #003045, #003045, #003045);*/
}

.thumb-icons {
    display: block;
    margin-left: 40px;
}

.thumb-icons {
    animation-name: fadein;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        visibility: initial;
    }
}

.int-3 .thumb-icons,
.int-9 .thumb-icons {
    margin-left: 29px;
}

.int-4 .thumb-icons,
.int-10 .thumb-icons {
    margin-left: 22px;
}

.int-5 .thumb-icons,
.int-11 .thumb-icons {
    margin-left: 20px;
}

.int-6 .thumb-icons,
.int-12 .thumb-icons {
    margin-left: 20px;
}


.navbar-landing .navbar-nav .nav-item .nav-link {
    color: var(--vz-body-bg);
}

.section1 {
    background: blue;
    height: 100vh;
}

/* .image{
        position: absolute;
        left: 50%;
        top: 2%;
        transform: translate(-50%, 0);
        } */
.title,
.there {
    font-size: 3rem;
    color: #fff;
    opacity: 0;
}

.section2 {
    background-color: red;
    height: 100vh;
}

.section3 {
    background-color: green;
    height: 100vh;
}

.our-scholars {
}

    .our-scholars .list-group {
        padding-left: 30px;
    }

    .our-scholars .list-group-item {
        margin-bottom: 0;
        list-style-type: disc;
        display: list-item;
        position: relative;
        padding: var(--vz-list-group-item-padding-y) var(--vz-list-group-item-padding-x);
        color: var(--vz-list-group-color);
        background-color: transparent;
        border: var(--vz-list-group-border-width) solid var(--vz-list-group-border-color);
        border-left: 0px;
        padding-left: 0px;
    }

    .our-scholars .card {
        -webkit-box-shadow: 0 0px 2px rgba(56, 65, 74, .15);
        box-shadow: 0 0px 2px rgba(56, 65, 74, .15);
    }

    .our-scholars .isl-scholar {
        position: relative;
    }

    .our-scholars .isl-scholarPos {
        position: absolute;
        top: auto;
        bottom: 0px;
        width: 100%;
        text-align: center;
        padding: 0px;
        background: #deffef;
    }

.fs-28 {
    font-size: 28px;
}

.isl-portfolio--screening__image img:nth-child(1) {
    filter: invert(1);
    filter: brightness(0.5);
    animation-duration: 50s;
    animation-name: rotateme;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    max-width: 50%;
    max-height: 40vh;
    margin-left: 3%;
}

.isl-portfolio--screening__image img:nth-child(2) {
    left: 0;
    right: 0;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
}

.isl-portfolio--screening__image video {
    left: 0%;
    right: auto;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    width: 21vw;
    height: 35vh;
}

@keyframes rotateme {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

:root {
    --vz-gold: 217, 154, 41;
    --vz-gold-primary: #033A37;
    --vz-gold-text-primary: #013443;
    --vz-gold-primary-emphasis: #03485c;
    --vz-gold-primary-rgb: 19, 197, 107;
    --vz-gold-grey: #bababa;
    --vz-gold-border-color: #d99a29;
    --vz-gold-light-500-bg-subtle: #f5f5f5;
    --vz-gold-border-radius: 1rem;
    --vz-gold-border-radius: 0.25rem;
    --vz-gold-bg-subtle: #fff4e0;
    --vz-gold-bg-nav: #033A37;
    --vz-gold-bg-nav-border: #d99a29;
}

.bg-gold-subtle {
    --vz-bg-opacity: 0.07;
    background-color: rgba(var(--vz-gold), var(--vz-bg-opacity)) !important;
    ;
}

.right-0 {
    right: 0px;
}

body {
    overflow-x: hidden;
}

.isl-banner--scholar img {
    max-height: 100%;
}

.fs-50 {
    font-size: 50px;
}

.isl-gold .job-icon-effect {
    height: 45px;
    width: 45px;
    position: absolute;
    top: 0;
    left: -15%;
    border-radius: 50%;
    background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0) .8px, #d99a29 1.6px, #d99a29 2px, rgba(255, 255, 255, 0) 3.8px, rgba(255, 255, 255, 0) 5px);
    z-index: 0;
    opacity: .2;
}

.text-gold {
    color: rgb(var(--vz-gold));
}


@media (max-width: 1800px) {
    .isl-banner--scholar img {
        max-height: 500px;
    }
}

@media (max-width: 1200px) {
    .isl-banner--scholar img {
        max-height: 480px;
    }
}

@media (max-width: 991.98px) {
    .navbar-landing {
        background: linear-gradient(193deg, #ffffff, #024183);
    }

    .section.hero-section {
        display: flex;
        align-items: center;
        padding: 50px 0;
        position: relative;
        height: calc(125vh - 0px);
    }

    .hero-section--content {
        margin-top: -50vh;
    }

    .isl-banner--scholar img {
        max-height: 480px;
        margin-bottom: -38vh !important;
    }
}

/* .isl-gold {
    background: url('/assets/images/goldbar.gif');
    background-image: url('/assets/images/goldbar.gif');
    background-size: cover;
    background-position: center center;
    background-color: #cccccc;
    height: 100vh;
}
.content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: white;
        }
.overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          opacity: 0.5;
        } */

.video-bg {
    height: 100vh;
    position: relative;
}

.video-bg--gold {
    height: 100vh;
}

.mt-60 {
    margin-top: 60px;
}

.text-left {
    text-align: left;
}

.video-bg video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-bg--gold video {
    height: 100vh;
}

.video-bg .home-content {
    position: relative;
    /* padding-top: 150px; */
    color: #fff;
    text-align: center;
    background: rgb(103 190 205 / 40%);
    background: rgba(5, 86, 48, 0.8);
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    background: rgb(24 48 66 / 80%);
}

.video-bg--gold .home-content {
    position: relative;
    /* padding-top: 150px; */
    color: #fff;
    text-align: center;
    background: rgb(103 190 205 / 40%);
    background: rgba(5, 86, 48, 0.8);
    width: 100%;
    height: 100vh;
    height: auto;
    display: flex;
    align-items: center;
    background: rgb(24 48 66 / 70%);
    background: rgb(250 248 212 / 80%);
    background: rgb(0 0 0 / 80%);
    padding-top: 50px;
    padding-bottom: 50px;
    height: 100vh;
}

.section-h--100 {
    min-height: 100vh;
}

.invest-slider .swiper-slide img,
.invest-slider swiper-slide img {
    transform: rotate(-20deg);
    position: absolute;
    bottom: -100px;
    transform: rotate(-20deg) !important;
    position: absolute;
    /* bottom: -100px; */
    right: -17px;
    top: -10px;
}

.invest-slider .swiper-slide .card-body {
    position: relative;
    height: 50vh;
}


    .invest-slider .swiper-slide .card-body h1 {
        margin-top: 10vh;
    }

.app-download-img {
    z-index: 1;
}

    .app-download-img .image:nth-child(2) {
        left: 0;
        right: 0;
        top: 50%;
        z-index: -1;
        position: absolute;
        transform: translateY(-50%);
        margin-left: auto;
        margin-right: auto;
    }

        .app-download-img .image:nth-child(2) img {
            animation-duration: 50s;
            animation-name: rotateme;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

    .app-download-img .image:nth-child(3) {
        left: 0;
        right: 0;
        top: 50%;
        z-index: -2;
        position: absolute;
        transform: translateY(-50%);
        margin-left: auto;
        margin-right: auto;
    }

.app-download-content {
    padding-left: 15px;
}

    .app-download-content h2 {
        font-size: 28px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .app-download-content .btn-box {
        margin-top: 35px;
    }

        .app-download-content .btn-box a img {
            border-radius: 10px;
        }

        .app-download-content .btn-box a {
            transition: 0.5s all;
        }

            .app-download-content .btn-box a:last-child {
                margin-left: 15px;
            }

            .app-download-content .btn-box a:hover {
                transform: translateY(-5px);
            }

    .app-download-content.text-white h2 {
        color: var(--blackColor);
    }

    .app-download-content.text-white p {
        color: var(--paragraphColor);
    }

.footer-top--item {
    border-bottom: 1px solid #616977;
    margin-bottom: 30px;
}

    .footer-top--item p {
        font-size: 16px;
        color: #fff;
    }

    .footer-top--item a {
        color: #ccc;
        border-right: 2px solid #ccc;
        padding-right: 10px;
        margin-left: 10px;
        font-size: 14px;
    }

        .footer-top--item a:last-child {
            border: 0px;
        }

    .footer-top--item img {
        height: 15px !important;
        width: 15px !important;
        border-radius: 40px;
        border: 1px solid #ccc;
    }


.isl-scholar {
    background: url('/assets/images/shariah-scholar.png');
    /* background-position: fixed; */
    background-size: cover;
    height: 100%;
    height: 54vh;
    background-position: center;
    position: relative;
}

.isl-scholar-rightTeam {
    background-image: linear-gradient(to right bottom, #02561b, #02561b, #02561b, #003d42, #00493b, #003045, #003045, #003045, #02561b, #02561b, #02561b, #02561b);
    /* background: radial-gradient(circle, rgba(2, 86, 27, 1) 0%, rgba(6, 16, 51, 1) 0%, rgba(2, 86, 27, 1) 100%); */
    left: auto;
    width: fit-content;
    padding: 7px 20px;
    bottom: 20px;
}

.isl-scholar-topInfo {
    left: 30px;
    top: 50px;
}

    .isl-scholar-topInfo h5 {
        font-size: 24px;
        line-height: 1.6;
    }

        .isl-scholar-topInfo h5 i {
            font-size: 20px;
        }


.isl-scholar-leftTeam--bottom {
    bottom: 30px;
    left: 20px !important;
}

.isl-scholar-leftTeam--top {
    bottom: 140px;
    left: 20px !important;
}

.isl-gold .isl-portfolio--screening__image img:nth-child(1) {
    animation-name: none;
    width: 100%;
    max-width: 80%;
}

.isl-gold .isl-portfolio--screening__image img:nth-child(1) {
    animation-name: none;
    width: 100%;
    max-width: 80%;
    filter: drop-shadow(2px 4px 6px black);
    margin-top: 50px;
}

.isl-gold .isl-portfolio--screening__image img:nth-child(2) {
    top: 27%;
}



/* Start Button Animation Css */

.w-lg {
    padding: 14px 50px;
}

.w-lg--l {
    padding: 14px 20px 14px 50px;
}

.w-lg--r {
    padding: 14px 60px 14px 25px;
}

.btn-isl-sm.w-lg--r {
    padding: 8px 60px 8px 25px;
}


.btn-isl {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    height: 55px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    position: relative;
    min-width: 320px;
}

.btn-isl-sm {
    height: 45px;
    min-width: 200px;
    font-size: 16px;
    font-weight: 500;
}


.btn-isl:hover {
    background-position: 80% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    color: #fff;
    box-shadow: 0px 0px 5px #82f17e;
}

.btn-isl:focus {
    outline: none;
}

.isl-btn--primary {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    /*box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);*/
    background: linear-gradient(285.93deg, #24D5C3 1.38%, #8FF574 90.61%);
    color: #000;
    font-weight: 400;
    font-size: 16px;
}
    .isl-btn--primary:hover {
        color: #000;
    }

    .isl-btn--secondary {
        background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
        box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
    }

.isl-btn--gold {
    background-image: linear-gradient(to right, #f7dd80, #f3ad3b, #f7dd80, #f3ad3b);
    box-shadow: 0 4px 15px 0 rgba(247, 221, 128, 0.6);
}


.chevron {
    position: absolute;
    width: 28px;
    height: 2px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}

    .chevron:first-child {
        animation: move 3s ease-out 1s infinite;
    }

    .chevron:nth-child(2) {
        animation: move 3s ease-out 2s infinite;
    }

    .chevron:before,
    .chevron:after {
        content: ' ';
        position: absolute;
        top: 0;
        height: 100%;
        width: 51%;
        background: #fff;
    }

    .chevron:before {
        left: 0;
        transform: skew(0deg, 30deg);
    }

    .chevron:after {
        right: 0;
        width: 50%;
        transform: skew(0deg, -30deg);
    }

@keyframes move {
    25% {
        opacity: 1;
    }

    33% {
        opacity: 1;
        transform: translateY(30px);
    }

    67% {
        opacity: 1;
        transform: translateY(40px);
    }

    100% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}


@keyframes pulse {
    to {
        opacity: 1;
    }
}

.arrow {
    position: absolute;
    top: 45%;
    left: auto;
    right: 30px;
    transform: translate(-50%, -50%);
    transform: rotate(-90deg);
    cursor: pointer;
}

.arrow span {
    display: block;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
   animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}
/* End Button Animation Css */


#chartdiv {
    width: 100%;
    height: 300px;
}

.landing-customForm .form-control {
    border: 0px;
    border-bottom: 1px solid #27475b;
    height: 42px;
    border-radius: 0px;
    background-color: #27475b;
    color: #fff;
}
.landing-customForm .form-control:hover {
    border-bottom: 1px solid #27475b;
    background-color: #27475b;
    box-shadow: 0px 0px 4px #06233a;
}
.form-check-broker {
  
/*    background-color: #f1f1f1;*/
    /*width: 96%;*/
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    margin-bottom: 2px;
}
.form-check-right.form-check-broker .form-check-input {
    float: right;
    margin-left: -25px;
    margin-right: 1.4em;
    width: 1.2rem;
    height: 1.2rem;
    /*position: absolute;*/
}
.form-check-right.form-check-broker .form-check-label {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border-bottom: 1px solid #27475b;
    height: 40px;
    border-radius: 0px;
    background-color: #27475b;
    margin-bottom: 2px;
}

.form-check-right input[type="radio"]:checked + label {
    background: var(--vz-success);
}

.btn-shareReport {
    background: #1c3f43;
    border-radius: 20px;
    padding: 5px 10px;
    color: #8FF574;
    border: 1px solid #385757;
    font-size: 12px !important;
    display: flex;
    align-items: center;
    white-space: break-spaces;
    font-weight: 300;
}
.compliance-reportTop {
    width: 70% !important;
    margin: 0 auto;
}
.card-overAllDetails {
    box-shadow: 0px 2px 4px 0px #00000040;
    background: #385757;
    border-radius: 10px;
}
.card-nonCompliant {
    box-shadow: 0px 2px 4px 0px #00000040;
    background: linear-gradient(174.08deg, #1C3F60 -5.52%, #A32D2D 88.11%);
    border-radius: 10px;
}
.card-compliant {
    box-shadow: 0px 2px 4px 0px #00000040;
    background: linear-gradient(179.75deg, #2F3A40 0.28%, #5C9739 99.62%);
    border-radius: 10px;
}

.filterBox {
    height: 94px;
    margin-top: -17px;
    margin-bottom: -23px;
}

.filterBoxTab {
    padding: 24px 14px;
    cursor: pointer;
}

.filterBoxTab.active {
    background: rgba(37, 37, 37, 0.4);
}

.card-header.bg-transparent {
    border-bottom: 1px solid rgb(255 255 255 / 20%);
}


.form-check-right input[type="radio"]:checked + label {
    color: red;
}


.form-check-input:checked label {
    color: red;
}

.bg-overlay-pattern {
    background-position: top;
    background-size: cover;
    opacity: 0.2;
}
.flexColCustom {}
.flexColCustom-50 {
    max-width: 50%;
    width: 100%;
}
.modal-dark {
    background: rgba(14, 36, 69, 1);
    border: 0px;
}
/*.modal-backdrop {
    background: rgba(28, 63, 96, 1);
}*/
    .modal-backdrop.show {
        background: rgba(28, 63, 96, 1);
        opacity: 0.8;
    }
.modal-dark {}
.landing-customForm .modal-dark .form-control {
    border: 0px;
    border-bottom: 0px solid #27475b;
    height: 42px;
    border-radius: 0px;
    background-color: #27475b;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 14px;
}

.landing-customForm .modal-dark .form-select  {
    background: #263957 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") right .75rem center/8px 10px no-repeat !important;
}

    .landing-customForm .modal-dark .form-select option {
        color: #fff;
    }
    .modal-dark input:-webkit-autofill,
    .modal-dark input:-webkit-autofill:hover,
    .modal-dark input:-webkit-autofill:focus,
    .modal-dark input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-text-fill-color: #ffffff !important;
        -webkit-box-shadow: 0 0 0 30px #263957 inset !important;
    }


.tab-slider--body input:-webkit-autofill,
.tab-slider--body input:-webkit-autofill:hover,
.tab-slider--body input:-webkit-autofill:focus,
.tab-slider--body input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 30px #27475b inset !important;
}

    .modal-dark .form-check .form-check-input {
        cursor: pointer;
       /* background: transparent;*/
        border-color: var(--vz-success);
    }
    .modal-dark label {
        color: rgba(255, 255, 255, 0.6);
    }
    .modal-dark .form-check-input:checked {
        background-color: var(--vz-success);
        border-color: var(--vz-success);
    }
.modal-dark .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.modal-dark .btn-close {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 0.5;
    background: transparent;
}
.modal-dark .btn-close {
    position: absolute;
    right: 15px;
    top: 14px;
    width: 16px;
    height: 16px;
    opacity: 0.7;
    background: transparent;
    background: background: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.15);
    border-radius: 30px;
}
    .modal-dark .btn-close:hover {
        opacity: 1;
    }

    .modal-dark .btn-close:before, .modal-dark .btn-close:after {
        position: absolute;
        left: 16px;
        content: ' ';
        height: 20px;
        width: 2px;
        background-color: #7ed672;
        bottom: 8px;
    }

    .modal-dark .btn-close:before {
        transform: rotate(45deg);
    }

    .modal-dark .btn-close:after {
        transform: rotate(-45deg);
    }
.flexcolCustom-16 {
    max-width: 16%;
    width: 100%;
}

.bg-compliant {
    background: rgba(121, 186, 82, 1);
    border-radius: 6px;
}
.bg-nonCompliant {
    background: #ff9d86;
    border-radius: 6px;
}
.fs-38 {
    font-size: 38px;
}
.rightStrip {}
.rightStripbox {
    background: #435e62;
    border-radius: 8px;
    padding: 5px 10px;
    margin-bottom: 6px;
}
.fw-300 {
    font-weight:300;
}
.modal-right {
    margin-right: 0px;
    min-height: 100vh;
    margin-top: 0px;
    margin-bottom: 0px;
}
    .modal-right .modal-content {
        min-height: 100vh;
    }

.card-pricingBox {
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.25);
    background: #263957;
}
.card-pricingBox-radio {
    padding: 0px;
}
.card-pricingBox-radio input[type=radio] {
    display: none;
}

    .card-pricingBox-radio input[type=radio] + label {
        padding: 10px 1.2vw;
        margin-bottom: 0px;
        border-radius: 8px;
    }
    .card-pricingBox-radio input[type="radio"]:checked + label {
        background: transparent;
        border: 2px solid #84e071;
        /* border-image-source: linear-gradient(285.93deg, #24D5C3 1.38%, #8FF574 90.61%); */
        box-shadow: 0px 1px 10px 0px rgba(143, 245, 116, 0.2);
        box-shadow: 0px 0px 24px 0px rgba(143, 245, 116, 0.3) inset;
    }

.priceItem {
    color: rgba(28, 63, 96, 1);
    border-radius: 6px;
    padding: 0px 10px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
    .priceItem i {
        font-size: 20px;
        margin-right: 10px;
        font-size: 15px;
    }
    .bestValue {
        background: rgba(255, 200, 87, 1);
    }
.bestValue {
    background: rgba(255, 200, 87, 1);
}
.startesP {
    background: rgba(223, 254, 200, 1);
}
.proceedBtn, .proceedBtn:hover {
    border: 1px solid rgba(143, 245, 116, 1);
    color: rgba(143, 245, 116, 1);
    padding: 6px 15px;
    font-size: 15px;
    border-radius: 30px;
}
.exploreBottom {}

.navbar {}
    .navbar .btn-link {
        border: 1px solid rgba(143, 245, 116, 1);
        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.15);
        border-radius: 20px;
        color: rgba(143, 245, 116, 1);
    }
        .navbar .btn-link.btn-primary {
            background: linear-gradient(278.69deg, #24D5C3 2.52%, #8FF574 100.73%);
            box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.15);
            border-radius: 20px;
            color: rgba(4, 56, 27, 1);
        }
.fs-64 {
    font-size: 64px;
}
.flex-direction-row {
    flex-direction: row;
}

.dashboardSyncModal .modal-dark .form-check-input:checked {
    background-color: #fff;
    border-color: #fff;
    background-color: #fff;
    border-color: #6691e7;
    border-width: 5px;
}
.fs-32 {
    font-size: 32px;
}
.modal-dark .loginDesign .form-check-input:checked {
    background-color: var(--vz-success);
    border-color: var(--vz-success);
    background: url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e');
}

.paymentCupon {
    margin: 0px;
}
   /* .paymentCupon.border-top {
        
    }*/
    .paymentCupon-width {
        background: rgba(238, 255, 226, 1);
        border-radius: 20px;
        padding: 20px;
    }
.paymentCupon h4 {
    color: rgba(4, 56, 27, 1);
}
.paymentCuponDiv {
    color: rgba(4, 56, 27, 1);
    padding: 5px 0px 10px;
}
    .paymentCuponDiv p {
        color: rgba(4, 56, 27, 1);
        font-weight: 500;
        font-size: 16px;
    }
    .paymentCuponDiv h5 {
        font-weight: 600;
        color: rgba(4, 56, 27, 1);
        font-size: 18px;
    }
        .paymentCuponDiv h5 span {
            font-size: 13px;
        }
        .paymentCuponDivTotal {
            border-top: 1px solid rgba(4, 56, 27, 1);
            padding-top: 9px;
        }
.paymentCuponDivInputBox {}
    .paymentCuponDivInputBox .btn.btn-primary {
        font-size: 16px;
        font-weight: 500;
        border-radius: 20px !important;
        padding: 4px 20px;
        height: 33px;
        margin-top: 5px;
        position: absolute;
        right: 10px;
        color: rgba(4, 56, 27, 1);
        background: rgba(143, 245, 116, 1);
        border-color: rgba(143, 245, 116, 1);
        z-index: 999;
    }
    .paymentCuponDivInputBox .form-control {
        background: #fff !important;
        font-weight: 600;
        color: #333 !important;
        box-shadow: 0px 0px 2px #04381b;
        border-radius: 6px !important;
    }
.paymentCuponDivDiscount {}
.paymentCuponDivDiscount p {}
.paymentCuponDivDiscount h5 {
    font-size: 20px;
}
.paymentCuponDivPayable {}
.paymentCuponDivPayable p {
    font-size: 20px;
}
.paymentCuponDivPayable h5 {
    font-size: 30px;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif !important;
    font-weight: 300;
}
input:-internal-autofill-selected {
    background-color: transparent !important;
}
input:is(:-webkit-autofill, :autofill) {
    border: 3px solid darkorange;
}

.modal-dark input:-webkit-autofill, .modal-dark input:-webkit-autofill:hover, .modal-dark input:-webkit-autofill:focus, .modal-dark input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 30px #263957 inset !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #263957 inset !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.isl-paymentForBoth--plans.active .proceedBtn {
    background: rgba(143, 245, 116, 1);
    color: rgba(4, 56, 27, 1);
}

/*.proceedBtn:hover {
    background: rgba(143, 245, 116, 1);
    color: rgba(4, 56, 27, 1);
}*/















@media (max-width: 1500px) {
    .display-4 {
                font-size: 2.5rem 40px;
            }

            .lh-base {
                line-height: 1.3 !important;
            }

            .fs-24 {
                font-size: 22px !important;
            }

            .isl-banner--scholar img {
                margin-bottom: -97px !important;
            }

            .text-left.postionUp h1 {
                margin-top: -60px;
            }
        }