:root, [data-bs-theme=light] {
    --vz-moon: #2B474E;
    --vz-moon-primary: #374782;
    --vz-moon-text-primary: #22315B;
}

[data-bs-theme=dark] {
    --vz-moon: #2B474E;
    --vz-moon-primary: #374782;
    --vz-moon-grey: #bababa;
    --vz-moon-text-primary: #22315B;
}

.text-moon {
    color: var(--vz-moon) !important;
}

.text-moon-primary {
    color: var(--vz-moon-primary) !important
}

.bg-moon {
    background: var(--vz-moon)
}

.bg-moon-primary {
    background: var(--vz-moon-primary)
}

.badge-moon {
    background-color: #d99a29;
}

.bg-light-moon-subtle {
    background-color: var(--vz-light-500-bg-subtle);
}

.border-color-primary {
    border-color: var(--vz-moon-primary);
}

.btn-moon {
    --vz-btn-bg: var(--vz-moon-primary);
    --vz-btn-border-color: var(--vz-moon-primary);
    --vz-btn-hover-bg: var(--vz-moon-primary-emphasis);
    --vz-btn-hover-border-color: var(--vz-moon-primary-emphasis);
    --vz-btn-focus-shadow-rgb: var(--vz-moon-primary-rgb);
    --vz-btn-active-bg: var(--vz-moon-primary-emphasis);
    --vz-btn-active-border-color: var(--vz-moon-primary-emphasis);
    --vz-btn-color: #fff;
    --vz-btn-hover-color: #fff;
    --vz-btn-focus-shadow-rgb: 54,206,129;
    --vz-btn-active-color: #fff;
    --vz-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --vz-btn-disabled-color: #fff;
}

    .btn-moon:hover {
        background-color: #374782;
    }


    .isl-header--nav .navbar-nav {
        margin-top: 13px;
    }
.isl-header--nav .nav-item {
    display: block;
    float: left;
}
.isl-header--nav .navbar-nav .nav-item {
    padding: 1px 6px !important;
    margin: 0px 2px;
}
        .isl-header--nav .navbar-nav .nav-item .nav-link {
            font-size: 13px;
            font-weight: 300;
            letter-spacing: 0.5px;
            color: #d7d7d7;
            transition: all 1.5s;
        }

.isl-header--nav .sticky .navbar-nav .nav-item .nav-link {
    color: #5c5c5c;
}

.isl-header--nav .sticky .navbar-nav .nav-item.signUp .nav-link {
    color: #fff !important;
}

.isl-header--nav .sticky .navbar-nav .nav-item.active .nav-link {
    color: #1f8102;
}

.isl-header--nav .topnav .navbar-nav .nav-item .nav-link {
    padding: 4px;
}

.isl-header--nav .navbar-nav .nav-item.active .nav-link {
    color: #ffffff;
}

    .isl-header--nav .navbar-nav .nav-item.active .nav-link:after {
        display: block;
        content: "";
        border-top: 0.3rem solid #319945;
        width: 1.5rem;
        transform: translateY(0rem);
        margin: 0 auto;
    }

.islStrategy-hedaer {
    background: url('https://pic.islamicly.com/web/moon/moon-bg.png');
    background-size: cover;
    height: 50vh;
}
.islStrategy-hedaer--content {
    padding: 150px 0px;
}

.islStrategy-row {
    background: #fff;
}


.islStrategy-box {
    background: url('https://pic.islamicly.com/web/moon/moon-bg4.png');
    background-size: cover;
    padding: 40px 30px;
    /*margin-top: -110px;*/
    position: relative;
    top: -120px;
    box-shadow: 0px 0px 6px #73837b;
    border-radius: 10px;
    background-position: center center;
}

.islStrategy-boxChoose{}
.islStrategy-boxChoose--item {
    width: 18%;
    text-align: center;
    margin: 0 1%;
}
    .islStrategy-boxChoose--item img {
        display: block;
        margin: 0 auto !important;
    }
    .islStrategy-boxChoose--item h5 {
        margin-top: 20px;
        text-align: center;
        margin-bottom: 15px;
        line-height: 1.6;
        font-size: 17px;
        color: #374782;
        font-weight: 600;
    }

    .islStrategy-boxChoose--item p {
        text-align: center;
        margin-bottom: 10px;
        font-size: 15px;
        line-height: 1.6;
    }
.islmoon-chooseUs {
    background: #f4f4ff;
}


.bg-moon2  {
    background: #2f3e72;
}
.islmoon-trending {
    background: url('https://pic.islamicly.com/web/moon/moon-list-bg.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
.isl-moonlistCta {
    background: url('https://pic.islamicly.com/web/moon/moon-list-cta.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}
.isl-moonFaq {}
    .isl-moonFaq .custom-accordion-border .accordion-item {
        border-left: 3px solid var(--vz-moon-primary);
    }
    .isl-moonFaq .accordion-border-box .accordion-item {
        border-top: var(--vz-border-width) solid var(--vz-moon-primary);
        border-radius: var(--vz-border-radius);
    }
    .isl-moonFaq .accordion-button:not(.collapsed) {
        var(--vz-accordion-border-color);
        box-shadow: inset 0 calc(-1* var(--vz-accordion-border-width)) 0 var(--vz-moon-primary);
        font-weight: 600 !important;
    }
    .isl-moonFaq .accordion-item {
        color: var(--vz-accordion-color);
        background-color: var(--vz-accordion-bg);
        border: var(--vz-accordion-border-width) solid var(--vz-moon-primary);
    }
    .isl-moonFaq .accordion .collapse {
        padding: 10px 0 10px;
        font-size: 15px;
    }
    .isl-moonFaq {}








    @media screen and (max-width: 799px) {
        .topnav .navMain .navbar-toggler {
        display: block !important;
        float: right;
        display: flex;
        margin-right: 0px;
        margin-top: 20px;
    }
        .topnav .navMain .navbar-toggler .fa {
            color: #fff;
            font-size: 20px;
        }
    .islStrategy-hedaer--content {
        padding: 90px 20px;
    }
    .display-6 {
        font-size: calc(1.375rem + 0.5vw);
        font-weight: 300;
        line-height: 1.2;
    }
    .fs-24 {
        font-size: 18px !important;
    }
}


@media screen and (max-width: 640px) {
    .topnav .navMain {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        background: #33437b;
        display: block !important;
        padding: 5px 20px 0px 20px;
    }
}