/* Shared legacy component structure, migrated to the dark palette. */
:where(body.site-standard)  {
    direction: rtl;
    font-display: swap;
    font-family: Almarai, sans-serif;
    letter-spacing: .3px !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body:where(.site-standard).bg-mode-dark {
    background-color: #252525 !important;
}

@media (min-width:768px) {
    body:where(.site-standard):not('.blog-page') {
        background-color: var(--site-surface) !important;
    }
}

:where(body.site-standard) label {
    margin-bottom: .1em;
    font-size: .8em
}

:where(body.site-standard) input,
:where(body.site-standard) select {
    font-size: .8em !important
}

:where(body.site-standard) .field-error,
:where(body.site-standard) .help-block {
    font-size: .7em !important;
    width: 100%;
    float: right
}

:where(body.site-standard) .custom-textarea {
    resize: none
}

:where(body.site-standard) .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

:where(body.site-standard) .btn-share {
    padding: .3em .6em;
    line-height: .8;
    border-color: rgba(0, 0, 0, .2);
    color: var(--site-text);
    margin-bottom: .3em
}

:where(body.site-standard) .btn-share span {
    font-size: .8em;
    font-weight: 700;
    line-height: 1.2;
    margin-right: 6px
}

:where(body.site-standard) .page .side-share-box .btn-share {
    padding: .3em .7em
}

:where(body.site-standard) .btn-share:active,
:where(body.site-standard) .btn-share:focus,
:where(body.site-standard) .btn-share:hover {
    color: var(--site-text)
}

:where(body.site-standard) .btn-facebook {
    background-color: #3b5998
}

:where(body.site-standard) .btn-facebook:hover {
    background-color: #4466ae
}

:where(body.site-standard) .btn-whatsapp {
    background-color: #25d366
}

:where(body.site-standard) .btn-whatsapp:hover {
    background-color: #52e086
}

:where(body.site-standard) .btn-linkedin {
    background-color: #007bb6
}

:where(body.site-standard) .btn-linkedin:hover {
    background-color: #0090d5
}

:where(body.site-standard) .btn-twitter {
    background-color: #55acee
}

:where(body.site-standard) .btn-twitter:hover {
    background-color: #71baf1
}

:where(body.site-standard) .btn-telegram {
    background-color: #08c
}

:where(body.site-standard) .btn-telegram:hover {
    background-color: #1ab2ff
}

:where(body.site-standard) .btn-copy {
    background-color: #a5acaf
}

:where(body.site-standard) .btn-copy:hover {
    background-color: #aeb4b7
}

:where(body.site-standard) .custom-page-card .card-header {
    background-color: var(--site-surface) !important;
    padding: .65em 1.15em !important;
    font-weight: 600;
    border-bottom: 0 !important;
}

:where(body.site-standard) .custom-page-card .card-header h3 {
    font-size: 1em;
    margin-right: 5px;
    line-height: .6em;
}

:where(body.site-standard) .custom-page-card .card-header i {
    font-size: .7em
}

:where(body.site-standard) .custom-page-card .card-body {
    padding-top: .2em !important
}

:where(body.site-standard) .home-navbar {
    background-color: var(--site-surface) !important
}

:where(body.site-standard) .home-navbar .site-logo {
    max-width: 90px
}

:where(body.site-standard) .home-header {
    background-color: #01b1c4 !important;
    padding-top: 5em;
    padding-bottom: 4.5em
}

:where(body.site-standard) .home-header .container {
    max-width: 500px
}

:where(body.site-standard) .home-header .icon img {
    width: 75px
}

:where(body.site-standard) .home-header .main-headline h1 {
    font-size: 1.6em;
    font-weight: 900;
    color: var(--site-text);
    line-height: 1.2em
}

:where(body.site-standard) .home-header .buttons .btn-signup {
    background-color: var(--site-surface);
    border: 1px solid #fff;
    color: #01b1c4 !important;
    font-size: 1.1em;
    font-weight: 700
}

:where(body.site-standard) .home-header .buttons {
    max-width: 300px;
    margin: 0 auto
}

:where(body.site-standard) .home-header .buttons .btn-login {
    background-color: transparent;
    border: 1.3px solid #fff;
    color: var(--site-text) !important;
    font-size: 1.1em;
    font-weight: 700
}

:where(body.site-standard) .home-suggestions {
    background-color: #27ae60 !important;
    padding-top: 4em;
    padding-bottom: 3em
}

:where(body.site-standard) .home-suggestions .headline h2 {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--site-text)
}

:where(body.site-standard) .home-suggestions .suggestion-item {
    font-size: .9em;
    font-weight: 500;
    line-height: 1.2em;
    background-color: transparent;
    border: 1px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-bottom: 1em;
    padding-top: .4em;
    padding-bottom: .5em;
    color: var(--site-text) !important;
    transition: .3s all
}

:where(body.site-standard) .home-suggestions .suggestion-item:hover {
    border: 1px solid #fff;
    border-bottom: 3px solid #fff;
    background-color: var(--site-surface);
    color: #27ae60 !important;
    text-decoration: none !important;
    transition: .3s all
}

:where(body.site-standard) .home-suggestions .suggestion-item-outer:hover {
    text-decoration: none
}

:where(body.site-standard) .home-suggestions .suggestion-item-outer:nth-child(6n+3) .suggestion-item {
    border: 1px solid #fff;
    border-bottom: 3px solid #fff;
    background-color: var(--site-surface);
    color: #27ae60 !important;
    text-decoration: none !important;
    transition: .3s all
}

@media (max-width:768px) {
    :where(body.site-standard) .home-footer .container {
        max-width: 100%;
        padding-right: 5px !important;
        padding-left: 5px !important
    }
}

:where(body.site-standard) .home-footer .top-area .footer-item {
    color: var(--site-text) !important;
    font-size: .8em;
    font-weight: 600;
    margin-left: .6em;
    word-spacing: .2px
}

@media (max-width:768px) {
    :where(body.site-standard) .container.page {
        padding-right: 0 !important;
        padding-left: 0 !important
    }
}

:where(body.site-standard) .page .page-title h1 {
    font-size: 1.4em;
    font-weight: 600
}

:where(body.site-standard) .page article .headline {
    color: var(--site-text);
    padding-top: .55em;
    padding-bottom: .45em;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: .9em;
    font-weight: 400;
    line-height: 1.1em
}

:where(body.site-standard) .page article .template-1 .headline {
    background-color: #01b1c4 !important
}

:where(body.site-standard) .page article .template-2 .headline {
    background-color: #27ae60 !important
}

:where(body.site-standard) .page article .headline i {
    margin-left: 5px
}

:where(body.site-standard) .page article .headline h2 {
    font-size: 1em;
    font-weight: 400;
    margin: 0 !important;
    line-height: .6em
}

:where(body.site-standard) .page .page-items-box.height-limited .page-items {
    max-height: 410px;
    overflow: hidden
}

:where(body.site-standard) .page .btn.load-items {
    background-color: var(--site-surface) !important;
    box-shadow: 0 -5px 15px #a6a6a6, 0 -8px 16px -4px #a6a6a6;
    font-size: .9em;
    font-weight: 700
}

:where(body.site-standard) .page article .page-item {
    font-size: 1.1em;
    line-height: 1.9em;
    padding-top: .6em;
    padding-bottom: .5em
}

@media (max-width:768px) {
    :where(body.site-standard) .page article .page-item {
        font-size: .9em;
        line-height: 1.7em
    }
}

:where(body.site-standard) .page article .template-1 .page-item {
    border-right: 3px solid #01b1c4;
    border-left: 3px solid #01b1c4;
    background-color: rgba(1, 177, 196, .1)
}

:where(body.site-standard) .page article .template-2 .page-item {
    border-right: 3px solid #27ae60;
    border-left: 3px solid #27ae60;
    background-color: rgba(39, 174, 96, .1)
}

:where(body.site-standard) .circle-share-box .text,
:where(body.site-standard) .page .article-share-box .text,
:where(body.site-standard) .page .side-share-box .text {
    font-size: .9em;
    font-weight: 500
}

@media (min-width:768px) {

    :where(body.site-standard) .circle-share-box .text,
:where(body.site-standard) .page .article-share-box .text {
        max-width: 45% !important
    }
}

@media (max-width:768px) {

    :where(body.site-standard) .circle-share-box .text,
:where(body.site-standard) .page .article-share-box .text {
        margin-bottom: 1em
    }
}

:where(body.site-standard) .circle-share-box .buttons,
:where(body.site-standard) .page .article-share-box .buttons {
    text-align: center !important
}

:where(body.site-standard) .page .article-create-new {
    background-color: #2c3e50 !important;
    color: var(--site-text) !important;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px
}

:where(body.site-standard) .page .article-create-new .icon {
    font-size: 1.6em
}

:where(body.site-standard) .page .article-create-new .main-headline {
    font-size: 1.6em;
    font-weight: 900
}

:where(body.site-standard) .page .article-create-new .sub-headline {
    font-size: .8em;
    font-weight: 400;
    letter-spacing: .4px
}

:where(body.site-standard) .page .article-create-new .button .btn {
    background-color: var(--site-surface) !important;
    color: var(--site-text) !important;
    font-weight: 600
}

:where(body.site-standard) .page .page-suggestions .headline h2 {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--site-text) !important
}

:where(body.site-standard) .page .page-suggestions .suggestion-item {
    font-size: .9em;
    font-weight: 500;
    line-height: 1.2em;
    background-color: transparent;
    border: 1px solid #ddd;
    border-bottom: 3px solid #01b1c4 !important;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-bottom: 1em;
    padding-top: .4em;
    padding-bottom: .5em;
    color: var(--site-text) !important;
    transition: .3s all
}

:where(body.site-standard) .page .page-suggestions .suggestion-item:hover {
    border: 1px solid #01b1c4;
    border-bottom: 3px solid #01b1c4;
    background-color: #01b1c4;
    color: var(--site-text) !important;
    text-decoration: none !important;
    transition: .3s all
}

:where(body.site-standard) .page .page-suggestions .suggestion-item-outer:hover {
    text-decoration: none
}

:where(body.site-standard) .page .page-suggestions .suggestion-item-outer:nth-child(6n+3) .suggestion-item {
    border: 1px solid #01b1c4;
    border-bottom: 3px solid #01b1c4;
    background-color: #01b1c4;
    color: var(--site-text) !important;
    text-decoration: none !important;
    transition: .3s all
}

:where(body.site-standard) .resources-box .resources-list .nav-item {
    padding-top: .8em;
    padding-bottom: .6em;
    border-bottom: 1px solid #ddd
}

:where(body.site-standard) .resources-box .resources-list .nav-link {
    font-weight: 500;
    color: var(--site-text) !important;
    padding: 0 !important;
    display: block
}

:where(body.site-standard) .resources-box .resources-list .nav-link:hover h4 {
    text-decoration: underline
}

:where(body.site-standard) .resources-box .resources-list .nav-link h4 {
    font-size: .98em;
    line-height: .88em
}

:where(body.site-standard) .resources-box .resources-list .nav-link p {
    color: #5c6ac4 !important;
    font-size: .72em;
    font-weight: 500;
    margin: 0 !important
}

:where(body.site-standard) .page .side-create-new {
    background-color: #2c3e50 !important;
    color: var(--site-text) !important;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px
}

:where(body.site-standard) .page .side-create-new .icon {
    font-size: 1.2em
}

:where(body.site-standard) .page .side-create-new .main-headline {
    font-size: 1.2em;
    font-weight: 900
}

:where(body.site-standard) .page .side-create-new .sub-headline {
    font-size: .8em;
    font-weight: 400;
    letter-spacing: .4px
}

:where(body.site-standard) .page .side-create-new .button .btn {
    background-color: var(--site-surface) !important;
    color: var(--site-text) !important;
    font-weight: 600
}

:where(body.site-standard) .dashboard .header .page-title {
    font-size: 1.3em;
    font-weight: 500
}

:where(body.site-standard) .dashboard .pages-list .page-item {
    border-bottom: 5px solid #ddd
}

:where(body.site-standard) .dashboard .pages-list .page-item .page-icon img {
    max-width: 100%;
    height: auto;
    max-height: 40px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .dashboard .pages-list .page-item .status-badge {
    font-size: .5rem !important;
    padding: .18rem .4rem !important;
    border-radius: 4px;
}

:where(body.site-standard) .dashboard .pages-list .page-item .status-badge.active {
    border: 1px solid #2ecc71;
    color: #2ecc71 !important;
}

:where(body.site-standard) .dashboard .pages-list .page-item .status-badge.inactive {
    border: 1px solid #c0392b;
    color: #c0392b !important;
}

:where(body.site-standard) .dashboard .pages-list .page-item .created-at {
    font-size: .6em;
}

:where(body.site-standard) .dashboard .pages-list .page-item .created-at,
:where(body.site-standard) .dashboard .pages-list .page-item .button-options {
    color: var(--site-muted)
}

:where(body.site-standard) .khetma-page .user-khetma-item .button-options {
    color: var(--site-muted);
    line-height: 0;
}

:where(body.site-standard) .dashboard .pages-list .page-item .title {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3em
}

:where(body.site-standard) .dashboard .pages-list .page-item .title a {
    color: var(--site-text) !important
}

:where(body.site-standard) .dashboard .pages-list .page-item .title a:hover {
    text-decoration: underline
}

:where(body.site-standard) .dashboard .pages-list .page-item .promotion-box {
    border-top: 1px solid #dddddd;
}
:where(body.site-standard) .dashboard .pages-list .page-item .promotion-box .icon {
    text-align: center;
    font-size: .8rem;
    color: var(--site-text);
}
:where(body.site-standard) .dashboard .pages-list .page-item .promotion-box .text {
    font-size: .8rem;
    color: var(--site-text);
    line-height: 1rem;
}

:where(body.site-standard) .dashboard .pages-list .page-item .promotion-box .btn {
    font-size: .7rem!important;
}

:where(body.site-standard) .dashboard .pages-list .page-item .footer-box .button-stats,
:where(body.site-standard) .dashboard .pages-list .page-item .footer-box .button-share {
    font-size: .8rem !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

:where(body.site-standard) .btn-oauth.facebook {
    background-color: #3b5998;
    color: var(--site-text);
    border-color: rgba(0, 0, 0, .2);
    display: flex
}

:where(body.site-standard) .btn-oauth.facebook .text {
    font-size: .8em;
    line-height: 1.8em
}

:where(body.site-standard) .btn-oauth.facebook:hover {
    background-color: #4466ae;
    color: var(--site-text);
    border-color: rgba(0, 0, 0, .2)
}

:where(body.site-standard) .access-methods-devider {
    position: relative
}

:where(body.site-standard) .access-methods-devider .or-text {
    position: absolute;
    background-color: var(--site-surface);
    font-size: 12px;
    color: var(--site-text);
    top: -16px;
    right: 50%;
    padding: 7px
}

:where(body.site-standard) #copy-url-modal .modal-header {
    background-color: rgba(1, 177, 196, .9) !important;
    border-bottom: 1px solid #01a0b2 !important;
    color: var(--site-text) !important
}

:where(body.site-standard) #copy-url-modal .modal-body {
    background-color: rgba(1, 177, 196, .8) !important
}

:where(body.site-standard) #copy-url-modal .modal-header {
    line-height: 1em
}

:where(body.site-standard) #copy-url-modal .headline {
    font-size: 1em;
    font-weight: 800
}

:where(body.site-standard) #copy-url-modal .close {
    font-size: .9em;
    color: var(--site-text) !important;
    cursor: pointer
}

:where(body.site-standard) #copy-url-modal .close:hover {
    color: var(--site-text) !important
}

:where(body.site-standard) #copy-url-modal .modal-body {
    padding-right: 3em;
    padding-left: 3em
}

:where(body.site-standard) #copy-url-modal .btn {
    background-color: #018998 !important;
    color: var(--site-text) !important;
    font-size: .8em !important;
    font-weight: 700 !important
}

:where(body.site-standard) #copy-url-modal hr {
    background-color: var(--site-surface) !important;
    max-width: 300px;
    height: 1px;
    margin-top: 1.6em !important;
    margin-bottom: 1.6em !important
}

:where(body.site-standard) #copy-url-modal .or-text {
    position: absolute;
    background-color: rgba(1, 177, 196, .8) !important;
    border: 1px solid rgba(1, 177, 196, .9) !important;
    font-size: .6em;
    line-height: .8em;
    text-align: center;
    color: var(--site-text);
    top: -11px;
    right: 50%;
    padding: 6px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%
}

:where(body.site-standard) #copy-url-modal textarea {
    min-height: 125px;
    font-size: .9em
}

:where(body.site-standard) .header-navbar .navbar-brand img {
    max-width: 90px
}

:where(body.site-standard) .header-navbar .nav-link {
    font-weight: 500;
    color: var(--site-text) !important;
    background-color: transparent;
    border: 0 !important;
    padding: .5em .6em !important
}

:where(body.site-standard) .header-navbar.bg-white .nav-link {
    color: var(--site-text) !important;
}

:where(body.site-standard) .header-navbar .nav-link span {
    font-size: .8em !important
}

:where(body.site-standard) .header-navbar .nav-link i {
    font-size: 1em !important
}

:where(body.site-standard) .header-navbar button {
    cursor: pointer
}

@media (max-width:768px) {
    :where(body.site-standard) .common-footer .container {
        max-width: 100%;
        padding-right: 5px !important;
        padding-left: 5px !important
    }
}

:where(body.site-standard) .common-footer .top-area .footer-item {
    color: var(--site-text) !important;
    font-size: .8em;
    font-weight: 600;
    margin-left: .6em;
    word-spacing: .2px
}

:where(body.site-standard) .common-footer .social-area {
    max-width: 400px
}

:where(body.site-standard) .common-footer .social-headline {
    font-size: .7em;
    font-weight: 800
}

:where(body.site-standard) .common-footer .social-buttons .btn-social {
    width: 25px;
    height: 25px;
    line-height: 26px;
    font-size: 13px;
    display: inline-block;
    text-align: center;
    border-color: rgba(0, 0, 0, .2);
    color: var(--site-text);
    margin-bottom: .3em;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%
}

:where(body.site-standard) .common-footer .social-buttons .btn-share:active,
:where(body.site-standard) .common-footer .social-buttons .btn-share:focus,
:where(body.site-standard) .common-footer .social-buttons .btn-share:hover {
    color: var(--site-text)
}

:where(body.site-standard) .common-footer .social-buttons .btn-facebook {
    background-color: #3b5998
}

:where(body.site-standard) .common-footer .social-buttons .btn-facebook:hover {
    background-color: #4466ae
}

:where(body.site-standard) .common-footer .social-buttons .btn-twitter {
    background-color: #55acee
}

:where(body.site-standard) .common-footer .social-buttons .btn-twitter:hover {
    background-color: #71baf1
}

:where(body.site-standard) .common-footer .social-buttons .btn-instagram {
    background-color: #405de6
}

:where(body.site-standard) .common-footer .social-buttons .btn-instagram:hover {
    background-color: #6178ea
}

:where(body.site-standard) .alerts-container {
    width: 100%;
    float: right;
    position: fixed;
    z-index: 10000;
    bottom: 25px;
    max-height: 150px
}

:where(body.site-standard) .alert-purple {
    border-color: #694d9f;
    background: #694d9f;
    color: var(--site-text)
}

:where(body.site-standard) .alert-info-alt {
    border-color: var(--site-border);
    background: #81c7e1;
    color: var(--site-text)
}

:where(body.site-standard) .alert-danger-alt {
    border-color: #b63e5a;
    background: #e26868;
    color: var(--site-text)
}

:where(body.site-standard) .alert-warning-alt {
    border-color: var(--site-border);
    background: #e9ceac;
    color: var(--site-text)
}

:where(body.site-standard) .alert-success-alt {
    border-color: #19b99a;
    background: #20a286;
    color: var(--site-text)
}

:where(body.site-standard) .alert i {
    margin-left: 10px;
    font-size: 14px
}

:where(body.site-standard) .legal-page h1 {
    font-size: 1.2em;
    font-weight: 800
}

:where(body.site-standard) .legal-page .container {
    max-width: 900px
}

:where(body.site-standard) .legal-page .article-body h2 {
    font-size: 1em;
    font-weight: 800;
    margin-bottom: 1.4em;
    margin-top: 3em
}

:where(body.site-standard) .legal-page .article-body h3 {
    font-size: .9em;
    font-weight: 800;
    margin-bottom: 1em
}

:where(body.site-standard) .legal-page .article-body li,
:where(body.site-standard) .legal-page .article-body p {
    font-size: .9em;
    font-weight: 400;
    line-height: 1.6em;
    margin-bottom: .8em
}

:where(body.site-standard) .shake-button {
    animation: shake-button 1.5s;
    animation-iteration-count: infinite
}

:where(body.site-standard) .shake-button:hover {
    animation: none;
    animation-iteration-count: 0
}

@keyframes shake-button {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }

    20%,
    80% {
        transform: translate3d(1px, 0, 0)
    }

    30%,
    50%,
    70% {
        transform: translate3d(-2px, 0, 0)
    }

    40%,
    60% {
        transform: translate3d(2px, 0, 0)
    }
}

:where(body.site-standard) .sticky-bottom-alert {
    background-color: #2c3e50 !important;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10000;
    padding-top: .1rem;
    padding-bottom: .1rem;
}

:where(body.site-standard) .sticky-bottom-alert-box {
    transition: all linear 0.5s;
    height: 100px;
    padding-top: .6rem;
    padding-bottom: .6rem;
    max-width: 500px; 
}

:where(body.site-standard) .sticky-bottom-alert-box.ng-hide {
    height: 0;
}

:where(body.site-standard) .sticky-bottom-alert-inner {
    position: relative;
}

:where(body.site-standard) .sticky-bottom-alert .btn-collapse {
    position: absolute;
    z-index: 4;
    background-color: #2c3e50 !important;
    color: var(--site-text);
    width: 35px;
    text-align: center;
    padding-top: 5px;
    left: 30px;
    top: -30px;
    cursor: pointer;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    display: none;
}

:where(body.site-standard) .sticky-bottom-alert .btn {
    font-size: 1em
}

:where(body.site-standard) .sticky-bottom-alert .btn span {
    font-size: 1.2em !important;
    font-weight: 800
}

:where(body.site-standard) .sticky-bottom-alert .hint {
    color: var(--site-text) !important;
    font-size: .8em;
    font-weight: 400
}

:where(body.site-standard) .sticky-bottom-alert .hint .highlight {
    color: #ff7979;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: .4px
}

:where(body.site-standard) .page404-text {
    font-size: 180px;
    font-weight: 800;
    line-height: 90px
}

:where(body.site-standard) .page404-info .title {
    font-size: 16px;
    font-weight: 700
}

:where(body.site-standard) .page404-info .sub-title {
    font-size: 14px;
    font-weight: 400
}

@media (max-width:768px) {
    :where(body.site-standard) .page404-text {
        font-size: 60px;
        font-weight: 600;
        line-height: 60px;
        margin-bottom: 20px
    }

    :where(body.site-standard) .page404-info .button,
:where(body.site-standard) .page404-info .sub-title,
:where(body.site-standard) .page404-info .title {
        text-align: center !important
    }
}

:where(body.site-standard) .page404-suggestions .headline h2 {
    font-size: 1.2em;
    font-weight: 700
}

:where(body.site-standard) .page404-suggestions .suggestion-item {
    font-size: .9em;
    font-weight: 500;
    line-height: 1.2em;
    background-color: transparent;
    border: 1px solid #27ae60;
    border-bottom: 3px solid #27ae60;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-bottom: 1em;
    padding-top: .4em;
    padding-bottom: .5em;
    color: #27ae60 !important;
    transition: .3s all
}

:where(body.site-standard) .page404-suggestions .suggestion-item:hover {
    border: 1px solid #27ae60;
    border-bottom: 3px solid #27ae60;
    background-color: #27ae60;
    color: var(--site-text) !important;
    text-decoration: none !important;
    transition: .3s all
}

:where(body.site-standard) .page404-suggestions .suggestion-item-outer:hover {
    text-decoration: none
}

:where(body.site-standard) .page404-suggestions .suggestion-item-outer:nth-child(6n+3) .suggestion-item {
    border: 1px solid #27ae60;
    border-bottom: 3px solid #27ae60;
    background-color: #27ae60;
    color: var(--site-text) !important;
    text-decoration: none !important;
    transition: .3s all
}

:where(body.site-standard) .page .page-title h1 {
    font-size: 1.2em;
    font-weight: 700
}

:where(body.site-standard) .dashboard .custom-dashboard-nav,
:where(body.site-standard) .page .custom-page-nav {
    width: 100%;
    border-bottom: 1px solid #ddd
}

:where(body.site-standard) .dashboard .custom-dashboard-nav .nav-link,
:where(body.site-standard) .page .custom-page-nav .nav-link {
    font-size: .9em;
    font-weight: 400;
    color: var(--site-text);
    cursor: pointer;
}

:where(body.site-standard) .dashboard .custom-dashboard-nav .nav-link.active,
:where(body.site-standard) .page .custom-page-nav .nav-link.active {
    box-shadow: inset 0 -10px 0 -8px #01b1c4;
    -webkit-box-shadow: inset 0 -10px 0 -8px #01b1c4
}

:where(body.site-standard) .dashboard .custom-dashboard-nav .nav-link:hover,
:where(body.site-standard) .page .custom-page-nav .nav-link:hover {
    background-color: rgba(1, 177, 196, .09)
}

:where(body.site-standard) .page .custom-page-nav .nav-link .circle-icon {
    color: #e74c3c;
    font-size: 12px;
    margin-right: 8px;
    margin-top: 3px;
    animation: infrontAnimation 1.5s;
    animation-iteration-count: infinite
}

@keyframes infrontAnimation {

    10%,
    70% {
        opacity: 1
    }

    100%,
    40% {
        opacity: 0
    }
}

:where(body.site-standard) .page .circle-subscribe-box {
    background-color: #01b1c4;
    color: var(--site-text) !important;
    text-align: center !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px
}

:where(body.site-standard) .page .circle-subscribe-box .title {
    font-size: 1em;
    font-weight: 800
}

:where(body.site-standard) .page .circle-subscribe-box hr {
    max-width: 50px;
    height: 2px;
    background-color: var(--site-surface);
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

:where(body.site-standard) .page .circle-subscribe-box .headline {
    font-size: .9em;
    font-weight: 700
}

:where(body.site-standard) .page .circle-subscribe-box .form-box {
    max-width: 350px;
    display: block;
    margin: 0 auto
}

:where(body.site-standard) .page .circle-subscribe-box .form-box input {
    font-size: .9em !important
}

:where(body.site-standard) .page .circle-subscribe-box .form-box .btn {
    background-color: #01b1c4 !important;
    border: 2px solid #fff;
    color: var(--site-text);
    font-size: 1em;
    font-weight: 800
}

:where(body.site-standard) .page .circle-subscribe-box .form-box .btn:hover {
    background-color: var(--site-surface) !important;
    color: #01b1c4
}

:where(body.site-standard) .page .circle-items .circle-title h2 {
    font-size: 1em !important;
    font-weight: 800 !important
}

:where(body.site-standard) .page .circle-items .buttons-box .main-headline {
    font-size: .8em !important;
    font-weight: 800 !important
}

:where(body.site-standard) .page .circle-items .circle-item {
    background-color: var(--site-surface);
    border: 1px solid #ddd;
    position: relative;
    padding-top: 15px;
    padding-bottom: 10px;
    cursor: pointer
}

:where(body.site-standard) .page .circle-item .counter-box-outline {
    position: absolute;
    background-color: var(--site-surface);
    border: 1px solid #ddd;
    top: -5px;
    right: 0;
    width: 100%
}

:where(body.site-standard) .page .circle-item .counter-box-inner {
    float: right;
    position: relative
}

:where(body.site-standard) .page .circle-item .steps-box {
    width: 87%;
    float: right;
    margin-right: 13%
}

:where(body.site-standard) .page .circle-item .steps-box .step-item {
    float: right;
    height: 8px;
    box-shadow: inset -7px 0 0 -5.5px #ddd
}

:where(body.site-standard) .page .circle-item .steps-box .step-item:first-child {
    box-shadow: none !important
}

:where(body.site-standard) .page .circle-item .steps-box .step-item.active {
    background-color: #2ecc71
}

:where(body.site-standard) .page .circle-item .overview-box {
    width: 13%;
    position: absolute;
    right: 0;
    background-color: var(--site-surface);
    border: 1px solid #ddd;
    text-align: center;
    font-size: .7em !important;
    font-weight: 400;
    top: -5px
}

@media (max-width:768px) {
    :where(body.site-standard) .page .circle-item .overview-box {
        width: 22%
    }

    :where(body.site-standard) .page .circle-item .steps-box {
        width: 78%;
        margin-right: 22%
    }
}

:where(body.site-standard) .page .circle-item .overview-box .number .value {
    font-size: 10px !important;
    font-weight: 700
}

:where(body.site-standard) .page .circle-item .text {
    font-size: 1.1em;
    line-height: 1.5em
}

:where(body.site-standard) .page .circle-item .text.quran {
    font-weight: 600 !important;
    line-height: 1.8em !important;
    letter-spacing: .5px !important
}

:where(body.site-standard) #subscribers-modal .modal-header {
    background-color: var(--site-surface) !important;
    border-bottom: 1px solid #ddd !important
}

:where(body.site-standard) #subscribers-modal .modal-header {
    line-height: 1em
}

:where(body.site-standard) #subscribers-modal .headline {
    font-size: .8em;
    font-weight: 800;
    float: right
}

:where(body.site-standard) #subscribers-modal .close {
    font-size: .9em;
    color: var(--site-text) !important;
    cursor: pointer
}

:where(body.site-standard) #subscribers-modal .modal-body {
    height: 300px;
    max-height: 300px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto
}

:where(body.site-standard) #subscribers-modal .modal-footer {
    background-color: var(--site-surface) !important;
    border-top: 1px solid #ddd !important
}

:where(body.site-standard) #subscribers-modal .modal-footer .button-close {
    border: 1px solid #ccc !important;
    font-size: .79em;
    font-weight: 500
}

:where(body.site-standard) #subscribers-modal .subscribe-item .subscribe-name {
    font-size: 14px;
    font-weight: 700
}

:where(body.site-standard) #subscribers-modal .subscribe-item .subscribe-time {
    font-size: 11px;
    font-weight: 300;
    color: var(--site-muted);
    text-align: center
}

:where(body.site-standard) .btn-load {
    border: 1px solid #ccc !important
}

:where(body.site-standard) .mobile-navigation-outer {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    overflow-x: hidden;
    transition: all linear 0.2s
}

:where(body.site-standard) .mobile-navigation {
    height: 100%;
    width: 300px;
    top: 0;
    left: 0;
    background-color: var(--site-surface);
    transition: all linear 0.2s
}

@media (max-width:768px) {
    :where(body.site-standard) .mobile-navigation {
        width: 100%;
    }
}

:where(body.site-standard) .mobile-navigation.ng-hide {
    width: 0;
}

:where(body.site-standard) .mobile-navigation .btn-close {
    font-size: 26px;
    background-color: transparent;
    cursor: pointer
}

:where(body.site-standard) .nav.navigation-mobile-menu,
:where(body.site-standard) .navigation-mobile-menu li,
:where(body.site-standard) .navigation-mobile-menu li a,
:where(body.site-standard) .navigation-mobile-menu li button {
    width: 100%
}

:where(body.site-standard) .nav.navigation-mobile-menu-menu li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

:where(body.site-standard) .nav.navigation-mobile-menu li a,
:where(body.site-standard) .nav.navigation-mobile-menu li button {
    color: var(--site-text) !important;
    font-size: 14px
}

:where(body.site-standard) .nav.navigation-mobile-menu li button {
    text-align: right !important;
    background-color: transparent;
    border: 0 !important;
    cursor: pointer;
    padding: .5em 1em !important
}

:where(body.site-standard) .navigation-social-icon {
    width: 20px;
    height: 20px;
    float: left;
    text-align: center;
    color: var(--site-text) !important;
    font-size: 16px;
    margin-left: 5px;
    margin-bottom: 5px
}

:where(body.site-standard) .eu-cookie-notice {
    position: fixed;
    z-index: 10000;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .8);
    color: var(--site-text) !important;
    text-align: center !important;
    display: none;
}

:where(body.site-standard) .eu-cookie-notice .btn-white {
    background-color: var(--site-surface) !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .create-card {
    max-width: 700px;
}

:where(body.site-standard) .create-card label {
    font-weight: 700;
}

@media (min-width: 768px) {
    :where(body.site-standard) .create-circle label {
        width: 100%;
        text-align: left;
    }
}

:where(body.site-standard) #card-contents-modal .close {
    font-size: .9em;
    color: var(--site-text) !important;
    cursor: pointer;
}

