﻿/* Root Variables and Global Styles */
@media (min-width: 768px) {
    :root {
        --card-font-size: 16px;
        --card-font-line-height: 160%;
    }
}

@media (min-width: 1200px) {
    :root {
        --card-font-size: 18px;
        --card-font-line-height: 160%;
    }
}

@media (min-width: 1400px) {
    :root {
        --card-font-size: 20px;
        --card-font-line-height: 160%;
    }

    .card .card-body h3 {
        height: 60px;
    }
}

section {
    padding-bottom: 20px;
}

iframe {
    margin-bottom: 20px;
}

.article-heading,
.h1,
h1 {
    font-weight: 500 !important;
}

.paragraph-list > a,
.paragraph-list > a *,
.paragraph-list p > a,
.paragraph-list p > a * {
    color: red !important;
}

.paragraph-list p,
.paragraph-list p strong,
.paragraph-list p * {
    font-weight: 500 !important;
}

/* Header Styles */
header {
    margin-bottom: 10px;
}

    header .btm .logo {
        display: none;
    }

        header .btm .logo a {
            height: 50px;
        }

            header .btm .logo a img {
                height: 100%;
                width: auto;
            }

        header .btm .logo .admin {
            width: auto;
        }

    header .nav-wrap .nav .nav-item:hover .nav-link {
        background: var(--color-secondary);
    }

    header .nav-wrap .nav-mobile {
        padding: 0 !important;
    }

        header .nav-wrap .nav-mobile a.btn {
            padding: 0 !important;
        }

            header .nav-wrap .nav-mobile a.btn .icon {
                fill: #fff !important;
                color: #fff !important;
            }

    header.sticky .nav-wrap .logo-area a {
        width: auto !important;
    }

    header .logo-area a {
        position: relative;
    }

        header .logo-area a:before {
            content: "بث \A تجريبي";
            position: absolute;
            bottom: 11px;
            left: 5px;
            font-size: 11px;
            width: 34px;
            line-height: 14px;
            color: var(--color-secondary);
            display: none;
        }

@media (min-width: 1200px) {
    header .logo-area a:before {
        left: 15px;
        font-size: 14px;
    }

    header .md .logo-plc {
        display: flex;
    }
}

@media (max-width: 767px) {
    header .top .date-time {
        display: none;
    }
}

@media (max-width: 340px) {
    header .actions a.btn-search {
        display: none !important;
    }
}

/* Sticky Styles */
.sticky .btm {
    box-shadow: var(--box-shadow);
}

    .sticky .btm .logo {
        display: flex;
    }

@media (max-width: 768px) {
    .sticky .btm .nav {
        display: none;
    }
}

/* Navigation Styles */
.nav-item.active .nav-link {
    color: var(--color-secondary) !important;
}

.nav-item.active a,
.nav-item.active a * {
    color: var(--color-secondary);
    fill: var(--color-secondary);
}

.nav-item.active .nav-link:hover {
    color: #fff !important;
    fill: #fff !important;
    background: var(--color-secondary);
}

/* Card Styles */
.card:hover .img-cont img {
    transform: scale(1.05);
}

.card:not(.bg):hover .card-body h3 {
    color: var(--color-secondary);
}

.card.bg .card-body h3 {
    max-width: 90%;
}

/* Article Card */
.card.article {
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    padding: 10px;
    gap: 12px;
    background: #fff;
}

    .card.article .card-body,
    .card.article .card-foot {
        width: 100%;
        min-width: 100%;
    }

    .card.article .card-foot {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
    }

        .card.article .card-foot .img-cont {
            width: 60px;
            height: 60px;
            min-width: 60px;
            border-radius: 50%;
        }

    .card.article:hover {
        background: #011138;
    }

        .card.article:hover h3,
        .card.article:hover .author {
            color: #fff !important;
        }

