* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
}

body {
  background: #070d1a;
  color: #eaeef7;
  line-height: 1.6;
}


/* CONTAINER */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* ================= HEADER ================= */
.site-header {
  background: #0b1324;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: 800;
  color: #f5b942;
  letter-spacing: 1px;
}

/* NAV */
.main-nav {
  display: flex;
  gap: 25px;
}

.main-nav a {
  color: #cfd6e6;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
  color: #f5b942;
}

/* ===== HAMBURGER ===== */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 2px;
  background: #fff;
}

.hamburger.active span:nth-child(1){
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity: 0;
}

.hamburger.active span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
}

/* hero */

.blog-hero{
    padding:90px 20px;
    text-align:center;
    background:
    linear-gradient(
    rgba(3,18,37,.90),
    rgba(3,18,37,.95)),
  url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1920&q=80');
    background-size:cover;
    background-position:center;
}

.blog-hero h1{
    font-size:3rem;
    margin-bottom:20px;
    font-weight:800;
}

.blog-hero p{
    max-width:800px;
    margin:auto;
    color:#cfd8e3;
    font-size:1.1rem;
}

/* Ads */

.ad-section{
    margin:40px 0;
}

.ad-box{
    height:100px;
    border:1px solid rgba(243,177,59,.3);
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f3b13b;
    font-size:1.1rem;
    background:#071b34;
}

/* Blog Grid */

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:80px;
}

/* card */

.blog-card{
    background:#071b34;
    border:1px solid rgba(243,177,59,.15);
    border-radius:15px;
    overflow:hidden;
    transition:.4s;
}

.blog-card:hover{
    transform:translateY(-8px);
    box-shadow:
    0 10px 25px rgba(243,177,59,.15);
}

.blog-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.blog-content{
    padding:25px;
}

.category{
    display:inline-block;
    padding:6px 12px;
    border-radius:50px;
    background:rgba(243,177,59,.12);
    color:#f3b13b;
    font-size:.8rem;
    font-weight:700;
    margin-bottom:15px;
}

.blog-content h3{
    margin-bottom:15px;
    font-size:1.4rem;
    line-height:1.4;
}

.blog-content p{
    color:#b8c4d1;
    margin-bottom:20px;
}

.read-more{
    text-decoration:none;
    color:#f3b13b;
    font-weight:700;
    transition:.3s;
}

.read-more:hover{
    padding-left:8px;
}

/* footer */

.site-footer{
    background:#020d18;
    border-top:1px solid rgba(243,177,59,.15);
    padding-top:60px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
}

.footer-grid h4{
    color:#f3b13b;
    margin-bottom:20px;
}

.footer-grid p,
.footer-grid li{
    color:#b8c4d1;
}

.footer-grid ul{
    list-style:none;
}

.footer-grid ul li{
    margin-bottom:10px;
}

.footer-grid ul li a{
    color:#b8c4d1;
    text-decoration:none;
    transition:.3s;
}

.footer-grid ul li a:hover{
    color:#f3b13b;
}

.copyright{
    text-align:center;
    padding:25px;
    margin-top:50px;
    border-top:1px solid rgba(255,255,255,.05);
    color:#8b9ab0;
}

/* scroll bar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#02101f;
}

::-webkit-scrollbar-thumb{
    background:#f3b13b;
    border-radius:20px;
}

/* mobile responsive */

@media(max-width:992px){

    .blog-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .main-nav{
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#02101f;
        flex-direction:column;
        text-align:center;
        padding:20px 0;
        display:none;
    }

    .main-nav.active{
        display:flex;
    }

    .hamburger{
        display:flex;
    }

    .blog-grid{
        grid-template-columns:1fr;
    }

    .blog-hero h1{
        font-size:2.2rem;
    }

}

@media(max-width:480px){

    .blog-hero{
        padding:70px 20px;
    }

    .blog-hero h1{
        font-size:1.8rem;
    }

    .blog-content{
        padding:20px;
    }

}