:where(body.site-standard) .create-card .selected-card-content {
    cursor: pointer;
}

:where(body.site-standard) .contents-list {
    max-height: 380px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

:where(body.site-standard) .contents-list .content-item {
    border: 1px solid #dddddd;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: .8em;
    font-weight: 500;
    cursor: pointer;
}

:where(body.site-standard) .contents-list .content-item.selected {
    border: 1px solid #007bff;
    background-color: var(--site-surface);
}

:where(body.site-standard) #card-contents-modal .modal-footer .btn-light {
    border: 1px solid #cccccc;
    font-size: .9em;
}

:where(body.site-standard) #card-messages-modal .button-close {
    border: 1px solid #CCCCCC;
}

:where(body.site-standard) .card-messages-list {
    height: 350px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}

:where(body.site-standard) .card-messages-list .message-item {
    background-color: #01b1c4 !important;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    color: var(--site-text) !important;
}

:where(body.site-standard) .card-messages-list .message-item .text {
    border-bottom: 1px solid #FFFFFF;
    font-size: .9em;
    font-weight: 500;
    line-height: 1.3em;
}

:where(body.site-standard) .card-messages-list .message-item .name,
:where(body.site-standard) .card-messages-list .message-item .time {
    font-size: .6em;
}

:where(body.site-standard) .card-page .share-box-area {
    max-width: 600px;
}

:where(body.site-standard) .card-page .share-box-area .text {
    font-size: 1.3em;
    font-weight: 800;
}

:where(body.site-standard) .card-page .card-box-outer {
    max-width: 600px;
    background-color: var(--site-surface) !important;
    padding-bottom: 30px;
    border-bottom: 4px solid #2ecc71;
}

:where(body.site-standard) .card-page header span {
    font-weight: 900;
    font-size: 1.8em;
}

:where(body.site-standard) .card-page header img {
    width: 100%;
    height: 100px;
}

:where(body.site-standard) .card-page .card-owner {
    font-size: .8em;
    font-weight: 500;
}

:where(body.site-standard) .card-page .card-text {
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.6em;
}

:where(body.site-standard) .card-page .user-pages {
    max-width: 600px;
}

:where(body.site-standard) .card-page .user-pages .headline {
    font-size: .8em;
    font-weight: 400 !important;
}

:where(body.site-standard) .card-page .user-pages .empty-headline {
    font-size: .9em;
    font-weight: 800;
}

:where(body.site-standard) .card-page .message-box .headline {
    font-size: .8em;
}

:where(body.site-standard) .card-page .message-box textarea {
    height: 90px;
    resize: none;
}

:where(body.site-standard) .card-page .article-create-new {
    max-width: 600px;
}

:where(body.site-standard) .success-card-page .success-card-box-outer {
    max-width: 600px;
    background-color: var(--site-surface) !important;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 4px solid #2ecc71;
}

:where(body.site-standard) .success-card-page .success-card-box-outer .icon {
    font-size: 35px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    color: #2ecc71;
    border: .1em solid rgba(165, 220, 134, .3);
    padding: 8px 8px 2px
}

:where(body.site-standard) .success-card-page .success-card-box-outer .message {
    font-size: 1.1em;
    font-weight: 500;
}

:where(body.site-standard) .success-card-page .success-card-box-outer .message b {
    color: #2ecc71;
    font-size: 1.3em !important;
    font-weight: 800 !important;
}

:where(body.site-standard) .success-card-page .user-pages {
    max-width: 600px;
}

:where(body.site-standard) .success-card-page .user-pages .headline {
    font-size: .8em;
    font-weight: 400 !important;
}

:where(body.site-standard) .success-card-page .user-pages .empty-headline {
    font-size: .9em;
    font-weight: 800;
}

:where(body.site-standard) .success-card-page .article-create-new {
    max-width: 600px;
}

:where(body.site-standard) .create-list {
    max-width: 450px;
}

:where(body.site-standard) .create-list .header-page-title {
    font-size: 1.2em;
    font-weight: 800;
}

:where(body.site-standard) .create-list .create-item {
    background-color: var(--site-surface) !important;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

:where(body.site-standard) .create-list .create-item .title {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--site-text);
}

:where(body.site-standard) .circle-overview-page .circle-overview-outer {
    max-width: 600px;
}

:where(body.site-standard) .circle-overview-page .logo-box img {
    max-width: 90px;
}

:where(body.site-standard) .circle-overview-page h2 {
    font-size: 1em;
    font-weight: 800;
}

:where(body.site-standard) .circle-overview-page p,
:where(body.site-standard) .circle-overview-page li {
    font-size: .85em;
    font-weight: 500;
}

:where(body.site-standard) .common-navigation-outer {
    height: 40px;
    position: relative;
}

:where(body.site-standard) .common-navigation {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
}

:where(body.site-standard) .common-navigation-inner {
    max-width: 1100px;
}

:where(body.site-standard) .common-navigation .brand-logo-box {
    padding-top: .7rem;
}

:where(body.site-standard) .common-top-navigation .brand-logo-box {
    padding-top: 0 !important;
}

:where(body.site-standard) .common-navigation .brand-logo,
:where(body.site-standard) .common-top-navigation .brand-logo {
    max-width: 90px;
    height: auto;
}

:where(body.site-standard) .common-top-navigation .brand-logo {
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .common-navigation .button-action {
    border-radius: 100%;
}

:where(body.site-standard) .common-top-navigation .button-action {
    background-color: var(--site-surface) !important;
    border-radius: .2rem !important;
}

:where(body.site-standard) .common-navigation .options-list .option-item {
    display: inline-block;
    color: var(--site-text) !important;
    font-size: .9rem !important;
    font-weight: 700;
    margin-top: .2rem;
    padding: .5rem .7rem .3rem .7rem!important;
}

:where(body.site-standard) .common-navigation .options-list .option-item:hover {
    text-decoration: none;
}

@media (max-width:768px) {

    :where(body.site-standard) .common-navigation-inner {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

}

:where(body.site-standard) .common-navigation .nav-link.active {
    box-shadow: inset 0 -10px 0 -8px #01b1c4;
    -webkit-box-shadow: inset 0 -10px 0 -8px #01b1c4;
}

:where(body.site-standard) .common-navigation .nav-link .normal-icon {
    display: block;
}

:where(body.site-standard) .common-navigation .nav-link .active-icon {
    display: none;
}

:where(body.site-standard) .common-navigation .nav-link.active .normal-icon {
    display: none;
}

:where(body.site-standard) .common-navigation .nav-link.active .active-icon {
    display: block;
}

:where(body.site-standard) .button-create {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 40px;
    position: fixed;
    z-index: 3;
    display: block;
    bottom: 30px;
    left: 20px;
    border-radius: 100%;
    padding: 7px 12px !important;
    font-size: 1.3em !important;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    color: var(--site-text) !important;
}

@media (min-width:768px) {
    :where(body.site-standard) .button-create {
        display: none;
    }
}

:where(body.site-standard) .article-user-comment {
    border-right: 3px solid #e74c3c !important;
}

:where(body.site-standard) .article-user-comment .header {
    border-top-right-radius: .25em;
    border-top-left-radius: .25em;
}

:where(body.site-standard) .article-user-comment .header .main-headline {
    font-size: 13px;
    font-weight: bolder;
    color: #e74c3c !important;
}

:where(body.site-standard) .article-user-comment .body input {
    background-color: var(--site-surface) !important;
    font-size: 13px;
    border-radius: 20px;
    height: 60px;
}

:where(body.site-standard) .article-user-comment .body button {
    opacity: .55;
}

:where(body.site-standard) .article-user-comment .body input:hover,
:where(body.site-standard) .article-user-comment .body input:active,
:where(body.site-standard) .article-user-comment .body input:focus,
:where(body.site-standard) .article-user-comment .body button:hover,
:where(body.site-standard) .article-user-comment .body button:active,
:where(body.site-standard) .article-user-comment .body button:focus,
:where(body.site-standard) #article-user-comment-modal .modal-body .form-control:hover,
:where(body.site-standard) #article-user-comment-modal .modal-body .form-control:active,
:where(body.site-standard) #article-user-comment-modal .modal-body .form-control:focus {
    outline: 0px !important;
    -webkit-appearance: none;
    box-shadow: none !important;
}

:where(body.site-standard) #article-user-comment-modal .modal-header {
    font-size: 13px;
    font-weight: bolder;
}

:where(body.site-standard) #article-user-comment-modal .modal-body .form-control {
    font-size: 13px !important;
}

:where(body.site-standard) #article-user-comment-modal .modal-body textarea {
    height: 80px;
    resize: none;
}

:where(body.site-standard) #page-comment-success-modal .icon img {
    width: 30px;
    height: 30px;
}

:where(body.site-standard) #page-comment-success-modal .headline {
    color: #2ecc71;
    font-size: 12px;
    font-weight: 900;
}

:where(body.site-standard) #page-comment-success-modal .message {
    font-size: 14px;
    line-height: 24px;
}


/** ****** Dashboard Style ***** */

:where(body.site-standard) .dash-welcome-box .icon {
    color: #2ecc71 !important;
    font-size: 18px !important;
}

:where(body.site-standard) .dash-welcome-box .text {
    font-size: .7rem;
    line-height: 1.2rem;
}

:where(body.site-standard) .dash-welcome-box .text b {
    font-size: .8rem !important;
}

:where(body.site-standard) .post-box .header .icon .icon-box {
    width: 40px;
    max-height: 40px;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .post-box .header .icon .icon-box img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .post-box .header .details .title {
    font-size: .85rem;
    font-weight: 600;
}

:where(body.site-standard) .post-box .header .details .hint {
    font-size: .6rem;
    font-weight: 300;
    color: var(--site-muted);
}

:where(body.site-standard) .post-box .body .text {
    font-size: .8rem;
    line-height: 1.5rem;
    font-weight: 300;
    letter-spacing: .6px;
}

:where(body.site-standard) .post-box .body .text.center-style {
    text-align: justify !important;
    text-align-last: center;
    -moz-text-align-last: center;
    -ms-text-align-last: center;
}

:where(body.site-standard) .post-box.allah-name .body {
    text-align: center !important;
}

:where(body.site-standard) .post-box.allah-name .body .name {
    font-size: 3rem !important;
    font-weight: 900 !important;
}

:where(body.site-standard) .post-box.allah-name .body .text {
    font-size: .9rem !important;
    font-weight: 500 !important;
}

:where(body.site-standard) .post-box .body .image img {
    width: 100%;
    max-height: 280px;
    border-radius: 5px;
    border: 1px solid #dddddd;
}

:where(body.site-standard) .post-box .body .cta-box {
    background-color: var(--site-surface);
    border-radius: 10px;
}

:where(body.site-standard) .post-box .body .cta-box .cta-icon .cta-icon-box {
    max-width: 30px;
    max-height: 30px;
    padding: 5px;
    border-radius: 100%;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .post-box .body .cta-box .cta-icon .cta-icon-box img {
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .post-box .body .cta-box .title {
    font-size: .9em;
    font-weight: 600;
}

:where(body.site-standard) .post-box .body .cta-box .description {
    font-size: .9em;
}

:where(body.site-standard) .dash-alert-box {
    text-align: center !important;
}

:where(body.site-standard) .dash-alert-box .main-headline {
    font-size: 19px;
    font-weight: bolder;
}

:where(body.site-standard) .dash-alert-box .sub-headline {
    font-size: 14px;
    color: var(--site-muted) !important;
}

:where(body.site-standard) .dash-alert-box .button-box .btn {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

:where(body.site-standard) .dash-card-box .dash-card-header .icon .icon-box {
    width: 35px;
    max-height: 35px;
    display: block;
    margin: 0 auto;
    padding: 5px;
    border-radius: 4px;
}

:where(body.site-standard) .dash-card-box .dash-card-header .icon .icon-box img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .dash-card-box .dash-card-header .details .title {
    font-size: .85rem;
    font-weight: 600;
}

:where(body.site-standard) .dash-card-box .dash-card-header .details .hint {
    font-size: .7rem;
    font-weight: 300;
    color: var(--site-muted);
}

:where(body.site-standard) .dash-card-box .dash-card-item .title {
    font-size: .8rem;
}

:where(body.site-standard) .dash-card-box .dash-card-item.add-item .title {
    color: var(--site-text) !important;
}

:where(body.site-standard) .dash-card-box .dash-card-item .title span {
    font-size: .7rem;
    font-weight: 300;
    color: var(--site-muted) !important;
}

:where(body.site-standard) .dash-card-box .dash-card-item.add-item .title span {
    color: var(--site-text) !important;
}

:where(body.site-standard) .dash-card-box .dash-card-item-outer:last-child .dash-card-item {
    border-bottom: 0 !important;
}


/** ******End Dashboard Style ***** */

:where(body.site-standard) .circles-list .circle-item {
    border-bottom: 5px solid #dddddd !important
}

:where(body.site-standard) .circles-list .circle-item .circle-icon img {
    max-width: 100%;
    height: auto;
    max-height: 40px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .circles-list .circle-item .status-badge {
    font-size: .5rem !important;
    padding: .18rem .4rem !important;
    border-radius: 4px;
}

:where(body.site-standard) .circles-list .circle-item .status-badge.active {
    border: 1px solid #2ecc71;
    color: #2ecc71 !important;
}

:where(body.site-standard) .circles-list .circle-item .status-badge.warning {
    border: 1px solid #f39c12;
    color: #f39c12 !important;
}

:where(body.site-standard) .circles-list .circle-item .status-badge.inactive {
    border: 1px solid #c0392b;
    color: #c0392b !important;
}

:where(body.site-standard) .circles-list .circle-item .title {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3em
}

:where(body.site-standard) .circles-list .circle-item .title a {
    color: var(--site-text) !important
}

:where(body.site-standard) .circles-list .circle-item .details {
    font-size: .6rem;
}

:where(body.site-standard) .circles-list .circle-item .details,
:where(body.site-standard) .circles-list .circle-item .button-options {
    color: var(--site-muted)
}

:where(body.site-standard) .circles-list .circle-item .footer-box .button-subscriber,
:where(body.site-standard) .circles-list .circle-item .footer-box .button-share,
:where(body.site-standard) .khetma-page .user-khetma-item .footer-box .button-subscriber,
:where(body.site-standard) .khetma-page .user-khetma-item .footer-box .button-share {
    font-size: .8rem !important;
    border-radius: 0 !important;
    text-align: right !important;
    margin: 0 !important;
}


/** **** Circle style **************** */


/** **** interactList **************** */

:where(body.site-standard) .interactList .interact-item .icon-box {
    width: 40px;
    height: 40px;
    float: right;
    display: block;
    line-height: 40px;
    border-radius: 5px;
    color: #018998 !important;
    font-size: 1.2rem !important;
}

:where(body.site-standard) .interactList .interact-item .comment-box {
    background-color: var(--site-surface);
    border-radius: 10px;
}

:where(body.site-standard) .interactList .interact-item .details {
    font-size: .68rem !important;
    font-weight: 900;
    color: rgb(91, 112, 131) !important;
}

:where(body.site-standard) .interactList .interact-item .text {
    font-size: .8rem;
    line-height: 1.5rem;
    font-weight: 300;
    letter-spacing: .6px;
}

:where(body.site-standard) .interactList .interact-item .text b {
    font-weight: 700;
}

:where(body.site-standard) .interactList .interact-item .time {
    font-size: .7rem;
    font-weight: 300;
    color: var(--site-muted);
}

:where(body.site-standard) .interactList .interact-stats {
    border-radius: 6px;
}

:where(body.site-standard) .interactList .interact-stats .interact-count {
    font-size: 1.8rem;
    font-weight: 700;
}

:where(body.site-standard) .interactList .interact-stats .hint {
    font-size: .7rem;
    font-weight: 600;
}


/** ******* interactList ****** */


/** ****** Create pages ******* */

:where(body.site-standard) .create-page {
    max-width: 600px;
    padding-bottom: 5rem;
}

:where(body.site-standard) .create-button-box {
    position: fixed;
    z-index: 10000;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--site-surface);
    border-top: 1px solid #dddddd;
}

:where(body.site-standard) .create-page .page-title {
    font-size: .8rem !important;
    font-weight: 700 !important;
}

:where(body.site-standard) .create-page .header-page-title {
    font-size: .9rem;
    font-weight: 600;
}

:where(body.site-standard) .create-page label {
    font-weight: 700;
    font-size: .8rem;
}

:where(body.site-standard) .create-page .header-box {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

:where(body.site-standard) .create-page .footer-box {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

:where(body.site-standard) .create-page .box-headline {
    font-size: .9em;
    font-weight: 700;
}

:where(body.site-standard) .create-page .box-sub-headline {
    font-size: .8em;
    font-weight: 600;
}

:where(body.site-standard) .create-page .btn-light {
    font-size: .83rem !important;
    font-weight: 700;
}

:where(body.site-standard) .create-page .btn-option-item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body.site-standard) .create-page .btn-option-item .selected-item-icon,
:where(body.site-standard) .create-page .btn-option-item .dropdown-icon {
    width: 5%;
}

:where(body.site-standard) .create-page .btn-option-item .name {
    max-width: 85%;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: inherit
}

:where(body.site-standard) .create-page .btn-option-item.selected {
    border: 1px solid #27ae60 !important;
    background-color: #27ae60 !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .create-page .btn-option-item .selected-icon {
    width: 5%;
    display: none;
}

:where(body.site-standard) .create-page .btn-option-item.selected .selected-icon {
    display: inline-block;
}

:where(body.site-standard) .create-page .period-days-box input {
    background-color: var(--site-surface) !important;
}

:where(body.site-standard) .create-page .period-days-box .btn {
    padding: .2rem .75rem !important;
    border: 1px solid #ccc;
}

:where(body.site-standard) .create-page .create-help {
    border: 2px solid #DDDDDD;
}

:where(body.site-standard) .create-page .create-help .icon-outer {
    background-color: #2D9BBE !important;
    color: var(--site-text);
    text-align: center;
    border-radius: 5px;
    font-size: 1.8rem;
    padding: 8px 0;
}

@media (max-width:768px) {
    :where(body.site-standard) .create-page .create-help .icon-outer {
        font-size: 1.4rem;
    }
}

:where(body.site-standard) .create-page .create-help .title {
    font-size: .9rem;
    font-weight: 700;
}

:where(body.site-standard) .create-page .create-help .text {
    font-size: .8rem;
    font-weight: 500;
}

:where(body.site-standard) .select-items-modal .modal-content {
    border-radius: .6rem !important;
}

:where(body.site-standard) .select-items-modal .headline {
    font-size: .9rem !important;
    font-weight: 800;
    top: -4px;
}

:where(body.site-standard) .select-items-modal .btn-close {
    border-radius: 100%;
    position: absolute;
    left: 20px;
    top: 10px;
    padding: .275rem .55rem !important;
    font-size: .7rem !important;
}

:where(body.site-standard) .select-items-modal .items-list {
    height: 50vh !important;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

:where(body.site-standard) .select-items-modal .items-list .item-box {
    cursor: pointer;
}

:where(body.site-standard) .select-items-modal .items-list .item-box.active {
    background-color: var(--site-surface);
    border-radius: 4px !important;
}

:where(body.site-standard) .select-items-modal .items-list .item-box .icon {
    text-align: center;
}

:where(body.site-standard) .select-items-modal .items-list .item-box .icon span {
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    display: block;
    font-size: .8rem !important;
    border-radius: 100%;
}

:where(body.site-standard) .select-items-modal .items-list .item-box .details .title {
    font-size: .9rem !important;
    font-weight: 800;
}

:where(body.site-standard) .select-items-modal .items-list .item-box .details .hint {
    color: var(--site-muted);
    font-size: .7rem !important;
    font-weight: 300;
}

:where(body.site-standard) .select-items-modal .items-list .item-box .select-icon {
    font-size: 1.4rem !important;
    text-align: left !important;
}

:where(body.site-standard) .select-items-modal .items-list .item-box .select-icon .selected,
:where(body.site-standard) .select-items-modal .items-list .item-box.item-box.active .select-icon .unselected {
    display: none;
}

:where(body.site-standard) .select-items-modal .items-list .item-box.active .select-icon .selected,
:where(body.site-standard) .select-items-modal .items-list .item-box .select-icon .unselected {
    display: block;
}

:where(body.site-standard) .select-items-modal .items-list .item-box .select-icon .unselected {
    color: var(--site-muted) !important;
}


/** ****** Create pages ******* */

:where(body.site-standard) .slide-page {
    transition: all linear 0.4s;
    background-color: var(--site-surface);
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 10000;
    bottom: 0;
    right: 0;
}

:where(body.site-standard) .slide-page .slide-page-header {
    height: 4vh;
}

:where(body.site-standard) .slide-page .slide-page-body {
    height: 90vh;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

:where(body.site-standard) .slide-page.ng-hide {
    width: 0;
    right: -100%;
}

:where(body.site-standard) .slide-page .page-title {
    font-size: .8rem !important;
    font-weight: 700 !important;
}

:where(body.site-standard) .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

:where(body.site-standard) .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--site-surface);
    border-radius: 40px;
    margin-top: 5px;
    margin-bottom: 5px
}

:where(body.site-standard) .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--site-surface);
    border-radius: 40px
}

:where(body.site-standard) .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
}


/** ****** Circles Story *** *** */

:where(body.site-standard) .circles-story-box .header {
    font-size: 1rem;
    font-weight: 700;
}

:where(body.site-standard) .circles-story-box .sub-header {
    font-size: .7rem;
    color: var(--site-muted);
}

:where(body.site-standard) .circles-story-box .body-outer {
    height: 260px;
    position: relative;
}

:where(body.site-standard) .circles-story-box .body {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    height: 260px;
    white-space: nowrap;
}

:where(body.site-standard) .circles-story-box .body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    -webkit-appearance: none;
    scrollbar-width: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    display: none;
}

:where(body.site-standard) .circles-story-box .body::-webkit-scrollbar-thumb {
    background: transparent !important;
}

:where(body.site-standard) .circles-story-box .carousel-control-prev,
:where(body.site-standard) .circles-story-box .carousel-control-next {
    width: 5%;
    background-color: rgba(255, 255, 255, .8);
    color: var(--site-text) !important;
    text-align: center;
    border: 0 !important;
    opacity: 1 !important;
}

:where(body.site-standard) .circles-story-box .carousel-control-prev {
    display: none;
}

:where(body.site-standard) .circles-story-box .body .circle-story-outer {
    display: inline-block;
    flex: 0 0 42%;
    max-width: 42%;
    width: 100%;
    padding-left: 5px;
}

@media (min-width:768px) {
    :where(body.site-standard) .circles-story-box .body .circle-story-outer {
        flex: 0 0 27%;
        max-width: 27%;
    }
}

:where(body.site-standard) .circles-story-box .body .circle-story-item {
    display: inline-block;
    width: 100%;
    position: relative;
}

:where(body.site-standard) .circles-story-box .body .circle-story-item .story-description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: right;
    font-size: .6rem;
    font-weight: 600;
    color: var(--site-text);
}

:where(body.site-standard) .circles-story-box .body .circle-story-item img {
    width: 100%;
    height: 250px;
    border-radius: 15px;
}


/** ****** Circles Story *** *** */


/** ****** khetmat Story *** *** */

:where(body.site-standard) .custom-khetma-nav {
    width: 100%;
}

:where(body.site-standard) .custom-khetma-nav .nav-link {
    font-size: .8em;
    font-weight: 600;
    color: var(--site-text);
    cursor: pointer;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    margin-left: .5rem;
    padding: .35rem .8rem !important;
    background-color: var(--site-surface) !important;
    border: 1px solid #e4e6eb !important;
}

:where(body.site-standard) .custom-khetma-nav .nav-link.active {
    background-color: #01b1c4 !important;
    border: 1px solid #01b1c4 !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .custom-khetma-nav .nav-link:hover {
    background-color: rgba(1, 177, 196, .09)
}

:where(body.site-standard) .khetmat-story-box .header {
    font-size: .9rem;
    font-weight: 700;
}

:where(body.site-standard) .khetmat-story-box .sub-header {
    font-size: .7rem;
    color: var(--site-muted);
}

:where(body.site-standard) .khetmat-story-box .body-outer {
    height: 230px;
    position: relative;
}

:where(body.site-standard) .khetmat-story-box .body {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    height: 230px;
    white-space: nowrap;
}

:where(body.site-standard) .khetmat-story-box .body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

:where(body.site-standard) .khetmat-story-box .body::-webkit-scrollbar-thumb {
    background: transparent;
}

:where(body.site-standard) .khetmat-story-box .carousel-control-prev,
:where(body.site-standard) .khetmat-story-box .carousel-control-next {
    width: 5%;
    background-color: rgba(255, 255, 255, .8);
    color: var(--site-text) !important;
    text-align: center;
    border: 0 !important;
    opacity: 1 !important;
}

:where(body.site-standard) .khetmat-story-box .carousel-control-prev {
    display: none;
}

:where(body.site-standard) .khetmat-story-box .body .khetma-story-outer {
    display: inline-block;
    flex: 0 0 72%;
    max-width: 72%;
    width: 100%;
    padding-left: 5px;
}

@media (min-width:768px) {
    :where(body.site-standard) .khetmat-story-box .body .khetma-story-outer {
        flex: 0 0 42%;
        max-width: 42%;
    }
}

:where(body.site-standard) .khetmat-story-box .body .khetma-story-item {
    display: inline-block;
    width: 100%;
    position: relative;
}

:where(body.site-standard) .khetmat-story-box .body .khetma-story-item .khetma-title {
    font-size: .8rem;
    font-weight: 700;
    white-space: initial;
    height: 46px;
}

:where(body.site-standard) .khetmat-story-box .body .khetma-story-item .khetma-hint {
    font-size: .7rem;
    color: var(--site-muted);
}

:where(body.site-standard) .khetmat-story-box .body .khetma-story-item img {
    width: 100%;
    height: 100px;
    border-radius: 5px;
}


/** ****** Circles Story *** *** */

:where(body.site-standard) .user-khetmat-box .header {
    font-size: .8rem;
    font-weight: 600;
}

:where(body.site-standard) .user-khetmat-box .body .user-khetma-item:last-child {
    border-bottom: 0 !important;
}

:where(body.site-standard) .user-khetmat-box .body .user-khetma-item .image img {
    width: 100%;
    height: auto;
    max-height: 80px;
    border-radius: 5px;
}

:where(body.site-standard) .user-khetmat-box .body .user-khetma-item .details .date {
    font-size: .7rem;
    color: var(--site-muted) !important;
}

:where(body.site-standard) .user-khetmat-box .body .user-khetma-item .details .title {
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
}

:where(body.site-standard) .user-khetmat-box .body .user-khetma-item .details .hint {
    font-size: .75rem;
    color: var(--site-muted) !important;
}


/** ** share page ****** */

:where(body.site-standard) .share-page .share-box-outer {
    max-width: 600px;
}

:where(body.site-standard) .share-page header {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
}

:where(body.site-standard) .share-page header .message {
    font-size: .9rem;
    font-weight: 700;
    color: var(--site-text) !important;
}

:where(body.site-standard) .share-page header .message i {
    color: #018998 !important;
}

:where(body.site-standard) .share-page .share-box-body {
    background-color: var(--site-surface) !important;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    margin-top: -25px;
}

:where(body.site-standard) .share-page .share-box-body .main-headline {
    font-size: 1.1rem;
    font-weight: 700;
}

:where(body.site-standard) .share-page .share-box-body .button-box.mobile-share .btn {
    padding-top: .9rem;
    padding-bottom: .9rem;
}

:where(body.site-standard) .share-page .share-box-body .share-icons .share-icon {
    font-size: .8rem;
    color: var(--site-muted);
    margin-left: 10px;
}

:where(body.site-standard) .share-page .share-box-footer {
    border-top: 2px solid #cccccc;
}

:where(body.site-standard) .share-page .share-box-footer .main-headline {
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.4rem;
}

:where(body.site-standard) .share-page .share-box-footer .help-list .help-item {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

:where(body.site-standard) .share-page .share-box-footer .help-list .help-item .title {
    font-size: .9rem;
    font-weight: 700;
}

:where(body.site-standard) .share-page .share-box-footer .help-list .help-item .description {
    font-size: .8rem;
    color: var(--site-muted);
}

:where(body.site-standard) .share-page .share-box-footer .help-list .help-item .btn {
    padding: .15rem .3rem !important;
    font-size: .805rem !important;
}


/** ** share page ****** */

:where(body.site-standard) .custom-user-history-nav {
    width: 100%;
    border-bottom: 1px solid #ddd
}

:where(body.site-standard) .custom-user-history-nav .nav-link {
    font-size: .8em;
    font-weight: 800;
    color: var(--site-muted);
    cursor: pointer;
}

:where(body.site-standard) .custom-user-history-nav .nav-link.active {
    box-shadow: inset 0 -10px 0 -8px #01b1c4;
    -webkit-box-shadow: inset 0 -10px 0 -8px #01b1c4;
    color: #01b1c4 !important;
}

:where(body.site-standard) .custom-user-history-nav .nav-link:hover {
    background-color: rgba(1, 177, 196, .09)
}


/** Slide-up menu box ***/

:where(body.site-standard) .slideUp-options-box {
    transition: all linear 0.2s;
    background-color: var(--site-surface);
    width: 100%;
    height: 200px;
    position: fixed;
    z-index: 10000;
    bottom: 0;
    left: 0;
    right: 0;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}

:where(body.site-standard) .slideUp-options-box.ng-hide {
    height: 0;
}

:where(body.site-standard) #create-modal .modal-content {
    border-radius: 10px;
}

:where(body.site-standard) .slideUp-options-box .title,
:where(body.site-standard) #create-modal .title {
    font-size: .9em;
    font-weight: 800;
}

:where(body.site-standard) .slideUp-options-box .option-item,
:where(body.site-standard) #create-modal .option-item {
    width: 100%;
    float: right;
    font-size: .9rem !important;
    font-weight: 400;
    color: var(--site-text) !important;
}

:where(body.site-standard) .slideUp-options-box .option-item i,
:where(body.site-standard) #create-modal .option-item i {
    font-size: 1.1rem !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .slideUp-options-box .option-item:hover,
:where(body.site-standard) .slideUp-options-box .option-item:focus,
:where(body.site-standard) .slideUp-options-box .option-item:active {
    text-decoration: none !important;
}

:where(body.site-standard) .overlay-box {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.4);
}


/** Slide-up menu box ***/

:where(body.site-standard) .modal {
    z-index: 10000 !important;
}

:where(body.site-standard) .delete-item-modal .main-headline {
    font-size: .9rem;
    font-weight: 700 !important;
}

:where(body.site-standard) .delete-item-modal .message {
    font-size: .9rem !important;
    line-height: 1.3rem;
    margin-top: .6rem;
    margin-bottom: .8rem;
    letter-spacing: .4px;
}

:where(body.site-standard) .alert-box {
    width: 100%;
    position: fixed;
    z-index: 10000;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #333E48;
    padding: .5rem 1rem;
    font-size: .9rem;
    color: var(--site-text);
    transition: all linear 1s;
}

:where(body.site-standard) .alert-box.ng-hide {
    bottom: 0;
}


/********** Circle Page ************/

