/*=========================
GLOBAL
=========================*/

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

body{

font-family:Arial,Helvetica,sans-serif;

background:#f4f5f7;

color:#333;

line-height:1.6;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:95%;

max-width:1300px;

margin:auto;

}

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

.header{

position:sticky;

top:0;

left:0;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.08);

z-index:9999;

}

.top-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

}

.logo{

font-size:32px;

font-weight:bold;

color:#222;

}

.logo span{

color:#e63946;

}

.menu-btn{

display:none;

border:none;

background:none;

cursor:pointer;

}

.menu-btn span{

display:block;

width:28px;

height:3px;

background:#222;

margin:5px 0;

transition:.3s;

}

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

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:15px;

}

.navbar ul{

display:flex;

list-style:none;

gap:25px;

}

.navbar ul li a{

font-weight:600;

padding:8px 0;

position:relative;

transition:.3s;

}

.navbar ul li a:hover,

.navbar ul li a.active{

color:#e63946;

}

.navbar ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:#e63946;

transition:.3s;

}

.navbar ul li a:hover::after,

.navbar ul li a.active::after{

width:100%;

}

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

.search-box{

display:flex;

align-items:center;

}

.search-box input{

width:250px;

padding:10px 15px;

border:1px solid #ddd;

border-right:none;

outline:none;

border-radius:30px 0 0 30px;

}

.search-box button{

padding:10px 18px;

border:none;

background:#e63946;

color:#fff;

cursor:pointer;

border-radius:0 30px 30px 0;

}

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

@media(max-width:900px){

.menu-btn{

display:block;

}

.navbar{

display:none;

flex-direction:column;

align-items:flex-start;

padding:15px;

}

.navbar.active{

display:flex;

}

.navbar ul{

flex-direction:column;

width:100%;

gap:15px;

}

.search-box{

margin-top:20px;

width:100%;

}

.search-box input{

width:100%;

}

}



/*=====================================
FEATURED NEWS
=====================================*/

.featured-news{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:40px;

margin:40px 0;

background:#fff;

border-radius:12px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.featured-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.featured-content{

padding:35px;

display:flex;

flex-direction:column;

justify-content:center;

}

.category{

display:inline-block;

background:#e63946;

color:#fff;

padding:6px 12px;

border-radius:20px;

font-size:13px;

margin-bottom:15px;

}

.featured-content h1{

font-size:38px;

margin-bottom:18px;

line-height:1.3;

}

.featured-content h1 a{

color:#222;

}

.featured-content h1 a:hover{

color:#e63946;

}

.featured-content p{

font-size:17px;

color:#666;

margin-bottom:20px;

}

.news-meta{

display:flex;

gap:25px;

color:#888;

font-size:14px;

margin-bottom:20px;

}

.read-btn{

display:inline-block;

background:#e63946;

color:#fff;

padding:12px 22px;

border-radius:30px;

font-weight:600;

width:max-content;

transition:.3s;

}

.read-btn:hover{

background:#c61f2d;

}

/*=====================================
SECTION TITLE
=====================================*/

.section-title{

margin:50px 0 25px;

}

.section-title h2{

font-size:30px;

position:relative;

padding-bottom:10px;

}

.section-title h2::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:80px;

height:4px;

background:#e63946;

}

/*=====================================
NEWS GRID
=====================================*/

.news-grid{

display:grid;

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

gap:30px;

margin-bottom:50px;

}

.news-card{

background:#fff;

border-radius:12px;

overflow:hidden;

box-shadow:0 5px 15px rgba(0,0,0,.08);

transition:.3s;

}

.news-card:hover{

transform:translateY(-8px);

}

.news-image img{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

.news-content{

padding:20px;

}

.news-content h3{

margin:15px 0;

font-size:22px;

line-height:1.4;

}

.news-content h3 a{

color:#222;

}

.news-content h3 a:hover{

color:#e63946;

}

.news-content p{

color:#666;

margin-bottom:18px;

line-height:1.7;

}

.card-btn{

display:inline-block;

margin-top:15px;

padding:10px 18px;

background:#222;

color:#fff;

border-radius:30px;

transition:.3s;

}

.card-btn:hover{

background:#e63946;

}


/*NEWS.php*/

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

.single-news{

    background:#ffffff;

    margin:40px 0;

    padding:40px;

    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.single-news h1{

    font-size:42px;

    margin:20px 0;

    line-height:1.3;

}

.single-image{

    margin:30px 0;

}

.single-image img{

    width:100%;

    max-height:550px;

    object-fit:cover;

    border-radius:10px;

}

.news-description{

    font-size:18px;

    line-height:1.9;

    color:#444;

}

.news-description p{

    margin-bottom:22px;

}

.news-description img{

    max-width:100%;

    height:auto;

    border-radius:10px;

    margin:25px 0;

}

.news-description h2,
.news-description h3{

    margin:30px 0 15px;

}

.news-description ul,
.news-description ol{

    padding-left:25px;

    margin-bottom:20px;

}

.news-description blockquote{

    border-left:5px solid #e63946;

    padding-left:20px;

    margin:25px 0;

    color:#666;

    font-style:italic;

    background:#fafafa;

    padding-top:15px;

    padding-bottom:15px;

}


/*category.php*/

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

.page-title{

text-align:center;

margin:40px 0;

}

.page-title h1{

font-size:42px;

margin-bottom:10px;

color:#222;

}

.page-title p{

color:#777;

}

/*=================================
EMPTY NEWS
=================================*/

.empty-news{

background:#fff;

padding:60px;

border-radius:12px;

text-align:center;

box-shadow:0 5px 20px rgba(0,0,0,.08);

margin-bottom:50px;

}

.empty-news h2{

margin-bottom:15px;

font-size:32px;

}

.empty-news p{

margin-bottom:25px;

color:#666;

}



/*search.php*/

/*==========================================
SEARCH PAGE
==========================================*/

.search-page{

display:flex;

justify-content:center;

margin:40px auto;

max-width:700px;

}

.search-page input{

width:100%;

padding:15px;

border:1px solid #ddd;

border-radius:8px 0 0 8px;

font-size:16px;

outline:none;

}

.search-page button{

padding:15px 30px;

background:#e63946;

color:#fff;

border:none;

cursor:pointer;

border-radius:0 8px 8px 0;

font-size:16px;

transition:.3s;

}

.search-page button:hover{

background:#c92b38;

}

.search-result-title{

margin-bottom:30px;

text-align:center;

}

.search-result-title h2{

font-size:24px;

font-weight:600;

}

.search-result-title span{

color:#e63946;

}













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

.footer{

    margin-top:60px;

    background:#1f2937;

    color:#ffffff;

}

.footer-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:40px;

    padding:50px 0;

}

.footer-column h3{

    margin-bottom:18px;

    font-size:22px;

    color:#ffffff;

}

.footer-column p{

    color:#d1d5db;

    line-height:1.8;

    font-size:15px;

}

.footer-column ul{

    list-style:none;

}

.footer-column ul li{

    margin-bottom:12px;

}

.footer-column ul li a{

    color:#d1d5db;

    transition:.3s;

}

.footer-column ul li a:hover{

    color:#ff3b3f;

    padding-left:6px;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    text-align:center;

    padding:20px 0;

}

.footer-bottom p{

    color:#d1d5db;

    font-size:14px;

}