body{
    direction: rtl;
    /*--main-color: #7a7a7a;*/
    --main-color: #fcc406;
    --acn-color: #1c5859;
    --sec-color-light: #ddeaea;
    /*--main-color: #794b21;*/
    /*--acn-color: #F5F5DC;*/
    /*--acn-color: #fff8e8;*/

    --sec-color: #1c5859;
    max-width: 100vw !important;
    overflow-x: hidden; /* temporary */
    font-family: "Tajawal", serif
}


.text-main-color{color: var(--main-color) !important}
.text-sec-color{color: var(--sec-color) !important}
.text-acn-color{color: var(--acn-color) !important}
.text-sec-color-light{color: var(--sec-color-light) !important}

.text-main-color-hover:hover{color: var(--main-color) !important}
.text-sec-color-hover:hover{color: var(--sec-color) !important}
.text-acn-color-hover:hover{color: var(--acn-color) !important}

.bg-main-color{background-color: var(--main-color) !important}
.bg-sec-color{background-color: var(--sec-color) !important}
.bg-acn-color{background-color: var(--acn-color) !important}
.bg-sec-color-light{background-color: var(--sec-color-light) !important}

.bg-main-color-hover:hover{background-color: var(--main-color) !important}
.bg-sec-color-hover:hover{background-color: var(--sec-color) !important}
.bg-acn-color-hover:hover{background-color: var(--acn-color) !important}

.main-border-color{
    border-color: var(--main-color) !important;
}
.acn-border-color{
    border-color: var(--acn-color) !important;
}
.sec-border-color{
    border-color: var(--sec-color) !important;
}

.shadow-main-color{box-shadow: 0 0 5px 1px var(--main-color) !important}
.shadow-sec-color{box-shadow: 0 0 5px 1px var(--sec-color) !important}
.shadow-acn-color{box-shadow: 0 0 5px 1px var(--acn-color) !important}

.shadow-main-color-hover:hover{box-shadow: 0 0 5px 1px var(--main-color) !important}
.shadow-sec-color-hover:hover{box-shadow: 0 0 5px 1px var(--sec-color) !important}
.shadow-acn-color-hover:hover{box-shadow: 0 0 5px 1px var(--acn-color) !important}

.shadow-main-color-border{box-shadow: 0 0 1px 3px var(--main-color) !important}
.shadow-sec-color-border{box-shadow: 0 0 1px 3px var(--sec-color) !important}
.shadow-acn-color-border{box-shadow: 0 0 1px 3px var(--acn-color) !important}

.shadow-main-color-border-hover:hover{box-shadow: 0 0 1px 3px var(--main-color) !important}
.shadow-sec-color-border-hover:hover{box-shadow: 0 0 1px 3px var(--sec-color) !important}
.shadow-acn-color-border-hover:hover{box-shadow: 0 0 1px 3px var(--acn-color) !important}


/*glopal*/
.div-create-page *{
    color: black !important;
}
.div-create-page p{
    font-size: 18px !important;
}

.div-create-page strong{
    color: darkgreen !important;
    font-size: 24px !important;
}
.div-create-page .container.img{
    display: flex;
    justify-content: center;
    align-items: center;
}
.div-create-page img{
    max-width: 75vw;
    width: 200px;
    min-width: 100px;
}

/*HEADER AREA*/
.navbar-home{
    background: beige;
    /*background: #fefcf8;*/
    /*background: #f8fefd;*/
    font-family: Tajawal, sans-serif;
    box-shadow: 0 0 10px 0 #80310929;
}
.navbar-home .head-nav{
    /*background-image: linear-gradient(to bottom , #e8fcff, #fff);*/
    background-color: var(--sec-color);
    display: flex;
    justify-content: space-between;
    padding-block: 10px;
    gap: 5px;
    font-family: Tajawal, sans-serif;
}

.navbar-toggler-icon{
    background-color: var(--acn-color) !important;
    padding: 3px;
    border-radius: 4px;
}
/********************** NAV LOGO *********************/
.navbar-home .navbar-logo{
    padding: 0;
}
.navbar-home .navbar-logo .logo-img{
    width: 70px;
    aspect-ratio: 1/1;
    border-radius: 7px;
    background-color: white;
    padding: 5px;
}