:where(body.site-standard) .circle-page {
    min-height: 100vh;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

:where(body.site-standard) .circle-page .circle-header,
:where(body.site-standard) .khetma-page .khetma-header {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

:where(body.site-standard) .circle-page .circle-header .icon img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .circle-page .circle-header .title h1 {
    font-size: .9em !important;
    font-weight: bolder;
    line-height: 1.4rem;
}

:where(body.site-standard) .circle-page .circle-header .page-name {
    line-height: .9rem;
}

:where(body.site-standard) .circle-page .circle-header .page-name span {
    font-size: .7rem !important;
    font-weight: normal !important;
}

:where(body.site-standard) .circle-page .circle-header .page-name a {
    font-size: .7rem !important;
    font-weight: bold;
}

:where(body.site-standard) .circle-page .circle-header .details .detaile-item {
    font-size: .7rem !important;
}

:where(body.site-standard) .circle-page .circle-header .details .detaile-item.top {
    font-size: .5rem !important;
}

:where(body.site-standard) .circle-page .circle-header .details .detaile-item .icon {
    color: var(--site-muted) !important;
}

:where(body.site-standard) .circle-page .circle-header .details .detaile-item .text {
    color: var(--site-muted) !important;
}

:where(body.site-standard) .circle-page .circle-timeout icon {
    max-height: 80px;
}

:where(body.site-standard) .circle-page .circle-timeout .text {
    color: var(--site-muted);
    font-size: .7rem;
    font-weight: 700;
}

:where(body.site-standard) .circle-page .circle-subscribe-box {
    color: var(--site-text) !important;
    text-align: center !important;
}

:where(body.site-standard) .circle-page .circle-subscribe-box .headline {
    font-size: .9em;
    font-weight: 700;
}

:where(body.site-standard) .circle-page .circle-subscribe-box .form-box {
    max-width: 350px;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .circle-page .circle-subscribe-box .form-box input {
    font-size: .9em !important;
}

:where(body.site-standard) .circle-page .circle-subscribe-box .form-box .btn {
    background-color: #01B1C4 !important;
    border: 2px solid #FFFFFF;
    color: var(--site-text);
    font-size: 1em;
    font-weight: 800;
}

:where(body.site-standard) .circle-page .circle-subscribe-box .form-box .btn:hover {
    background-color: var(--site-surface) !important;
    color: #01B1C4;
}

:where(body.site-standard) .circle-page .header-alert {
    border-radius: .3rem;
}

:where(body.site-standard) .circle-page .header-alert .icon img {
    max-width: 100%;
}

:where(body.site-standard) .circle-page .header-alert .text {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .circle-page .circle-items .circle-item-outer {
    border-bottom: 1px solid #dddddd !important;
    margin-bottom: .5rem !important;
    padding-bottom: .5rem !important;
}

:where(body.site-standard) .circle-page .circle-items .circle-item {
    background-color: var(--site-surface);
    border: 1px solid #999999;
    position: relative;
    padding-top: .7rem !important;
    padding-bottom: 0 !important;
    cursor: pointer;
    opacity: .55;
    transition: .4s all;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    margin-bottom: .6rem;
}

:where(body.site-standard) .circle-page .circle-items .circle-item.active {
    padding-top: .7rem !important;
    padding-bottom: 0 !important;
    opacity: unset;
    border: 2px solid #018391 !important;
}

:where(body.site-standard) .circle-page .circle-item .text {
    font-size: .9rem;
    font-weight: bold;
    line-height: 1.7rem;
    text-align: center !important;
}

:where(body.site-standard) .circle-page .circle-item .circle-item-footer {
    margin-top: 3rem !important;
    border-top: 1px solid #dddddd;
}

:where(body.site-standard) .circle-page .circle-item.active .circle-item-footer {
    border-top: 1px solid #018391;
}

:where(body.site-standard) .circle-page .circle-item .circle-item-footer .counter-text,
:where(body.site-standard) .circle-page .circle-item .circle-item-footer .items-total {
    font-size: .7rem;
    font-weight: bold;
}

:where(body.site-standard) .circle-page .circle-item .circleListCounterContainer-outer {
    position: relative;
    width: 50px;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .circle-page .circle-item .circleListCounterContainer {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -35px;
    display: block;
    margin: 0 auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

:where(body.site-standard) .circle-page .circle-item .circleListCounterBackground {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    background-color: var(--site-surface);
}

:where(body.site-standard) .circle-page .circle-item .circleListCounterPie {
    transition: all 1s;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    clip: rect(0px, 25px, 50px, 0px);
    color: var(--site-text);
    background-color: var(--site-surface);
}

:where(body.site-standard) .circle-page .circle-item .circleListCounterPie.no-clip {
    clip: unset !important;
}

:where(body.site-standard) .circle-page .circle-item .circleListCounterPie.active {
    background-color: #018391 !important;
}

:where(body.site-standard) .circle-page .circle-item .circleListCounterHold {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    clip: rect(0px, 50px, 50px, 25px);
}

:where(body.site-standard) .circle-page .circle-item .circleListCounterHold.no-clip {
    clip: unset !important;
}

:where(body.site-standard) .cirlceListCounter-button {
    width: 42px;
    height: 42px;
    top: 4px;
    right: 4px;
    position: relative;
    border-radius: 100%;
    background-color: var(--site-surface) !important;
    font-size: 1.2rem !important;
    font-weight: 800;
    color: #018391;
    cursor: pointer;
}

:where(body.site-standard) .cirlceListCounter-button .button-text {
    text-align: center;
}

:where(body.site-standard) .circle-page .end-circle {
    position: relative;
}

:where(body.site-standard) .circle-page .end-circle hr {
    height: 1px;
    background-color: var(--site-surface);
}

:where(body.site-standard) .circle-page .end-circle div {
    position: absolute;
    top: -12px;
    width: 100%;
    text-align: center;
}

:where(body.site-standard) .circle-page .end-circle span {
    color: var(--site-muted);
    font-size: .9rem;
    background-color: var(--site-surface);
    padding: 2px 12px;
}

:where(body.site-standard) .circle-page .circle-help,
:where(body.site-standard) .khetma-page .khetma-help {
    border-top: 5px solid #018391;
    border-right: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-bottom: 2px solid #DDDDDD;
    border-radius: 4px;
}

:where(body.site-standard) .circle-page .circle-help .icon-outer,
:where(body.site-standard) .khetma-page .khetma-help .icon-outer {
    background-color: #018391 !important;
    color: var(--site-text);
    text-align: center;
    border-radius: 5px;
    font-size: 1.8rem;
    padding: 8px 0;
}

@media (max-width:768px) {

    :where(body.site-standard) .circle-page .circle-help .icon-outer,
:where(body.site-standard) .khetma-page .khetma-help .icon-outer {
        font-size: 1.4rem;
    }
}

:where(body.site-standard) .circle-page .circle-help .title,
:where(body.site-standard) .khetma-page .khetma-help .title {
    font-size: .9rem;
    font-weight: 700;
}

:where(body.site-standard) .circle-page .circle-help .text,
:where(body.site-standard) .khetma-page .khetma-help .text {
    font-size: .8rem;
    font-weight: 500;
}

:where(body.site-standard) .page-page .surah-box .surah-header,
:where(body.site-standard) .circle-page .surah-box .surah-header,
:where(body.site-standard) .khetma-page .surah-box .surah-header {
    background-color: #2c3e50;
    color: var(--site-text);
    text-align: center;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

:where(body.site-standard) .page-page .surah-box .surah-body-outer,
:where(body.site-standard) .circle-page .surah-box .surah-body-outer,
:where(body.site-standard) .khetma-page .surah-box .surah-body-outer {
    position: relative;
}

:where(body.site-standard) .page-page .surah-box .surah-top,
:where(body.site-standard) .circle-page .surah-box .surah-top,
:where(body.site-standard) .khetma-page .surah-box .surah-top {
    position: absolute;
    top: -8px;
    z-index: 8;
}

:where(body.site-standard) .page-page .surah-box .surah-name,
:where(body.site-standard) .circle-page .surah-box .surah-name,
:where(body.site-standard) .khetma-page .surah-box .surah-name {
    background-color: var(--site-surface);
    padding: .2rem .3rem;
    border-radius: 5px;
    font-weight: bold;
    font-size: .7rem;
    line-height: 1;
    border: 1px solid #e74c3c !important;
}

:where(body.site-standard) .page-page .surah-box .surah-footer,
:where(body.site-standard) .circle-page .surah-box .surah-footer,
:where(body.site-standard) .khetma-page .surah-box .surah-footer {
    position: absolute;
    z-index: 8;
    bottom: -20px;
    text-align: center;
}

:where(body.site-standard) .page-page .surah-box .surah-footer span,
:where(body.site-standard) .circle-page .surah-box .surah-footer span,
:where(body.site-standard) .khetma-page .surah-box .surah-footer span {
    background-color: var(--site-surface);
    padding: 0rem .6rem;
    border-radius: 5px;
    font-weight: bold;
    font-size: .7rem;
    line-height: 1;
    border: 1px solid #34495e !important;
}

:where(body.site-standard) .page-page .surah-box .surah-body {
    color: var(--site-text) !important;
}

:where(body.site-standard) .circle-page .surah-box .surah-body,
:where(body.site-standard) .khetma-page .surah-box .surah-body {
    color: var(--site-text);
    border-style: solid;
    border-width: 10px;
}

:where(body.site-standard) .page-page .surah-box .surah-body,
:where(body.site-standard) .circle-page .surah-box .surah-body,
:where(body.site-standard) .khetma-page .surah-box .surah-body {
    background: rgba(0, 0, 0, 0);
    text-align: justify !important;
    text-align-last: center;
    -moz-text-align-last: center;
    -ms-text-align-last: center;
    font-family: "hafs";
    font-size: 1.3rem;
    letter-spacing: .8px;
    word-spacing: -4px !important;
    font-weight: normal;
    line-height: 2.2rem;
    display: inline-table;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-number {
    color: #fac252 !important;
}

:where(body.site-standard) .circle-page .surah-box .surah-body .verse-number,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-number {
    color: #e74c3c !important;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-number .symbol,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-number .symbol,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-number .symbol {
    font-family: 'Almarai', sans-serif;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-outer,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-outer,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-outer {
    display: contents;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-outer:first-child .verse-text,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-outer:first-child .verse-text,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-outer:first-child .verse-text {
    border-top-right-radius: 5px;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-outer:last-child .verse-number,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-outer:last-child .verse-number,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-outer:last-child .verse-number {
    border-bottom-left-radius: 5px;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-number,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-number,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-number {
    padding-right: 3px;
    padding-left: 3px;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-text.finished,
:where(body.site-standard) .page-page .surah-box .surah-body .verse-number.finished,
:where(body.site-standard) .page-page .surah-box .surah-body .verse-number.reading,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-text.finished,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-number.finished,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-number.reading,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-text.finished,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-number.finished,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-number.reading {
    color: var(--site-text) !important;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-text.finished,
:where(body.site-standard) .page-page .surah-box .surah-body .verse-number.finished,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-text.finished,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-number.finished,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-text.finished,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-number.finished {
    background-color: #e74c3c;
}

:where(body.site-standard) .page-page .surah-box .surah-body .verse-text.reading,
:where(body.site-standard) .page-page .surah-box .surah-body .verse-number.reading,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-text.reading,
:where(body.site-standard) .circle-page .surah-box .surah-body .verse-number.reading,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-text.reading,
:where(body.site-standard) .khetma-page .surah-box .surah-body .verse-number.reading {
    background-color: var(--site-surface);
    color: var(--site-text) !important;
}

:where(body.site-standard) .page-page .surah-box .surah-body .btn-restart-surah-outer,
:where(body.site-standard) .circle-page .surah-box .surah-body .btn-restart-surah-outer,
:where(body.site-standard) .khetma-page .surah-box .surah-body .btn-restart-surah-outer {
    display: block;
    width: 100%;
    margin-top: .4rem;
}

:where(body.site-standard) .page-page .surah-box .surah-body .btn-restart-surah,
:where(body.site-standard) .circle-page .surah-box .surah-body .btn-restart-surah,
:where(body.site-standard) .khetma-page .surah-box .surah-body .btn-restart-surah {
    border: 1px solid #cccccc;
    color: var(--site-muted);
    font-size: .675rem;
    border-radius: 4px !important;
    display: none;
}

:where(body.site-standard) .circle-page .circle-footer {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

:where(body.site-standard) .circle-page .circle-footer.no-border {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

:where(body.site-standard) .circle-page .circle-footer .title {
    font-size: .8em !important;
    font-weight: 700;
}

@media (max-width:768px) {
    :where(body.site-standard) .circle-page .circle-footer .title {
        text-align: center !important;
    }
}

:where(body.site-standard) .shake-box {
    animation: shake-box 1s;
    animation-iteration-count: infinite
}

@keyframes shake-box {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }

    20%,
    80% {
        transform: translate3d(1px, 0, 0)
    }

    30%,
    50%,
    70% {
        transform: translate3d(-2px, 0, 0)
    }

    40%,
    60% {
        transform: translate3d(2px, 0, 0)
    }
}

:where(body.site-standard) .circle-page .circle-create {
    background-color: #2c3e50 !important;
    color: var(--site-text) !important;
    text-align: center;
}

:where(body.site-standard) .circle-page .circle-create .icon {
    font-size: 1em
}

:where(body.site-standard) .circle-page .circle-create .main-headline {
    font-size: .9rem;
    font-weight: 700
}

:where(body.site-standard) .circle-page .circle-create .button .btn {
    background-color: var(--site-surface) !important;
    color: var(--site-text) !important;
    font-weight: 600
}

:where(body.site-standard) .circle-page .circles-suggestion {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

:where(body.site-standard) .circle-page .circles-suggestion .headline {
    font-size: .9em !important;
    font-weight: bolder;
}

:where(body.site-standard) .circle-page .circles-suggestion .sub-headline {
    font-size: .8em !important;
    font-weight: normal;
}

:where(body.site-standard) .circle-page .circles-suggestion .suggestion-item .title a {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: var(--site-text);
}

:where(body.site-standard) .circle-page .circles-suggestion .suggestion-item .title {
    line-height: 1rem;
}

:where(body.site-standard) .circle-page .circles-suggestion .suggestion-item .image img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

:where(body.site-standard) .circle-page .circles-suggestion .suggestion-item .detaile-item {
    font-size: .7em !important;
}

:where(body.site-standard) .circle-page .circles-suggestion .suggestion-item .detaile-item .icon {
    color: var(--site-muted) !important;
}

:where(body.site-standard) .circle-page .circles-suggestion .suggestion-item .detaile-item .text {
    color: var(--site-muted) !important;
}


/********** Circle Page ************/


/** ****** khetma page ***** */

:where(body.site-standard) .khetma-page {
    min-height: 100vh;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

:where(body.site-standard) .khetma-page .khetma-header {
    border-radius: 8px;
    -wekbit-border-radius: 8px;
    -moz-border-radius: 8px;
}

:where(body.site-standard) .khetma-page .khetma-header .icon img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .khetma-page .khetma-header .title h1 {
    font-size: .9rem !important;
    font-weight: 800;
}

:where(body.site-standard) .khetma-page .khetma-circle-content-header {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .circle-page .circle-section-header,
:where(body.site-standard) .khetma-page .khetma-section-header {
    font-size: .9rem;
    font-weight: bolder;
}

:where(body.site-standard) .circle-page .circle-overview-item .icon,
:where(body.site-standard) .khetma-page .khetma-overview-item .icon {
    color: var(--site-muted) !important;
    font-size: .9rem;
    flex: 0 0 4.3333333333% !important;
    max-width: 4.3333333333% !important;
    padding-right: 0 !important;
}

:where(body.site-standard) .circle-page.azakar .join-circle-box .btn {
    background-color: #1BBC9B !important;
    border-color: #1BBC9B !important;
}

:where(body.site-standard) .circle-page.alnabi .join-circle-box .btn {
    background-color: #981002 !important;
    border-color: #981002 !important;
}

:where(body.site-standard) .circle-page.tasbeeh .join-circle-box .btn {
    background-color: #3486BE !important;
    border-color: #3486BE !important;
}

:where(body.site-standard) .circle-page.quran .join-circle-box .btn {
    background-color: #5C2175 !important;
    border-color: #5C2175 !important;
}

:where(body.site-standard) .circle-page .join-circle-header,
:where(body.site-standard) .khetma-page .join-khetma-header {
    font-size: .8rem;
}

:where(body.site-standard) .khetma-page .khetma-circle-help-box .icon {
    font-size: 2rem;
}

:where(body.site-standard) .khetma-page .khetma-circle-help-box .help-text {
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .khetma-page .khetma-circle-help-box .button .btn {
    background-color: var(--site-surface) !important;
}

:where(body.site-standard) .circle-page .circle-overview-item .text,
:where(body.site-standard) .khetma-page .khetma-overview-item .text {
    font-size: .8rem;
    font-weight: normal;
    color: var(--site-text);
}

:where(body.site-standard) .khetma-page .khetma-circle-item.active {
    border: 3px solid #01b1c4 !important;
    border-radius: 5px;
    background-color: var(--site-surface);
    position: relative;
}

:where(body.site-standard) .khetma-page .khetma-circle-item .circle-badge {
    padding: .2rem .8rem .1rem .8rem;
    border-radius: 5px;
    background-color: #01b1c4;
    position: absolute;
    top: -10px;
    right: 10px;
    color: var(--site-text);
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .khetma-page .khetma-circle-list-item .image img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

:where(body.site-standard) .khetma-page .khetma-circle-list-item .title a {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: var(--site-text);
}

:where(body.site-standard) .khetma-page .khetma-circle-list-item .title {
    line-height: 1rem;
}

:where(body.site-standard) .khetma-page .khetma-circle-list-item .details-item {
    font-size: .7em !important;
}

:where(body.site-standard) .khetma-page .khetma-circle-list-item .details-item .icon {
    color: var(--site-muted);
}

:where(body.site-standard) .khetma-page .khetma-circle-list-item .details-item .text {
    color: var(--site-muted) !important;
}


/** ****** khetma page ***** */


/** ****** page ****** **/

:where(body.site-standard) .page-page {
    position: relative;
}

:where(body.site-standard) .page-page .page-actions-buttons-box {
    width: 50px;
    position: fixed;
    bottom: 200px;
    text-align: center !important;
    z-index: 10000;
}

:where(body.site-standard) .page-page .page-actions-buttons-box .btn-action {
    background-color: var(--site-surface) !important;
    width: 38px;
    height: 38px;
    float: left;
    line-height: 38px;
    margin-bottom: 10px;
    color: var(--site-text);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

:where(body.site-standard) .page-page .page-card {
    background-color: #353535;
    color: var(--site-text) !important;
    border: 3px solid #2D2D2D;
    border-radius: 8px;
}

:where(body.site-standard) .page-page .page-card.primary-border {
    border: 3px solid #01b1c4;
}

:where(body.site-standard) .page-page .prayers-gaza-alert {
    border-radius: 8px;
    font-size: .9rem!important;
}

:where(body.site-standard) .page-page .prayers-gaza-alert a {
    color: var(--site-text)!important;
}

:where(body.site-standard) .page-page .page-card .promotion-box .icon {
    text-align: center;
    font-size: .8rem;
}
:where(body.site-standard) .page-page .page-card .promotion-box .text {
    font-size: .8rem;
    line-height: 1rem;
}

:where(body.site-standard) .page-page .page-card .promotion-box .btn {
    font-size: .7rem!important;
}

:where(body.site-standard) .page-page .page-header {
    border-radius: 8px;
    -wekbit-border-radius: 8px;
    -moz-border-radius: 8px;
    color: var(--site-text) !important;
}

:where(body.site-standard) .page-page .page-header .icon img {
    max-width: 100%;
    max-height: 70px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .page-page .page-header .title h1 {
    font-size: 1rem !important;
    font-weight: 800;
    line-height: 1.2rem !important;
}

:where(body.site-standard) .page-page .page-header .reading-time {
    font-size: .7rem !important;
}

:where(body.site-standard) .page-page .custom-page-nav {
    width: 100%;
}

:where(body.site-standard) .page-page .custom-page-nav .nav-link {
    font-size: .8em;
    font-weight: 600;
    color: var(--site-text);
    cursor: pointer;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    margin-left: .5rem;
    padding: .35rem .8rem !important;
}

:where(body.site-standard) .page-page .custom-page-nav .nav-link.active {
    background-color: #01b1c4 !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .page-page .custom-page-nav .nav-link:hover {
    background-color: rgba(1, 177, 196, .09)
}

:where(body.site-standard) .page-page .custom-page-nav .nav-link .circle-icon {
    color: #e74c3c;
    font-size: 12px;
    margin-right: 8px;
    margin-top: 3px;
    animation: infrontAnimation 1.5s;
    animation-iteration-count: infinite
}

:where(body.site-standard) .page-page .custom-page-nav .nav-link.active .circle-icon {
    color: transparent !important;
}

@keyframes infrontAnimation {

    10%,
    70% {
        opacity: 1
    }

    100%,
    40% {
        opacity: 0
    }
}

:where(body.site-standard) .page-page .page-section .section-header .main-headline {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

:where(body.site-standard) .page-page .page-section .section-header .sub-headline {
    font-size: .8rem;
    font-weight: 300;
    text-align: center;
    color: #FAC252!important;
}

:where(body.site-standard) .page-page .tasbeeh-box-outer {
    height: 170px;
}

:where(body.site-standard) .page-page .tasbeeh-box-outer .tasbeeh-count {
    text-align: center;
    font-size: .7rem;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list {
    text-align: center;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item .btn-item {
    width: 100% !important;
    background-color: transparent !important;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    font-size: .9rem;
    font-weight: bold;
    padding: .3rem 0;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item .btn-item:focus {
    outline: 0 !important;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+1) .btn-item {
    border: 2px solid #00B5C3;
    color: #00B5C3;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+1) .btn-item.active {
    background-color: #00B5C3 !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+2) .btn-item {
    border: 2px solid #01588E;
    color: #01588E;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+2) .btn-item.active {
    background-color: #01588E !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+3) .btn-item {
    border: 2px solid #8F6C2C;
    color: #8F6C2C;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+3) .btn-item.active {
    background-color: #8F6C2C !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-finish {
    display: none;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-finish .message {
    font-size: 1.3rem;
    font-weight: bolder;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-finish .button .btn {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    font-size: .9rem !important;
    font-weight: bold !important;
}

:where(body.site-standard) .page-page .tasbeeh-box .tasbeeh-finish .button .btn i {
    line-height: 0 !important;
    font-size: .8rem !important;
}

:where(body.site-standard) .page-page .pieContainer {
    width: 130px;
    height: 130px;
    position: relative;
    display: block;
    margin: 0 auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

:where(body.site-standard) .page-page .pieBackground {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 100%;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

:where(body.site-standard) .page-page .tasbeeh-box.animate .pieBackground {
    animation: tasbeehButtonAnimation 2s;
    animation-iteration-count: infinite
}

@keyframes tasbeehButtonAnimation {

    10%,
    70% {
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5)
    }

    100%,
    40% {
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3)
    }
}

:where(body.site-standard) .page-page .pie {
    transition: all 1s;
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 100%;
    clip: rect(0px, 60px, 130px, 0px);
    color: #00B5C3;
}

:where(body.site-standard) .page-page .hold {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 100%;
    clip: rect(0px, 150px, 150px, 75px);
}

:where(body.site-standard) .page-page #pieSlice1 .pie { 
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

:where(body.site-standard) .page-page #pieSlice2 {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

:where(body.site-standard) .page-page #pieSlice2 .pie {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

:where(body.site-standard) .page-page #pieSlice3 {
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

:where(body.site-standard) .page-page #pieSlice3 .pie {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

:where(body.site-standard) .page-page #pieSlice4 {
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

:where(body.site-standard) .page-page #pieSlice4 .pie {
    transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    background-color: #323232;
} 

:where(body.site-standard) .page-page .tasbeeh-button {
    width: 120px;
    height: 120px;
    top: 5px;
    right: 5px;
    position: relative;
    border-radius: 100%;
    background-color: #353535 !important;
    font-size: 1.2rem !important;
    font-weight: 800;
    color: #00B5C3;
    cursor: pointer;
}

:where(body.site-standard) .page-page .tasbeeh-button .text {
    text-align: center; 
}

:where(body.site-standard) .page-page .du3a-list .du3a-item {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4rem;
    border: 1px dashed #f9f9f9;
    margin-bottom: .8rem;
    padding: .9rem .5rem;
    border-radius: 5px;
    background-color: #2D2D2D;
    direction: rtl;
    text-align: center;
}

:where(body.site-standard) .page-page .du3a-list.version-2 .du3a-item {
    border: 1px solid #e6e6e6!important;
    padding: 1.2rem .8rem;
    border-radius: 4px!important;
    height: 140px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(body.site-standard) .page-page .send-card .sub-headline {
    font-size: .7rem;
}

:where(body.site-standard) .page-page .send-card .icon {
    font-size: 1.6rem;
    color: var(--site-text);
}

:where(body.site-standard) .page-page .send-card .main-headline {
    font-size: .9rem !important;
    font-weight: bold !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .page-page .send-card .message {
    font-size: .76rem;
    font-weight: 500;
    color: var(--site-text);
}

:where(body.site-standard) .page-page .send-card .button .btn {
    font-size: .7rem !important;
    font-weight: bold !important;
    background-color: var(--site-surface) !important;
}

:where(body.site-standard) .page-page .circles-suggestion,
:where(body.site-standard) .page-page .circles-page {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

:where(body.site-standard) .page-page .circles-suggestion .headline,
:where(body.site-standard) .page-page .circles-page .headline {
    font-size: .8em !important;
    font-weight: 700;
}

:where(body.site-standard) .page-page .circles-suggestion .suggestion-item .image img,
:where(body.site-standard) .page-page .circles-page .circle-item .image img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

:where(body.site-standard) .page-page .circles-suggestion .suggestion-item .title a,
:where(body.site-standard) .page-page .circles-page .circle-item .title a {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: var(--site-text);
}

:where(body.site-standard) .page-page .circles-suggestion .suggestion-item .title,
:where(body.site-standard) .page-page .circles-page .circle-item .title {
    line-height: 1rem;
}

:where(body.site-standard) .page-page .circles-suggestion .suggestion-item .detaile-item,
:where(body.site-standard) .page-page .circles-page .circle-item .detaile-item {
    font-size: .7em !important;
}

:where(body.site-standard) .page-page .circles-suggestion .suggestion-item .detaile-item .icon,
:where(body.site-standard) .page-page .circles-page .cirlce-item .detaile-item .icon {
    color: var(--site-muted) !important;
}

:where(body.site-standard) .page-page .circles-suggestion .suggestion-item .detaile-item .text,
:where(body.site-standard) .page-page .circles-page .circle-item .detaile-item .text {
    color: var(--site-muted) !important;
}

:where(body.site-standard) .page-page .page-create,
:where(body.site-standard) .circle-page .circle-create,
:where(body.site-standard) .khetma-page .khetma-create {
    background-color: #2c3e50 !important;
    color: var(--site-text) !important;
    text-align: center;
}

:where(body.site-standard) .page-page .page-create .icon,
:where(body.site-standard) .cirlce-page .cirlce-create .icon,
:where(body.site-standard) .khetma-page .khetma-create .icon {
    font-size: 1em
}

:where(body.site-standard) .page-page .page-create .main-headline,
:where(body.site-standard) .circle-page .circle-create .main-headline,
:where(body.site-standard) .khetma-page .khetma-create .main-headline {
    font-size: .9rem;
    font-weight: 700
}

:where(body.site-standard) .page-page .page-create .button .btn,
:where(body.site-standard) .circle-page .circle-create .button .btn,
:where(body.site-standard) .khetma-page .khetma-create .button .btn {
    background-color: var(--site-surface) !important;
    color: var(--site-text) !important;
    font-weight: 600
}

:where(body.site-standard) .page-page .page-create .button .hint,
:where(body.site-standard) .circle-page .circle-create .button .hint,
:where(body.site-standard) .khetma-page .khetma-create .button .hint {
    font-size: .7rem;
    font-weight: bold;
}

:where(body.site-standard) .page-page .page-footer {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

:where(body.site-standard) .page-page .page-footer.no-border {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

:where(body.site-standard) .page-page .page-footer .title {
    font-size: .8em !important;
    font-weight: 700;
}

@media (max-width:768px) {
    :where(body.site-standard) .page-page .page-footer .title {
        text-align: center !important;
    }
}

:where(body.site-standard) .shake-box {
    animation: shake-box 1s;
    animation-iteration-count: infinite
}

@keyframes shake-box {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }

    20%,
    80% {
        transform: translate3d(1px, 0, 0)
    }

    30%,
    50%,
    70% {
        transform: translate3d(-2px, 0, 0)
    }

    40%,
    60% {
        transform: translate3d(2px, 0, 0)
    }
}

:where(body.site-standard) .page-page .circle-timeout icon {
    max-height: 80px;
}

:where(body.site-standard) .page-page .circle-timeout .text {
    color: var(--site-muted);
    font-size: .7rem;
    font-weight: 700;
}


/** ****** page ****** **/

:where(body.site-standard) .isLoadingPage-overlay-outer {
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: var(--site-surface);
    position: fixed;
    z-index: 10000;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    transition: all linear 3s;
    padding-top: 3rem !important;
    padding-bottom: 5rem !important;
}

:where(body.site-standard) .isLoadingPage-overlay-outer.ng-hide {
    width: 0;
    right: -100%;
}

:where(body.site-standard) .isLoadingPage-overlay-outer img {
    width: 30px;
    height: 30px;
    margin: 30vh auto;
    display: block;
}

:where(body.site-standard) .empty-results-box {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    min-height: 90vh;
}

:where(body.site-standard) .empty-results-box .image img {
    height: 120px;
    max-width: 100%;
}

:where(body.site-standard) .empty-results-box .main-headline {
    font-size: .9rem !important;
    font-weight: bold !important;
}

:where(body.site-standard) .empty-results-box .sub-headline {
    font-size: .8rem !important;
    font-weight: normal !important;
    line-height: 1.4rem;
}

:where(body.site-standard) .isLoading-section-box {
    padding-top: 3rem !important;
    padding-bottom: 5rem !important;
    min-height: 90vh;
}

:where(body.site-standard) .isLoading-section-box.small-box {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    min-height: auto !important;
}

:where(body.site-standard) .isLoading-section-box img {
    width: 30px;
    height: 30px;
    margin: 30vh auto;
    display: block;
}

:where(body.site-standard) .isLoading-section-box.small-box img {
    margin: 0 auto !important;
}

:where(body.site-standard) .settings-page .back a {
    font-size: .6rem;
    color: var(--site-muted);
    text-decoration: none;
}

:where(body.site-standard) .settings-home-page .main-headline,
:where(body.site-standard) .settings-page .main-headline {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .settings-home-page .sub-headline,
:where(body.site-standard) .settings-page .sub-headline {
    font-size: .7rem;
    font-weight: normal;
    columns: #888888;
}

:where(body.site-standard) .settings-page .nav .nav-link {
    color: var(--site-text) !important;
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .settings-page .settings-form-box {
    min-height: 90vh;
}

:where(body.site-standard) .container-box-page {
    max-width: 1200px;
}

@media (max-width:768px) {

    :where(body.site-standard) .container-box-page,
:where(body.site-standard) .container-box-page .right-container-box,
:where(body.site-standard) .container-box-page .left-container-box {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

:where(body.site-standard) .access-modal {
    transition: all linear 0.5s;
    background-color: var(--site-surface);
    width: 100%;
    height: 90%;
    position: fixed;
    z-index: 10000;
    bottom: 0;
    left: 0;
    right: 0;
}

:where(body.site-standard) .access-modal.ng-hide {
    height: 0;
}

:where(body.site-standard) .access-modal .access-modal-content {
    max-width: 500px;
}

:where(body.site-standard) .access-modal .main-headline {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .access-modal .sub-headline {
    font-size: .8rem;
    font-weight: normal;
    line-height: 1.4rem
}

:where(body.site-standard) .access-modal .access-buttons .btn {
    font-size: .9rem !important;
    font-weight: bold !important;
}

:where(body.site-standard) .access-modal .access-buttons .btn .hint {
    font-size: .7rem;
    font-weight: normal !important;
}

:where(body.site-standard) .access-modal .switch-access-way {
    font-size: .7rem !important;
}

:where(body.site-standard) .access-modal .switch-access-way .btn {
    font-size: .7rem !important;
}

:where(body.site-standard) .access-modal .btn-cancel {
    font-size: .7rem !important;
    color: var(--site-muted) !important;
}

:where(body.site-standard) #download-app-modal .modal-dialog {
    max-width: 400px !important;
}

:where(body.site-standard) #download-app-modal .modal-content {
    border-radius: 15px;
}

:where(body.site-standard) #download-app-modal .modal-header {
    border-bottom: 0 !important;
}

:where(body.site-standard) #download-app-modal .modal-header img {
    max-width: 100%;
    height: 80px;
    margin: 0 auto;
}

:where(body.site-standard) #download-app-modal .main-headline {
    font-size: 1.1rem;
    font-weight: bolder;
}

:where(body.site-standard) #download-app-modal .sub-headline {
    font-size: .9rem;
    line-height: 1.4rem;
}

:where(body.site-standard) #download-app-modal .buttons .btn {
    font-size: .9rem !important;
    font-weight: bold !important;
}

:where(body.site-standard) .options-box-modal .modal-dialog {
    max-width: 350px !important;
}

:where(body.site-standard) .options-box-modal .modal-content {
    border-radius: 10px !important;
}

:where(body.site-standard) .options-box-modal .title {
    font-size: .9em;
    font-weight: 800;
}

:where(body.site-standard) .options-box-modal .option-item {
    width: 100%;
    float: right;
    font-size: .9rem !important;
    font-weight: 400;
    color: var(--site-text) !important;
}

:where(body.site-standard) .options-box-modal .option-item i {
    font-size: 1.1rem !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .options-box-modal .option-item:hover,
:where(body.site-standard) .options-box-modal .option-item:focus,
:where(body.site-standard) .options-box-modal .option-item:active {
    text-decoration: none !important;
}

:where(body.site-standard) .share-modal .main-headline {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .share-modal .sub-headline {
    font-size: .8rem;
    font-weight: normal;
    line-height: 1.4rem
}

:where(body.site-standard) .share-modal .btn-cancel,
:where(body.site-standard) .get-video-modal .btn-cancel {
    font-size: .7rem !important;
    color: var(--site-muted) !important;
}

:where(body.site-standard) .share-modal .copy-message-box textarea {
    height: 110px;
    resize: none;
    background-color: var(--site-surface) !important;
}

:where(body.site-standard) .share-modal .copy-message-box textarea:focus,
:where(body.site-standard) .share-modal .copy-message-box textarea:hover {
    outline: none !important;
    box-shadow: none !important;
}

:where(body.site-standard) .share-modal .copy-message-box .btn {
    font-size: .9rem !important;
    font-weight: bold !important;
}

:where(body.site-standard) .share-modal .copy-message-box .btn .text-copied {
    display: none;
}

:where(body.site-standard) .comment-modal .send-form textarea {
    height: 100px;
    resize: none;
}

:where(body.site-standard) .comment-modal .send-form .btn {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .comment-modal .send-form .message-counter {
    font-size: .8rem;
    color: var(--site-muted);
}

:where(body.site-standard) .comment-modal .success-box .success-icon img {
    width: 70px;
    height: 70px;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .comment-modal .success-box .success-main-headline {
    font-size: 1.1rem;
    font-weight: bolder;
}

:where(body.site-standard) .comment-modal .success-box .success-sub-headline {
    font-size: .8rem;
    line-height: 1.4rem;
}

:where(body.site-standard) .comment-modal .success-box .btn {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) #get-video-modal .main-headline {
 font-size: 1.3rem;
 font-weight: 900;   
 text-align: center;
}

:where(body.site-standard) #get-video-modal .video-box video {
    width: 100%;
    height: auto;
    max-height: 300px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 4px solid #01b1c4;
}


:where(body.site-standard) .circle-page .share-box .title,
:where(body.site-standard) .khetma-page .share-box .title {
    font-size: .8em !important;
    font-weight: 700;
}

@media (max-width:768px) {

    :where(body.site-standard) .circle-page .share-box .title,
:where(body.site-standard) .khetma-page .share-box .title {
        text-align: center !important;
    }
}

:where(body.site-standard) .overview-page {
    max-width: 500px !important;
    background-color: var(--site-surface);
}

:where(body.site-standard) .overview-page .main-headline {
    font-size: 1rem;
    font-weight: 700;
}

:where(body.site-standard) .overview-page .sub-headline {
    font-size: .8rem;
    line-height: 1.4rem;
}

:where(body.site-standard) .overview-page .icon img {
    width: 120px;
    display: block;
    margin: 0 auto;
    border-radius: 100%;
}

:where(body.site-standard) .overview-page .video iframe {
    border: 0 !important;
}

:where(body.site-standard) .overview-page .steps {
    font-size: .7rem;
    color: var(--site-muted);
}

:where(body.site-standard) .overview-page .todo-list .todo-item .title {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .overview-page .todo-list .todo-item .button .btn {
    border-radius: 20px;
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .overview-page .todo-home-headline {
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .overview-page .download-app .download-headline {
    font-size: .7rem;
    font-weight: bold;
}

:where(body.site-standard) .overview-page .app-feature {
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .overview-page .app-feature .icon {
    color: #2ecc71 !important;
}

:where(body.site-standard) .sticky-circle-alert {
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    transition: all linear 0.5s;
    z-index: 10000;
    background-color: #2c3e50 !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .sticky-circle-alert-inner {
    max-width: 1000px;
}

@media (max-width:768px) {

    :where(body.site-standard) .sticky-circle-alert-inner,
:where(body.site-standard) .sticky-circle-alert-inner .right-container-box,
:where(body.site-standard) .sticky-circle-alert-inner .left-container-box,
:where(body.site-standard) .sticky-bottom-alert,
:where(body.site-standard) .sticky-bottom-alert .right-container-box,
:where(body.site-standard) .sticky-bottom-alert .left-container-box {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

:where(body.site-standard) .sticky-circle-alert .message,
:where(body.site-standard) .sticky-bottom-alert .message {
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .sticky-circle-alert .message .sub,
:where(body.site-standard) .sticky-bottom-alert .message .sub {
    font-size: .7rem;
    font-weight: normal;
}

:where(body.site-standard) .sticky-circle-alert .btn,
:where(body.site-standard) .sticky-bottom-alert .btn {
    font-size: .7rem !important;
}

:where(body.site-standard) .circle-page .circle-success .header {
    background-color: var(--site-surface) !important;
}

:where(body.site-standard) .circle-page .circle-success .header img {
    width: 92px;
}

:where(body.site-standard) .circle-page .circle-success .header .main-headline {
    font-size: 1rem;
    font-weight: bolder;
}

:where(body.site-standard) .circle-page .circle-success .header .sub-headline {
    font-size: .7rem;
    font-weight: normal;
}

:where(body.site-standard) .post-page {
    max-width: 500px;
    min-height: 80vh;
}

:where(body.site-standard) .post-page .post-box {
    margin-bottom: .3rem;
    background-color: #353535;
    border: 6px solid #2d2d2d;
    border-radius: 5px;
    color: var(--site-text) !important;
}

@media (max-width:768px) {

    :where(body.site-standard) .post-page .post-box .post-header .col-1,
:where(body.site-standard) .post-page .post-box .post-body .col-1 {
        flex: 0 0 13.3333333333%;
        max-width: 13.3333333333%;
    }

    :where(body.site-standard) .post-page .post-box .post-header .col-11,
:where(body.site-standard) .post-page .post-box .post-body .col-11 {
        flex: 0 0 86.6666666667%;
        max-width: 86.6666666667%;
    }
}

:where(body.site-standard) .post-page .post-box .post-header .post-icon img {
    width: 100%;
    max-width: 36px;
    height: auto;
    border-radius: 100%;
}

:where(body.site-standard) .post-page .post-box .post-header .title {
    font-size: .8rem;
    font-weight: bolder;
}

:where(body.site-standard) .post-page .post-box .post-header .time {
    font-size: .6rem;
    color: var(--site-muted) !important;
}

:where(body.site-standard) .post-page .post-box .post-body .title {
    font-size: 1.1rem;
    line-height: 1.5rem;
    letter-spacing: .6px;
    font-weight: bold;
}

:where(body.site-standard) .post-page .post-box .post-body .text {
    font-size: .9rem;
    line-height: 0;
    letter-spacing: .6px;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
}

:where(body.site-standard) .post-page .post-box .post-body .text.has-title {
    text-align: center;
    border: 1px dashed #C3C3C3;
    padding: .8rem .5rem !important;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

:where(body.site-standard) .post-page .post-box .post-body .text div {
    line-height: 1.5rem;
}

:where(body.site-standard) .post-page .post-box .post-body .text.has-bg {
    min-height: 200px;
    color: var(--site-text);
    text-align: center;
    font-weight: bold;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    line-height: 1.5rem;
}

:where(body.site-standard) .post-page .post-box .post-body .images .carousel .carousel-control-prev span,
:where(body.site-standard) .post-page .post-box .post-body .images .carousel .carousel-control-next span {
    width: 25px;
    line-height: 28px;
    height: 25px;
    font-size: .8rem;
    background-color: var(--site-surface);
    color: var(--site-text);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border: 1px solid #555555;
}

:where(body.site-standard) .post-page .post-box .post-body .images .carousel .carousel-item {
    text-align: center;
    background-color: var(--site-surface);
}

:where(body.site-standard) .post-page .post-box .post-body .images .carousel img {
    height: 400px;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

@media (max-width:768px) {
    :where(body.site-standard) .post-page .post-box .post-body .images .carousel img {
        height: 300px;
    }
}

:where(body.site-standard) .post-page .post-box .post-body .images .carousel .carousel-indicators li {
    width: 5px !important;
    height: 5px !important;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

:where(body.site-standard) .post-page .post-box .post-footer .actions-box .btn-action {
    font-size: .8rem;
    color: var(--site-text);
    font-weight: bold;
}

:where(body.site-standard) .post-page .post-box .post-footer .actions-box .btn-action:active,
:where(body.site-standard) .post-page .post-box .post-footer .actions-box .btn-action:focus {
    outline: 0px !important;
    -webkit-appearance: none;
    box-shadow: none !important;
}


/** ******************************************************************************** */


/** ******************************************************************************** */


/** ******************************************************************************** */


/** ******************************************************************************** */


/** ******************************************************************************** */

:where(body.site-standard) .tasbeeh-page {
    max-width: 500px;
    min-height: 80vh;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box {
    margin-bottom: .3rem;
    background-color: var(--site-surface);
    border: 1px solid #dddddd;
    border-radius: 5px;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-header .main-headline {
    font-size: 1rem;
    font-weight: bold;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-header .sub-headline {
    font-size: .7rem;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list {
    text-align: center;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item .btn-item {
    width: 100% !important;
    background-color: transparent !important;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    font-size: .9rem;
    font-weight: bold;
    padding: .3rem 0;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item .btn-item:focus {
    outline: 0 !important;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+1) .btn-item {
    border: 2px solid #01B2C4;
    color: #01B2C4;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+1) .btn-item.active {
    background-color: #01B2C4 !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+2) .btn-item {
    border: 2px solid #01588E;
    color: #01588E;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+2) .btn-item.active {
    background-color: #01588E !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+3) .btn-item {
    border: 2px solid #8F6C2C;
    color: #8F6C2C;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-list .tasbeeh-list-item:nth-child(1n+3) .btn-item.active {
    background-color: #8F6C2C !important;
    color: var(--site-text) !important;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-finish {
    display: none;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-finish .message {
    font-size: 1.3rem;
    font-weight: bolder;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-finish .button .btn {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    font-size: .9rem !important;
    font-weight: bold !important;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeeh-finish .button .btn i {
    line-height: 0 !important;
    font-size: .8rem !important;
}

:where(body.site-standard) .tasbeeh-page .tasbeehCounterContainer-outer {
    position: relative;
    width: 150px;
    display: block;
    margin: 0 auto;
}

:where(body.site-standard) .tasbeeh-page .tasbeehCounterContainer {
    width: 150px;
    height: 150px;
    position: relative;
    display: block;
    margin: 0 auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

:where(body.site-standard) .tasbeeh-page .tasbeehCounterBackground {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box.animate .tasbeehCounterBackground {
    animation: tasbeehButtonAnimation 2s;
    animation-iteration-count: infinite
}

@keyframes tasbeehButtonAnimation {

    10%,
    70% {
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5)
    }

    100%,
    40% {
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3)
    }
}

:where(body.site-standard) .tasbeeh-page .tasbeehCounterPie {
    transition: all 1s;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    clip: rect(0px, 75px, 150px, 0px);
    color: var(--site-text);
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeehCounterHold {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    clip: rect(0px, 150px, 150px, 75px);
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeehCounter-button {
    width: 140px;
    height: 140px;
    top: 5px;
    right: 5px;
    position: relative;
    border-radius: 100%;
    background-color: var(--site-surface) !important;
    font-size: 1.2rem !important;
    font-weight: 800;
    color: #01b1c4;
    cursor: pointer;
}

:where(body.site-standard) .tasbeeh-page .tasbeeh-box .tasbeehCounter-button .text {
    text-align: center;
}

:where(body.site-standard) .user-add-page {
    max-width: 600px;
    min-height: 80vh;
}

:where(body.site-standard) .user-add-page .user-add-box {
    background-color: #2D2D2D;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

:where(body.site-standard) .user-add-page header .header-inner {
    border-bottom: 1px solid #555555;
}

:where(body.site-standard) .user-add-page header .user-avatar {
    max-width: 50px;
    height: 50px;
    background-color: #fac252 !important;
    color: var(--site-text);
    font-size: 1.2rem;
    font-weight: bolder;
    text-align: center;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

:where(body.site-standard) .user-add-page header .user-name h1 {
    font-size: 1.5rem;
    font-weight: bolder;
    color: var(--site-text);
    margin-bottom: .4rem !important;
}

:where(body.site-standard) .user-add-page header .user-followers {
    font-size: .8rem;
    color: var(--site-text) !important;
}

:where(body.site-standard) .user-add-page .download-app-box {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

:where(body.site-standard) .user-add-page .download-app-box .message {
    font-size: 1rem;
    font-weight: normal;
    color: var(--site-text);
    line-height: 2rem;
}

:where(body.site-standard) .user-add-page .download-app-box .message span {
    position: relative;
    font-size: 1.2rem;
    font-weight: bold;
}

:where(body.site-standard) .user-add-page .download-app-box .message span::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 100%;
    background-color: #01b1c4;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

:where(body.site-standard) .user-add-page .download-app-box .btn-hint {
    font-size: .7rem;
    color: var(--site-text);
}


/**  background-color: #2D2D2D; **/

:where(body.site-standard) .join-khetma-page {
    max-width: 600px;
    min-height: 80vh;
}

:where(body.site-standard) .join-khetma-page .join-khetma-box {
    background-color: #2D2D2D;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

:where(body.site-standard) .join-khetma-page header .header-inner {
    border-bottom: 1px solid #555555;
}

:where(body.site-standard) .join-khetma-page header .details .title h1 {
    font-size: 1.5rem;
    font-weight: bolder;
    color: var(--site-text);
    margin-bottom: .4rem !important;
    padding-top: 0 !important;
}

:where(body.site-standard) .join-khetma-page header .details .info {
    font-size: .7rem;
    color: var(--site-text) !important;
}

:where(body.site-standard) .join-khetma-page .download-app-box {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

:where(body.site-standard) .join-khetma-page .download-app-box .title {
    font-size: 1rem;
    font-weight: normal;
    color: var(--site-text);
    line-height: 1.6rem;
}

:where(body.site-standard) .join-khetma-page .download-app-box .title span {
    position: relative;
    font-size: 1rem;
    font-weight: bold;
}

:where(body.site-standard) .join-khetma-page .download-app-box .title span::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 100%;
    background-color: #01b1c4;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

:where(body.site-standard) .join-khetma-page .download-app-box .message {
    font-size: .8rem;
    font-weight: normal;
    color: var(--site-text);
    line-height: 1.4rem;
}

:where(body.site-standard) .join-khetma-page .download-app-box .btn-hint {
    font-size: .7rem;
    color: var(--site-text);
}

:where(body.site-standard) .top-download-app {
    background-color: #111111;
    border-bottom: 1px solid #353535;
}

:where(body.site-standard) .top-download-app .user-avatar {
    max-width: 30px;
    height: 30px;
    background-color: #fac252 !important;
    color: var(--site-text);
    font-size: .7rem;
    font-weight: bolder;
    text-align: center;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

:where(body.site-standard) .top-download-app .user-name {
    font-size: .7rem;
    font-weight: bold;
    color: var(--site-text);
}

:where(body.site-standard) .top-download-app .join-msg {
    font-size: .7rem;
    color: var(--site-muted);
}

:where(body.site-standard) .top-download-app .btn {
    font-size: .7rem !important;
    font-weight: bolder;
}

:where(body.site-standard) .tasksList-box {
    padding: 0 !important;
    max-width: 500px;
    color: var(--site-text);
    box-shadow: 0 0 10px #353535;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    margin-top: 1rem !important;
    margin-bottom: 5rem !important;
}

:where(body.site-standard) .tasksList-box .header {
    background-color: rgb(174, 20, 37);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

@media (max-width:768px) {
    :where(body.site-standard) .tasksList-box {
        box-shadow: none !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }

    :where(body.site-standard) .tasksList-box .header {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
}

:where(body.site-standard) .tasksList-box .header .title h1 {
    font-size: 1.3rem;
    font-weight: bold;
    padding: 0 !important;
}

:where(body.site-standard) .tasksList-box .description {
    font-size: .8rem;
    color: var(--site-muted);
    line-height: 1.4rem;
}

:where(body.site-standard) .tasksList-box .header .members-count {
    font-size: .8rem;
}

:where(body.site-standard) .tasksList-box .footer-details .btn {
    border-radius: 50px;
    background-color: var(--site-surface);
    color: var(--site-text) !important;
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .tasksList-box section .section-header {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .tasksList-box section .tasks-list-box {
    background-color: #353535;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

:where(body.site-standard) .tasksList-info-item {
    font-size: .8rem;
    color: var(--site-muted);
}

:where(body.site-standard) .tasksList-box .task-group-box {
    border-bottom: 1px solid #2d2d2d;
}

:where(body.site-standard) .tasksList-box .task-group-header {
    font-size: .9rem;
    font-weight: bold;
}

:where(body.site-standard) .tasksList-box .task-group-box img {
    width: 20px;
    height: 20px;
}

:where(body.site-standard) .tasksList-box .task-group-body {
    display: inline-block;
}

:where(body.site-standard) .tasksList-box .task-group-item {
    padding-right: .2rem;
    padding-left: .2rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: normal;
    color: var(--site-muted);
}

:where(body.site-standard) .tasksList-sticky-alert {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #111;
    border-top: 1px solid #353535;
}

:where(body.site-standard) .tasksList-sticky-alert .btn {
    border-radius: 50px;
    background-color: var(--site-surface);
    color: rgb(174, 20, 37) !important;
    font-size: .8rem;
    font-weight: bold;
}

:where(body.site-standard) .auth-page {
    border: 1px solid #dddddd;
    border-radius: 5px;
    box-shadow: 10px 10px 55px -6px rgba(0, 0, 0, 0.46);
}
:where(body.site-standard) .auth-page .content-box {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
:where(body.site-standard) .auth-page .main-headline h1 {
    font-size: 1.1em;
    font-weight: 800;
    text-align: center;
}
:where(body.site-standard) .auth-page .sub-headline h2 {
    font-size: .9em;
    font-weight: 700;
    text-align: center;
}

:where(body.site-standard) .auth-page .wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

:where(body.site-standard) .auth-page .step {
    text-align: center;
    display: flex;
    opacity: 0.6;
}
:where(body.site-standard) .auth-page .step.active {
    opacity: 1;
}

:where(body.site-standard) .auth-page .step-number {
    width: 20px;
    height: 20px;
    line-height: 1.7;
    border-radius: 50%;
    background-color: #01b1c4;
    color: white;
    margin: 10px auto 0;
    font-size: .8rem;
}

:where(body.site-standard) .auth-page .step-title {
    font-size: .8rem;
    margin-top: 10px;
    margin-right: 5px;
}

:where(body.site-standard) .auth-page .step.active .step-number {
    background-color: #28a745;
}

:where(body.site-standard) .auth-page .testimonial-box {
    background-color: #004e58;
    color: var(--site-text);
    padding: .7rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

:where(body.site-standard) .auth-page .testimonial-content {
    font-size: 1rem;
    line-height: 1.5rem;
}

:where(body.site-standard) .auth-page .testimonial-name {
    font-size: .8rem;
    font-weight: bold;
    text-align: right;
}


:where(body.site-standard) .tasbeeh-v2-box .headline {
    font-size: 1rem !important;
    font-weight: 700;
}

:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item {
    background-color: var(--site-surface);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 1.2rem .5rem 1rem .5rem;
    margin-bottom: 1rem;
    text-align: center;
}

:where(body.site-standard) .tasbeeh-v2-box.dark-theme .tasbeeh-list .tasbeeh-item {
    background-color: #2D2D2D;
    color: var(--site-text);
}

:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .tasbeeh-text {
    font-size: 1.1rem !important;
    font-weight: 700;
    line-height: 2rem;
}

:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .tasbeeh-text .custom-word {
    color: #df9707 !important;
    font-weight: 900;
}

:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .tasbeeh-text .hint-word {
    color: var(--site-muted) !important;
}

:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .tasbeeh-hint {
    font-size: .9rem !important;
    font-weight: 300;
}


:where(body.site-standard) .tasbeeh-v2-box.dark-theme .tasbeeh-list .tasbeeh-item .tasbeeh-text {
    min-height: 60px !important;
}

:where(body.site-standard) .tasbeeh-v2-box.dark-theme .tasbeeh-list .tasbeeh-item .tasbeeh-hint {
    min-height: 40px !important;
}

@media (min-width: 768px) {
    :where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .tasbeeh-text {
        min-height: 60px !important;
    }

    :where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .tasbeeh-hint {
        min-height: 40px !important;
    }
}

:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .btn-tasbeeh,
:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .undo-btn,
:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .share-btn {
    border-radius: 10px;
}

:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .btn-tasbeeh .count-value {
    font-size: 1.5rem !important;
    font-weight: 700;
}

:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .btn-outline-primary:hover,
:where(body.site-standard) .tasbeeh-v2-box .tasbeeh-list .tasbeeh-item .btn-outline-primary:focus {
    background-color: transparent !important;
    color: #018f9e !important;
    border-color: 0 !important;
}


:where(body.site-standard) #pageOverviewModal .modal-header {
    text-align: center;
}
:where(body.site-standard) #pageOverviewModal .modal-header h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--site-text);
}

:where(body.site-standard) #pageOverviewModal .modal-header h2 span {
    color: #01b1c4;
}

:where(body.site-standard) #pageOverviewModal .divider {
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

:where(body.site-standard) #pageOverviewModal .modal-dialog {
    max-width: 400px;
}

:where(body.site-standard) #pageOverviewModal .steps {
    text-align: right;
}

:where(body.site-standard) #pageOverviewModal .step {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

:where(body.site-standard) #pageOverviewModal .step .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #01b1c4, #008ca1);
    color: var(--site-text);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-left: 10px;
}

:where(body.site-standard) #pageOverviewModal .step p {
    margin: 0;
    color: var(--site-text);
}

:where(body.site-standard) .hourly-du3a-page {
    max-width: 600px;
    background-color: var(--site-surface);
    border-radius: 10px;
    padding: 0 !important;
}

:where(body.site-standard) .hourly-du3a-page .nav-sections {
    padding: .5rem 1rem 0 1rem;
    background-color: var(--site-surface) !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

:where(body.site-standard) .hourly-du3a-page .top-sections {
    padding: 1rem 1rem 2rem 1rem;
}

:where(body.site-standard) .hourly-du3a-page .bottom-sections {
    padding: 1rem 1rem 2rem 1rem;
    background-color: var(--site-surface) !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

:where(body.site-standard) .hourly-du3a-page .logo img {
    max-width: 90px;
}

:where(body.site-standard) .hourly-du3a-page .main-headline {
    font-size: 1rem !important;
    font-weight: 700;
}

:where(body.site-standard) .hourly-du3a-page .sub-headline {
    font-size: .8rem !important;
    font-weight: 300;
    color: var(--site-text);
}

:where(body.site-standard) .hourly-du3a-page .du3a-box {
    font-size: 1.1rem !important;
    font-weight: 700;
    padding: 1.3rem 1rem;
    background-color: #353535;
    color: var(--site-text);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    text-align: center;
    font-family: "Tajawal", serif !important;
}

:where(body.site-standard) .hourly-du3a-page .du3a-box .custom-word {
    color: #FAC252 !important;
}

:where(body.site-standard) .hourly-du3a-page .du3a-box p {
    margin-bottom: .4rem;
}

:where(body.site-standard) .hourly-du3a-page .shortcut-box .shortcut-hint {
    font-size: 1rem !important;
    font-weight: 500;
    text-align: center;
}

:where(body.site-standard) .hourly-du3a-page .share-box {
    background-color: #FFDC86 !important;
    padding: 1rem .6rem;
    border-radius: 10px;
}

:where(body.site-standard) .hourly-du3a-page .share-box .headline {
    font-size: 1rem !important;
    font-weight: 700;
    text-align: center;
}

:where(body.site-standard) .hourly-du3a-page .share-box .sub-headline {
    font-size: .8rem !important;
    font-weight: 300;
    text-align: center;
}

:where(body.site-standard) .countdown-box {
    font-size: .9rem !important;
    font-weight: 500;
    text-align: center;
}

:where(body.site-standard) .countdown-headline {
    font-size: .9rem !important;
    font-weight: 700;
    margin-bottom: 1rem;
}

:where(body.site-standard) .countdown-timer {
    font-size: 1rem !important;
    font-weight: 700;
    color: #dc3545;
}

@media (max-width: 768px) {
    :where(body.site-standard) .hourly-du3a-page .share-box .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    :where(body.site-standard) .hourly-du3a-page .share-box .buttons .btn {
        width: 45%;
        margin-left: 10px;
        font-size: .9rem !important;
    }
}

:where(body.site-standard) #helpfulOptionsModal .modal-header {
    font-size: 1.2rem !important;
    font-weight: 700;
}

:where(body.site-standard) #helpfulOptionsModal .button-action .text {
    font-size: .8rem !important;
    font-weight: 700;
}

:where(body.site-standard) .sticky-alert {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--site-surface);
    color: var(--site-text);
    padding: 10px 20px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom 0.5s ease-in-out;
    text-align: center;
    width: 100%;
    display: flex;
    height: 0;
    z-index: 10000;
}

:where(body.site-standard) .sticky-alert.show {
    bottom: 0;
    height: 22vh;
}

:where(body.site-standard) .sticky-alert.show.minmize {
    height: 10vh;
}

:where(body.site-standard) .sticky-alert .container {
    max-width: 600px;
}

:where(body.site-standard) .sticky-alert .headline {
    font-size: 1rem;
    font-weight: 400;
}

:where(body.site-standard) .sticky-alert .headline.hide {
    display: none;
}

:where(body.site-standard) .sticky-alert .hint {
    font-size: .8rem;
    font-weight: 300;
}

:where(body.site-standard) .sticky-alert .close-btn {
    position: absolute;
    top: -20px;
    left: 0;
    border-top-right-radius: 10px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    background-color: var(--site-surface);
    padding: 5px 10px;
}

:where(body.site-standard) .sticky-alert .close-btn .full {
    display: block;
}

:where(body.site-standard) .sticky-alert .close-btn .minmize {
    display: none;
}

:where(body.site-standard) .sticky-alert .close-btn.minmize .minmize {
    display: block;
}

:where(body.site-standard) .sticky-alert .close-btn.minmize .full {
    display: none;
}

:where(body.site-standard) .breadcrumb-custom {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

:where(body.site-standard) .breadcrumb-custom li {
    display: inline;
    font-size: 0.875rem;
}

:where(body.site-standard) .breadcrumb-custom li + li:before {
    content: ">";
    padding: 0 0.5rem;
    color: var(--site-text);
}

:where(body.site-standard) .breadcrumb-custom li a {
    color: #01b1c4 !important;
    text-decoration: none;
    background-color: transparent;
}

:where(body.site-standard) .breadcrumb-custom li a:hover {
    color: var(--site-text);
    text-decoration: underline;
}

:where(body.site-standard) .breadcrumb-custom li.active {
    color: var(--site-text);
}

:where(body.site-standard) .home-page .inner-section {
    max-width: 1000px;
}

:where(body.site-standard) .home-page section .section-headline {
    font-size: 1.3rem;
        font-weight: 700;
}

:where(body.site-standard) .home-page .azkar-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

:where(body.site-standard) .home-page .azkar-list .azkar-item {
    background-color: var(--site-surface) !important;
    margin-right: .5rem;
    margin-bottom: .5rem;
    color: var(--site-text);
    -webkit-box-flex-grow: 1;
    -moz-box-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
}

:where(body.site-standard) .home-page .azkar-list .azkar-item:first-child {
    margin-left: 0;
}


:where(body.site-standard) .game-page,
:where(body.site-standard) .leaderboard-page,
:where(body.site-standard) .share-page {
    max-width: 950px;
}

:where(body.site-standard) .game-page .game-box,
:where(body.site-standard) .game-page .top-game-box,
:where(body.site-standard) .leaderboard-page .leaderboard-box,
:where(body.site-standard) .share-page .share-box {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background-color: var(--site-surface) !important;
}

:where(body.site-standard) .game-page .game-box .challenge-by {
    font-size: 1.3rem !important;
    text-align: center;
}

:where(body.site-standard) .game-page .game-box .challenge-by span {
    color: #FA6200 !important;
    font-weight: 800;
}

:where(body.site-standard) .game-page .game-box .challenge-by b {
    font-size: 1.2rem !important;
}

:where(body.site-standard) .game-page .game-box .title {
    text-align: center;
}

:where(body.site-standard) .game-page .game-box .title h1 {
    font-size: 1.1rem !important;
    font-weight: 800;
}

:where(body.site-standard) .game-page .game-box .created-by {
    font-size: .8rem;
    text-align: center;
}

:where(body.site-standard) .game-page .game-box .image {
    text-align: center;
}

:where(body.site-standard) .game-page .game-box .image img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}

:where(body.site-standard) .game-page .game-box .description {
    text-align: center;
    font-size: 1rem;

}

:where(body.site-standard) .game-page .game-box .loading-box {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

:where(body.site-standard) .game-page .game-box .loading-box img {
    width: 50px;
    height: 50px;
}

:where(body.site-standard) .game-page .game-box .question-image img {
    max-width: 100%;
    max-height: 180px;
}

:where(body.site-standard) .game-page .game-box .question {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

:where(body.site-standard) .game-page .game-box .answers-list .btn-answer {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

:where(body.site-standard) .game-page .game-box .answers-list .btn-answer.correct-answer {
    animation: blink-green .5s infinite;
    border: 1px solid #28a745;
    color: var(--site-text) !important;
}

:where(body.site-standard) .game-page .game-box .answers-list .btn-answer.wrong-answer {
    animation: blink-wrong .5s infinite;
    border: 1px solid #dc3545;
    color: var(--site-text) !important;
}

@keyframes blink-green {

    0%,
    100% {
        background-color: #28a745;
        /* Green color */
    }

    50% {
        background-color: transparent;
    }
}

@keyframes blink-wrong {

    0%,
    100% {
        background-color: #dc3545;
        /* Red color */
    }

    50% {
        background-color: transparent;
    }
}


:where(body.site-standard) .game-page .game-box .instructions .hint {
    font-size: 1.4rem;
    font-weight: 700;
    color: #6F01FF;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    line-height: 2.3rem;
}

:where(body.site-standard) .game-page .game-box .instructions .hint b {
    color: #FA6200;
}

:where(body.site-standard) .game-page .game-box .instructions .countdown {
    font-size: 1.4rem;
    font-weight: 700;
    color: #FA6200;
}

:where(body.site-standard) .game-page .game-box .instructions .countdown #countdown-timer {
    font-size: 1.4rem;
}

:where(body.site-standard) .game-page .game-box section.instructions,
:where(body.site-standard) .game-page .game-box section.content,
:where(body.site-standard) .game-page .game-box section.loading {
    display: none;
}


:where(body.site-standard) .leaderboard-page .box {
    width: 100%;
    background-color: var(--site-surface);
}

:where(body.site-standard) .leaderboard-page .box-content .endGame-result {
    background-color: var(--site-surface);
}

:where(body.site-standard) .leaderboard-page .box-content .endGame-result .headline {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

:where(body.site-standard) .leaderboard-page .box-content .endGame-result .headline b {
    color: #FA6200;
}

:where(body.site-standard) .leaderboard-page .box-content .endGame-result .sub-headline {
    font-size: .9rem;
    text-align: center;
}

:where(body.site-standard) .leaderboard-page .box-content .leaderboard .main-headline {
    font-size: 1.2rem;
    font-weight: bold;
}

:where(body.site-standard) .leaderboard-page .box-content .leaderboard .leaderboard-list {
    padding: .7rem;
}

:where(body.site-standard) .leaderboard-page .box-content .leaderboard .leaderboard-item {
    padding-top: .1rem;
    padding-bottom: .1rem;
    border-radius: 10px;
}

:where(body.site-standard) .leaderboard-page .box-content .leaderboard .leaderboard-item:nth-child(odd) {
    background-color: var(--site-surface);
}

:where(body.site-standard) .leaderboard-page .box-content .leaderboard .leaderboard-item .sort {
    font-size: 1.3rem;
    font-weight: 700;
    color: #FA6200;
    text-align: center;
}

:where(body.site-standard) .leaderboard-page .box-content .leaderboard .leaderboard-item .userName {
    font-size: 1rem;
    padding-top: .2rem;
}

:where(body.site-standard) .leaderboard-page .box-content .leaderboard .leaderboard-item .title {
    font-size: .9rem;
    text-align: center;
    padding-top: .3rem;
}

:where(body.site-standard) .side-suggestion-box {
    padding: 1rem 1rem;
    border-radius: 10px;
    background-color: var(--site-surface);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

:where(body.site-standard) .side-suggestion-box .headline {
    font-size: 1.3rem;
    font-weight: 700;
}

:where(body.site-standard) .side-suggestion-box .suggest-item {
    border-bottom: 1px solid #DDDDDD;
    padding: .5rem 0;
}

:where(body.site-standard) .side-suggestion-box .suggest-item a {
    color: var(--site-text);
    text-decoration: none;
}

:where(body.site-standard) .side-suggestion-box .suggest-item .image img {
    width: 100%;
    border-radius: 4px;
}

:where(body.site-standard) .side-suggestion-box .suggest-item .title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2rem;
}

@font-face{font-family:Almarai;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/almarai-400.ttf) format("truetype")}
@font-face{font-family:Almarai;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/almarai-700.ttf) format("truetype")}
@font-face{font-family:Almarai;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/almarai-800.ttf) format("truetype")}
/* Shared frontend design. Keep feature rules scoped to their page class. */
/* Azkarna homepage only. Brand: #01B1C4. Bootstrap 4.5.3. */
.azkarna-home-page{--brand:#01b1c4;--brand-light:#64dbe5;--page:#0b1519;--surface:#111f25;--surface-2:#15262d;--ink:#eff5f5;--muted:#acbbc0;--line:#2b3c43;--gold:#c8ad73;--logo-image:url("../images/logo/primary-v1.png")}
html{scroll-behavior:smooth}
.azkarna-home-page{margin:0;background:var(--page);color:var(--ink);font-family:Almarai,Tahoma,Arial,sans-serif;font-size:16px;line-height:1.85;text-align:right}
.azkarna-home-page ::selection{background:var(--brand);color:#05232a}
.azkarna-home-page a{color:inherit;text-decoration:none}
.azkarna-home-page a:hover{color:var(--brand-light);text-decoration:none}
.azkarna-home-page button,.azkarna-home-page summary{font-family:inherit}
.azkarna-home-page button,.azkarna-home-page summary,.azkarna-home-page a{-webkit-tap-highlight-color:transparent}
.azkarna-home-page a:focus-visible,.azkarna-home-page button:focus-visible,.azkarna-home-page summary:focus-visible{outline:3px solid var(--brand-light);outline-offset:5px}
.azkarna-home-page button:focus:not(:focus-visible){outline:none}
.azkarna-home-page h1,.azkarna-home-page h2,.azkarna-home-page h3,.azkarna-home-page h4,.azkarna-home-page p{margin:0}
.azkarna-home-page h1,.azkarna-home-page h2,.azkarna-home-page h3,.azkarna-home-page h4{font-weight:800;line-height:1.5}
.azkarna-home-page .container{max-width:1160px;padding-left:24px;padding-right:24px}
.azkarna-home-page .row{margin-left:-12px;margin-right:-12px}
.azkarna-home-page .row>[class*="col-"]{padding-left:12px;padding-right:12px}
.azkarna-home-page .icon{width:24px;height:24px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.azkarna-home-page .icon-sm{width:18px;height:18px}
.azkarna-home-page .skip-link{position:absolute;top:-100px;right:20px;background:var(--brand);color:#05232a;padding:10px 18px;z-index:100}
.azkarna-home-page .skip-link:focus{top:12px}
.azkarna-home-page .site-header{border-bottom:1px solid rgba(172,187,192,.13);position:relative;z-index:5}
.azkarna-home-page .header-row{height:93px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.azkarna-home-page .brand{display:inline-flex;align-items:center;flex-shrink:0}
.azkarna-home-page .brand-image{position:relative;width:151px;height:43px}
.azkarna-home-page .brand-image>span{position:absolute;inset:0;width:100%;height:100%;background-image:var(--logo-image);background-size:contain;background-repeat:no-repeat;background-position:center}
.azkarna-home-page .logo-word{filter:brightness(0) invert(1);clip-path:inset(0 34% 0 0)}
.azkarna-home-page .logo-symbol{clip-path:inset(0 0 0 69%)}
.azkarna-home-page .desktop-nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:700}
.azkarna-home-page .desktop-nav a{padding:10px 0;color:#c8d4d7}
.azkarna-home-page .desktop-nav a:hover{color:var(--brand-light)}
.azkarna-home-page .header-actions{display:flex;align-items:center;gap:10px}
.azkarna-home-page .login-link{padding:9px 18px;border:1px solid var(--line);border-radius:9px;font-size:13px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.azkarna-home-page .login-link:hover{background:var(--surface-2)}
.azkarna-home-page .mobile-menu{display:none}
.azkarna-home-page .mobile-menu summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:9px;min-height:44px;padding:8px 10px;font-size:13px;cursor:pointer}
.azkarna-home-page .mobile-menu summary::-webkit-details-marker{display:none}
.azkarna-home-page .mobile-menu[open] summary{color:var(--brand-light);border-color:var(--brand)}
.azkarna-home-page .mobile-nav{position:absolute;left:24px;right:24px;top:79px;background:#15262d;border:1px solid var(--line);padding:12px;border-radius:12px;box-shadow:0 20px 50px #0005;display:grid}
.azkarna-home-page .mobile-nav a{padding:12px 14px;border-radius:7px;font-size:14px}
.azkarna-home-page .mobile-nav a:hover{background:var(--page)}
.azkarna-home-page .btn-brand{background:var(--brand);color:#04272e;font-weight:800;font-size:14px;border:1px solid var(--brand);border-radius:10px;padding:12px 18px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.6;transition:background .2s,transform .2s}
.azkarna-home-page .btn-brand:hover{background:#55d5e2;border-color:#55d5e2;color:#04272e;transform:translateY(-1px)}
.azkarna-home-page .btn-brand:focus{box-shadow:0 0 0 .2rem #64dbe540}
.azkarna-home-page .text-link{font-size:12px;color:#c0d3d8;display:inline-flex;align-items:center;gap:6px;min-height:28px}
.azkarna-home-page .text-link:hover{color:var(--brand-light)}
.azkarna-home-page .section{padding:70px 0;scroll-margin-top:22px}
.azkarna-home-page .section-heading{margin-bottom:27px}
.azkarna-home-page .section-heading h2{font-size:32px;letter-spacing:-.65px}
.azkarna-home-page .section-heading p{color:var(--muted);font-size:15px;margin-top:10px}
.azkarna-home-page .library-section{padding-bottom:53px}
.azkarna-home-page .library-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}
.azkarna-home-page .library-heading h2{font-size:28px}
.azkarna-home-page .library-heading .text-link{font-size:13px;min-height:44px;white-space:nowrap}
.azkarna-home-page .resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 35px;margin-top:17px}
.azkarna-home-page .resource-link{display:flex;align-items:center;gap:14px;padding:23px 0;border-bottom:1px solid #273941;min-width:0}
.azkarna-home-page .resource-icon{display:grid;place-items:center;width:42px;height:42px;background:#15272e;color:#a5cad3;border-radius:11px;flex-shrink:0}
.azkarna-home-page .resource-name{font-size:14px;font-weight:700;display:block}
.azkarna-home-page .resource-desc{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.azkarna-home-page .resource-link>.icon{margin-right:auto;color:#819aa3;width:17px;transition:transform .2s}
.azkarna-home-page .resource-link:hover>.icon{transform:translateX(-3px);color:var(--brand-light)}
.azkarna-home-page .resource-link:hover .resource-name{color:var(--brand-light)}
.azkarna-home-page .faq-section{border-top:1px solid #263940;padding-top:48px;padding-bottom:51px}
.azkarna-home-page .faq-heading h2{font-size:27px}
.azkarna-home-page .faq-heading p{font-size:13px;color:var(--muted);margin-top:10px}
.azkarna-home-page .faq-list details{border-bottom:1px solid #2b3c43}
.azkarna-home-page .faq-list summary{padding:17px 0;display:flex;align-items:center;justify-content:space-between;gap:15px;list-style:none;cursor:pointer;font-size:14px;font-weight:700;min-height:56px}
.azkarna-home-page .faq-list summary::-webkit-details-marker{display:none}
.azkarna-home-page .faq-list summary .icon{width:17px;height:17px;color:var(--brand-light);transition:transform .2s}
.azkarna-home-page .faq-list details[open] summary .icon{transform:rotate(45deg)}
.azkarna-home-page .faq-list details p{font-size:13px;color:var(--muted);line-height:1.95;margin:0;padding:0 0 20px 25px}
.azkarna-home-page .site-footer{background:#091217;border-top:1px solid #263940;padding:30px 0 23px}
.azkarna-home-page .footer-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.azkarna-home-page .footer-intro{display:flex;align-items:center;gap:25px}
.azkarna-home-page .footer-intro .brand-image{width:125px;height:36px}
.azkarna-home-page .footer-intro p{font-size:11px;color:var(--muted)}
.azkarna-home-page .social-links{display:flex;gap:7px}
.azkarna-home-page .social-link{min-width:44px;min-height:44px;display:grid;place-items:center;border:1px solid #293c45;border-radius:50%;color:#b4c8cd}
.azkarna-home-page .social-link .icon{width:18px;height:18px}
.azkarna-home-page .social-link:hover{color:var(--brand-light);border-color:var(--brand)}
.azkarna-home-page .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid #24343b;margin-top:25px;padding-top:19px;font-size:10px;color:var(--muted)}
.azkarna-home-page .legal-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.azkarna-home-page .legal-links a{min-height:30px;display:inline-flex;align-items:center}
@media(max-width:991.98px){.azkarna-home-page .desktop-nav{gap:20px;font-size:12px}
.azkarna-home-page .header-row{gap:18px}
.azkarna-home-page .section{padding:53px 0}
.azkarna-home-page .resource-grid{gap:0 20px}
.azkarna-home-page .resource-desc{font-size:10px}
.azkarna-home-page .footer-intro{gap:15px}
}
@media(max-width:767.98px){.azkarna-home-page .container{padding-left:20px;padding-right:20px}
.azkarna-home-page .header-row{height:78px;gap:12px}
.azkarna-home-page .brand-image{width:126px;height:36px}
.azkarna-home-page .desktop-nav{display:none}
.azkarna-home-page .mobile-menu{display:block}
.azkarna-home-page .header-actions{gap:8px}
.azkarna-home-page .login-link{font-size:11px;padding:8px 10px;min-height:42px}
.azkarna-home-page .login-link .icon{display:none}
.azkarna-home-page .mobile-menu summary{min-height:42px}
.azkarna-home-page .btn-brand{font-size:13px;min-height:48px;padding:12px 15px}
.azkarna-home-page .text-link{font-size:11px;min-height:30px}
.azkarna-home-page .section{padding:43px 0}
.azkarna-home-page .library-heading h2{font-size:23px}
.azkarna-home-page .library-heading .text-link{font-size:11px}
.azkarna-home-page .section-heading{margin-bottom:21px}
.azkarna-home-page .section-heading p{font-size:13px}
.azkarna-home-page .resource-grid{grid-template-columns:repeat(2,1fr);gap:0 22px;margin-top:0}
.azkarna-home-page .resource-link{gap:9px;padding:18px 0}
.azkarna-home-page .resource-icon{width:33px;height:33px;border-radius:9px}
.azkarna-home-page .resource-icon .icon{width:20px;height:20px}
.azkarna-home-page .resource-name{font-size:12px}
.azkarna-home-page .resource-desc{font-size:10px;line-height:1.65}
.azkarna-home-page .resource-link>.icon{display:none}
.azkarna-home-page .faq-heading{margin-bottom:20px}
.azkarna-home-page .faq-heading h2{font-size:24px}
.azkarna-home-page .faq-list summary{font-size:13px}
.azkarna-home-page .faq-list details p{font-size:12px}
.azkarna-home-page .footer-top{justify-content:center;text-align:center;gap:22px}
.azkarna-home-page .footer-intro{flex-direction:column;gap:10px}
.azkarna-home-page .footer-bottom{justify-content:center;text-align:center;gap:9px}
.azkarna-home-page .legal-links{justify-content:center;gap:17px}
.azkarna-home-page .site-footer{padding-top:27px}
.azkarna-home-page .mobile-nav{left:20px;right:20px;top:69px}
}
@media(max-width:359.98px){.azkarna-home-page .container{padding-left:16px;padding-right:16px}
.azkarna-home-page .brand-image{width:107px;height:30px}
.azkarna-home-page .header-row{gap:8px}
.azkarna-home-page .header-actions{gap:6px}
.azkarna-home-page .login-link{padding:8px;font-size:10px}
.azkarna-home-page .mobile-menu summary{padding:8px;gap:5px;font-size:11px}
.azkarna-home-page .mobile-menu summary .icon{width:18px}
.azkarna-home-page .resource-grid{gap:0 12px}
.azkarna-home-page .resource-link{gap:7px}
.azkarna-home-page .resource-name{font-size:11px}
.azkarna-home-page .resource-desc{font-size:10px}
.azkarna-home-page .library-heading{gap:6px}
.azkarna-home-page .library-heading h2{font-size:21px}
.azkarna-home-page .mobile-nav{left:16px;right:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.azkarna-home-page *,.azkarna-home-page *:before,.azkarna-home-page *:after{transition:none!important;animation:none!important}
}
.azkarna-home-page .home-priorities{padding:36px 0 0}
.azkarna-home-page .sadaqa-ribbon{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 30px;background:#10272d;border:1px solid #2c484f;border-radius:15px;scroll-margin-top:24px}
.azkarna-home-page .sadaqa-ribbon-copy{display:flex;align-items:center;gap:18px;min-width:0}
.azkarna-home-page .ribbon-icon{width:52px;height:52px;flex-shrink:0;display:grid;place-items:center;border:1px solid #365962;border-radius:14px;background:#15363d;color:var(--brand-light)}
.azkarna-home-page .ribbon-icon .icon{width:26px;height:26px}
.azkarna-home-page .sadaqa-ribbon h2{font-size:25px;line-height:1.55;letter-spacing:-.35px;margin:0 0 5px}
.azkarna-home-page .sadaqa-ribbon p{font-size:14px;line-height:1.85;color:var(--muted)}
.azkarna-home-page .sadaqa-ribbon>.btn-brand{flex-shrink:0;min-width:185px;justify-content:space-between}
.azkarna-home-page .personal-journey{padding:48px 0 12px;scroll-margin-top:24px}
.azkarna-home-page .journey-letter-layout{align-items:flex-start}
.azkarna-home-page .journey-introduction{padding:26px 2px 0 30px}
.azkarna-home-page .journey-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-bottom:17px}
.azkarna-home-page .journey-kicker .icon{color:var(--brand-light)}
.azkarna-home-page .journey-time{display:block;font-size:51px;line-height:1.4;color:var(--brand-light);letter-spacing:-1px}
.azkarna-home-page .journey-purpose{display:block;font-size:28px;line-height:1.65;letter-spacing:-.5px}
.azkarna-home-page .journey-introduction>p{margin-top:18px;max-width:275px;font-size:14px;line-height:2;color:var(--muted)}
.azkarna-home-page .personal-message{position:relative;padding:34px 36px 27px;border:1px solid #3a5860;border-radius:18px;background:#14242a;box-shadow:0 15px 40px #00000014}
.azkarna-home-page .personal-message:before{content:"";position:absolute;top:-1px;right:35px;width:55px;height:2px;background:var(--brand);border-radius:2px}
.azkarna-home-page .personal-message-body{max-width:560px;margin:0 auto}
.azkarna-home-page .personal-message-body p{font-size:16px;line-height:2.1;color:#d9e4e7;margin:0 0 22px;text-align:right}
.azkarna-home-page .personal-message-body p:last-child{margin-bottom:0}
.azkarna-home-page .personal-message-body .message-hook{font-size:19px;font-weight:800;line-height:1.95;color:var(--ink)}
.azkarna-home-page .message-hook span{color:var(--brand-light)}
.azkarna-home-page .personal-message-footer{max-width:560px;margin:28px auto 0;padding-top:23px;border-top:1px solid #30474f;display:flex;align-items:center;justify-content:space-between;gap:20px}
.azkarna-home-page .message-signature{font-size:12px;color:var(--muted);line-height:1.8;margin:0;white-space:nowrap}
.azkarna-home-page .personal-message-footer .btn-brand{min-width:235px;justify-content:space-between}
@media(max-width:991.98px){.azkarna-home-page .sadaqa-ribbon{padding:23px 25px;gap:20px}
.azkarna-home-page .sadaqa-ribbon h2{font-size:23px}
.azkarna-home-page .sadaqa-ribbon p{font-size:13px}
.azkarna-home-page .journey-introduction{padding:0 0 24px}
.azkarna-home-page .journey-kicker{margin-bottom:8px}
.azkarna-home-page .journey-time{display:inline;font-size:33px;letter-spacing:-.5px}
.azkarna-home-page .journey-purpose{display:inline;font-size:28px;letter-spacing:-.5px}
.azkarna-home-page .journey-purpose:before{content:" "}
.azkarna-home-page .journey-introduction>p{max-width:none;margin-top:10px;font-size:13px}
.azkarna-home-page .personal-journey{padding-top:33px}
.azkarna-home-page .personal-message{max-width:780px;padding:28px 32px 25px}
.azkarna-home-page .personal-message-body,.azkarna-home-page .personal-message-footer{max-width:none}
}
@media(max-width:767.98px){.azkarna-home-page .home-priorities{padding:23px 0 5px}
.azkarna-home-page .sadaqa-ribbon{display:block;padding:20px;border-radius:13px}
.azkarna-home-page .sadaqa-ribbon-copy{gap:12px;align-items:flex-start}
.azkarna-home-page .ribbon-icon{width:38px;height:38px;border-radius:11px;margin-top:3px}
.azkarna-home-page .ribbon-icon .icon{width:21px;height:21px}
.azkarna-home-page .sadaqa-ribbon h2{font-size:20px;margin-bottom:6px;line-height:1.6}
.azkarna-home-page .sadaqa-ribbon p{font-size:12px;line-height:1.9}
.azkarna-home-page .sadaqa-ribbon>.btn-brand{margin-top:18px;width:100%;min-width:0;min-height:48px}
.azkarna-home-page .personal-journey{padding:30px 0 24px}
.azkarna-home-page .journey-introduction{padding-bottom:18px}
.azkarna-home-page .journey-kicker{font-size:11px;margin-bottom:7px}
.azkarna-home-page .journey-time{font-size:29px;line-height:1.55}
.azkarna-home-page .journey-purpose{font-size:24px;line-height:1.55}
.azkarna-home-page .journey-introduction>p{font-size:12px;line-height:1.9;margin-top:9px}
.azkarna-home-page .personal-message{padding:23px 22px 21px;border-radius:14px}
.azkarna-home-page .personal-message:before{right:22px;width:45px}
.azkarna-home-page .personal-message-body p{font-size:14px;line-height:2;margin-bottom:19px}
.azkarna-home-page .personal-message-body .message-hook{font-size:16px;line-height:1.95}
.azkarna-home-page .personal-message-footer{margin-top:23px;padding-top:19px;flex-direction:column-reverse;align-items:stretch;gap:15px}
.azkarna-home-page .personal-message-footer .btn-brand{width:100%;min-width:0;min-height:48px}
.azkarna-home-page .message-signature{font-size:11px;white-space:normal}
}
@media(max-width:359.98px){.azkarna-home-page .sadaqa-ribbon{padding:18px}
.azkarna-home-page .sadaqa-ribbon h2{font-size:18px}
.azkarna-home-page .ribbon-icon{width:32px;height:32px;border-radius:9px}
.azkarna-home-page .sadaqa-ribbon-copy{gap:9px}
.azkarna-home-page .journey-time{font-size:27px}
.azkarna-home-page .journey-purpose{font-size:22px}
.azkarna-home-page .personal-message{padding:22px 18px 20px}
}

.azkarna-home-page .azkar-section,.azkarna-home-page .articles-section{padding-top:28px;border-top:1px solid var(--line)}
.azkarna-home-page .azkar-section .section-heading h2,.azkarna-home-page .articles-section .section-heading h2{font-size:25px}
.azkarna-home-page .azkar-list{display:flex;flex-wrap:wrap;gap:12px}
.azkarna-home-page .azkar-item{display:inline-flex;align-items:center;padding:10px 16px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:13px}
.azkarna-home-page .azkar-item:hover{border-color:var(--brand);color:var(--brand-light)}
.azkarna-home-page .articles-list{row-gap:24px}
.azkarna-home-page .article-item-outer{display:flex}
.azkarna-home-page .article-item{display:flex;flex-direction:column;overflow:hidden;width:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.azkarna-home-page .article-item:hover{border-color:var(--brand)}
.azkarna-home-page .article-image{width:100%;height:180px;object-fit:cover}
.azkarna-home-page .article-copy{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.azkarna-home-page .article-category{color:var(--brand-light);font-size:11px}
.azkarna-home-page .article-copy h3{font-size:17px;line-height:1.8;color:var(--ink);overflow-wrap:anywhere}
.azkarna-home-page .article-read{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:auto;padding-top:9px}
@media(max-width:767.98px){.azkarna-home-page .azkar-item{font-size:12px}.azkarna-home-page .article-copy h3{font-size:16px}.azkarna-home-page .articles-section .section-heading h2{font-size:21px}}

/* The three priority services have distinct, accessible surfaces. */
.azkarna-home-page .home-priorities>.container{display:flex;flex-direction:column;gap:28px}
.azkarna-home-page .million-shield-promo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:36px;padding:44px;border:1px solid #9b8850;border-radius:20px;background:radial-gradient(ellipse at left top,#236548 0,transparent 65%),#103d2b;overflow:hidden;scroll-margin-top:24px}
.azkarna-home-page .shield-kicker{display:inline-block;color:#e6ce91;font-size:12px;font-weight:700;margin-bottom:14px;letter-spacing:.3px}
.azkarna-home-page .million-shield-promo h1{font-size:34px;line-height:1.65;color:#fff9e9}
.azkarna-home-page .shield-promise{font-size:22px;font-weight:800;color:#f1dcaa;margin-top:8px}
.azkarna-home-page .shield-invitation{font-size:16px;color:#fff9e9;margin-top:20px}
.azkarna-home-page .shield-detail{font-size:14px;line-height:2;color:#d7e7dc;margin-top:9px;max-width:600px}
.azkarna-home-page .shield-cta{margin-top:26px;background:#eed69b;border-color:#eed69b;color:#163c2b;gap:18px}
.azkarna-home-page .shield-cta:hover{background:#ffe8b1;border-color:#ffe8b1;color:#102d20}
.azkarna-home-page .shield-promo-art{position:relative;min-height:270px;display:grid;place-items:center;isolation:isolate}
.azkarna-home-page .shield-grid{position:absolute;inset:0 5px;background-color:#397555;background-image:linear-gradient(#d9c17a55 1px,transparent 1px),linear-gradient(90deg,#d9c17a55 1px,transparent 1px);background-size:22px 22px;clip-path:polygon(50% 0,96% 15%,93% 59%,78% 81%,50% 100%,22% 81%,7% 59%,4% 15%);box-shadow:inset 0 0 80px #09271f;z-index:-1}
.azkarna-home-page .shield-art-label{padding:14px 22px;text-align:center;color:#fff8df;background:#103d2be8;border:1px solid #c8ad7370;border-radius:12px;font-size:17px;line-height:1.9}
.azkarna-home-page .shield-art-label strong{font-size:30px;color:#eed69b}
.azkarna-home-page .sadaqa-ribbon{background:#f2eee5;border-color:#d8d0c0;box-shadow:0 12px 30px #00000014;padding:30px}
.azkarna-home-page .sadaqa-ribbon h2{color:#16353c}
.azkarna-home-page .sadaqa-ribbon p{color:#4b6267}
.azkarna-home-page .sadaqa-ribbon .ribbon-icon{background:#e0ebe7;color:#17666d;border-color:#bdd3cb}
.azkarna-home-page .personal-journey{padding:34px;border:1px solid #354d65;border-radius:18px;background:#111f33}
.azkarna-home-page .personal-message{background:#192b41;border-color:#425c73}
.azkarna-home-page .personal-message-footer{border-color:#425c73}
@media(max-width:991.98px){.azkarna-home-page .million-shield-promo{grid-template-columns:minmax(0,1fr) 200px;gap:24px;padding:32px}.azkarna-home-page .shield-promo-art{min-height:230px}.azkarna-home-page .million-shield-promo h1{font-size:28px}.azkarna-home-page .shield-promise{font-size:20px}.azkarna-home-page .personal-journey{padding:28px}}
@media(max-width:767.98px){.azkarna-home-page .home-priorities>.container{gap:20px}.azkarna-home-page .million-shield-promo{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:22px;border-radius:15px}.azkarna-home-page .million-shield-promo h1{font-size:26px}.azkarna-home-page .shield-promise{font-size:19px}.azkarna-home-page .shield-invitation{font-size:14px;margin-top:16px}.azkarna-home-page .shield-detail{font-size:13px}.azkarna-home-page .shield-cta{display:flex;width:100%;margin-top:22px;gap:10px}.azkarna-home-page .shield-promo-art{min-height:165px;width:165px;margin:auto}.azkarna-home-page .shield-art-label{font-size:13px;padding:8px 14px}.azkarna-home-page .shield-art-label strong{font-size:22px}.azkarna-home-page .sadaqa-ribbon{padding:22px 20px}.azkarna-home-page .personal-journey{padding:22px 18px}.azkarna-home-page .personal-message{padding:22px 18px}}

/* Campaign activity: decorative motion, without simulated participant counts. */
.azkarna-home-page .shield-promo-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:18px}
.azkarna-home-page .shield-promo-meta .shield-kicker{margin-bottom:0}
.azkarna-home-page .shield-live{display:inline-flex;align-items:center;gap:8px;border:1px solid #90d8ad55;background:#062f246b;color:#e0f7e6;border-radius:30px;padding:4px 11px;font-size:11px;font-weight:700}
.azkarna-home-page .shield-live-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#a6efb5;flex-shrink:0}
.azkarna-home-page .shield-live-dot:after{content:"";position:absolute;inset:-4px;border:1px solid #a6efb5;border-radius:50%;animation:shield-live-pulse 2.6s ease-out infinite}
.azkarna-home-page .million-shield-promo h1{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.azkarna-home-page .shield-title-symbols{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.azkarna-home-page .saudi-flag{display:inline-block;width:42px;height:28px;object-fit:contain;vertical-align:middle;flex-shrink:0;filter:drop-shadow(0 2px 3px #0003)}
.azkarna-home-page .shield-detail .saudi-flag{width:24px;height:16px;margin-inline-start:5px}
.azkarna-home-page .shield-grid:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffe7a42b 45%,#fff5ce44 50%,transparent 70%);transform:translateX(120%);animation:shield-grid-shimmer 7s ease-in-out infinite}
@keyframes shield-live-pulse{0%{transform:scale(.65);opacity:.7}80%,100%{transform:scale(1.7);opacity:0}}
@keyframes shield-grid-shimmer{0%,30%{transform:translateX(120%)}75%,100%{transform:translateX(-120%)}}
@media(max-width:767.98px){.azkarna-home-page .shield-promo-meta{gap:10px;margin-bottom:15px}.azkarna-home-page .shield-live{font-size:10px}.azkarna-home-page .million-shield-promo h1{gap:7px 10px}.azkarna-home-page .shield-title-symbols{gap:7px}.azkarna-home-page .shield-title-symbols .saudi-flag{width:33px;height:22px}}
@media(prefers-reduced-motion:reduce){.azkarna-home-page .shield-live-dot:after,.azkarna-home-page .shield-grid:after{animation:none;opacity:0}}

/* A gold highlight travels around the campaign perimeter. */
@property --shield-border-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.azkarna-home-page .million-shield-promo:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--shield-border-angle),transparent 0deg,transparent 265deg,#c8ad7366 300deg,#ffe9ad 330deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:shield-border-orbit 6s linear infinite}
@keyframes shield-border-orbit{to{--shield-border-angle:360deg}}
@media(prefers-reduced-motion:reduce){.azkarna-home-page .million-shield-promo:before{animation:none;opacity:.6}}

/* Compact community strip, visually attached to the campaign. */
.azkarna-home-page .shield-community{margin-top:-12px;padding:0 6px 3px;min-width:0}
.azkarna-home-page .community-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;min-height:28px}
.azkarna-home-page .community-heading h2{font-size:12px;font-weight:700;line-height:1.8;color:#c8d9cd}
.azkarna-home-page .community-spark{color:#eed69b;margin-inline-end:6px}
.azkarna-home-page .community-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.azkarna-home-page .community-card{position:relative;display:block;min-width:0;overflow:hidden;background:#10231e;border:1px solid #29453a;border-radius:12px;padding:12px 14px;transition:border-color .25s,background .25s}
.azkarna-home-page .community-card:hover{border-color:#8c8054;background:#142b23;color:inherit}
.azkarna-home-page .community-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;min-width:0}
.azkarna-home-page .community-name{font-size:11px;font-weight:700;color:#e4ede7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.azkarna-home-page .community-kind{font-size:9px;color:#bfae7c;white-space:nowrap;flex-shrink:0}
.azkarna-home-page .community-message{font-size:11px;line-height:1.9;color:#b8cac0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;height:42px}
.azkarna-home-page .community-card.community-enter{animation:community-enter .65s cubic-bezier(.2,.7,.3,1) both}
.azkarna-home-page .community-card.community-enter:after{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,#eed69b,transparent);animation:community-glint 1.2s ease-out forwards;pointer-events:none}
@keyframes community-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes community-glint{from{opacity:1;transform:translateX(70%)}to{opacity:0;transform:translateX(-70%)}}
@media(max-width:767.98px){.azkarna-home-page .shield-community{margin-top:-6px;padding-inline:0}.azkarna-home-page .community-cards{grid-template-columns:minmax(0,1fr)}.azkarna-home-page .community-card:nth-child(n+2){display:none}.azkarna-home-page .community-heading h2{font-size:11px}.azkarna-home-page .community-card{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.azkarna-home-page .community-card.community-enter,.azkarna-home-page .community-card.community-enter:after{animation:none;transform:none}}

.azkarna-home-page .community-name{flex:1;unicode-bidi:plaintext}
.azkarna-home-page .memorial-section{scroll-margin-top:24px;padding:34px 30px;border:1px solid #29453a;border-radius:18px;background:#10231e;color:#e4ede7;box-shadow:0 12px 30px #00000014}
.azkarna-home-page .memorial-heading{text-align:center;max-width:650px;margin:0 auto 26px}
.azkarna-home-page .memorial-kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#cfb77d;margin-bottom:10px}
.azkarna-home-page .memorial-heading h2{font-size:28px;line-height:1.6;margin:0 0 10px;letter-spacing:-.5px}
.azkarna-home-page .memorial-heading p{font-size:14px;line-height:1.9;color:#b8cac0;margin:0}
.azkarna-home-page .memorial-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.azkarna-home-page .memorial-card{display:flex;flex-direction:column;min-width:0;padding:24px 22px;background:#172f27;border:1px solid #365346;border-radius:13px;color:#e4ede7;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.azkarna-home-page .memorial-card:hover{color:#e4ede7;transform:translateY(-3px);border-color:#bfae7c;box-shadow:0 8px 20px #00000026}
.azkarna-home-page .memorial-card:focus-visible{outline:3px solid #d9c28b;outline-offset:4px}
.azkarna-home-page .memorial-card-label{font-size:11px;color:#cfb77d;margin-bottom:12px}
.azkarna-home-page .memorial-card h3{font-size:19px;font-weight:700;line-height:1.8;margin:0 0 12px;overflow-wrap:anywhere}
.azkarna-home-page .memorial-card p{font-size:14px;line-height:2;color:#b8cac0;margin:0 0 22px}
.azkarna-home-page .memorial-card-link{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#d9c28b;font-size:13px;font-weight:700;margin-top:auto;padding-top:14px;border-top:1px solid #365346}
.azkarna-home-page .memorial-invitation{text-align:center;margin-top:28px;padding-top:24px;border-top:1px solid #29453a}
.azkarna-home-page .memorial-invitation p{font-size:17px;line-height:1.9;font-weight:700;margin:0 0 15px}
.azkarna-home-page .memorial-invitation .btn{display:inline-flex;justify-content:center;gap:16px;white-space:normal;line-height:1.8}
.azkarna-home-page .memorial-invitation>span{display:block;font-size:12px;color:#b8cac0;margin-top:12px;line-height:1.9}
@media(max-width:991.98px){.azkarna-home-page .memorial-section{padding:28px 22px}.azkarna-home-page .memorial-cards{gap:12px}.azkarna-home-page .memorial-card{padding:20px 16px}.azkarna-home-page .memorial-card h3{font-size:17px}}
@media(max-width:767.98px){.azkarna-home-page .memorial-section{padding:26px 18px;border-radius:15px}.azkarna-home-page .memorial-heading h2{font-size:23px}.azkarna-home-page .memorial-heading p{font-size:13px}.azkarna-home-page .memorial-cards{grid-template-columns:minmax(0,1fr)}.azkarna-home-page .memorial-card{padding:20px}.azkarna-home-page .memorial-invitation p{font-size:15px}.azkarna-home-page .memorial-invitation .btn{width:100%;font-size:14px}}
@media(prefers-reduced-motion:reduce){.azkarna-home-page .memorial-card{transition:none}.azkarna-home-page .memorial-card:hover{transform:none}}
.azkarna-home-page .community-card.community-leave{animation:community-leave .22s ease-in both;pointer-events:none}
@keyframes community-leave{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.azkarna-home-page .community-card.community-leave{animation:none;transform:none}}

.azkarna-home-page .memorial-card[hidden],.azkarna-home-page .memorial-pagination[hidden]{display:none}
.azkarna-home-page .memorial-card{padding:20px;gap:0}
.azkarna-home-page .memorial-card-label{margin-bottom:6px}
.azkarna-home-page .memorial-card h3{height:1.8em;min-height:0;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.azkarna-home-page .memorial-card .memorial-prayer{min-height:0;margin-bottom:14px}
.azkarna-home-page .memorial-card-link{padding-top:10px}
.azkarna-home-page .memorial-pagination{display:flex;justify-content:center;gap:2px;margin:10px auto 0}
.azkarna-home-page .memorial-dot{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;background:transparent;cursor:pointer}
.azkarna-home-page .memorial-dot span{display:block;width:7px;height:7px;border-radius:50%;background:#61776b;transition:width .2s,background .2s}
.azkarna-home-page .memorial-dot[aria-current="true"] span{width:22px;border-radius:8px;background:#d9c28b}
.azkarna-home-page .memorial-dot:focus-visible{outline:2px solid #d9c28b;outline-offset:0;border-radius:8px}
.azkarna-home-page .memorial-cards.memorial-leaving{animation:memorial-out .22s ease-in both;pointer-events:none}
.azkarna-home-page .memorial-cards.memorial-entering{animation:memorial-in .5s ease-out both}
@keyframes memorial-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
@keyframes memorial-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.azkarna-home-page .memorial-cards.memorial-leaving,.azkarna-home-page .memorial-cards.memorial-entering{animation:none;transform:none}}

/* The community belongs to the campaign, inside its single gold frame. */
.azkarna-home-page .million-shield-promo{row-gap:28px}
.azkarna-home-page .million-shield-promo>.shield-community{grid-column:1 / -1;margin:0;padding:19px 0 0;border-top:1px solid #c8ad7345;width:100%;min-width:0}
.azkarna-home-page .million-shield-promo .community-heading{margin-bottom:10px;min-height:0}
.azkarna-home-page .million-shield-promo .community-heading h2{color:#e4d8b5;font-size:11px}
.azkarna-home-page .million-shield-promo .community-card{background:#ffffff06;border-color:#c8ad733d;border-radius:9px;padding:11px 13px;box-shadow:none}
.azkarna-home-page .million-shield-promo .community-card:hover{background:#ffffff0c;border-color:#c8ad7380}
.azkarna-home-page .million-shield-promo .community-name{color:#fff4d6}
.azkarna-home-page .million-shield-promo .community-message{color:#d0e0d4}
.azkarna-home-page .million-shield-promo .community-kind{color:#d4c496}
@media(max-width:767.98px){.azkarna-home-page .million-shield-promo{row-gap:20px}.azkarna-home-page .million-shield-promo>.shield-community{padding-top:16px}.azkarna-home-page .million-shield-promo .community-heading h2{font-size:10px}.azkarna-home-page .million-shield-promo .community-card{padding:10px 12px}}

/* Blog */

    body.site-dark.blog-page {
        background:
            radial-gradient(circle at top right, rgba(1, 177, 196, 0.10), transparent 28%),
            radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 22%),
            #07131a;
        color: #dce7ee;
    }

    .breadcrumb-custom li.active {
        color: #FFFFFF!important;
    }

    .azk-blog-page,
    .azk-blog-page a,
    .azk-blog-page p,
    .azk-blog-page li,
    .azk-blog-page span,
    .azk-blog-page div {
        word-break: break-word;
    }

    .azk-blog-page .inner-page {
        max-width: 1260px;
        padding-top: 28px;
        padding-bottom: 72px;
    }
    .azk-blog-page.article .inner-page {
        max-width: 940px;
    }

    .azk-blog-page .breadcrumbs,
    .azk-blog-page .breadcrumb,
    .azk-blog-page .breadcrumb a,
    .azk-blog-page .breadcrumb-item,
    .azk-blog-page .breadcrumb-item+.breadcrumb-item::before {
        color: #8da6b5 !important;
    }

    .azk-blog-page a {
        text-decoration: none;
    }

    .azk-hero-box,
    .azk-card,
    .azk-side-card,
    .azk-article-shell,
    .azk-related-card,
    .azk-article-card {
        background: linear-gradient(180deg, rgba(11, 25, 34, 0.97) 0%, rgba(8, 20, 28, 0.96) 100%);
        border: 1px solid rgba(116, 156, 176, 0.16);
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
    }

    .azk-hero-box,
    .azk-card,
    .azk-side-card,
    .azk-article-shell,
    .azk-related-card {
        border-radius: 28px;
    }

    .azk-hero-box {
        padding: 28px;
        margin-bottom: 22px;
    }

    .azk-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        padding: 8px 14px;
        background: rgba(1, 177, 196, 0.12);
        border: 1px solid rgba(1, 177, 196, 0.22);
        color: #8be3ee;
        font-size: 0.92rem;
        font-weight: 800;
        margin-bottom: 14px;
    }

    .azk-hero-box h1 {
        margin: 0;
        color: #f7fbfd;
        font-size: clamp(1.7rem, 3vw, 2.5rem);
        font-weight: 900;
        line-height: 1.45;
    }

    .azk-hero-box p {
        margin: 14px 0 0;
        color: #a8c0cc;
        line-height: 2;
        max-width: 820px;
    }

    .azk-content-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(290px, .85fr);
        gap: 20px;
        align-items: start;
    }

    .azk-side-stack {
        display: grid;
        gap: 18px;
    }

    .azk-side-card {
        padding: 18px;
    }

    .azk-side-card .headline {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.05rem;
        font-weight: 800;
        color: #f7fbfd;
        margin-bottom: 14px;
    }

    .azk-link-list {
        display: grid;
        gap: 10px;
    }

    .azk-link-list a {
        display: block;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(116, 156, 176, 0.10);
        color: #cfe2ec;
        font-size: 0.95rem;
        line-height: 1.8;
        transition: all 0.2s ease;
    }

    .azk-link-list a:hover {
        background: rgba(1, 177, 196, 0.12);
        border-color: rgba(1, 177, 196, 0.24);
        color: #ffffff;
        transform: translateY(-1px);
    }

    .azk-articles-list {
        display: grid;
        gap: 18px;
    }

    .azk-article-card {
        display: grid;
        grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
        gap: 20px;
        padding: 18px;
        border-radius: 24px;
    }

    .azk-article-card .thumb {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 20px;
        background: #0d1c25 center center / cover no-repeat;
        min-height: 220px;
    }

    .azk-article-card .thumb::after {
        content: "";
        display: block;
        padding-top: 68%;
    }

    .azk-article-card .content {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .azk-pill-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(1, 177, 196, 0.12);
        border: 1px solid rgba(1, 177, 196, 0.22);
        color: #8be3ee;
        font-size: 0.88rem;
        font-weight: 800;
    }

    .azk-article-card .title h2 {
        font-size: 1.35rem;
        line-height: 1.7;
        font-weight: 900;
        margin: 12px 0 10px;
    }

    .azk-article-card .title a,
    .azk-related-item .title,
    .azk-related-item .title a {
        color: #f7fbfd;
    }

    .azk-article-card .title a:hover,
    .azk-related-item:hover .title {
        color: #8be3ee;
    }

    .azk-article-card .time,
    .azk-related-item .time,
    .azk-article-meta,
    .azk-article-meta .meta-chip {
        color: #8da6b5;
        font-size: 0.82rem;
    }

    .azk-article-card .excerpt {
        color: #aec2cd;
        font-size: 0.98rem;
        line-height: 2;
        margin-bottom: 16px;
    }

    .azk-article-card .footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        justify-content: space-between;
        margin-top: auto;
    }

    .azk-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 999px;
        padding: 11px 18px;
        background: linear-gradient(90deg, #01b1c4 0%, #0694a6 100%);
        color: #fff !important;
        font-weight: 800;
        box-shadow: 0 12px 22px rgba(1, 177, 196, 0.22);
        transition: transform .2s ease;
    }

    .azk-btn-primary:hover {
        transform: translateY(-1px);
    }

    .azk-share-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-end;
    }

    .azk-share-buttons a,
    .azk-share-box .share-button {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(116, 156, 176, 0.14);
        color: #d6e8f1 !important;
        transition: all 0.2s ease;
    }

    .azk-share-buttons a:hover,
    .azk-share-box .share-button:hover {
        border-color: rgba(1, 177, 196, 0.28);
        background: rgba(1, 177, 196, 0.12);
        color: #ffffff !important;
    }

    .azk-pagination {
        margin-top: 24px;
    }

    .azk-pagination .page-link {
        background: rgba(11, 25, 34, 0.96);
        border: 1px solid rgba(116, 156, 176, 0.16);
        color: #cde3ee;
        border-radius: 12px !important;
        margin: 0 4px;
    }

    .azk-pagination .page-item.active .page-link {
        background: rgba(1, 177, 196, 0.18);
        border-color: rgba(1, 177, 196, 0.30);
        color: #ffffff;
    }

    .azk-pagination .page-item.disabled .page-link {
        background: rgba(255, 255, 255, 0.03);
        color: #6f8794;
    }

    .azk-article-shell {
        max-width: 940px;
        margin: 0 auto;
        overflow: hidden;
    }

    .azk-article-head {
        padding: 28px 28px 0;
    }

    .azk-article-title {
        color: #f7fbfd;
        font-size: clamp(1.9rem, 3vw, 2.9rem);
        line-height: 1.45;
        font-weight: 900;
        margin: 16px 0 12px;
    }

    .azk-article-excerpt {
        color: #a8c0cc;
        line-height: 2;
        font-size: 1.04rem;
        margin: 0 0 18px;
    }

    .azk-article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 22px;
    }

    .azk-article-meta .meta-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(116, 156, 176, 0.12);
        border-radius: 999px;
        padding: 7px 10px;
    }

    .azk-article-media {
        margin: 0 28px;
        border-radius: 24px;
        overflow: hidden;
        background: #0d1c25;
        border: 1px solid rgba(116, 156, 176, 0.12);
    }

    .azk-article-media img {
        width: 100%;
        height: min(48vw, 440px);
        min-height: 250px;
        object-fit: cover;
        display: block;
    }

    .azk-article-main {
        padding: 24px 28px 28px;
    }

    .azk-share-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(116, 156, 176, 0.12);
        margin-bottom: 18px;
    }

    .azk-share-box .share-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #f7fbfd;
        font-size: 1rem;
        font-weight: 800;
    }

    .azk-share-box .buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .azk-toc-inline-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(17, 37, 48, 0.96) 0%, rgba(11, 25, 34, 0.96) 100%);
        border: 1px solid rgba(116, 156, 176, 0.16);
        margin-bottom: 18px;
        cursor: pointer;
    }

    .azk-toc-inline-trigger .label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #f7fbfd;
        font-weight: 800;
    }

    .azk-toc-inline-trigger .sub {
        color: #97b0bd;
        font-size: 0.92rem;
    }

    .azk-toc-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: min(380px, 100%);
        height: 100vh;
        background: rgba(7, 19, 26, 0.98);
        border-left: 1px solid rgba(116, 156, 176, 0.16);
        box-shadow: -18px 0 60px rgba(0, 0, 0, 0.35);
        z-index: 1045;
        transform: translateX(100%);
        transition: transform .25s ease;
        display: flex;
        flex-direction: column;
    }

    .azk-toc-drawer.is-open {
        transform: translateX(0);
    }

    .azk-toc-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.48);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: all .25s ease;
    }

    .azk-toc-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .azk-toc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 20px 20px 14px;
        border-bottom: 1px solid rgba(116, 156, 176, 0.12);
    }

    .azk-toc-head h2 {
        margin: 0;
        color: #f7fbfd;
        font-size: 1.08rem;
        font-weight: 900;
    }

    .azk-toc-close {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        color: #e5f3f8;
    }

    .azk-toc-body {
        padding: 16px 18px 24px;
        overflow: auto;
    }

    .azk-toc-list {
        display: grid;
        gap: 10px;
    }

    .azk-toc-link {
        display: block;
        padding: 11px 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(116, 156, 176, 0.10);
        color: #d4e7ef;
        line-height: 1.8;
        transition: all .2s ease;
    }

    .azk-toc-link:hover,
    .azk-toc-link.is-active {
        background: rgba(1, 177, 196, 0.12);
        border-color: rgba(1, 177, 196, 0.24);
        color: #ffffff;
    }

    .azk-toc-link.level-3 {
        margin-right: 18px;
        color: #a3bac6;
        font-size: 0.95rem;
    }

    .azk-article-body {
        font-size: 1.08rem;
        line-height: 2.15;
        color: #dbe7ee;
    }

    .azk-article-body>*:first-child {
        margin-top: 0;
    }

    .azk-article-body>*:last-child {
        margin-bottom: 0;
    }

    .azk-article-body p {
        margin: 0 0 18px;
        line-height: 2.15;
        font-size: 1.08rem;
        color: var(--text-soft);
        text-align: justify;
        text-align-last: right;
        margin-bottom: 18px;
    }

    .azk-article-body h2 {
        font-size: 1.72rem;
        line-height: 1.55;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: var(--text);
        margin: 38px 0 16px;
    }

    .azk-article-body h3 {
        font-size: 1.28rem;
        line-height: 1.7;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: var(--text);
        margin: 30px 0 14px;
    }

    .azk-article-body h2,
    .azk-article-body h3 {
        position: relative;
        padding-bottom: 10px;
    }

    .azk-article-body h2::after,
    .azk-article-body h3::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        bottom: 0;
        width: 56px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, #2563eb, #22c55e);
    }

    .azk-article-body ul,
    .azk-article-body ol {
        margin: 0 0 20px;
        padding-right: 1.35rem;
        line-height: 2.05;
    }

    .azk-article-body li {
        margin-bottom: 10px;
        color: var(--text-soft);
    }

    .azk-article-body li::marker {
        color: var(--primary);
    }

    .azk-article-body strong {
        color: var(--text);
        font-weight: 800;
    }

    .azk-article-body a {
        color: #93c5fd;
    text-decoration: underline;
    text-underline-offset: 3px;
    }

    .azk-article-body blockquote {
        margin: 1.5rem 0;
        padding: 1rem 1.25rem;
        background: rgba(255, 255, 255, 0.04);
        border-inline-start: 4px solid #2563eb;
        border-radius: 14px;
    }

    .azk-article-body .note-box {
        background: #111827;
        border: 1px solid #eddcbe;
        border-radius: 20px;
        padding: 18px 20px;
        margin: 26px 0;
        line-height: 2;
    }

    .azk-article-body .inline-image {
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-soft);
        margin: 30px 0;
    }

    .azk-article-body .inline-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .azk-article-body .inline-image .caption {
        padding: 12px 16px;
        font-size: .92rem;
        line-height: 1.9;
        color: var(--muted);
        background: #111827;
        border-top: 1px solid rgb(255 255 255 / 8%);
    }



    .azk-article-body table {
        width: 100%;
        margin: 1.5rem 0;
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
        border-radius: 18px;
        border: 1px solid rgba(116, 156, 176, 0.18);
        background: rgba(255, 255, 255, 0.02);
    }

    .azk-article-body table th,
    .azk-article-body table td {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(116, 156, 176, 0.12);
        color: #dbe7ee;
        white-space: normal;
    }

    .azk-article-body table th {
        background: rgba(1, 177, 196, 0.12);
        color: #f4fdff;
        font-weight: 800;
    }

    .azk-article-body table tr:nth-child(even) td {
        background: rgba(255, 255, 255, 0.018);
    }

    .azk-article-body hr {
        border: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(116, 156, 176, 0.35), transparent);
        margin: 2rem 0;
    }

    .azk-article-body details {
        margin: 1rem 0;
        border-radius: 18px;
        border: 1px solid rgba(116, 156, 176, 0.16);
        background: rgba(255, 255, 255, 0.025);
        overflow: hidden;
    }

    .azk-article-body summary {
        list-style: none;
        cursor: pointer;
        font-weight: 800;
        color: #effaff;
        padding: 16px 18px;
    }

    .azk-article-body summary::-webkit-details-marker {
        display: none;
    }

    .azk-article-body details>*:not(summary) {
        padding: 0 18px 16px;
    }

    .azk-article-body .summary-box,
    .azk-article-body .info-box {
        margin: 1.6rem 0;
        padding: 18px 18px 16px;
        border-radius: 18px;
        border: 1px solid rgba(116, 156, 176, 0.16);
        background: linear-gradient(180deg, rgba(18, 38, 49, 0.96) 0%, rgba(11, 25, 34, 0.96) 100%);
    }

    .azk-article-body .summary-box h2,
    .azk-article-body .summary-box h3,
    .azk-article-body .note-box h2,
    .azk-article-body .note-box h3,
    .azk-article-body .info-box h2,
    .azk-article-body .info-box h3 {
        margin-top: 0 !important;
        border-right: 0 !important;
        padding-right: 0 !important;
        font-size: 1.05rem !important;
        color: #f7fbfd !important;
    }

    .azk-article-secondary-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-top: 24px;
    }

    .azk-related-card {
        padding: 22px;
        margin-top: 26px;
    }

    .azk-related-headline {
        margin-bottom: 16px;
        text-align: center;
    }

    .azk-related-headline h2 {
        color: #f7fbfd;
        font-size: 1.45rem;
        font-weight: 900;
        margin: 0 0 8px;
    }

    .azk-related-headline p {
        margin: 0;
        color: #9fb6c3;
        line-height: 1.9;
    }

    .azk-related-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .azk-related-item {
        display: block;
        border-radius: 20px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(116, 156, 176, 0.10);
        transition: all 0.2s ease;
    }

    .azk-related-item:hover {
        transform: translateY(-2px);
        border-color: rgba(1, 177, 196, 0.24);
    }

    .azk-related-item .image {
        height: 190px;
        overflow: hidden;
        background: #0d1c25;
    }

    .azk-related-item .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .azk-related-item .content {
        padding: 16px;
    }

    .azk-related-item .title {
        font-size: 1rem;
        line-height: 1.8;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .azk-sticky-toc-trigger {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 1030;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 0;
        border-radius: 999px;
        padding: 13px 18px;
        background: linear-gradient(90deg, rgba(1, 177, 196, 0.95) 0%, rgba(6, 148, 166, 0.95) 100%);
        color: #fff;
        font-weight: 800;
        box-shadow: 0 18px 36px rgba(1, 177, 196, 0.28);
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: all .25s ease;
    }

    .azk-sticky-toc-trigger.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    @media (max-width: 991.98px) {

        .azk-content-grid,
        .azk-article-secondary-grid,
        .azk-related-grid {
            grid-template-columns: 1fr;
        }

        .azk-hero-box {
            padding: 22px 18px;
        }

        .azk-article-head,
        .azk-article-main {
            padding-left: 18px;
            padding-right: 18px;
        }

        .azk-article-media {
            margin: 0 18px;
        }

        .azk-article-card {
            grid-template-columns: 1fr;
            padding: 16px;
        }

        .azk-article-card .thumb {
            min-height: 210px;
        }

        .azk-article-card .footer {
            flex-direction: column;
            align-items: stretch;
        }

        .azk-share-buttons {
            justify-content: center;
        }

        .azk-btn-primary {
            justify-content: center;
        }

        .azk-toc-link.level-3 {
            margin-right: 10px;
        }
    }

    @media (max-width: 575.98px) {
        .azk-article-media img {
            height: 235px;
        }

        .azk-share-box,
        .azk-toc-inline-trigger {
            padding: 14px;
        }

        .azk-share-box .buttons {
            width: 100%;
            justify-content: center;
        }

        .azk-sticky-toc-trigger {
            right: 14px;
            bottom: 14px;
            padding: 12px 16px;
        }
    }

    .azk-blog-page .mini-sadaqah-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    padding: 14px 16px;
    border-radius: 16px;
    text-decoration: none;
    transition: all .22s ease;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
}

.azk-blog-page .mini-sadaqah-box::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 32%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.00) 15%,
        rgba(255,255,255,0.18) 45%,
        rgba(255,255,255,0.38) 50%,
        rgba(255,255,255,0.18) 55%,
        rgba(255,255,255,0.00) 85%,
        transparent 100%
    );
    transform: skewX(-22deg);
    animation: azkShineLoop 5s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.azk-blog-page .mini-sadaqah-box:hover {
    transform: translateY(-2px);
}

.azk-blog-page .mini-sadaqah-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    position: relative;
    z-index: 1;
}

.azk-blog-page .mini-sadaqah-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.azk-blog-page .mini-sadaqah-content strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 2px;
}

.azk-blog-page .mini-sadaqah-content span {
    display: block;
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    line-height: 1.6;
}

.azk-blog-page .mini-sadaqah-arrow {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: transform .22s ease;
}

.azk-blog-page .mini-sadaqah-box:hover .mini-sadaqah-arrow {
    transform: translateX(-3px);
}

/* أول بوكس - أخضر */
.azk-blog-page .mini-sadaqah-box:nth-of-type(1) {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border: 1px solid rgba(110, 231, 183, 0.24);
    box-shadow: 0 10px 26px rgba(6, 78, 59, 0.18);
}

.azk-blog-page .mini-sadaqah-box:nth-of-type(1):hover {
    border-color: rgba(110, 231, 183, 0.42);
    box-shadow: 0 14px 34px rgba(6, 78, 59, 0.24);
}

.azk-blog-page .mini-sadaqah-box:nth-of-type(1) .mini-sadaqah-icon {
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.26);
}

.azk-blog-page .mini-sadaqah-box:nth-of-type(1) .mini-sadaqah-arrow {
    color: #6ee7b7;
}

/* ثاني بوكس - بنفسجي */
.azk-blog-page .mini-sadaqah-box:nth-of-type(2) {
    background: linear-gradient(135deg, #312e81 0%, #4c1d95 100%);
    border: 1px solid rgba(196, 181, 253, 0.24);
    box-shadow: 0 10px 26px rgba(49, 46, 129, 0.18);
}

.azk-blog-page .mini-sadaqah-box:nth-of-type(2):hover {
    border-color: rgba(216, 180, 254, 0.42);
    box-shadow: 0 14px 34px rgba(76, 29, 149, 0.24);
}

.azk-blog-page .mini-sadaqah-box:nth-of-type(2) .mini-sadaqah-icon {
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    box-shadow: 0 8px 18px rgba(139, 92, 246, 0.26);
}

.azk-blog-page .mini-sadaqah-box:nth-of-type(2) .mini-sadaqah-arrow {
    color: #ddd6fe;
}

@keyframes azkShineLoop {
    0% {
        left: -45%;
    }
    100% {
        left: 125%;
    }
}

@media (max-width: 767px) {
    .azk-blog-page .mini-sadaqah-box {
        padding: 13px 14px;
        gap: 10px;
        border-radius: 14px;
    }

    .azk-blog-page .mini-sadaqah-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 10px;
    }

    .azk-blog-page .mini-sadaqah-content strong {
        font-size: 14px;
    }

    .azk-blog-page .mini-sadaqah-content span {
        font-size: 12px;
    }
}

/* Azkar */
.azkar-dark {
    --azkar-share-height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--azkar-share-height);
    --azkar-bg: #0b1519;
    --azkar-surface: #13252b;
    --azkar-border: #29434a;
    --azkar-text: #ecf4f2;
    --azkar-muted: #a7bdbb;
    --azkar-accent: #9cdece;
    background: var(--azkar-bg);
    color: var(--azkar-text);
    color-scheme: dark;
}
.azkar-dark .common-navigation,
.azkar-dark .common-footer,
.azkar-dark .mobile-navigation {
    background: var(--azkar-surface) !important;
    color: var(--azkar-text);
    border-color: var(--azkar-border) !important;
}
.azkar-dark .common-navigation .options-list .option-item,
.azkar-dark .common-footer a,
.azkar-dark .common-footer .social-headline,
.azkar-dark .mobile-navigation a,
.azkar-dark .mobile-navigation .btn-close {
    color: var(--azkar-text) !important;
}
.azkar-dark .common-navigation .btn-light {
    background: #20383f;
    color: var(--azkar-text);
    border-color: var(--azkar-border);
}
.azkar-dark .azkar-page { max-width: 900px; }
.azkar-dark .azkar-page .headline h1 {
    color: var(--azkar-text);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    line-height: 1.9;
    margin-bottom: 20px;
}
.azkar-dark .azkar-list { display: flex; flex-wrap: wrap; gap: 8px; }
.azkar-dark .azkar-list .azkar-item {
    flex: 1 1 auto;
    margin: 0;
    padding: 10px 14px;
    min-height: 44px;
    background: var(--azkar-surface);
    color: var(--azkar-text);
    border: 1px solid var(--azkar-border);
    border-radius: 12px;
    white-space: normal;
    line-height: 1.8;
}
.azkar-dark .azkar-list .azkar-item:hover { background: #20383f; border-color: var(--azkar-accent); }
.azkar-dark .azkar-reading-content { padding: 0 15px; }
.azkar-dark .azkar-page .tasbeeh-item {
    background: var(--azkar-surface);
    border: 1px solid var(--azkar-border);
    border-radius: 18px;
    color: var(--azkar-text);
    padding: 24px;
    box-shadow: 0 8px 24px #0002;
    overflow-wrap: anywhere;
    min-width: 0;
}
.azkar-dark .azkar-page .tasbeeh-item .tasbeeh-text {
    font-size: 1.25rem !important;
    line-height: 2.3;
    font-weight: 500;
}
.azkar-dark .azkar-page .tasbeeh-hint,
.azkar-dark .azkar-page .tasbeeh-text .hint-word { color: var(--azkar-muted) !important; line-height: 2; }
.azkar-dark .azkar-page .tasbeeh-text .custom-word { color: #e7c780 !important; }
.azkar-dark .azkar-page .btn-tasbeeh-outer { gap: 8px; align-items: stretch; }
.azkar-dark .azkar-page .btn-tasbeeh-outer > .btn {
    border-radius: 12px !important;
    margin: 0 !important;
    min-height: 54px;
    box-shadow: none;
}
.azkar-dark .azkar-page .btn-primary {
    background: var(--azkar-accent);
    border-color: var(--azkar-accent);
    color: #102b29;
}
.azkar-dark .azkar-page .btn-outline-primary {
    color: var(--azkar-accent);
    border: 1px solid #527c78;
    background: #102026;
}
.azkar-dark .azkar-page .btn-outline-primary:hover,
.azkar-dark .azkar-page .btn-outline-primary:focus {
    background: #203c40 !important;
    color: #c4f4e8 !important;
}
.azkar-dark .azkar-page a:focus-visible,
.azkar-dark .azkar-page button:focus-visible { outline: 2px solid var(--azkar-accent); outline-offset: 4px; }
.azkar-dark .azkar-share {
    position: fixed;
    inset: auto 0 0;
    z-index: 1030;
    height: var(--azkar-share-height);
    box-sizing: border-box;
    margin: 0;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--azkar-border);
    background: var(--azkar-surface);
    box-shadow: 0 -4px 16px #0002;
    text-align: center;
}
.azkar-dark .azkar-share { transition: background-color .25s ease, border-color .25s ease; }
.azkar-dark .azkar-share.is-highlighted { background: #9cdece; border-color: #9cdece; }
.azkar-dark .azkar-share.is-highlighted .azkar-share-teaser,
.azkar-dark .azkar-share.is-highlighted .azkar-share-teaser strong,
.azkar-dark .azkar-share.is-highlighted .azkar-share-teaser-icon,
.azkar-dark .azkar-share.is-highlighted .azkar-share-teaser-arrow { color: #102b29; }
.azkar-dark .azkar-share.is-highlighted .azkar-share-teaser:focus-visible { outline-color: #102b29; }
@media (prefers-reduced-motion: reduce) {
    .azkar-dark .azkar-share { transition: none; }
}
.azkar-dark .azkar-share-teaser {
    display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px;
    min-height: 44px; margin: 0 auto; padding: 0 4px; border: 0;
    background: transparent; color: var(--azkar-text); text-align: right;
    font: inherit; font-size: .78rem; line-height: 1.8; cursor: pointer;
}
.azkar-dark .azkar-share-teaser strong { color: var(--azkar-accent); font-weight: 600; }
.azkar-dark .azkar-share-teaser-icon { color: var(--azkar-accent); font-size: 26px; }
.azkar-dark .azkar-share-teaser-arrow { margin-right: auto; color: var(--azkar-accent); font-size: 22px; }
.azkar-dark .azkar-share-teaser:focus-visible,
.azkar-dark .azkar-share-dialog :focus-visible { outline: 2px solid var(--azkar-accent); outline-offset: 3px; }
.azkar-dark .azkar-share-dialog {
    box-sizing: border-box; width: min(440px, calc(100% - 28px)); max-height: calc(100dvh - 32px);
    margin: auto; padding: 28px 24px 16px; overflow-y: auto;
    border: 1px solid var(--azkar-border); border-radius: 24px;
    background: var(--azkar-surface); color: var(--azkar-text); text-align: center;
    box-shadow: 0 24px 80px #0006;
}
.azkar-dark .azkar-share-dialog::backdrop { background: #030b10bd; backdrop-filter: blur(5px); }
.azkar-dark .azkar-share-close {
    position: absolute; top: 8px; left: 8px; width: 44px; height: 44px;
    border: 0; background: transparent; color: var(--azkar-muted); font-size: 28px; cursor: pointer;
}
.azkar-dark .azkar-share-symbol { color: var(--azkar-accent); font-size: 36px; line-height: 1.4; }
.azkar-dark .azkar-share-eyebrow { color: var(--azkar-accent); font-size: .75rem; margin: 8px 0 12px; }
.azkar-dark .azkar-share-dialog h2 { font-size: 1.35rem; line-height: 1.7; margin: 0 0 12px; font-weight: 700; }
.azkar-dark #azkar-share-description { color: var(--azkar-muted); font-size: .9rem; line-height: 2.1; margin: 0; }
.azkar-dark .azkar-share-invitation { font-size: .85rem; margin: 18px 0 12px; }
.azkar-dark .azkar-share-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.azkar-dark .azkar-share-link {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; min-height: 44px; padding: 10px 8px; border: 1px solid var(--azkar-border);
    border-radius: 12px; background: #1b333a; color: var(--azkar-text); font-size: .8rem; text-decoration: none;
}
.azkar-dark .azkar-share-link.whatsapp { grid-column: 1 / -1; background: #9cdece; color: #102b29; border-color: #9cdece; font-weight: 700; }
.azkar-dark .azkar-share-link:hover { filter: brightness(1.15); text-decoration: none; }
.azkar-dark .azkar-share-link i { font-size: 1.2rem; }
.azkar-dark .azkar-share-copy { width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-radius: 12px; background: transparent; color: var(--azkar-accent); font: inherit; font-size: .8rem; cursor: pointer; }
.azkar-dark .azkar-share-status { min-height: 20px; font-size: .75rem; color: var(--azkar-accent); margin: 4px 0 0; }
.azkar-dark .eu-cookie-notice { bottom: var(--azkar-share-height); }
html:has(body.azkar-dark) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
html:has(.azkar-share-dialog[open]), .azkar-dark:has(.azkar-share-dialog[open]) { overflow: hidden; }
.azkar-dark .tasbeeh-item { scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 575px) {
    .azkar-dark .azkar-page { padding-left: 16px; padding-right: 16px; }
    .azkar-dark .azkar-page .tasbeeh-item { padding: 20px 16px; }
    .azkar-dark .azkar-page .tasbeeh-item .tasbeeh-text { font-size: 1.15rem !important; line-height: 2.25; }
    .azkar-dark .azkar-share { padding-left: 10px; padding-right: 10px; }
    .azkar-dark .azkar-share-links { gap: 6px; }
}

.azkar-dark .azkar-list .azkar-all-button {
    background: transparent;
    border-style: dashed;
    color: var(--azkar-accent);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.azkar-dark .azkar-list-dialog { padding-top: 52px; }
.azkar-dark .azkar-list-description { color: var(--azkar-muted); font-size: .85rem; margin: 0 0 18px; }
.azkar-dark .azkar-list-dialog-links { display: grid; gap: 8px; }
.azkar-dark .azkar-list-dialog-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 48px; padding: 10px 16px; border: 1px solid var(--azkar-border);
    border-radius: 12px; color: var(--azkar-text); background: #1b333a;
    font-size: .9rem; line-height: 1.8; text-align: right; text-decoration: none;
}
.azkar-dark .azkar-list-dialog-links a:hover { border-color: var(--azkar-accent); background: #20383f; }
.azkar-dark .azkar-list-dialog-links a span { color: var(--azkar-accent); }

.azkar-dark .azkar-share-teaser-icon { display: inline-flex; flex: 0 0 26px; }
.azkar-dark .azkar-share-teaser-icon svg { display: block; width: 26px; height: 26px; }
.azkar-dark .azkar-share.is-highlighted .azkar-share-teaser-icon { animation: azkar-share-pop .75s ease both; }
@keyframes azkar-share-pop {
    0%, 100% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.22) rotate(-12deg); }
    60% { transform: scale(1.1) rotate(8deg); }
}
.azkar-dark .tasbeeh-item { scroll-margin-top: 24px; }
.azkar-dark .tasbeeh-item:has(.tasbeeh-text:target) { border-color: var(--azkar-accent); }
.azkar-dark .azkar-copy-notice {
    position: fixed; bottom: calc(var(--azkar-share-height) + 12px); left: 50%; transform: translateX(-50%);
    z-index: 1040; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px;
    border: 1px solid var(--azkar-border); border-radius: 12px; background: var(--azkar-surface);
    color: var(--azkar-accent); font-size: .8rem; text-align: center; pointer-events: none;
}
.azkar-dark .azkar-copy-notice:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
    .azkar-dark .azkar-share.is-highlighted .azkar-share-teaser-icon { animation: none; }
}

.azkar-dark .azkar-page .tasbeeh-item.is-next-azkar {
    border-color: var(--azkar-accent);
    animation: azkar-next-card 750ms ease-in-out 2;
}
@keyframes azkar-next-card {
    0%, 100% { box-shadow: 0 0 0 0 #9cdece00; transform: translateY(0); }
    40% { box-shadow: 0 0 0 4px #9cdece30, 0 8px 28px #9cdece18; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .azkar-dark .azkar-page .tasbeeh-item.is-next-azkar {
        animation: none;
        box-shadow: 0 0 0 3px #9cdece30;
    }
}

/* Sadaqah V2 */
@font-face {
    font-family: 'Hafs';
    src: url('https://fonts.cdnfonts.com/s/72898/KFGQPC%20Uthmanic%20Script%20HAFS%20Regular.woff') format('woff');
    font-display: swap;
}

.azkarna-page-v2 {
    --page-v2-bg: #121212;
    --page-v2-surface: #181818;
    --page-v2-header: #1a2324;
    --page-v2-accent: #01b1c4;
    --page-v2-accent-hover: #0aa2c0;
    --page-v2-text: #ffffff;
    --page-v2-muted: #aeb5b8;
    --page-v2-border: #30393a;
    color: var(--page-v2-text);
    font-family: 'Almarai', sans-serif;
}

.azkarna-page-v2 button,
.azkarna-page-v2 a,
.azkarna-page-v2 textarea {
    font-family: inherit;
}

.azkarna-page-v2 .page-v2-shell {
    padding-left: 15px;
    padding-right: 15px;
}

.azkarna-page-v2 .main-wizard-container {
    width: 100%;
    max-width: 550px;
    margin: 40px auto;
    overflow: hidden;
    background: var(--page-v2-surface);
    border: 1px solid var(--page-v2-border);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.azkarna-page-v2 .wizard-body {
    background: var(--page-v2-surface);
}

.azkarna-page-v2 .wizard-header {
    padding: 25px 30px 10px;
}

.azkarna-page-v2 .step-card {
    display: none;
    padding: 30px;
    text-align: center;
    animation: pageV2FadeIn 0.4s ease-in-out;
}

.azkarna-page-v2 .step-card.active {
    display: block;
}

.azkarna-page-v2 .step-card h2,
.azkarna-page-v2 .step-card h3 {
    color: #fff;
    font-weight: 700;
}

@keyframes pageV2FadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.azkarna-page-v2 .fade-in-text {
    animation: pageV2TextFadeIn 0.3s ease-in-out;
}

@keyframes pageV2TextFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.azkarna-page-v2 .text-v2-muted {
    color: var(--page-v2-muted) !important;
}

.azkarna-page-v2 .deceased-name {
    color: #18c6d8;
    font-weight: 700;
}

/* Header */
.azkarna-page-v2 .profile-section {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--page-v2-header);
    border-bottom: 1px solid rgba(1, 177, 196, 0.14);
    transition: min-height 0.45s ease, padding 0.45s ease, background 0.45s ease;
}

.azkarna-page-v2 .profile-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.45s ease;
}

.azkarna-page-v2 .profile-image-wrap {
    transition: all 0.45s ease;
}

.azkarna-page-v2 .profile-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid var(--page-v2-header);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(1, 177, 196, 0.16);
    transition: width 0.45s ease, height 0.45s ease, box-shadow 0.45s ease;
}

.azkarna-page-v2 .profile-details p {
    color: #b9c2c4;
    font-size: 0.85rem;
}

.azkarna-page-v2 .profile-details h1 {
    margin: 0;
    color: #fff;
    font-size: 1.45rem;
    letter-spacing: 0.2px;
}

.azkarna-page-v2 .share-main-btn {
    top: 12px;
    left: 12px;
    right: auto;
    margin: 0;
    padding: 6px 14px;
    gap: 7px;
    color: #f4f6f6 !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 50px;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}

.azkarna-page-v2 .share-main-btn:hover,
.azkarna-page-v2 .share-main-btn:focus {
    color: #061113 !important;
    background: var(--page-v2-accent) !important;
    border-color: var(--page-v2-accent) !important;
    box-shadow: none;
}

.azkarna-page-v2 .profile-section.journey-started {
    min-height: 84px;
    padding: 14px 18px !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.azkarna-page-v2 .profile-section.journey-started .profile-person {
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    text-align: right;
}

.azkarna-page-v2 .profile-section.journey-started .profile-image-wrap {
    margin-bottom: 0 !important;
    margin-left: 10px;
}

.azkarna-page-v2 .profile-section.journey-started .profile-image {
    width: 48px;
    height: 48px;
    border-width: 2px;
    box-shadow: 0 0 12px rgba(1, 177, 196, 0.18);
}

.azkarna-page-v2 .profile-section.journey-started .profile-details {
    text-align: right;
}

.azkarna-page-v2 .profile-section.journey-started .profile-details p {
    font-size: 0.72rem;
}

.azkarna-page-v2 .profile-section.journey-started .profile-details h1 {
    font-size: 1rem;
    white-space: nowrap;
}

.azkarna-page-v2 .profile-section.journey-started .share-main-btn {
    top: 50%;
    left: 18px;
    right: auto;
    transform: translateY(-50%);
}

/* Progress */
.azkarna-page-v2 #progress-container {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    background: var(--page-v2-surface);
}

.azkarna-page-v2 #progress-container.progress-visible {
    display: block;
    animation: pageV2RevealProgress 0.5s ease forwards;
}

@keyframes pageV2RevealProgress {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.azkarna-page-v2 .page-v2-progress {
    height: 6px;
    margin-bottom: 5px;
    overflow: hidden;
    background: #333;
    border-radius: 10px;
}

.azkarna-page-v2 .page-v2-progress .progress-bar {
    width: 25%;
    background: var(--page-v2-accent);
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Main actions */
.azkarna-page-v2 .btn-main,
.azkarna-page-v2 .btn-outline-main {
    width: 100%;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.azkarna-page-v2 .btn-main {
    margin-top: 20px;
    padding: 14px 30px;
    color: #061113;
    background: var(--page-v2-accent);
    border: 0;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(1, 177, 196, 0.10);
}

.azkarna-page-v2 .btn-main:hover,
.azkarna-page-v2 .btn-main:focus {
    color: #061113;
    background: var(--page-v2-accent-hover);
    transform: scale(1.02);
    outline: 0;
}

.azkarna-page-v2 .btn-outline-main {
    margin-top: 0;
    padding: 12px 20px;
    color: var(--page-v2-accent);
    background: transparent;
    border: 2px solid var(--page-v2-accent);
    font-size: 1.05rem;
}

.azkarna-page-v2 .btn-outline-main:hover,
.azkarna-page-v2 .btn-outline-main:focus {
    color: #061113;
    background: var(--page-v2-accent);
    outline: 0;
}

.azkarna-page-v2 .intro-copy {
    color: #d5d8dc;
    font-size: 1.1rem;
    line-height: 1.9;
}

.azkarna-page-v2 .initial-options {
    display: flex;
    flex-direction: column;
}

.azkarna-page-v2 .initial-options .btn-outline-main + .btn-outline-main {
    margin-top: 16px;
}

.azkarna-page-v2 .is-hidden {
    display: none !important;
}

/* Fatiha */
.azkarna-page-v2 .fatiha-content {
    display: none;
}

.azkarna-page-v2 .fatiha-content.is-visible {
    display: block;
    animation: pageV2FadeIn 0.4s ease-in-out;
}

.azkarna-page-v2 .page-v2-surah-header {
    background-image: url('https://www.azkarna.com/images/surah-header-bg.png');
    background-repeat: repeat;
    background-size: cover;
}

.azkarna-page-v2 .surah-body {
    color: #fff;
}

.azkarna-page-v2 .verse-outer,
.azkarna-page-v2 .verse-text,
.azkarna-page-v2 .verse-number {
    font-family: 'Hafs', serif;
}

/* Dua */
.azkarna-page-v2 #card-3 > h2,
.azkarna-page-v2 #card-4 > h2 {
    color: #66d9e3;
}

.azkarna-page-v2 .dua-container {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.azkarna-page-v2 .dua-text {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.9;
}

.azkarna-page-v2 .dua-change-button {
    color: var(--page-v2-accent) !important;
    text-decoration: none !important;
}

/* Istighfar */
.azkarna-page-v2 .btn-istighfar {
    width: 100%;
    padding: 30px 20px 10px;
    color: var(--page-v2-text);
    background: rgba(13, 202, 240, 0.05);
    border: 2px solid var(--page-v2-accent);
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
}

.azkarna-page-v2 .btn-istighfar.is-pressed {
    transform: scale(0.96);
}

.azkarna-page-v2 .btn-istighfar.is-complete {
    background: rgba(25, 135, 84, 0.08);
    border-color: #198754;
}

.azkarna-page-v2 .istighfar-counter-wrap {
    display: block;
}

.azkarna-page-v2 .counter-number {
    color: var(--page-v2-accent);
    font-size: 2.5rem;
    font-weight: 700;
}

.azkarna-page-v2 .counter-total {
    font-size: 1.5rem;
}

.azkarna-page-v2 .next-from-istighfar {
    display: none;
}

.azkarna-page-v2 .next-from-istighfar.is-visible {
    display: block;
    animation: pageV2FadeIn 0.4s ease-in-out;
}

@keyframes pageV2AttentionPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 8px rgba(13, 202, 240, 0.2);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 202, 240, 0);
        transform: scale(1);
    }
}

.azkarna-page-v2 .pulse-animation {
    animation: pageV2AttentionPulse 2s infinite ease-in-out;
}

/* Completion / create-page prompt */
.azkarna-page-v2 #card-6 {
    min-height: 390px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.azkarna-page-v2 .completion-intro {
    min-height: 32px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
}

.azkarna-page-v2 .completion-intro.is-settled {
    animation: pageV2CompletionEnter 0.34s cubic-bezier(.2, .8, .25, 1) forwards;
}

@keyframes pageV2CompletionEnter {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.azkarna-page-v2 .completion-check {
    width: 27px;
    height: 27px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    color: #07383e;
    background: var(--page-v2-accent);
    border-radius: 50%;
    font-size: 0.72rem;
}

.azkarna-page-v2 .completion-title {
    margin: 0;
    color: #e6e8eb;
    font-size: 0.96rem;
    line-height: 1.35;
    font-weight: 600;
}

.azkarna-page-v2 .memory-prompt {
    padding-top: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
}

.azkarna-page-v2 .memory-prompt.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.36s ease, transform 0.36s cubic-bezier(.2, .75, .25, 1);
}

.azkarna-page-v2 .memory-prompt.is-leaving {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985) !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.azkarna-page-v2 .memory-eyebrow {
    margin-bottom: 5px;
    color: var(--page-v2-accent);
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.9;
}

.azkarna-page-v2 .memory-question {
    max-width: 420px;
    margin: 0 auto 17px;
    color: #fff;
    font-size: 1.38rem;
    line-height: 1.55;
    font-weight: 700;
}

.azkarna-page-v2 .relation-grid {
    max-width: 430px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.azkarna-page-v2 .relation-option {
    min-height: 58px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #f4f4f5;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
    font-size: 0.96rem;
    font-weight: 600;
    text-align: right;
    opacity: 0;
    transform: translateY(6px);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.azkarna-page-v2 .memory-prompt.is-visible .relation-option {
    animation: pageV2RelationReveal 0.35s ease forwards;
}

.azkarna-page-v2 .memory-prompt.is-visible .relation-option:nth-child(1) { animation-delay: 0.05s; }
.azkarna-page-v2 .memory-prompt.is-visible .relation-option:nth-child(2) { animation-delay: 0.10s; }
.azkarna-page-v2 .memory-prompt.is-visible .relation-option:nth-child(3) { animation-delay: 0.15s; }
.azkarna-page-v2 .memory-prompt.is-visible .relation-option:nth-child(4) { animation-delay: 0.20s; }
.azkarna-page-v2 .memory-prompt.is-visible .relation-option:nth-child(5) { animation-delay: 0.25s; }
.azkarna-page-v2 .memory-prompt.is-visible .relation-option:nth-child(6) { animation-delay: 0.30s; }

@keyframes pageV2RelationReveal {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.azkarna-page-v2 .relation-emoji {
    width: 36px;
    height: 36px;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    background: rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
}

.azkarna-page-v2 .relation-label {
    flex: 1;
}

.azkarna-page-v2 .relation-option:hover,
.azkarna-page-v2 .relation-option:focus {
    color: #fff;
    background: rgba(1, 177, 196, 0.08);
    border-color: rgba(1, 177, 196, 0.7);
    transform: translateY(-2px);
    outline: 0;
}

.azkarna-page-v2 .create-person-result {
    display: none;
    max-width: 440px;
    margin: 4px auto 0;
}

.azkarna-page-v2 .create-person-result.active {
    display: block;
    animation: pageV2SelectedPersonReveal 0.45s cubic-bezier(.2, .75, .25, 1) forwards;
}

@keyframes pageV2SelectedPersonReveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.azkarna-page-v2 #card-6.person-selected .completion-intro,
.azkarna-page-v2 #card-6.person-selected .completion-reset-wrap {
    display: none !important;
}

.azkarna-page-v2 #card-6.person-selected {
    min-height: 330px;
    padding-top: 34px;
}

.azkarna-page-v2 .selected-relation-visual {
    width: 38px;
    height: 38px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    line-height: 1;
    opacity: 0;
    transform: translateY(5px);
}

.azkarna-page-v2 .selected-relation-visual.arrived {
    animation: pageV2SelectedVisualArrive 0.22s ease-out forwards;
}

@keyframes pageV2SelectedVisualArrive {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.azkarna-page-v2 .selected-relation-title {
    margin-bottom: 8px;
    color: #fff;
    font-size: 1.28rem;
    line-height: 1.55;
    font-weight: 700;
}

.azkarna-page-v2 .selected-relation-copy {
    max-width: 390px;
    margin: 0 auto 16px;
    color: #c7ccd1;
    font-size: 0.94rem;
    line-height: 1.75;
}

.azkarna-page-v2 .create-page-primary {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #061f22 !important;
    background: var(--page-v2-accent);
    border-radius: 50px;
    font-size: 1.04rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.2s ease, background 0.2s ease;
}

.azkarna-page-v2 .create-page-primary i {
    margin-right: 10px;
}

.azkarna-page-v2 .create-page-primary:hover {
    background: var(--page-v2-accent-hover);
    transform: translateY(-1px);
}

.azkarna-page-v2 .create-page-meta {
    margin-top: 8px;
    color: #9299a1;
    font-size: 0.79rem;
}

.azkarna-page-v2 .secondary-action-link {
    padding: 4px 8px;
    color: #8f969e;
    background: transparent;
    border: 0;
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.azkarna-page-v2 .secondary-action-link:hover,
.azkarna-page-v2 .secondary-action-link:focus {
    color: #fff;
    outline: 0;
}

.azkarna-page-v2 .change-person-btn,
.azkarna-page-v2 .completion-reset-wrap {
    margin-top: 8px;
}

/* Compact create banner */
.azkarna-page-v2 .create-page-banner {
    width: 100%;
    max-width: 550px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px;
}

.azkarna-page-v2 .create-page-banner-info {
    min-width: 0;
}

.azkarna-page-v2 .create-page-banner-icon {
    width: 45px;
    height: 45px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    color: var(--page-v2-accent);
    background: rgba(13, 202, 240, 0.08);
    border-radius: 50%;
    font-size: 1.2rem;
}

.azkarna-page-v2 .create-page-banner-text {
    text-align: right;
}

.azkarna-page-v2 .create-page-banner-text p:first-child {
    font-size: 0.95rem;
    font-weight: 500;
}

.azkarna-page-v2 .create-page-banner-text p:last-child {
    font-size: 0.8rem;
}

.azkarna-page-v2 .create-page-banner-button {
    padding: 6px 14px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--page-v2-accent) !important;
    background: transparent;
    border: 1px solid var(--page-v2-accent);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.azkarna-page-v2 .create-page-banner-button i {
    margin-right: 6px;
    font-size: 0.7rem;
}

.azkarna-page-v2 .create-page-banner-button:hover {
    color: #061113 !important;
    background: var(--page-v2-accent);
}

/* Bootstrap 4 share modal */
.azkarna-page-v2 .page-v2-share-modal .modal-dialog {
    max-width: 500px;
}

/* Bootstrap 4 uses .show + data-toggle/data-dismiss. This overrides only the motion. */
.azkarna-page-v2 .page-v2-share-modal.fade .modal-dialog {
    opacity: 0;
    transform: translateY(-70px);
    transition: transform 0.32s cubic-bezier(.2, .75, .25, 1), opacity 0.32s ease;
}

.azkarna-page-v2 .page-v2-share-modal.show .modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

.azkarna-page-v2 .page-v2-share-modal .modal-content {
    overflow: hidden;
    color: #fff;
    background: #202223;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.azkarna-page-v2 .page-v2-share-modal .modal-header {
    position: relative;
    padding: 22px 22px 10px;
    border-bottom: 0;
}

.azkarna-page-v2 .page-v2-share-modal .share-modal-close {
    position: absolute;
    top: 13px;
    left: 16px;
    right: auto;
    margin: 0;
    padding: 0;
    color: #fff;
    text-shadow: none;
    opacity: 0.55;
    z-index: 2;
}

.azkarna-page-v2 .page-v2-share-modal .share-modal-close:hover {
    opacity: 1;
}

.azkarna-page-v2 .share-popup-title-row {
    display: flex;
    align-items: center;
    padding-left: 34px;
}

.azkarna-page-v2 .share-popup-icon {
    margin-left: 9px;
    color: var(--page-v2-accent);
    font-size: 1.05rem;
}

.azkarna-page-v2 .page-v2-share-modal .modal-title {
    margin: 0;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
}

.azkarna-page-v2 .page-v2-share-modal .modal-body {
    padding: 10px 16px 20px;
}

.azkarna-page-v2 .share-message-box {
    width: 100%;
    min-height: 112px;
    max-height: 160px;
    padding: 13px 14px;
    resize: none;
    overflow-y: auto;
    direction: rtl;
    text-align: right;
    color: #e7e9ea;
    background: #17191a;
    border: 1px solid #41474b;
    border-radius: 7px;
    font-size: 0.95rem;
    line-height: 1.7;
    outline: none;
}

.azkarna-page-v2 .share-message-box:focus {
    border-color: rgba(1, 177, 196, 0.75);
    box-shadow: 0 0 0 3px rgba(1, 177, 196, 0.08);
}

.azkarna-page-v2 .copy-share-message {
    width: 100%;
    min-height: 38px;
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4f5f6;
    background: #303438;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.azkarna-page-v2 .copy-share-message i {
    margin-left: 8px;
}

.azkarna-page-v2 .copy-share-message:hover {
    background: #383d41;
    border-color: rgba(255, 255, 255, 0.15);
}

.azkarna-page-v2 .copy-share-message.copied {
    color: #7ce1ea;
    background: rgba(1, 177, 196, 0.08);
    border-color: rgba(1, 177, 196, 0.35);
}

.azkarna-page-v2 .share-platforms {
    margin-top: 44px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.azkarna-page-v2 .share-platform-btn {
    min-height: 34px;
    margin: 3px;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: 0;
    border-radius: 5px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.azkarna-page-v2 .share-platform-btn i {
    margin-left: 7px;
}

.azkarna-page-v2 .share-platform-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.azkarna-page-v2 .share-whatsapp { background: #25D366; }
.azkarna-page-v2 .share-facebook { background: #4267B2; }
.azkarna-page-v2 .share-twitter { background: #55acee; }
.azkarna-page-v2 .share-telegram { background: #229ED9; }
.azkarna-page-v2 .share-linkedin { background: #0A78B5; }

.azkarna-page-v2 .page-v2-share-modal .modal-footer {
    padding: 10px 16px 18px;
    justify-content: center;
    border-top: 0;
}

.azkarna-page-v2 .share-popup-dismiss {
    padding: 6px 10px;
    color: #8c9398;
    background: transparent;
    border: 0;
    font-size: 0.8rem;
}

.azkarna-page-v2 .share-popup-dismiss:hover {
    color: #c7ccd0;
}

@media (max-width: 576px) {
    .azkarna-page-v2 .main-wizard-container {
        margin-top: 18px;
    }

    .azkarna-page-v2 .profile-section.journey-started {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .azkarna-page-v2 .profile-section.journey-started .profile-image {
        width: 44px;
        height: 44px;
    }

    .azkarna-page-v2 .profile-section.journey-started .profile-details h1 {
        max-width: 180px;
        overflow: hidden;
        font-size: 0.92rem;
        text-overflow: ellipsis;
    }

    .azkarna-page-v2 .profile-section.journey-started .share-main-btn {
        left: 10px;
        padding: 7px 10px;
    }

    .azkarna-page-v2 .step-card {
        padding: 24px 18px;
    }

    .azkarna-page-v2 #card-6 {
        min-height: 410px;
        padding: 18px 16px 20px;
    }

    .azkarna-page-v2 .memory-question {
        margin-bottom: 14px;
        font-size: 1.12rem;
    }

    .azkarna-page-v2 .relation-option {
        min-height: 56px;
        padding: 7px 9px;
        font-size: 0.91rem;
    }

    .azkarna-page-v2 .relation-emoji {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
        font-size: 1.12rem;
    }

    .azkarna-page-v2 .create-page-banner {
        border-radius: 18px;
    }

    .azkarna-page-v2 .page-v2-share-modal .modal-dialog {
        margin: 12px;
    }

    .azkarna-page-v2 .page-v2-share-modal .modal-header {
        padding: 19px 17px 8px;
    }

    .azkarna-page-v2 .page-v2-share-modal .modal-body {
        padding: 9px 13px 18px;
    }

    .azkarna-page-v2 .share-message-box {
        min-height: 128px;
        font-size: 0.92rem;
    }

    .azkarna-page-v2 .share-platforms {
        margin-top: 28px;
    }

    .azkarna-page-v2 .share-platform-btn {
        min-width: 0;
        min-height: 39px;
        flex: 1 1 calc(50% - 6px);
    }
}

/* Standalone V2 layout: no global navigation/header/footer. */
body.page-v2-layout {
    min-height: 100vh;
    margin: 0;
    background: #121212;
}

.page-v2-layout-content {
    min-height: 100vh;
}

/* AMP_THEME_START */
html[amp], html[⚡] { background: #0b1519; color: #ecf4f2; }
html:is([amp], [⚡]) amp-story { background: #0b1519; }
html:is([amp], [⚡]) amp-story {
            font-family: 'Tajawal', Arial, sans-serif;
            direction: rtl;
            color: #fff;
            position: relative;
        }
html:is([amp], [⚡]) .align-top {
            align-items: flex-start;
        }
html:is([amp], [⚡]) .align-middle {
            margin-top: 10vh;
            align-items: center;
        }
html:is([amp], [⚡]) .align-bottom {
            align-items: flex-end;
        }
html:is([amp], [⚡]) h1, html:is([amp], [⚡]) h2 {
            padding: 10px;
        }
html:is([amp], [⚡]) h2 {
            font-size: 1.2em;
        }
html:is([amp], [⚡]) h2.large {
            font-size: 1.8em;
        }
html:is([amp], [⚡]) .caption {
            font-size: 1.2em;
        }
html:is([amp], [⚡]) .text-page-right {
            text-align: right;
        }
html:is([amp], [⚡]) .text-page-center {
            text-align: center;
            align-items: center;
        }
html:is([amp], [⚡]) .related-stories {
            background-color: rgba(0, 0, 0, 0.6);
            padding: 20px;
            border-radius: 15px;
            margin-top: 30px;
        }
html:is([amp], [⚡]) .related-stories h2 {
            font-size: 1.5em;
            margin-bottom: 15px;
            text-align: center;
        }
html:is([amp], [⚡]) .related-stories a {
            display: block;
            background: #ffffff10;
            padding: 10px 15px;
            margin: 10px 0;
            color: #fff;
            text-decoration: none;
            border-radius: 10px;
            transition: background 0.3s ease;
        }
html:is([amp], [⚡]) .related-stories a:hover {
            background: #ffffff20;
        }
    
/* AMP_THEME_END */
/* Site-wide tokens and legacy component migration. This is the authoritative palette. */
body.site-dark {
    --site-bg: #0b1519;
    --site-surface: #13252b;
    --site-surface-raised: #1b333a;
    --site-border: #29434a;
    --site-text: #ecf4f2;
    --site-muted: #a7bdbb;
    --site-accent: #9cdece;
    --site-brand: #01b1c4;
    --site-gold: #e7c780;
    --bg: var(--site-bg); --bg-1: var(--site-bg); --bg-2: #101f25;
    --page: var(--site-bg); --surface: var(--site-surface); --surface-2: var(--site-surface-raised);
    --panel: var(--site-surface); --card: var(--site-surface); --ink: var(--site-text); --text: var(--site-text);
    --muted: var(--site-muted); --line: var(--site-border); --border: var(--site-border);
    --card-border: var(--site-border); --soft-border: var(--site-border); --input-border: var(--site-border);
    --glass: var(--site-surface); --glass2: var(--site-surface-raised); --glassBorder: var(--site-border);
    --brown: var(--site-text); --wave: var(--site-muted);
    --azkar-bg: var(--site-bg); --azkar-surface: var(--site-surface); --azkar-border: var(--site-border);
    --azkar-text: var(--site-text); --azkar-muted: var(--site-muted); --azkar-accent: var(--site-accent);
    background: var(--site-bg) !important;
    color: var(--site-text) !important;
    color-scheme: dark;
    font-family: Almarai, Tahoma, Arial, sans-serif;
    text-align: right;
    -webkit-user-select: text;
    user-select: text;
}
body.site-dark .azkarna-page-v2 {
    --page-v2-bg: var(--site-bg); --page-v2-surface: var(--site-surface); --page-v2-header: var(--site-surface-raised);
    --page-v2-text: var(--site-text); --page-v2-muted: var(--site-muted); --page-v2-border: var(--site-border);
}
body.site-dark .site-content { min-height: 75vh; }
body.site-dark :is(.bg-white, .bg-light, .bg-primary, .card, .modal-content, .dropdown-menu, .list-group-item, .popover, .auth-page,
    .create-page, .dashboard .page-item, .tasbeeh-item, .time-for-rewards-page, .hourly-du3a-page .nav-sections,
    .hourly-du3a-page .bottom-sections, .hourly-du3a-page .du3a-box, .wrap-card, .result-card, .value-card,
    .overlay-card, .audio-player-card, .surah-body-outer, .page-page .surah-header, .page-page .surah-top, .page-page .surah-footer) {
    background-color: var(--site-surface) !important;
    color: var(--site-text);
    border-color: var(--site-border) !important;
}
body.site-dark :is(.common-navigation, .common-footer, .mobile-navigation) {
    background: var(--site-surface) !important;
    color: var(--site-text);
    border-color: var(--site-border) !important;
}
body.site-dark .common-navigation .options-list .option-item,
body.site-dark .common-footer a,
body.site-dark .common-footer .social-headline,
body.site-dark .mobile-navigation a,
body.site-dark .mobile-navigation .btn-close { color: var(--site-text) !important; }
body.site-dark :is(.text-dark, .text-body, .text-black, .text-black-50, .dropdown-item, .modal-title, .close,
    .auth-page .main-headline, .auth-page .sub-headline, .auth-page label, .create-page label,
    .dashboard .header .page-title, .dashboard .pages-list .title a, .time-for-rewards-page .main-headline h1,
    .page404 .title, .page404 .sub-title) { color: var(--site-text) !important; }
body.site-dark :is(.text-muted, .help-block, .form-text, .breadcrumb-item, .breadcrumb-item.active,
    .auth-page .sub-headline h2, .created-at) { color: var(--site-muted) !important; }
body.site-dark :is(.text-primary, .text-info, .breadcrumb a) { color: var(--site-accent) !important; }
body.site-dark :is(.border, .border-top, .border-bottom, .border-left, .border-right, .modal-header, .modal-footer, hr) { border-color: var(--site-border) !important; }
body.site-dark :is(.form-control, .custom-select, .input-group-text, .form-control:focus, .custom-select:focus) {
    background-color: #102026;
    color: var(--site-text);
    border-color: #527c78;
}
body.site-dark :is(input, textarea)::placeholder { color: var(--site-muted); opacity: 1; }
body.site-dark input:autofill { -webkit-text-fill-color: var(--site-text); box-shadow: inset 0 0 0 100px #102026; }
body.site-dark :is(.form-control:disabled, .form-control[readonly]) { background: #1b2a30; color: var(--site-muted); }
body.site-dark :is(.btn-light, .btn-white, .btn-secondary, .input-group-text, .page-link, .nav-tabs .nav-link.active) {
    background: var(--site-surface-raised); color: var(--site-text); border-color: var(--site-border);
}
body.site-dark :is(.btn-primary, .btn-info, .badge-primary) {
    background: var(--site-accent); border-color: var(--site-accent); color: #102b29;
}
body.site-dark :is(.btn-primary:hover, .btn-primary:focus, .btn-info:hover) { background: #b7eddf; border-color: #b7eddf; color: #102b29; }
body.site-dark :is(.btn-outline-primary, .btn-outline-info) { color: var(--site-accent); border-color: #527c78; }
body.site-dark :is(.btn-outline-primary:hover, .btn-outline-primary:focus) { background: var(--site-surface-raised); color: #c4f4e8; }
body.site-dark .alert-success { background: #173d2d; color: #b3e8c8; border-color: #35654c; }
body.site-dark .alert-info { background: #16333f; color: #c1e5ef; border-color: #335e70; }
body.site-dark .alert-warning { background: #3c321a; color: #f0d79a; border-color: #6e5a2e; }
body.site-dark :is(.alert-danger, .invalid-feedback, .field-error) { color: #ffb6b6; }
body.site-dark .alert-danger { background: #40272b; border-color: #79414a; }
body.site-dark .table { color: var(--site-text); }
body.site-dark .table :is(td, th, thead th) { border-color: var(--site-border); }
body.site-dark .table-striped tbody tr:nth-of-type(odd) { background: #ffffff05; }
body.site-dark .dropdown-item:hover { background: var(--site-surface-raised); }
body.site-dark .modal-backdrop { background-color: #020a0e; }
body.site-dark .tasbeeh-text .hint-word { color: var(--site-muted) !important; }
body.site-dark .tasbeeh-text .custom-word { color: var(--site-gold) !important; }
body.site-dark .auth-page :is(h1, h2), body.site-dark .time-for-rewards-page :is(h1, h2, h3) { color: var(--site-text); }
body.site-dark .auth-page .form-group .icon { color: var(--site-muted); }
body.site-dark :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }

body.site-dark { --story-wrap: var(--site-surface); --story-card: var(--site-surface-raised); }
body.site-dark .stories-title { color: var(--site-text); }
body.site-dark .common-footer .top-area .footer-item { color: var(--site-muted) !important; }
body.site-dark .time-for-rewards-page .sub-headline { color: var(--site-muted); }
body.site-dark .time-for-rewards-page .suggestion { color: var(--site-muted); }
/* Shared site navigation, animated RTL drawer, and footer. */
body.site-dark .site-chrome-header { position:relative;z-index:1040;width:100%;border-bottom:1px solid var(--site-border);background:var(--site-bg);color:var(--site-text) }
body.site-dark .site-chrome-inner { display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:1160px;min-height:82px;padding:12px 24px;margin:0 auto;box-sizing:border-box }
body.site-dark .site-chrome-brand { display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px }
body.site-dark .site-chrome-brand img { display:block;width:144px;height:42px;object-fit:contain }
body.site-dark .site-chrome-desktop { display:flex;align-items:center;gap:24px }
body.site-dark .site-chrome-desktop a { display:inline-flex;align-items:center;min-height:44px;color:var(--site-text);font-size:13px;white-space:nowrap;text-decoration:none }
body.site-dark .site-chrome-desktop a:hover { color:var(--site-accent) }
body.site-dark .site-chrome-actions { display:flex;align-items:center;gap:8px }
body.site-dark .site-chrome-login,body.site-dark .site-chrome-menu-toggle { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;box-sizing:border-box;padding:9px 14px;border:1px solid var(--site-border);border-radius:10px;background:transparent;color:var(--site-text);font:700 12px/1.7 Almarai,Tahoma,sans-serif;white-space:nowrap;cursor:pointer;text-decoration:none }
body.site-dark .site-chrome-login:hover,body.site-dark .site-chrome-menu-toggle:hover { background:var(--site-surface-raised);color:var(--site-accent) }
.site-menu-icon { position:relative;display:block;width:22px;height:18px;flex:0 0 22px }
.site-menu-icon span { position:absolute;right:0;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease,width .25s ease }
.site-menu-icon span:nth-child(1){top:1px}.site-menu-icon span:nth-child(2){top:8px;width:16px}.site-menu-icon span:nth-child(3){top:15px}
.is-active .site-menu-icon span:nth-child(1){transform:translateY(7px) rotate(45deg)}.is-active .site-menu-icon span:nth-child(2){opacity:0}.is-active .site-menu-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
html.site-menu-open { overflow:hidden }
body.site-dark .site-chrome-drawer { position:fixed;inset:0 0 0 auto;box-sizing:border-box;width:min(380px,calc(100vw - 28px));height:100dvh;max-height:none;max-width:none;margin:0;padding:0;border:0;border-left:1px solid var(--site-border);border-radius:0;background:var(--site-surface);color:var(--site-text);text-align:right;overflow:hidden;opacity:0;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.8,.3,1),opacity .25s ease;box-shadow:-20px 0 60px #0004 }
body.site-dark .site-chrome-drawer[open] { display:flex;flex-direction:column }
body.site-dark .site-chrome-drawer.is-open { opacity:1;transform:translateX(0) }
body.site-dark .site-chrome-drawer::backdrop { background:rgba(2,10,14,0);backdrop-filter:blur(0);transition:background .3s ease,backdrop-filter .3s ease }
body.site-dark .site-chrome-drawer.is-open::backdrop { background:rgba(2,10,14,.65);backdrop-filter:blur(4px) }
body.site-dark .site-drawer-heading { flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 22px 20px;border-bottom:1px solid var(--site-border) }
body.site-dark .site-drawer-heading h2 { margin:0;color:var(--site-text);font-size:18px;line-height:1.7;font-weight:700 }
body.site-dark .site-drawer-heading p { margin:6px 0 0;color:var(--site-muted);font-size:11px;line-height:1.8 }
body.site-dark .site-drawer-close { display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--site-border);border-radius:50%;background:transparent;color:var(--site-text);cursor:pointer }
body.site-dark .site-drawer-close:hover { background:var(--site-surface-raised) }
body.site-dark .site-drawer-content { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px calc(24px + env(safe-area-inset-bottom,0px));box-sizing:border-box }
body.site-dark .site-chrome-drawer nav a,body.site-dark .site-chrome-drawer nav button { display:flex;align-items:center;width:100%;min-height:48px;padding:12px 14px;box-sizing:border-box;border:0;border-radius:10px;background:transparent;color:var(--site-text);font:400 14px/1.8 Almarai,Tahoma,sans-serif;text-align:right;cursor:pointer;text-decoration:none }
body.site-dark .site-chrome-drawer nav :is(a,button):hover { background:var(--site-surface-raised);color:var(--site-accent) }
body.site-dark .site-chrome-account { border-top:1px solid var(--site-border);margin-top:12px;padding-top:12px }
body.site-dark .site-chrome-account form { margin:0 }
body.site-dark .site-chrome-footer { width:100%;padding:36px 0 22px;border-top:1px solid var(--site-border);background:var(--site-bg);color:var(--site-muted) }
body.site-dark .site-chrome-footer-inner { width:100%;max-width:1160px;padding:0 24px;margin:0 auto;box-sizing:border-box }
body.site-dark .site-chrome-footer-top { display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:26px }
body.site-dark .site-chrome-intro p { margin:10px 0 0;color:var(--site-muted);font-size:12px;line-height:1.9 }
body.site-dark .site-chrome-social { display:flex;gap:8px }
body.site-dark .site-chrome-social a { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--site-border);border-radius:50%;color:var(--site-muted);text-decoration:none }
body.site-dark .site-chrome-social a:hover { color:var(--site-accent);border-color:var(--site-accent) }
body.site-dark .site-footer-featured { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:28px }
body.site-dark .site-footer-featured > a { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px;border:1px solid var(--site-border);border-radius:16px;background:var(--site-surface);color:var(--site-accent);text-decoration:none;transition:border-color .2s ease,background .2s ease }
body.site-dark .site-footer-featured > a:hover { border-color:var(--site-accent);background:var(--site-surface-raised) }
body.site-dark .site-footer-featured strong { display:block;color:var(--site-text);font-size:14px;font-weight:700;line-height:1.8 }
body.site-dark .site-footer-featured small { display:block;margin-top:6px;color:var(--site-muted);font-size:11px;line-height:1.9 }
body.site-dark .site-footer-tools { padding-bottom:24px }
body.site-dark .site-footer-tools h2 { margin:0 0 12px;color:var(--site-muted);font-size:12px;font-weight:700;line-height:1.8 }
body.site-dark .site-footer-tools nav { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px }
body.site-dark .site-footer-tools a { display:flex;align-items:center;min-height:44px;color:var(--site-muted);font-size:12px;line-height:1.8;text-decoration:none }
body.site-dark .site-footer-tools a:hover { color:var(--site-accent) }
body.site-dark .site-chrome-footer-bottom { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;border-top:1px solid var(--site-border);padding-top:20px;font-size:11px;line-height:1.9 }
body.site-dark .site-chrome-footer-bottom nav { display:flex;flex-wrap:wrap;gap:4px 20px }
body.site-dark .site-chrome-footer-bottom a { display:inline-flex;align-items:center;min-height:44px;color:var(--site-muted);text-decoration:none }
body.site-dark .site-chrome-footer-bottom a:hover { color:var(--site-accent) }
@media(max-width:1050px){body.site-dark .site-chrome-desktop{display:none}body.site-dark .site-chrome-inner{min-height:70px;gap:12px;padding:10px 16px}}
@media(max-width:767px){body.site-dark .site-footer-featured{grid-template-columns:1fr}body.site-dark .site-footer-featured>a{padding:16px}body.site-dark .site-footer-tools nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){body.site-dark .site-chrome-brand img{width:112px;height:34px}body.site-dark .site-chrome-inner{gap:8px}body.site-dark .site-chrome-login{padding:8px 10px;font-size:11px}body.site-dark .site-chrome-menu-toggle{padding:8px 10px}body.site-dark .site-chrome-footer{padding-top:28px}body.site-dark .site-chrome-footer-inner{padding:0 16px}body.site-dark .site-chrome-footer-top{align-items:flex-start;flex-wrap:wrap;gap:18px}body.site-dark .site-chrome-intro{width:100%}body.site-dark .site-chrome-footer-bottom nav{gap:2px 12px}}
@media(prefers-reduced-motion:reduce){body.site-dark .site-chrome-drawer,body.site-dark .site-chrome-drawer::backdrop,.site-menu-icon span{transition:none}}

/* Focused tools: scoped structure and shared dark palette. */

    body.site-dark.istighfar-tool {
        --bg: #d9d1cc;
        --ink: #0f172a;
        --muted: rgba(15, 23, 42, .55);

        --panel: #151312;
        --panel2: #1c1918;

        --danger: #ff3b30;
        --danger2: #e11d48;

        --glass: rgba(255, 255, 255, .58);
        --glassBorder: var(--site-border);
    }

    body.site-dark.istighfar-tool {
        background: var(--bg);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
        margin: 0;
        padding: 16px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--ink);
    }

    body.site-dark.istighfar-tool .main-container {
        width: 100%;
        max-width: 520px;
        text-align: center;
    }

    /* ✅ كرت واحد يجمع الجزء المهم */
    body.site-dark.istighfar-tool .wrap-card {
        background: var(--glass);
        border: 1px solid var(--glassBorder);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .16);
        backdrop-filter: blur(6px);
    }

    /* ✅ Hook أحمر مثل انستا - جملة وحدة */
    body.site-dark.istighfar-tool .hook-red {
        background: linear-gradient(180deg, var(--danger), var(--danger2));
        color: #fff;
        padding: 12px 14px;
        font-weight: 900;
        font-size: 1.02rem;
        line-height: 1.65;
        text-align: center;
        box-shadow: 0 14px 35px rgba(225, 29, 72, .18);
    }

    body.site-dark.istighfar-tool .content {
        padding: 16px 16px 18px;
    }

    body.site-dark.istighfar-tool .title {
        font-weight: 900;
        font-size: 1.85rem;
        margin: 6px 0 6px;
        letter-spacing: .2px;
    }

    /* ✅ رسالة تحدي ديناميكية (تحت العنوان) */
    body.site-dark.istighfar-tool .challenge-msg {
        margin: 6px auto 14px;
        padding: 10px 12px;
        border-radius: 14px;
        background: var(--site-border);
        border: 1px solid var(--site-border);
        font-weight: 900;
        color: var(--site-text);
        line-height: 1.7;
    }

    body.site-dark.istighfar-tool .challenge-msg b {
        color: var(--site-text);
    }

    /* ✅ Timer pill */
    body.site-dark.istighfar-tool .timer-box {
        width: 270px;
        height: 66px;
        margin: 0 auto 12px;
        border-radius: 18px;
        background: linear-gradient(180deg, var(--panel2), var(--panel));
        box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "CourierNew", monospace;
        font-weight: 900;
        font-size: 1.55rem;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, .92);
        user-select: none;
    }

    body.site-dark.istighfar-tool .counter-num {
        font-size: 5.05rem;
        font-weight: 900;
        margin: 8px 0 10px;
        color: var(--site-text);
        transition: transform .12s;
    }

    body.site-dark.istighfar-tool .btn-tap {
        width: 100%;
        border: none;
        border-radius: 999px;
        padding: 18px 18px;
        font-size: 1.28rem;
        font-weight: 900;
        cursor: pointer;
        background: linear-gradient(180deg, #1d1a19, #0f0d0c);
        color: rgba(255, 255, 255, .94);
        box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, opacity .2s ease;
    }

    body.site-dark.istighfar-tool .btn-tap:active {
        transform: scale(.98);
    }

    body.site-dark.istighfar-tool .btn-tap[disabled] {
        opacity: .72;
        cursor: not-allowed;
    }

    /* ✅ Shake قبل البدء */
    @keyframes istighfar-tool-hawjaShake {

        0%,
        100% {
            transform: translateX(0);
        }

        10% {
            transform: translateX(-3px) rotate(-0.8deg);
        }

        20% {
            transform: translateX(3px) rotate(0.8deg);
        }

        30% {
            transform: translateX(-3px) rotate(-0.8deg);
        }

        40% {
            transform: translateX(3px) rotate(0.8deg);
        }

        50% {
            transform: translateX(-2px);
        }

        60% {
            transform: translateX(2px);
        }

        70% {
            transform: translateX(-2px);
        }

        80% {
            transform: translateX(2px);
        }

        90% {
            transform: translateX(-1px);
        }
    }

    body.site-dark.istighfar-tool .btn-shake {
        animation: istighfar-tool-hawjaShake 0.9s ease-in-out infinite;
    }

    /* ✅ Hint (مخفي بالبداية) */
    body.site-dark.istighfar-tool .tap-hint {
        margin-top: 12px;
        font-size: 1rem;
        color: var(--site-text);
        text-decoration: underline;
        text-underline-offset: 5px;
        font-weight: 900;
    }

    /* ✅ Pulse أول ثواني */
    @keyframes istighfar-tool-hawjaPulse {

        0%,
        100% {
            transform: scale(1)
        }

        50% {
            transform: scale(1.03)
        }
    }

    body.site-dark.istighfar-tool .btn-pulse {
        animation: istighfar-tool-hawjaPulse .75s ease-in-out infinite;
    }

    /* ✅ Finish effects */
    @keyframes istighfar-tool-finishBlink {

        0%,
        100% {
            transform: translateX(0);
            filter: none;
        }

        15% {
            transform: translateX(-4px);
        }

        30% {
            transform: translateX(4px);
        }

        45% {
            transform: translateX(-3px);
        }

        60% {
            transform: translateX(3px);
        }
    }

    body.site-dark.istighfar-tool .timer-finish {
        color: rgba(255, 255, 255, .95) !important;
        background: linear-gradient(180deg, #3b1b16, #160c0b) !important;
        animation: istighfar-tool-finishBlink .55s ease-in-out 2;
    }

    @keyframes istighfar-tool-popBounce {
        0% {
            transform: scale(1)
        }

        35% {
            transform: scale(1.16)
        }

        70% {
            transform: scale(.98)
        }

        100% {
            transform: scale(1)
        }
    }

    body.site-dark.istighfar-tool .count-finish {
        animation: istighfar-tool-popBounce .65s ease-in-out 1;
    }

    /* ✅ Loading istighfar-tool-dots on button */
    body.site-dark.istighfar-tool .loading-istighfar-tool-dots::after {
        content: "…";
        animation: istighfar-tool-dots 1.1s steps(4, end) infinite;
    }

    @keyframes istighfar-tool-dots {
        0% {
            content: "";
        }

        25% {
            content: ".";
        }

        50% {
            content: "..";
        }

        75% {
            content: "...";
        }

        100% {
            content: "";
        }
    }

    /* ✅ محتوى تحت — رجّعناه (الكبير) + مسافة واضحة */
    body.site-dark.istighfar-tool .value-wrap {
        margin-top: 36px;
        padding: 0 6px;
        text-align: right;
    }

    body.site-dark.istighfar-tool .value-card {
        background: var(--glass);
        border: 1px solid var(--glassBorder);
        border-radius: 18px;
        padding: 18px 16px;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
        backdrop-filter: blur(6px);
    }

    body.site-dark.istighfar-tool .value-kicker {
        display: inline-block;
        font-weight: 900;
        font-size: .9rem;
        color: var(--site-text);
        background: var(--site-border);
        border: 1px solid var(--site-border);
        padding: 6px 10px;
        border-radius: 999px;
        margin-bottom: 10px;
    }

    body.site-dark.istighfar-tool .value-card h2 {
        margin: 0 0 10px;
        font-size: 1.22rem;
        font-weight: 900;
        color: var(--site-text);
    }

    body.site-dark.istighfar-tool .value-card p {
        margin: 0 0 14px;
        line-height: 1.95;
        color: var(--site-text);
        font-weight: 800;
    }

    body.site-dark.istighfar-tool .value-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 10px 0 14px;
    }

    @media (min-width: 520px) {
        body.site-dark.istighfar-tool .value-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    body.site-dark.istighfar-tool .value-item {
        background: var(--site-surface-raised);
        border: 1px solid var(--site-border);
        border-radius: 16px;
        padding: 12px 12px;
        font-weight: 800;
        color: var(--site-text);
        line-height: 1.85;
    }

    body.site-dark.istighfar-tool .value-item b {
        display: block;
        color: var(--site-text);
        margin-bottom: 4px;
    }

    body.site-dark.istighfar-tool .value-card hr {
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, .10);
        margin: 14px 0;
    }

    body.site-dark.istighfar-tool .value-card h3 {
        margin: 0 0 10px;
        font-size: 1.05rem;
        font-weight: 900;
        color: var(--site-text);
    }

    body.site-dark.istighfar-tool .value-card details {
        margin: 10px 0;
        background: var(--site-surface-raised);
        border: 1px solid var(--site-border);
        border-radius: 14px;
        padding: 10px 12px;
    }

    body.site-dark.istighfar-tool .value-card summary {
        cursor: pointer;
        font-weight: 900;
        color: var(--site-text);
        outline: none;
    }

    body.site-dark.istighfar-tool .value-card .answer {
        margin-top: 8px;
        color: var(--site-text);
        font-weight: 800;
        line-height: 1.9;
    }


  body.site-dark.istighfar-result-tool {
    --bg:#d9d1cc;
    --ink:#0f172a;
    --panel:#151312;
    --panel2:#1c1918;
    --wa1:#2de36f;
    --wa2:#1fae50;
  }

  body.site-dark.istighfar-result-tool {
    background: var(--bg);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:100vh;
    margin:0;
    padding:16px;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    color: var(--ink);
  }

  body.site-dark.istighfar-result-tool .main-container {
    width:100%;
    max-width:520px;
    text-align:center;
  }

  body.site-dark.istighfar-result-tool .result-card {
    background: var(--site-surface-raised);
    border: 1px solid var(--site-border);
    border-radius: 18px;
    overflow:hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.16);
    backdrop-filter: blur(6px);
    margin-top: 10px;
  }

  body.site-dark.istighfar-result-tool .reset-btn-top {
    display:block;
    padding: 12px 12px 0;
    text-decoration:none;
    color: var(--site-text);
    font-weight: 800;
    font-size: .9rem;
    text-align:right;
  }

  body.site-dark.istighfar-result-tool .result-header {
    background: linear-gradient(180deg, #1d1a19, #0f0d0c);
    color: rgba(255,255,255,.94);
    padding: 12px;
    font-size: 1.15rem;
    font-weight: 900;
  }

  body.site-dark.istighfar-result-tool .result-body { padding: 20px 18px 22px; }

  body.site-dark.istighfar-result-tool .big-number {
    font-size: 3.4rem;
    font-weight: 900;
    margin: 6px 0 0;
    color: var(--site-text);
    letter-spacing: .5px;
  }

  body.site-dark.istighfar-result-tool .mini {
    margin-top: 6px;
    font-weight: 900;
    color: var(--site-text);
    font-size: 1.02rem;
  }

  body.site-dark.istighfar-result-tool .cta {
    margin: 14px 0 10px;
    font-weight: 900;
    color: var(--site-text);
    line-height: 1.7;
  }

  body.site-dark.istighfar-result-tool .wa-btn {
    width: 100%;
    border: none;
    border-radius: 16px;
    padding: 14px 12px;
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(180deg, var(--wa1), var(--wa2));
    box-shadow: 0 16px 34px rgba(37,211,102,.20);
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.site-dark.istighfar-result-tool .wa-btn:active { transform: scale(.99); }

  body.site-dark.istighfar-result-tool .secondary-row {
    display:flex;
    gap:10px;
    margin-top: 10px;
  }
  body.site-dark.istighfar-result-tool .secondary-row a {
    flex:1;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 12px 10px;
    border-radius: 14px;
    font-weight: 900;
    font-size: .95rem;
    color: var(--site-text);
    background: var(--site-surface-raised);
    border: 1px solid var(--site-border);
    -webkit-tap-highlight-color: transparent;
  }

  body.site-dark.istighfar-result-tool .footer-banner {
    background: rgba(0,0,0,.75);
    color: rgba(255,255,255,.92);
    padding: 12px;
    font-size: .95rem;
    font-weight: 800;
  }

  body.site-dark.istighfar-result-tool .value-wrap {
    margin-top: 22px;
    padding: 0 6px;
    text-align:right;
  }
  body.site-dark.istighfar-result-tool .value-card {
    background: var(--site-surface-raised);
    border: 1px solid var(--site-border);
    border-radius: 18px;
    padding: 16px 14px;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    backdrop-filter: blur(6px);
  }
  body.site-dark.istighfar-result-tool .value-card p {
    margin:0;
    line-height:1.95;
    color: var(--site-text);
    font-weight: 800;
    font-size: 1rem;
  }
  body.site-dark.istighfar-result-tool .value-card b { color: var(--site-text); }


    body.site-dark.rewards-tool {
        background-color: #01b1c4 !important;
        color: #212529;
    }

    body.site-dark.rewards-tool .time-for-rewards-page {
        max-width: 400px;
        margin: auto;
        background: white;
        padding: 15px 20px 20px 20px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }


    body.site-dark.rewards-tool .time-for-rewards-page .logo img {
        width: 80px;
    }

    body.site-dark.rewards-tool .time-for-rewards-page .main-headline h1 {
        color: #2c3e50;
        text-align: right;
        font-size: 1.5rem;
        font-weight: 900;
        margin-bottom: .3rem;
    }

    body.site-dark.rewards-tool .time-for-rewards-page .sub-headline {
        color: #2c3e50;
        text-align: right;
        font-size: 1rem;
        font-weight: 700;
    }

    body.site-dark.rewards-tool .time-for-rewards-page .divider {
        border: 0;
        border-top: 3px solid #01b1c4;
        width: 30%;
        float: right;
        margin-top: .7rem;
    }

    body.site-dark.rewards-tool .buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    body.site-dark.rewards-tool .suggestion {
        margin-top: 20px;
        font-size: 18px;
        color: #2980b9;
        font-weight: bold;
    }


    body.site-dark.hourly-tool {
        background-color: #01b1c4 !important;
        color: #212529;
    }


    body.site-dark.rewards-tool .tasbeeh-v2-box .headline.sub {
        display: flex;
    }

    body.site-dark.rewards-tool .tasbeeh-v2-box .headline.sub .number {
        font-size: .8rem;
        line-height: 1.4rem;
        font-weight: 700;
        border-radius: 100%;
        color: #FFFFFF;
        width: 20px;
        height: 20px;
        display: block;
        text-align: center;
    }
/* Tool skins use the same palette as the rest of the site. */
body.site-dark:is(.istighfar-tool,.istighfar-result-tool) {
    --bg:var(--site-bg);--ink:var(--site-text);--panel:var(--site-surface);--panel2:var(--site-surface-raised);
    --glass:var(--site-surface);--glassBorder:var(--site-border);--danger:var(--site-surface-raised);--danger2:var(--site-surface);
    display:block;min-height:100dvh;padding:28px 16px;color:var(--site-text);font-family:Almarai,Tahoma,sans-serif;
}
body.site-dark:is(.istighfar-tool,.istighfar-result-tool) .main-container { width:100%;max-width:560px;margin:0 auto }
body.site-dark:is(.istighfar-tool,.istighfar-result-tool) :is(.wrap-card,.result-card,.value-card) { background:var(--site-surface);border:1px solid var(--site-border);border-radius:22px;box-shadow:0 12px 40px #0002 }
body.site-dark.istighfar-tool .content { padding:26px 22px }
body.site-dark.istighfar-tool .hook-red { background:var(--site-surface-raised);color:var(--site-accent);border-bottom:1px solid var(--site-border);box-shadow:none;padding:16px;font-size:14px }
body.site-dark.istighfar-tool .title { font-size:26px;color:var(--site-text);line-height:1.8 }
body.site-dark.istighfar-tool .challenge-msg { color:var(--site-muted);font-size:13px;line-height:2;background:#102026;border:1px solid var(--site-border);font-weight:400 }
body.site-dark.istighfar-tool .challenge-msg b { color:var(--site-accent) }
body.site-dark.istighfar-tool .timer-box { max-width:100%;background:var(--site-bg);border:1px solid var(--site-border);border-radius:14px;box-shadow:none;color:var(--site-accent) }
body.site-dark.istighfar-tool .counter-num { font-size:clamp(60px,16vw,88px);color:var(--site-text) }
body.site-dark.istighfar-tool .btn-tap { background:var(--site-accent);color:#102b29;border-radius:16px;min-height:60px;box-shadow:none;font-size:20px }
body.site-dark.istighfar-tool .btn-shake { animation:none }
body.site-dark.istighfar-tool .tap-hint { color:var(--site-muted);font-size:12px;font-weight:400;text-decoration:none;line-height:2 }
body.site-dark:is(.istighfar-tool,.istighfar-result-tool) .value-card :is(h2,h3,b,summary) { color:var(--site-text) }
body.site-dark:is(.istighfar-tool,.istighfar-result-tool) .value-card :is(p,.answer) { color:var(--site-muted);font-weight:400;font-size:13px }
body.site-dark.istighfar-tool :is(.value-item,.value-kicker,.value-card details) { background:var(--site-surface-raised);border-color:var(--site-border);color:var(--site-muted);font-size:12px;font-weight:400 }
body.site-dark.istighfar-result-tool :is(.big-number,.mini,.cta) { color:var(--site-text) }
body.site-dark.istighfar-result-tool .result-header { background:var(--site-surface-raised);color:var(--site-accent) }
body.site-dark.istighfar-result-tool .reset-btn-top { color:var(--site-muted);min-height:44px }
body.site-dark.istighfar-result-tool .wa-btn { background:var(--site-accent);color:#102b29;box-shadow:none }
body.site-dark.istighfar-result-tool .secondary-row button { background:var(--site-surface-raised);color:var(--site-text);border:1px solid var(--site-border) }
body.site-dark.rewards-tool .time-for-rewards-page { max-width:680px;border:1px solid var(--site-border);border-radius:24px;padding:28px 0!important;box-shadow:0 12px 40px #0002 }
body.site-dark.rewards-tool .time-for-rewards-page .main-headline h1 { font-size:clamp(22px,5vw,30px);font-weight:700;text-align:center;line-height:1.8;color:var(--site-text) }
body.site-dark.rewards-tool .time-for-rewards-page .sub-headline { color:var(--site-muted);text-align:center;font-size:13px;font-weight:400;line-height:2 }
body.site-dark.rewards-tool .time-for-rewards-page .divider { float:none;width:52px;margin:18px auto 0;border-top:2px solid var(--site-accent) }
body.site-dark.rewards-tool .time-for-rewards-page .buttons { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px!important }
body.site-dark.rewards-tool .time-for-rewards-page [data-reward-minutes] { padding:18px 8px;min-height:66px;border-radius:14px;background:var(--site-surface-raised);color:var(--site-text);border:1px solid var(--site-border);font-weight:700 }
body.site-dark.rewards-tool .time-for-rewards-page [data-reward-minutes]:is(:hover,.is-active) { color:#102b29;background:var(--site-accent);border-color:var(--site-accent) }
body.site-dark.rewards-tool .content-boxes { background:transparent!important;padding:12px 6px;margin-top:24px!important }
body.site-dark.rewards-tool .content-box { scroll-margin-top:24px }
body.site-dark.rewards-tool .tasbeeh-item { background:var(--site-surface-raised)!important;border:1px solid var(--site-border);box-shadow:none;padding:22px 14px }
body.site-dark.rewards-tool .tasbeeh-text { line-height:2.2!important }
body.site-dark.rewards-tool .intent-share-buttons { background:var(--site-bg);border:1px solid var(--site-border);border-radius:16px;margin:24px 16px 0;width:auto }
body.site-dark.hourly-tool .hourly-du3a-page { max-width:800px;margin:28px auto!important }
body.site-dark.hourly-tool :is(.top-sections,.bottom-sections,.nav-sections) { background:var(--site-surface)!important;border:1px solid var(--site-border);padding:24px;border-radius:18px }
body.site-dark.hourly-tool .nav-sections { border-radius:18px 18px 0 0;padding:14px 20px;border-bottom:0 }
body.site-dark.hourly-tool .top-sections { border-radius:0 0 18px 18px }
body.site-dark.hourly-tool .bottom-sections { margin-top:20px }
body.site-dark.hourly-tool .hourly-eyebrow { color:var(--site-accent);font-size:12px;line-height:32px }
body.site-dark.hourly-tool .du3a-box { background:var(--site-bg)!important;border:1px solid var(--site-border);border-radius:16px;padding:24px 20px;color:var(--site-text);font-size:22px;line-height:2.3 }
body.site-dark.hourly-tool :is(.main-headline,.sub-headline,.countdown-box,.du3a-benifits) { color:var(--site-muted) }
body.site-dark.hourly-tool .main-headline { color:var(--site-text);font-weight:700;font-size:20px;line-height:1.8 }
body.site-dark.hourly-tool .btn-danger { background:var(--site-accent);border-color:var(--site-accent);color:#102b29 }
body.site-dark.hourly-tool .btn[data-target="#helpfulOptionsModal"] { color:var(--site-text) }
@media(max-width:575px){body.site-dark.rewards-tool .time-for-rewards-page{margin-top:20px!important}body.site-dark.rewards-tool .time-for-rewards-page .buttons{gap:6px}body.site-dark.hourly-tool :is(.top-sections,.bottom-sections){padding:20px 14px}body.site-dark.hourly-tool .du3a-box{font-size:20px;padding:22px 16px}}
@media(prefers-reduced-motion:reduce){body.site-dark:is(.istighfar-tool,.istighfar-result-tool) *,body.site-dark:is(.istighfar-tool,.istighfar-result-tool) *::after{animation:none!important;transition:none!important}}

body.site-dark.hourly-tool .hourly-du3a-page .du3a-benifits .headline { color:var(--site-text) }
body.site-dark:is(.hourly-tool,.rewards-tool) { background:var(--site-bg)!important;color:var(--site-text)!important }
body.site-dark.hourly-tool .countdown-timer { color:var(--site-accent) }
body.site-dark.rewards-tool .time-for-rewards-page [data-reward-minutes].is-active { color:#102b29!important }

/* These tools now live inside the shared full-page layout. */
body.site-dark:is(.istighfar-tool,.istighfar-result-tool,.tasbeeh-tool) { display:block;height:auto;min-height:100dvh;padding:0 }
body.site-dark:is(.istighfar-tool,.istighfar-result-tool) .site-content > .main-container { box-sizing:border-box;margin:32px auto 40px;padding:0 16px;max-width:592px }
body.site-dark.tasbeeh-tool .site-content { display:flex;align-items:center;justify-content:center;min-height:72vh;padding:32px 16px!important;box-sizing:border-box }
body.site-dark.tasbeeh-tool .phone-mockup { margin:0 auto }
body.site-dark.journeys-tool .journey-engine .azk-page { min-height:72vh }
body.site-dark .site-chrome-menu-toggle { width:44px;height:44px;padding:10px }
/* Useful destinations when a page is missing. */
body.site-dark .error-discovery { max-width:1120px;margin:0 auto;padding:44px 24px 64px }
body.site-dark .error-discovery-intro { max-width:720px;margin:0 auto 36px;text-align:center }
body.site-dark .error-discovery-code { display:block;color:var(--site-accent);font:800 clamp(72px,15vw,120px)/1 Almarai,Tahoma,sans-serif;letter-spacing:5px;opacity:.45;margin:0 0 20px }
body.site-dark .error-discovery-eyebrow { color:var(--site-muted);font-size:12px;line-height:1.9;margin:0 0 12px }
body.site-dark .error-discovery-intro h1 { color:var(--site-text);font-size:clamp(22px,4vw,34px);font-weight:700;line-height:1.8;margin:0 0 12px }
body.site-dark .error-discovery-description { color:var(--site-muted);font-size:14px;line-height:2;margin:0 auto 22px;max-width:580px }
body.site-dark .error-home-link { display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:48px;padding:12px 22px;border-radius:12px;background:var(--site-accent);color:#102b29;font-size:13px;font-weight:700;text-decoration:none }
body.site-dark .error-home-link:hover { background:#b7eddf;color:#102b29 }
body.site-dark .error-service-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px }
body.site-dark .error-service-card { display:flex;flex-direction:column;align-items:flex-start;padding:26px;border:1px solid var(--site-border);border-radius:20px;background:var(--site-surface);color:var(--site-text);text-decoration:none;transition:background .2s ease,border-color .2s ease }
body.site-dark .error-service-card:hover { border-color:var(--site-accent);background:var(--site-surface-raised);color:var(--site-text);text-decoration:none }
body.site-dark .error-service-number { color:var(--site-accent);font-size:12px;margin-bottom:22px;opacity:.75 }
body.site-dark .error-service-card h2 { color:var(--site-text);font-size:17px;font-weight:700;line-height:1.8;margin:0 0 10px }
body.site-dark .error-service-card p { flex:1;color:var(--site-muted);font-size:12px;line-height:2;margin:0 0 22px }
body.site-dark .error-service-action { display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%;color:var(--site-accent);font-size:12px;font-weight:700 }
body.site-dark .error-more { margin:32px 0 0;text-align:center }
body.site-dark .error-more h2 { color:var(--site-muted);font-size:13px;font-weight:400;margin:0 0 16px;line-height:1.9 }
body.site-dark .error-more nav { display:flex;flex-wrap:wrap;justify-content:center;gap:8px }
body.site-dark .error-more a { display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--site-border);border-radius:10px;color:var(--site-text);font-size:12px;text-decoration:none }
body.site-dark .error-more a:hover { color:var(--site-accent);background:var(--site-surface) }
@media(max-width:767px){body.site-dark .error-service-grid{grid-template-columns:1fr}body.site-dark .error-service-card{padding:22px}body.site-dark .error-service-number{margin-bottom:12px}body.site-dark .error-discovery{padding:32px 16px 44px}}
@media(prefers-reduced-motion:reduce){body.site-dark .error-service-card{transition:none}}