/* =========================
RESET
========================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}



body{

font-family:Arial, sans-serif;

background:#080808;

color:white;

line-height:1.6;

}



a{

text-decoration:none;

color:white;

}



img{

max-width:100%;

display:block;

}






/* =========================
HEADER
========================= */


header{

background:#111;

padding:15px 6%;

display:flex;

align-items:center;

justify-content:space-between;

position:relative;

z-index:1000;

border-bottom:1px solid #222;

}



.logo img{

height:65px;

width:auto;

object-fit:contain;

}





/* =========================
NAVIGATION
========================= */


nav{

display:flex;

align-items:center;

gap:18px;

}



nav a{

font-size:15px;

transition:.3s;

}



nav a:hover{

color:#d4af37;

}





/* =========================
MOBILE MENU BUTTON
========================= */


.menu-btn{

display:none;

font-size:30px;

cursor:pointer;

color:#d4af37;

}






/* =========================
LANGUAGE SWITCHER
========================= */


.language-switcher select{

background:#111;

color:white;

border:1px solid #d4af37;

padding:8px 12px;

border-radius:5px;

cursor:pointer;

}





/* =========================
NOTIFICATION
========================= */


.notification{

position:relative;

margin-left:auto;

margin-right:20px;

}



.notification a{

font-size:22px;

}



#notificationCount{

background:#d4af37;

color:black;

font-size:12px;

padding:2px 6px;

border-radius:50%;

position:absolute;

top:-10px;

right:-10px;

}







/* =========================
HERO SECTION
========================= */


.hero{

min-height:500px;

background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.8)
),

url("images/hero.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

padding:50px 6%;

}





.hero-content{

max-width:700px;

}



.hero-content span{

background:#d4af37;

color:black;

padding:8px 15px;

font-weight:bold;

border-radius:5px;

display:inline-block;

margin-bottom:20px;

}





.hero h1{

font-size:45px;

line-height:1.2;

margin-bottom:20px;

}



.hero p{

font-size:20px;

color:#ddd;

margin-bottom:25px;

}





.hero-btn{

display:inline-block;

background:#d4af37;

color:black;

padding:12px 30px;

border-radius:5px;

font-weight:bold;

transition:.3s;

}



.hero-btn:hover{

background:white;

}






/* =========================
PAGE TITLE
========================= */


.page-title{

padding:40px 6%;

text-align:center;

background:#111;

}



.page-title h1{

font-size:38px;

color:#d4af37;

}



.page-title p{

color:#ccc;

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


.breaking{

background:#111;

display:flex;

align-items:center;

gap:15px;

padding:12px 6%;

border-bottom:1px solid #222;

}



.breaking h3{

color:#d4af37;

font-size:18px;

}



.breaking marquee{

color:white;

font-size:16px;

}







/* =========================
SEARCH BOX
========================= */


.categories{

padding:40px 6%;

}



.search-box{

display:flex;

gap:10px;

margin-bottom:30px;

}



.search-box input{

flex:1;

padding:14px;

background:#111;

border:1px solid #333;

color:white;

border-radius:5px;

font-size:16px;

}



.search-box button{

background:#d4af37;

border:none;

padding:0 25px;

border-radius:5px;

font-weight:bold;

cursor:pointer;

}






/* =========================
CATEGORY LIST
========================= */


.category-list{

display:flex;

flex-wrap:wrap;

gap:15px;

}



.category-list a{

background:#111;

border:1px solid #333;

padding:10px 18px;

border-radius:20px;

transition:.3s;

}



.category-list a:hover{

background:#d4af37;

color:black;

}








/* =========================
SECTION TITLES
========================= */


section h2{

color:#d4af37;

margin-bottom:25px;

font-size:28px;

}







/* =========================
NEWS CARDS
========================= */


.news,
.top-stories,
.trending{

padding:40px 6%;

}



.cards{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}




.card{

background:#111;

border:1px solid #222;

border-radius:10px;

overflow:hidden;

cursor:pointer;

transition:.3s;

}



.card:hover{

transform:translateY(-5px);

border-color:#d4af37;

}




.card img{

width:100%;

height:220px;

object-fit:cover;

}




.card .category{

display:inline-block;

background:#d4af37;

color:black;

padding:5px 12px;

margin:15px;

border-radius:4px;

font-size:13px;

font-weight:bold;

}




.card h3{

padding:0 15px;

font-size:20px;

}



.card p{

padding:10px 15px 20px;

color:#ccc;

}







/* =========================
TOP STORIES
========================= */


.stories-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:20px;

}