/********************** NAV ITEMS MENU *********************/
.navbar-home .div-collapse-nav{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ul-items{
    align-items: center;
    /*background-color: rgb(40 167 69);*/
    border-radius: 7px;
}

.ul-items li{
    height: max-content;
    color: #fff;
    text-shadow: 0 0 1px #ffffff;
    text-wrap: nowrap;
}
.ul-items li:hover a{
    color: #ffb751 !important;
}

.ul-items li .nav-link{
    color: var(--sec-color) !important;
    background-color: var(--sec-color-light) !important;
    margin-inline: 2px;
    border-radius: 5px;
    padding: 5px 9px;
    text-shadow: 0 0 1px #030303;
    font-size: 15px;
}


/********************** CONTAINER-LOG *********************/
.container-log{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 0;
    max-width: max-content;
}

/* cont-subscribe */
.cont-sub {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex-direction: column;
}

.cont-sub .user-name a{
    background-color: #037c32d6;
    padding: 1px 7px;
    border-radius: 5px;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 6px;
}

.cont-sub .user-name span{
    color: #ffffff;
}

.cont-sub .user-name a.nav-item{
    padding: 0;
    color: black;
}

.cont-sub .links-user{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 5px;
}

.cont-sub .links-user a {
    color: var(--acn-color);
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2px 5px;
    border-radius: 5px;
}
.cont-sub .links-user a:hover {
    color: var(--sec-color);
    background-color: rgba(255, 255, 255, 0.12);
}

.cont-sub a i{
    color: var(--sec-color);
    margin-inline: 5px;
}

/* cont-unsubscribe */
.cont-unsub{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1 1 0;
}
.cont-unsub a{
    height: fit-content;
    border-radius: 5px;

}
.cont-unsub .log{
    /*color: #e7e6e6 ;*/
    /*border: 1px solid #e7e6e6;*/
}
.cont-unsub .reg{

}

@media screen and (max-width: 996px){
    .main-navbar{
        background-color: rgb(196 255 252);
        /*background-color: rgb(196 255 252);*/
    }
    .navbar-home .logo-img{
        width: 50px;
    }
    .navbar-home .navbar-logo{
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        /*padding: 1px 3px;*/
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin: 0;
        order: 0;
    }
    .navbar-home .navbar-collapse{
        position: absolute;
        background-color: #631800f7;
        right: 0;
        top: 85px;
        z-index: 1000;
        width: 100%;
    }
    .ul-items li{
        width: 100%;
        margin-block: 1px;
        background-color: #00000021;
        text-align: center;
        padding-inline: 5px;
    }
    .ul-items li:hover{
        background-color: rgba(6, 94, 58, 0.73);
    }
    .ul-items li:hover  a{
        letter-spacing: .1ch;
    }

    .navbar-home .collapse-nav{
        order: 2;
    }
    .navbar-home button.navbar-toggler{

        padding: 1px 3px;
        /*background-color: #e5e3e3;*/
        border-radius: 5px;
    }

    .cont-sub .links-user a {
        color: #fff;
        background-color: rgba(0, 0, 0, 0.05);
        padding: 2px 5px;
        border-radius: 5px;
    }
    .cont-sub .links-user a:hover {
        color: #884a00;
        background-color: rgba(0, 0, 0, 0.12);
    }

    .navbar-home .cont-unsub .btn{
        padding: 1px 3px;
    }
    .navbar-home .cont-unsub .log{
        color: black;
    }
    .navbar-home .cont-unsub a{
        font-size: 14px;
    }
    .navbar-home .cont-unsub i{
        color: orange;
        font-size: 16px;
    }

}

.card-content{
    display: grid;
    grid-auto-columns: 1fr;
    gap: 20px;

}

.cont-intro .card{
    background-color: transparent;
    border: none;
}

.cont-intro .card-cont{
    display: inline-block;
    color: var(--acn-color) ;
    direction: rtl;
    text-align: right;
    font-family: Tajawal,sans-serif;
    font-size: 18px;
    overflow: visible;
    white-space: normal;
    font-weight: bold;
}

.cont-intro .card-cont::first-line{
    color: var(--sec-color) ;
    font-size: 20px;
    font-weight: bold;
}
.cont-img-nav{
    display: flex;
    gap: 0;
    justify-content: center;

}
.cont-img-nav span{
    display: flex;
    width: 150px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: rgba(94, 44, 8, 0.2);
    overflow: hidden;
}
.cont-img-nav img{
    width: 100%;
    /*box-shadow: 0 0 5px 1px white inset;*/
    filter: drop-shadow( 0 0 3px #5e2c08) brightness(85%);
}
.cont-img-nav .card-imam{
    gap: 4px;
    flex-direction: column;
}
.cont-img-nav .card-imam p{
    color: var(--acn-color) ;
    font-weight: bold;
}
.cont-img-nav .card-imam img{
    max-width: 75vw;
    width: 150px;
    min-width: 100px;
}

/****************** cnt_reg_home ******************/
.cnt_reg_home{
    margin-top: 20px;
}

.cnt_reg_home .card-reg{
    /*background-color: #06277c;*/
    background-color: rgb(246, 255, 254);
    width: 100%;
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(6, 61, 16, 0.06);
    display: flex;
    justify-content: center;
    align-content: center;
    /*max-width: max-content;*/
}

.cnt_reg_home .card-reg .div{
    width: max-content;
    background-color: #fff;
    flex: 0 1 ;
}
.cnt_reg_home form > div{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cnt_reg_home input{
    /*background: #794B21;*/
    /*border: 1px solid #c4c4c4;*/
}
.cnt_reg_home input{
    /*background: #fff;*/
    /*background: var(--main-color);*/
    border: 1px solid rgba(196, 196, 196, 0.1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
    color: var(--acn-color) !important;
    height: max-content;
    padding: 8px 5px;
    font-size: 18px;
}

.cnt_reg_home input:focus{
    background: #fff;
    box-shadow: 0 0 3px 1px #794B21;
}

.cnt_reg_home input::placeholder{
    color: #794B21 ;
}

.cnt_reg_home .btn-sbm{
    color: white !important;
    background-color: var(--main-color) !important;
}

/**************** SECTION INFO WEB HOME *****************/
.faq-area .card-info-web{
    height: 100%;
    background-color: rgb(205, 242, 218);
}

.home-video-bg{
    height: 100%;
    background-color: var(--sec-color) !important;
    /*background-color: rgba(223, 223, 223, 0.98) !important;*/
    /*box-shadow: 0 0 2px #572705;*/
    }

.home-video-bg iframe{
    border: none;
}

.footer-bottom-area{
    background-color: var(--sec-color) !important;
}

.footer-bottom-area .row-footer{
    justify-content: center;
    align-content: center;
}
.footer-bottom-area .row-footer .column{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-bottom-area .row-footer .social-link{
    height: max-content;
    max-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/**************** SECTION REGISTER EVERY PAGE ****************/
.section-register-tmp{

}

.section-register-tmp .row-fields{
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.section-register-tmp .btn-sbm{
    padding: 9px 20px;
    background-color: white;
}


.section-2 .card-content{

}

.section-2 .card-content a{
    color: var(--main-color);
}



.section-3 .items-content{
    background-color: rgb(12 122 145 / 6%);
    border: none;
}
.section-3 .items-content a{
    color: var(--main-color);
    font-weight: bold;
    font-size: 17px;
    text-align: right;
    padding: 1px 5px;
    border-radius: 5px;
}
.section-3 .items-content a:hover{
    background-color: var(--main-color);
    color: white;
}


.section-3 .holder{
    height: 100%;
    align-items: stretch;

}
.section-3 .holder > div{
    width: 100%;
    flex: 1 0 1px;
}
.section-3 .holder  i{
    color: var(--main-color)
}

.section-3 .holder .card-content:hover {
    background-color: var(--main-color)
}

.section-3 .holder .card-content:hover :where(.title, i){
    color: white;
}

.section-3 .holder .title{
    color: var(--main-color);
    font-size: 22px;
    cursor: pointer;
}

.card-colorfull p{
    color: var(--acn-color) !important;
}

.card-colorfull:hover p{
    display: inline-block !important;
    background-color: var(--acn-color);
    color: var(--main-color) !important;
}