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

body{

    font-family:'Inter',sans-serif;
    background:#0b1020;
    color:#fff;

}

a{

    text-decoration:none;
    color:white;

}

.container{

    width:90%;
    max-width:1400px;
    margin:auto;

}

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

.header{

    position:sticky;
    top:0;
    z-index:999;

    background:#111827;

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

}

.header .container{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* Logo */

.logo{

    font-size:34px;

    font-weight:800;

    color:white;

}

.logo span{

    color:#3b82f6;

}

/* Menu */

.menu{

    display:flex;

    gap:35px;

}

.menu a{

    color:#d1d5db;

    font-size:16px;

    transition:.3s;

}

.menu a:hover{

    color:#3b82f6;

}

/* Right Side */

.header-right{

    display:flex;

    align-items:center;

    gap:15px;

}

/* Search */

.search-box{

    width:250px;

    height:45px;

    border:none;

    outline:none;

    border-radius:30px;

    background:#1f2937;

    color:white;

    padding:0 20px;

}

/* Dark Button */

.dark-btn{

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    background:#2563eb;

    color:white;

    font-size:18px;

    transition:.3s;

}

.dark-btn:hover{

    transform:scale(1.08);

}

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

main{

    width:90%;

    max-width:1400px;

    margin:50px auto;

    min-height:800px;

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

.breaking-news{

margin-top:30px;

display:flex;

align-items:center;

background:#111827;

border-radius:15px;

overflow:hidden;

height:60px;

}

.breaking-title{

background:#2563eb;

padding:20px;

font-weight:bold;

white-space:nowrap;

}

.breaking-scroll{

display:flex;

gap:80px;

padding-left:40px;

animation:move 25s linear infinite;

white-space:nowrap;

}

.breaking-scroll span{

font-size:17px;

color:white;

}

@keyframes move{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-100%);

}

}

.hero{

height:600px;

margin-top:35px;

border-radius:25px;

background:#111827;

}
/*================ HERO =================*/

.hero{

display:grid;

grid-template-columns:2fr 1fr;

gap:25px;

margin-top:35px;

}

.hero-left{

position:relative;

overflow:hidden;

border-radius:20px;

height:600px;

background:#111827;

}

.hero-left img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.hero-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:45px;

background:linear-gradient(transparent,rgba(0,0,0,.9));

}

.hero-tag{

display:inline-block;

background:#2563eb;

padding:8px 18px;

border-radius:30px;

font-size:14px;

margin-bottom:18px;

}

.hero-overlay h1{

font-size:46px;

margin-bottom:20px;

line-height:1.2;

}

.hero-overlay p{

font-size:18px;

color:#d1d5db;

line-height:1.8;

margin-bottom:25px;

}

.read-btn{

display:inline-block;

background:#2563eb;

padding:15px 30px;

border-radius:40px;

font-weight:bold;

transition:.3s;

}

.read-btn:hover{

background:#1d4ed8;

transform:translateY(-3px);

}

.hero-right{

display:grid;

gap:20px;

}

.small-news{

background:#111827;

border-radius:18px;

overflow:hidden;

cursor:pointer;

transition:.3s;

}

.small-news:hover{

transform:translateY(-5px);

}

.small-news img{

width:100%;

height:170px;

object-fit:cover;

display:block;

}

.small-news h3{

padding:18px;

font-size:20px;

line-height:1.5;

}
.dashboard{

width:90%;

max-width:1200px;

margin:50px auto;

}

.dashboard h1{

margin-bottom:40px;

font-size:40px;

}

.cards{

display:grid;

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

gap:25px;

}

.card{

background:#111827;

border-radius:20px;

padding:40px;

text-align:center;

transition:.3s;

}

.card:hover{

transform:translateY(-8px);

background:#1f2937;

}

.card h2{

margin-top:20px;

font-size:22px;

}