.story-card{

background:#111;

border-radius:10px;

overflow:hidden;

cursor:pointer;

}



.story-card img{

width:100%;

height:200px;

object-fit:cover;

}



.story-content{

padding:15px;

}



.story-content h3{

font-size:18px;

}



.story-content p{

color:#ccc;

}








/* =========================
TRENDING NEWS
========================= */


#trendingNews{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:15px;

}



.read-item{

background:#111;

padding:15px;

border-radius:8px;

border:1px solid #222;

display:flex;

gap:15px;

align-items:center;

cursor:pointer;

}



.read-item img{

width:80px;

height:60px;

object-fit:cover;

border-radius:5px;

}



.read-item p,
.read-item h4{

font-size:15px;

}



.read-item:hover{

border-color:#d4af37;

}
/* =========================
FIXTURES / RESULTS
========================= */


.fixtures{

padding:40px 6%;

}



#fixturesContainer,
#resultsContainer,
#homeFixtures,
#homeResults{

display:flex;

flex-direction:column;

gap:15px;

}





.fixture-card,
.result-card{

background:#111;

border:1px solid #222;

padding:20px;

border-radius:10px;

display:flex;

justify-content:space-between;

align-items:center;

transition:.3s;

}



.fixture-card:hover,
.result-card:hover{

border-color:#d4af37;

}





.team{

font-weight:bold;

font-size:18px;

}



.match-time{

color:#d4af37;

font-weight:bold;

}





.score{

font-size:22px;

color:#d4af37;

font-weight:bold;

}







/* =========================
STANDING TABLE
========================= */


.table-section{

padding:40px 6%;

overflow-x:auto;

}



table{

width:100%;

border-collapse:collapse;

background:#111;

}



th{

background:#d4af37;

color:black;

padding:15px;

text-align:center;

}



td{

padding:14px;

border-bottom:1px solid #222;

text-align:center;

}



tr:hover{

background:#151515;

}








/* =========================
SINGLE NEWS
========================= */


.single-news{

padding:40px 6%;

max-width:1000px;

margin:auto;

}



.single-news img{

width:100%;

height:500px;

object-fit:cover;

border-radius:10px;

margin-bottom:20px;

}



.single-news .category{

background:#d4af37;

color:black;

padding:6px 15px;

border-radius:5px;

display:inline-block;

}



.single-news h1{

font-size:40px;

margin:20px 0;

}



.single-news p{

font-size:18px;

color:#ddd;

line-height:1.8;

}







/* =========================
NEWS ACTIONS
========================= */


.news-actions{

display:flex;

gap:15px;

margin:30px 0;

}



.news-actions button,
.news-actions a{

background:#111;

border:1px solid #333;

padding:12px 20px;

border-radius:5px;

cursor:pointer;

}



.news-actions a:hover,
.news-actions button:hover{

background:#d4af37;

color:black;

}







/* =========================
COMMENTS
========================= */


.comments-section{

margin-top:40px;

}



.comments-section input,
.comments-section textarea{

width:100%;

background:#111;

border:1px solid #333;

color:white;

padding:15px;

margin-bottom:15px;

border-radius:5px;

}



.comments-section textarea{

height:120px;

}



.comments-section button{

background:#d4af37;

border:none;

padding:12px 25px;

font-weight:bold;

cursor:pointer;

}




.comment-box{

background:#111;

padding:15px;

margin-top:15px;

border-radius:8px;

border:1px solid #222;

}







/* =========================
ADMIN LOGIN
========================= */


.login-box{

width:90%;

max-width:400px;

margin:80px auto;

background:#111;

padding:40px;

border-radius:10px;

text-align:center;

border:1px solid #222;

}



