/* ==========================================
   GLOBAL
========================================== */
body{
    font-family:'Noto Sans',sans-serif;
    background:#f8f9fa;
    padding-bottom:60px;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
    height:auto;
}

.card{
    border:none;
    transition:.3s;
}

.card:hover{
    transform:translateY(-4px);
}

.shadow-soft{
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}

/* ==========================================
   TOP BAR
========================================== */

.topbar{
    background:linear-gradient(
        to bottom,
        #e30000,
        #8b0000
    );
    color:#fff;
}

.topbar a{
    color:#fff;
}

.topbar a:hover{
    color:#ffd54f;
}

.ad-image{
    width:100%;
    height:230px;

    background-position:center;
    background-repeat:no-repeat;
    background-size:100% 100%;

    transition:all .8s ease;

    display:block;

    background-color:#fff;
}

.adFade{
    animation:adFade .8s ease;
}

@keyframes adFade{

    from{
        opacity:0;
        transform:scale(.95);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

/* ==========================================
   MAIN NAVBAR
========================================== */

.main-navbar{
    background:linear-gradient(
        to bottom,
        #e30000,
        #8b0000
    );
}

.main-navbar .nav-link{
    color:#fff;
    font-weight:600;
}

.main-navbar .nav-link:hover{
    color:#ffc107;
}

/* ==========================================
   BREAKING NEWS
========================================== */

.breaking-box{
    background:#dc3545;
    color:#fff;
    padding:12px;
    border-radius:10px;
    font-weight:600;
}

.breaking-box marquee{
    color:#fff;
}

/* ==========================================
   LEADING NEWS
========================================== */

.leading-news img{
    height:300px;
    width:100%;
    object-fit:cover;
}

.leading-news h4{
    font-weight:700;
}

/* ==========================================
   NEWS CARD
========================================== */

.news-card{
    overflow:hidden;
    border-radius:14px;
}

.news-card-image{
    height:260px;
    width:100%;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.news-card h4{
    font-size:1.2rem;
    font-weight:700;
}

.news-card p{
    color:#555;
}

/* ==========================================
   EDITORIAL CARD
========================================== */

.editorial-card{
    border-radius:14px;
    overflow:hidden;
}

.editorial-card img{
    max-height:90px;
    object-fit:contain;
}

.editorial-card .badge{
    font-size:.75rem;
}

/* ==========================================
   ADS SECTION
========================================== */

.ad-card{
    border-radius:14px;
    overflow:hidden;
    background:#ffffff;
    transition:.35s;
    box-shadow:
        0 2px 12px rgba(
            0,
            0,
            0,
            .12
        );
}

.ad-card:hover{
    transform:translateY(-4px);
    box-shadow:
        0 10px 30px rgba(
            0,
            0,
            0,
            .22
        );
}

.ad-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    object-position:center;
    background:#ffffff;
    display:block;
    padding:4px;
}

.ad-image{
    width:100%;
    height:220px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    background-color:#ffffff;
    display:block;
}

.ad-title{
    padding:14px;
    background:#ffffff;
    text-align:center;
    font-size:17px;
    font-weight:700;
    color:#222;
}

.adFade{
    animation:adFade .8s ease;
}

@keyframes adFade{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ==========================================
   VERTICAL NEWS SECTION
========================================== */

.verticalCard{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:25px;
    box-shadow:
        0 4px 20px rgba(
            0,
            0,
            0,
            .08
        );
    transition:.35s;
}

.verticalCard:hover{
    transform:translateY(-4px);
    box-shadow:
        0 12px 35px rgba(
            0,
            0,
            0,
            .18
        );
}

.cardHeader{
    color:#fff;
    font-size:24px;
    font-weight:700;
    padding:18px;
}

.redGrad{
    background:
    linear-gradient(
        45deg,
        #ff0000,
        #960000
    );
}

.orangeGrad{
    background:
    linear-gradient(
        45deg,
        #ffb100,
        #ff7200
    );
}

.darkGrad{
    background:
    linear-gradient(
        45deg,
        #222,
        #000
    );
}

.newsRow{
    padding:16px;
    border-bottom:1px solid #eee;
    transition:.3s;
    cursor:pointer;
}

.newsRow:hover{
    background:#fafafa;
    padding-left:22px;
}

/* ==========================================
   CLASSIFIED ADS
========================================== */

.classified-card{
    border-radius:14px;
    overflow:hidden;
    background:#ffffff;
    height:100%;
    transition:.35s;
    box-shadow:
        0 2px 12px rgba(
            0,
            0,
            0,
            .08
        );
}

.classified-card:hover{
    transform:translateY(-4px);
    box-shadow:
        0 8px 25px rgba(
            0,
            0,
            0,
            .15
        );
}

.classified-img{
    width:100%;
    height:300px;
    object-fit:contain;
    object-position:center;
    background:#ffffff;
    display:block;
    padding:5px;
}

.classified-title{
    min-height:70px;
    padding:15px;
    text-align:center;
    font-size:18px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
}

.fadeCard{
    animation:fadeCard .8s ease;
}

@keyframes fadeCard{

    from{
        opacity:.3;
        transform:scale(.97);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

/* ==========================================
   JOIN MODAL
========================================== */

.modal-content{
    border-radius:20px;
}

.modal-header-gradient{
    background:
    linear-gradient(
        45deg,
        #d10000,
        #850000
    );
    color:#fff;
}

.payment-header{
    background:
    linear-gradient(
        45deg,
        #198754,
        #0d5c36
    );
    color:#fff;
}

/* ==========================================
   FOOTER
========================================== */

.site-footer{
    background:
    linear-gradient(
        to bottom,
        #e30000,
        #8b0000
    );
    color:#fff;
}

.site-footer strong{
    font-size:20px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

    .ad-image,
    .ad-card img{
        height:190px;
    }

    .classified-image,
    .classified-img{
        height:260px;
    }

}

@media(max-width:768px){

    .leading-news img{
        height:220px;
    }

    .news-card-image{
        height:220px;
    }

    .ad-image,
    .ad-card img{
        height:170px;
    }

    .classified-image,
    .classified-img{
        height:220px;
    }

    .classified-title{
        min-height:60px;
        font-size:16px;
    }

    .cardHeader{
        font-size:20px;
    }

}

@media(max-width:576px){

    .leading-news img{
        height:200px;
    }

    .news-card-image{
        height:200px;
    }

    .ad-image,
    .ad-card img{
        height:150px;
    }

    .classified-image,
    .classified-img{
        height:200px;
    }

    .classified-title{
        min-height:55px;
        font-size:15px;
    }

}

/* ==========================================
   NAVBAR BREAKING NEWS TICKER
========================================== */

.breaking-strip{
    display:flex;
    align-items:center;

    width:100%;
    height:42px;

    background:
    linear-gradient(
        to bottom,
        #e30000,
        #8b0000
    );

    overflow:hidden;

    margin:0;
    padding:0;

    border-top:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(0,0,0,.15);
}

.breaking-label{
    flex-shrink:0;

    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 18px;

    background:
    rgba(
        0,
        0,
        0,
        .15
    );

    color:#ffffff;

    font-size:13px;
    font-weight:700;

    text-transform:uppercase;

    white-space:nowrap;

    letter-spacing:.5px;
}

.breaking-ticker{
    flex:1;

    height:42px;

    overflow:hidden;

    position:relative;
}

.breaking-track{
    position:absolute;

    top:0;
    left:0;

    height:42px;

    display:flex;
    align-items:center;

    white-space:nowrap;

    width:max-content;

    animation:
    tvLoop
    35s
    linear
    infinite;
}

.breaking-item{
    display:flex;
    align-items:center;

    height:42px;

    padding:0 30px;

    color:#ffffff;

    font-size:14px;
    font-weight:500;

    white-space:nowrap;
}

.breaking-item::after{
    content:"●";

    color:#ffd54f;

    font-size:10px;

    margin-left:30px;
}

@keyframes tvLoop{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

/* ==========================================
   FIXED BOTTOM TICKER
========================================== */

.breaking-strip-bottom{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:9999;
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .breaking-strip,
    .breaking-strip-bottom{
        height:38px;
    }

    .breaking-label{
        height:38px;
        padding:0 12px;
        font-size:11px;
    }

    .breaking-track{
        height:38px;
    }

    .breaking-item{
        height:38px;
        font-size:12px;
        padding:0 20px;
    }

}