@media (min-width: 768px) {
    .card.article .card-body h3 {
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    .card.article .card-body h3 {
        font-size: 20px;
        height: 64px;
        line-height: 32px;
    }
}

/* Nart Styles */
.nart .card .card-body h3 {
    background: var(--color-primary);
    width: max-content;
    align-self: center;
    height: 64px;
    color: #fff;
    font-size: 20px;
}

@media (max-width: 767px) {
    .nart .card .card-body h3 {
        width: 100%;
        height: 72px;
    }
}

@media (min-width: 1200px) {
    .nart .cont .card .card-body h3 {
        width: 369px;
        margin-left: 36px;
    }
}

/* ncol Styles */
.ncol .card.li {
    margin-bottom: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

    .ncol .card.li .card-body h3 {
        height: 74px !important;
    }

/* n1 Styles */
.n1 .card.li .card-body h3 {
    height: 66px;
}

/* n4 Styles */
@media (min-width: 1200px) and (max-width: 1599px) {
    .n4 .card .card-body h3 {
        height: 76px !important;
    }
    .n4 .card.li .img-cont:after {
        padding-top: 74%;
    }
}
@media(min-width: 1600px){
    .n4 .card .card-body h3 {
        height: 92px !important;
    }
}
/* Ntopread Styles */
.ntopread .cont {
    border: 1px solid #dcdcdc;
    padding: 0;
    border-top: 0 !important;
}

    .ntopread .cont .col-lg-6 .card {
        padding-top: 8px;
        padding-bottom: 8px;
        margin: 0;
    }

        .ntopread .cont .col-lg-6 .card:hover {
            background: #fff;
        }

@media (min-width: 768px) {
    .ntopread .cont .col-lg-6 .card:last-child {
        border-bottom: 0;
        margin-bottom: 0;
    }

    .ntopread .cont .row .col-md-6:last-child {
        border-right: 1px solid #dcdcdc;
    }
}

/* Ninfo Styles */
.ninfo .card.bg .img-cont:before {
    opacity: 0 !important;
}

/* Nvideo Styles */
.nvideo .card .img-cont:after {
    padding-top: 100%;
}

/* ColTopRead Styles */
.colTopRead .card .card-body {
    padding-right: 40px !important;
}

/* Card.li.lg Styles */
.card.li.lg .card-body {
    min-width: auto !important;
}

/* Img-cont Styles */
.img-cont figcaption {
    right: 0 !important;
    left: auto !important;
    background: #001a6bb5;
}

/* Title Styles */
.title h2 {
    display: inline-flex !important;
    min-width: auto !important;
}

.title a .icon-cont {
    display: none;
}

.box .title h2 {
    font-weight: 500 !important;
}

    .box .title h2 .icon {
        width: 28px;
        height: 28px;
    }

.box .title .divider {
    display: none;
}

.video-section .title a:before {
    display: none;
}

/* Pushbar Styles */
[data-pushbar-id] .title {
    margin: 20px 0 !important;
}

[data-pushbar-id] .nav {
    height: auto !important;
}

[data-pushbar-direction=left] {
    width: 320px !important;
    padding: 0 !important;
    background: #fff;
}

    [data-pushbar-direction=left] .title .close {
        left: auto !important;
        right: 10px;
    }

/* Breaking-swiper Styles */
.breaking-swiper {
    background: var(--color-secondary) !important;
    margin-bottom: 20px;
}

    .breaking-swiper .cont {
        width: 100%;
    }

    .breaking-swiper .close .icon {
        color: #fff !important;
        fill: #fff !important;
    }

/* Social Styles */
.social a.snc {
    background: yellow !important;
}

    .social a.snc svg {
        fill: black !important;
        color: black !important;
        stroke: black !important;
    }

/* Close Styles */
span.close .icon {
    width: 24px;
    height: 24px;
}

/* Admin Styles */
.admin {
    text-align: center;
}

.admin-mobile {
    justify-content: space-evenly;
}

/* More Styles */
a.more:hover .icon {
    color: #fff !important;
    fill: #fff !important;
}

/* Dark Section Styles */
section.dark .box .foot a.more {
    color: #fff !important;
    fill: #fff !important;
}

section.dark .box .divider:before {
    border-right: 5px solid #fff;
}

section.dark .box .divider:after {
    border-left: 5px solid #fff;
}

section.dark .box .divider {
    border-color: #fff;
}

/* Footer Styles */
@media (max-width: 767px) {
    footer ul.nav {
        justify-content: center;
    }
}