.login-logo{

height:80px;

margin:auto auto 20px;

}



.login-box h1{

color:#d4af37;

margin-bottom:25px;

}




.login-box input{

width:100%;

padding:15px;

margin-bottom:15px;

background:#080808;

border:1px solid #333;

color:white;

border-radius:5px;

}




.login-box button{

width:100%;

padding:14px;

background:#d4af37;

border:none;

font-weight:bold;

cursor:pointer;

border-radius:5px;

}




#loginMessage{

margin-top:15px;

color:#d4af37;

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


footer{

background:#111;

padding:40px 6% 20px;

margin-top:50px;

border-top:1px solid #222;

}



.footer-container{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

align-items:start;

}



.footer-about{

display:flex;

flex-direction:column;

gap:15px;

}



.footer-logo img{

height:70px;

width:auto;

}



.footer-about p{

color:#ccc;

line-height:1.7;

}





.footer-links{

display:flex;

flex-direction:column;

gap:12px;

}



.footer-links a{

color:white;

transition:.3s;

}



.footer-links a:hover{

color:#d4af37;

padding-left:5px;

}





.social-links{

display:flex;

gap:15px;

flex-wrap:wrap;

}



.social-links a{

background:#080808;

border:1px solid #333;

padding:8px 15px;

border-radius:5px;

}



.social-links a:hover{

background:#d4af37;

color:black;

}





.copyright{

text-align:center;

margin-top:30px;

padding-top:20px;

border-top:1px solid #222;

color:#aaa;

}








/* =========================
PAGE CONTENT
TERMS PRIVACY ABOUT
========================= */


.page-content{

max-width:1000px;

margin:auto;

padding:40px 6%;

}



.page-content h1{

font-size:38px;

color:#d4af37;

margin-bottom:25px;

}



.page-content h2{

color:#d4af37;

margin-top:35px;

margin-bottom:10px;

}



.page-content p{

color:#ddd;

font-size:17px;

line-height:1.8;

}








/* =========================
CONTACT FORM
========================= */


.contact-form{

margin-top:30px;

}



.contact-form input,
.contact-form textarea{


width:100%;

padding:15px;

margin-bottom:15px;

background:#111;

border:1px solid #333;

color:white;

border-radius:5px;

}



.contact-form textarea{

height:150px;

}



.contact-form button{

background:#d4af37;

color:black;

border:none;

padding:12px 30px;

font-weight:bold;

border-radius:5px;

cursor:pointer;

}








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


.ad-box{

max-width:970px;

min-height:90px;

margin:30px auto;

display:flex;

align-items:center;

justify-content:center;

}








/* =========================
BACK TO TOP
========================= */


#backToTop{

position:fixed;

right:20px;

bottom:20px;

width:45px;

height:45px;

border-radius:50%;

background:#d4af37;

color:black;

border:none;

font-size:20px;

cursor:pointer;

display:none;

z-index:999;

}








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


@media(max-width:900px){



.cards{

grid-template-columns:repeat(2,1fr);

}



.stories-grid{

grid-template-columns:repeat(2,1fr);

}



.footer-container{

grid-template-columns:1fr;

}



.hero h1{

font-size:35px;

}



nav{

position:absolute;

top:80px;

left:0;

width:100%;

background:#111;

display:none;

flex-direction:column;

padding:20px;

}



nav.active{

display:flex;

}



.menu-btn{

display:block;

}



}




@media(max-width:600px){



header{

padding:15px 4%;

}



.logo img{

height:50px;

}



.cards,
.stories-grid{

grid-template-columns:1fr;

}



.hero{

min-height:350px;

padding:30px 5%;

}



.hero h1{

font-size:28px;

}



.page-title h1{

font-size:28px;

}



.single-news img{

height:250px;

}



.single-news h1{

font-size:30px;

}



.fixture-card,
.result-card{

flex-direction:column;

text-align:center;

}



.search-box{

flex-direction:column;

}



.search-box button{

height:45px;

}



.footer-about{

align-items:center;

(text-align:center);

}



.footer-links{

align-items:center;

}



}
/* =========================
90' MINUTES AFRICA
ADMIN PANEL CSS
PART 1
========================= */


