*{margin: 0; padding: 0; box-sizing: border-box}
body {font-family: "Noto Sans Arabic", sans-serif}
.dropdown-item.active, .dropdown-item:active {   color: #be2edd;   text-decoration: none;   background-color: #fafafa}
.dir-rtl{direction: rtl}
.main-color{color: #be2edd}
.second-color{color: #fd79a8}
.third-color{color: #2d3436}
.grey-color{color: grey}
.w-color{color: #fafafa}
.white-bgc-color{background-color: #fafafa}
.main-bgc-color{background-color: #be2edd}
.second-bgc-color{background-color: #f6558f}
.dark-bgc-color{background-color: #2d3436}
.main-bb-color{border-bottom: 1px solid rgb(190 46 221 / 25%)}
.main-bt-color{border-top: 1px solid rgb(190 46 221 / 25%)}
.second-bb-color{border-bottom: 1px solid  #fd79a8}
.z-index-sma{z-index: 999999}
.p-relative{position: relative}
.p-absolute{position: absolute}
.b-radius{border-radius: 5px}
.text-align-left{text-align: left}
.navbar .nav-link,
.navbar .nav-link:focus,
.navbar .nav-link:hover{color: #be2edd}
.navbar .nav-link.active{color: #fd79a8; font-weight: bold}

.categories .ad-content .btn:hover{background-color: #be2edd}
.categories h1{ margin-top: 3%;    margin-bottom: 3%}
.categories h1,
.story h1{
    width: fit-content;
    border-radius: 5px;
    padding: 10px 5px;
    border-right: 8px solid #e891fc;
    transition: all 1s ease-in-out
}
.styles-liked{background-color: #e92c71; font-weight: bold; border: 1px solid #e92c71;}
@media(min-width: 768px) and (max-width: 991px){
    .categories{padding-top: 25px; padding-bottom: 25px}
    .categories .ad-content{margin: 100px auto 25px auto; text-align: center}
    .categories .ad-content h5{font-size: 23px}
    .categories .story-content p,
    .categories .ad-content p{font-size: 19px}
}
@media(min-width: 768px){
    .p-md-absolute{position: absolute}
    .categories .story-content h2{
        bottom: 0;
        width: 100%;
        left: 0;
        background: rgba(250, 250, 250, .9);
        margin-bottom: 0
    }
    .categories .story-content h2,
    .ad-content h2{
        padding: 5%;
        border-top: 2px solid grey;
        border-bottom: 2px solid grey
    }
    .ad-content h5{padding: 20px 10px}
    .categories .story-description{
        opacity: 0;
        top: 0;
        left: 0;
        background-color: rgba(250, 250, 250, .95);
        width: 100%;
        height: 100%;
        border: 1px solid gainsboro;
        padding: 30px 20px;
        transition: all .5s ease-in-out
    }
    .categories .story-content:hover .story-description{opacity: 1}
    .categories .ad-content{ overflow: hidden}
    .story{padding: 55px 0}

    .chapter h1{margin-bottom: 50px}
    .chapter .chapter-icons{
        margin: 30px 0;
        border-bottom: 1px solid #c2c0c0;
        border-top: 1px solid #c2c0c0;
        padding: 25px 0;
    }
    .chapter .chapter-icon h3,
    .chapter .chapter-icon p{font-size: 16px}
    .chapter .chapter-img,
    .chapter .content-ads{margin: 30px auto}
    .chapter .chapter-links{padding: 25px 0}
    .chapter .chapter-comments .comment-content{
        margin: 30px 0;
        border-bottom: 1px solid rgba(190, 46, 221, .2);
        border-right: 1px solid rgba(190, 46, 221, .2);
        padding: 30px 0;
    }
    .chapter .chapter-comments h3,
    .chapter .chapter-comments .comment-content h6{width: fit-content}
    .chapter .chapter-comments h3{   border-right: 8px solid #e891fc; border-radius: 5px; padding: 5px 10px}
    .chapter .chapter-comments h6{ padding: 10px 15px}
    .chapter .chapter-comments p{margin: 15px 30px 0}

    footer{padding-top: 7%; padding-bottom: 3%}
}
@media(min-width: 992px){
    .image-logo-top-lg{top: 6%;    left: 48%;    transform: translate(-50%, -50%) }
    .categories{padding-top: 55px; padding-bottom: 100px}
    .categories:hover h1{padding: 10px 13px}
    .categories .story-content h2,
    .ad-content h2{font-size: 19px}  
    .story .description p{ font-size: 19px; margin-top: 25px; border-right: 1px solid #fd79a8;    padding-right: 15px;}  
    .story h1{font-size: 33px; border-radius: 5px; margin-top: 0}
    .story .fehres{margin-top: 67px}
    
    .chapter h1{margin-top: 50px}
}
@media(min-width: 1400px){
    .categories h1{font-size: 48px}
    .categories .story-content h2,
    .ad-content h2,
    .ad-content h5,
    .categories .story-description p{font-size: 23px}
    .categories .ad-description p, .categories .ad-description a{font-size: 19px}
}
@media(max-width: 767px){
    .story-content{text-align: center}
    .story-content a,
    .ad-content{width: 80%}
    .story-content a{ margin: 0 auto}
    .ad-content{ margin: 50px auto}
    .ad-content h2{padding: 25px 10px; margin-bottom: 25px}


    .chapter h1{margin-bottom: 25px}
    .chapter .chapter-icons{margin: 25px 0}
    .chapter .chapter-icon h3,
    .chapter .chapter-icon p{font-size: 14px}
    .chapter .chapter-img,
    .chapter .content-ads{margin: 25px auto}
    .chapter .latest-stories{padding: 30px 0}

    .chapter .chapter-comments .comment-content{
        margin: 15px 0;
        border-bottom: 1px solid rgba(190, 46, 221, .2);
        padding: 15px 0;
    }
    .chapter .chapter-comments h3,
    .chapter .chapter-comments .comment-content h6{width: fit-content}
    .chapter .chapter-comments h3{   border-right: 8px solid #e891fc; border-radius: 5px; padding: 5px 10px}
    .chapter .chapter-comments h6{ padding: 5px 10px}
    .chapter .chapter-comments p{margin: 10px 20px 0}
    footer{padding-top: 100px}
}