/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

font-family:Arial, Helvetica, sans-serif;
background:#080808;
color:white;
line-height:1.6;

}


a{

text-decoration:none;
color:white;

}


img{

max-width:100%;
display:block;

}





/* =========================
HEADER
========================= */


header{

background:#111;

padding:15px 5%;

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

position:sticky;

top:0;

z-index:1000;

border-bottom:1px solid #222;

}



.logo img{

height:65px;

width:auto;

object-fit:contain;

}




/* LANGUAGE */


.language-switcher select{

background:#080808;

color:white;

border:1px solid #d4af37;

padding:8px 12px;

border-radius:6px;

cursor:pointer;

}



.language-switcher select:hover{

background:#d4af37;

color:black;

}





/* LOGOUT */


.logout-btn{

background:#d4af37;

color:black;

border:none;

padding:10px 18px;

border-radius:6px;

font-weight:bold;

cursor:pointer;

}



.logout-btn:hover{

background:white;

}





/* MENU BUTTON */


.menu-btn{

display:none;

font-size:30px;

color:#d4af37;

cursor:pointer;

}





/* NAV */


nav{

display:flex;

align-items:center;

gap:18px;

}



nav a{

font-size:15px;

transition:.3s;

}



nav a:hover{

color:#d4af37;

}





.badge{

background:#d4af37;

color:black;

padding:2px 7px;

font-size:12px;

border-radius:50%;

}








/* =========================
ADMIN CONTAINER
========================= */


.admin-container{

width:90%;

max-width:1200px;

margin:40px auto;

}





.admin-container h1{

text-align:center;

color:#d4af37;

font-size:40px;

margin-bottom:35px;

}





/* ADMIN SECTIONS */


.admin-container section{

background:#111;

border:1px solid #222;

padding:30px;

border-radius:12px;

margin-bottom:35px;

}





.admin-container h2{

color:#d4af37;

font-size:26px;

margin-bottom:25px;

}








/* =========================
FORMS
========================= */


.admin-container form{

display:flex;

flex-direction:column;

gap:15px;

}





.admin-container input,
.admin-container textarea,
.admin-container select{


width:100%;

background:#080808;

border:1px solid #333;

color:white;

padding:14px;

border-radius:6px;

font-size:15px;

outline:none;

}



.admin-container input:focus,
.admin-container textarea:focus,
.admin-container select:focus{

border-color:#d4af37;

}




.admin-container textarea{

min-height:150px;

resize:vertical;

}





.admin-container button{


background:#d4af37;

color:black;

border:none;

padding:13px 25px;

border-radius:6px;

font-weight:bold;

cursor:pointer;

transition:.3s;


}



.admin-container button:hover{

background:white;

}






/* IMAGE PREVIEW */


#imagePreview{

max-width:250px;

border-radius:8px;

border:1px solid #333;

margin-top:10px;

}







/* CHECKBOX */


label{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

}



label input{

width:auto;

}
/* =========================
ADMIN NEWS LIST
========================= */


#adminNewsList{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}




/* NEWS CARD */


.admin-card{

background:#080808;

border:1px solid #222;

padding:20px;

border-radius:10px;

transition:.3s;

}




.admin-card:hover{

border-color:#d4af37;

transform:translateY(-3px);

}




.admin-card img{

width:120px;

height:80px;

object-fit:cover;

border-radius:6px;

margin-bottom:15px;

}




.admin-card h3{

color:#d4af37;

font-size:20px;

margin-bottom:10px;

}




.admin-card p{

color:#ccc;

margin-bottom:10px;

}




.admin-card small{

color:#999;

}




/* CARD BUTTONS */


.admin-card button{

padding:8px 15px;

margin-top:15px;

margin-right:10px;

font-size:14px;

}




.admin-card button:last-child{

background:#c62828;

color:white;

}



.admin-card button:last-child:hover{

background:#e53935;

}







/* =========================
FIXTURE LIST
========================= */


#fixtureList,
#resultList,
#tableList{

margin-top:25px;

}





.fixture-card,
.result-card{


background:#080808;

border:1px solid #222;

padding:20px;

border-radius:10px;

margin-bottom:15px;

display:flex;

justify-content:space-between;

align-items:center;

transition:.3s;

}



.fixture-card:hover,
.result-card:hover{

border-color:#d4af37;

}





.fixture-team{

font-size:18px;

font-weight:bold;

}




.fixture-info{

text-align:center;

}



.fixture-info span{

display:block;

color:#d4af37;

font-weight:bold;

}





.competition{

color:#aaa;

font-size:14px;

}







/* =========================
RESULT CARD
========================= */


.result-card{

background:#080808;

}



.result-score{


font-size:25px;

font-weight:bold;

color:#d4af37;

}



.result-date{

color:#aaa;

font-size:14px;

}







/* =========================
STANDINGS ADMIN TABLE
========================= */


#tableList{

overflow-x:auto;

}



#tableList table{


width:100%;

border-collapse:collapse;

background:#080808;

}





#tableList th{


background:#d4af37;

color:black;

padding:14px;

text-align:center;

}



#tableList td{


padding:12px;

border-bottom:1px solid #222;

text-align:center;

}





#tableList tr:hover{

background:#151515;

}





/* TEAM LOGO */


.team-logo{

width:35px;

height:35px;

object-fit:contain;

vertical-align:middle;

margin-right:8px;

}







/* DELETE / EDIT GLOBAL BUTTON */


.edit-btn{

background:#1565c0!important;

color:white;

}



.delete-btn{

background:#c62828!important;

color:white;

}





.edit-btn:hover{

background:#1976d2!important;

}



.delete-btn:hover{

background:#e53935!important;

}







/* =========================
EMPTY MESSAGE
========================= */


.empty-message{


text-align:center;

padding:30px;

color:#aaa;

font-size:18px;

border:1px dashed #333;

border-radius:8px;

}







/* =========================
LOADING
========================= */


.loading{


text-align:center;

color:#d4af37;

padding:25px;

font-size:18px;

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


footer{

background:#111;

padding:45px 6% 20px;

margin-top:50px;

border-top:1px solid #222;

}



.footer-container{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

}



.footer-about{

display:flex;

flex-direction:column;

gap:15px;

}



.footer-about h3{

color:#d4af37;

font-size:22px;

}



.footer-about p{

color:#ccc;

line-height:1.7;

}




.footer-links{

display:flex;

flex-direction:column;

gap:12px;

}



.footer-links a{

color:white;

transition:.3s;

}



.footer-links a:hover{

color:#d4af37;

padding-left:5px;

}





.copyright{

grid-column:1/-1;

text-align:center;

border-top:1px solid #222;

padding-top:20px;

margin-top:20px;

color:#aaa;

}







/* =========================
BACK TO TOP
========================= */


#backToTop{

position:fixed;

right:20px;

bottom:20px;

width:45px;

height:45px;

border-radius:50%;

background:#d4af37;

color:black;

border:none;

font-size:20px;

cursor:pointer;

display:none;

z-index:999;

}



#backToTop:hover{

background:white;

}







/* =========================
PWA INSTALL BUTTON
========================= */


#installApp{

position:fixed;

right:20px;

bottom:80px;

background:#d4af37;

color:black;

padding:12px 20px;

border-radius:30px;

border:none;

font-weight:bold;

cursor:pointer;

z-index:999;

}



#installApp:hover{

background:white;

}







/* =========================
NOTIFICATION
========================= */


.notification{

position:relative;

}



.notification a{

font-size:24px;

}



#notificationCount{

position:absolute;

top:-10px;

right:-10px;

background:#d4af37;

color:black;

font-size:12px;

padding:3px 7px;

border-radius:50%;

}





.badge{

background:#d4af37;

color:black;

font-size:12px;

padding:2px 7px;

border-radius:50%;

}







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


@media(max-width:900px){


header{

padding:15px 4%;

}



.logo img{

height:55px;

}



.menu-btn{

display:block;

}




nav{

position:absolute;

top:75px;

left:0;

width:100%;

background:#111;

display:none;

flex-direction:column;

padding:25px;

border-top:1px solid #222;

}



nav.active{

display:flex;

}




nav a{

padding:10px;

width:100%;

text-align:center;

}



.language-switcher{

margin-left:auto;

}



.footer-container{

grid-template-columns:1fr;

}



#adminNewsList{

grid-template-columns:1fr;

}



}





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


@media(max-width:600px){



header{

flex-wrap:wrap;

}



.logo img{

height:45px;

}



.language-switcher select{

padding:6px 8px;

font-size:12px;

}



.logout-btn{

padding:7px 10px;

font-size:12px;

}



.admin-container{

padding:20px 4%;

}



.admin-container h1{

font-size:28px;

}



.admin-container section{

padding:20px;

}



.fixture-card,
.result-card{

flex-direction:column;

gap:15px;

text-align:center;

}



.admin-card img{

width:100%;

height:180px;

}



.hero h1{

font-size:28px;

}



.footer-about{

text-align:center;

align-items:center;

}



.footer-links{

align-items:center;

}



#installApp{

right:15px;

bottom:70px;

font-size:13px;

padding:10px 15px;

}



}
/* =========================
CATEGORY LIST
2 COLUMNS COLOR BACKGROUND
========================= */


.category-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}





.category-list a{

    padding:18px 10px;

    border-radius:30px;

    text-align:center;

    font-size:16px;

    font-weight:bold;

    color:white;

    transition:.3s ease;

    border:none;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

}





.category-list a:hover{

    transform:scale(1.05);

    opacity:.9;

}





/* CATEGORY COLORS */


/* Tanzania */

.category-list a:nth-child(1){

    background:#008000;

}



/* Kimataifa */

.category-list a:nth-child(2){

    background:#0077ff;

}



/* Vilabu */

.category-list a:nth-child(3){

    background:#e60000;

}



/* Mashindano */

.category-list a:nth-child(4){

    background:#8a2be2;

}



/* Usajili */

.category-list a:nth-child(5){

    background:#ff9800;

    color:#111;

}



/* Wachezaji */

.category-list a:nth-child(6){

    background:#009688;

}






@media(max-width:600px){

.category-list{

    grid-template-columns:repeat(2,1fr);

}


.category-list a{

    font-size:14px;

    padding:15px 5px;

}


}
/* SOCIAL LINKS */

.social-links{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    max-width:350px;

}



.social-links a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 12px;

    border-radius:25px;

    color:white;

    font-size:14px;

    font-weight:bold;

    white-space:nowrap;

}



/* FACEBOOK */

.social-links a:nth-child(1){

    background:#1877f2;

}


/* YOUTUBE */

.social-links a:nth-child(2){

    background:#ff0000;

}


/* INSTAGRAM */

.social-links a:nth-child(3){

    background:linear-gradient(
    45deg,
    #f9ce34,
    #ee2a7b,
    #6228d7
    );

}


/* WHATSAPP */

.social-links a:nth-child(4){

    background:#25d366;

}



.social-links a:hover{

    transform:translateY(-3px);

    opacity:.85;

}
/* =========================
MOST READ SECTION
========================= */


.sidebar-box{

    background:#111;

    padding:25px;

    border-radius:15px;

    border:1px solid #222;

    margin-top:30px;

}



.sidebar-box h2{

    color:#d4af37;

    font-size:26px;

    margin-bottom:20px;

    border-left:5px solid #d4af37;

    padding-left:12px;

}





.most-read-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}





/* MOST READ CARD */

.most-read-item{

    display:flex;

    align-items:center;

    gap:15px;

    background:#181818;

    padding:12px;

    border-radius:10px;

    border:1px solid #292929;

    transition:.3s;

    cursor:pointer;

}



.most-read-item:hover{

    border-color:#d4af37;

    transform:translateX(5px);

}






.most-read-item img{

    width:90px;

    height:70px;

    object-fit:cover;

    border-radius:8px;

}





.most-read-content{

    flex:1;

}




.most-read-content h3,
.most-read-content h4{

    color:white;

    font-size:16px;

    line-height:1.4;

    margin-bottom:5px;

}





.most-read-content p{

    color:#aaa;

    font-size:13px;

}





.most-read-number{

    background:#d4af37;

    color:black;

    width:25px;

    height:25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}





/* MOBILE */

@media(max-width:600px){


.sidebar-box{

    padding:18px;

}



.most-read-item img{

    width:75px;

    height:60px;

}



.most-read-content h3,
.most-read-content h4{

    font-size:14px;

}


}
/* =========================
INBOX FOOTER
========================= */

footer{

    background:#111;

    margin-top:50px;

    padding:40px 6% 20px;

    border-top:2px solid #d4af37;

}



.footer-logo{

    text-align:center;

    margin-bottom:20px;

}



.footer-logo img{

    width:200px;

    height:auto;

    object-fit:contain;

}





.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin:25px 0;

}



.footer-links a{

    color:#ddd;

    font-size:15px;

    transition:.3s;

}



.footer-links a:hover{

    color:#d4af37;

}





/* SOCIAL ICONS */

.social-links{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    max-width:350px;

    margin:25px auto;

}



.social-links a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px;

    border-radius:25px;

    color:white;

    font-weight:bold;

    transition:.3s;

}



.social-links a:nth-child(1){

    background:#1877f2;

}


.social-links a:nth-child(2){

    background:#ff0000;

}


.social-links a:nth-child(3){

    background:linear-gradient(
    45deg,
    #f9ce34,
    #ee2a7b,
    #6228d7
    );

}


.social-links a:nth-child(4){

    background:#25d366;

}



.social-links a:hover{

    transform:translateY(-4px);

    opacity:.85;

}





/* COPYRIGHT */

.copyright{

    text-align:center;

    border-top:1px solid #333;

    padding-top:20px;

    margin-top:25px;

    color:#aaa;

    font-size:14px;

}




@media(max-width:600px){

.footer-links{

    flex-direction:column;

    align-items:center;

}



.social-links{

    width:100%;

}

}
/* =========================
NEWS ACTION BUTTONS
========================= */

.news-actions{

    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin:30px 0;

}


/* BUTTONS */

.news-actions button,
.news-actions a{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 20px;

    border-radius:30px;

    font-size:15px;
    font-weight:bold;

    text-decoration:none;

    transition:.3s;

    cursor:pointer;

    border:none;

}


/* LIKE */

#likeBtn{

    background:#e91e63;

    color:#fff;

}

#likeBtn:hover{

    background:#c2185b;

    transform:translateY(-3px);

}


/* WHATSAPP */

#whatsappShare{

    background:#25D366;

    color:#fff;

}

#whatsappShare:hover{

    background:#1da851;

    transform:translateY(-3px);

}


/* FACEBOOK */

#facebookShare{

    background:#1877F2;

    color:#fff;

}

#facebookShare:hover{

    background:#0d5fd3;

    transform:translateY(-3px);

}


/* LIKE COUNT */

#likeCount{

    background:rgba(255,255,255,.2);

    padding:3px 8px;

    border-radius:20px;

    font-size:13px;

}


/* MOBILE */

@media(max-width:600px){

.news-actions{

    flex-direction:column;

}

.news-actions button,
/* =========================
HEADER
========================= */

header{

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

    padding:15px 6%;

    background:#111;

    border-bottom:2px solid #d4af37;

    position:sticky;
    top:0;

    z-index:1000;

    box-shadow:0 4px 12px rgba(0,0,0,.4);

}



/* =========================
LOGO
========================= */

.logo{

    display:flex;
    align-items:center;

}



.logo a{

    display:flex;
    align-items:center;

}



.logo img{

    height:70px;
    width:auto;

    object-fit:contain;

    transition:.3s;

}



.logo img:hover{

    transform:scale(1.08);

}



/* MOBILE */

@media(max-width:768px){

header{

    padding:12px 5%;

}

.logo img{

    height:55px;

}

}
.ad-box{
    width:100%;
    max-width:728px;
    min-height:90px;
    margin:20px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1a1a1a;
    border:1px solid #333;
    border-radius:10px;
    overflow:hidden;
}