}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

    background:#f7f8fc;

    color:#111827;

    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

.container{
    width:min(1180px,92%);
    margin:auto;
}


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

.site-header{
    position:sticky;
    top:0;
    z-index:9999;

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

    border-bottom:
    1px solid #e5e7eb;

    backdrop-filter:blur(18px);
}

/* ===== NEWSZE 3 LINE MENU ===== */

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

.header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.menu-btn{
    background:none;
    border:none;
    color:white;
    font-size:30px;
    cursor:pointer;
}

.mobile-menu{
    display:none;
    background:#ffffff;
    border-top:1px solid #eee;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.mobile-menu.show{
    display:block;
}

.mobile-menu a{
    display:block;
    padding:15px 20px;
    color:#222;
    text-decoration:none;
    font-weight:600;
    border-bottom:1px solid #eee;
}

.mobile-menu a:hover{
    background:#e11d48;
    color:#fff;
}


/* LOGO */

.logo{
    font-size:30px;

    font-weight:950;

    letter-spacing:-2px;

    white-space:nowrap;
}

.logo span{
    color:#e11d48;
}


/* NAV */

.main-nav{
    display:flex;

    align-items:center;

    gap:26px;
}

.main-nav a{
    font-size:14px;

    font-weight:700;

    color:#374151;

    transition:.2s;
}

.main-nav a:hover{
    color:#e11d48;
}


/* SEARCH */

.search-button{
    border:0;

    background:#f1f5f9;

    width:42px;

    height:42px;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;

    transition:.2s;
}

.search-button:hover{
    background:#e2e8f0;
}


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

.hero{
    position:relative;

    overflow:hidden;

    min-height:530px;

    display:flex;

    align-items:center;

    background:

    radial-gradient(
        circle at 85% 20%,
        #fecdd3,
        transparent 30%
    ),

    radial-gradient(
        circle at 5% 80%,
        #dbeafe,
        transparent 30%
    ),

    #fff;
}

.hero::before{
    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-120px;

    bottom:-160px;

    border-radius:50%;

    background:#ffe4e6;
}

.hero-content{
    position:relative;

    z-index:2;

    padding:90px 0;
}

.hero-label{
    display:inline-block;

    color:#e11d48;

    font-size:12px;

    font-weight:900;

    letter-spacing:2.5px;

    margin-bottom:20px;
}

.hero h1{
    max-width:850px;

    font-size:
    clamp(48px,7vw,88px);

    line-height:.96;

    letter-spacing:-5px;

    margin-bottom:25px;
}

.hero h1 span{
    color:#e11d48;
}

.hero p{
    max-width:650px;

    font-size:18px;

    color:#64748b;

    margin-bottom:30px;
}

.hero-button{
    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#111827;

    color:#fff;

    padding:14px 22px;

    border-radius:30px;

    font-weight:800;

    transition:.25s;
}

.hero-button:hover{
    background:#e11d48;

    transform:translateY(-2px);
}


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

.trending{
    background:#111827;

    color:#fff;
}

.trending-inner{
    min-height:52px;

    display:flex;

    align-items:center;

    gap:15px;

    overflow:hidden;
}

.trending-label{
    flex-shrink:0;

    background:#e11d48;

    padding:5px 10px;

    border-radius:5px;

    font-size:11px;

    font-weight:900;

    letter-spacing:1px;
}

.trending-text{
    color:#cbd5e1;

    font-size:13px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


/* ================= SECTIONS ================= */

.section{
    padding:80px 0;
}

.section-header{
    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:32px;
}

.section-label{
    color:#e11d48;

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;
}

.section-title{
    font-size:40px;

    line-height:1.1;

    letter-spacing:-2px;

    margin-top:7px;
}

.view-all{
    color:#e11d48;

    font-weight:800;

    font-size:14px;
}


/* ================= CATEGORIES ================= */

.category-grid{
    display:grid;

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

    gap:14px;
}

.category-card{
    background:#fff;

    border:
    1px solid #e5e7eb;

    border-radius:18px;

    padding:23px 16px;

    transition:.25s;
}

.category-card:hover{
    transform:translateY(-5px);

    box-shadow:
    0 18px 40px
    rgba(15,23,42,.08);
}

.category-icon{
    font-size:28px;

    margin-bottom:10px;
}

.category-card h3{
    font-size:15px;
}

.category-card p{
    color:#94a3b8;

    font-size:12px;
}


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

.featured{
    display:grid;

    grid-template-columns:
    1.4fr 1fr;

    gap:30px;

    background:#fff;

    border:
    1px solid #e5e7eb;

    border-radius:25px;

    overflow:hidden;
}

.featured-image{
    width:100%;

    height:100%;

    min-height:380px;

    object-fit:cover;
}

.featured-content{
    padding:45px 40px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.article-category{
    display:inline-block;

    color:#e11d48;

    font-size:11px;

    font-weight:900;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:12px;
}

.featured-content h2{
    font-size:38px;

    line-height:1.1;

    letter-spacing:-1.5px;

    margin-bottom:15px;
}

.featured-content p{
    color:#64748b;

    margin-bottom:20px;
}

.article-meta{
    color:#94a3b8;

    font-size:12px;

    margin-bottom:20px;
}

.read-button{
    color:#e11d48;

    font-weight:900;

    font-size:14px;
}


/* ================= ARTICLE GRID ================= */

.article-grid{
    display:grid;

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

    gap:25px;
}

.article-card{
    background:#fff;

    border:
    1px solid #e5e7eb;

    border-radius:20px;

    overflow:hidden;

    transition:.25s;
}

.article-card:hover{
    transform:translateY(-5px);

    box-shadow:
    0 18px 45px
    rgba(15,23,42,.08);
}

.article-image{
    width:100%;

    height:220px;

    object-fit:cover;

    background:#e2e8f0;
}

.article-content{
    padding:23px;
}

.article-content h2{
    font-size:21px;

    line-height:1.25;

    letter-spacing:-.5px;

    margin:7px 0 10px;
}

.article-excerpt{
    color:#64748b;

    font-size:14px;

    display:
    -webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;
}

.card-footer{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-top:20px;

    padding-top:15px;

    border-top:
    1px solid #eef2f7;
}

.card-date{
    color:#94a3b8;

    font-size:12px;
}

.card-read{
    color:#e11d48;

    font-size:13px;

    font-weight:900;
}


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

.loading{
    text-align:center;

    padding:60px 20px;

    color:#64748b;
}

.loader{
    width:35px;

    height:35px;

    margin:0 auto 15px;

    border:
    3px solid #e2e8f0;

    border-top-color:#e11d48;

    border-radius:50%;

    animation:
    spin .8s linear infinite;
}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}


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

.no-articles{
    display:none;

    text-align:center;

    padding:65px 20px;

    background:#fff;

    border:
    1px dashed #cbd5e1;

    border-radius:20px;
}

.no-articles h3{
    margin-bottom:5px;
}

.no-articles p{
    color:#64748b;
}


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

.search-overlay{
    display:none;

    position:fixed;

    inset:0;

    z-index:10000;

    background:
    rgba(15,23,42,.65);

    backdrop-filter:blur(10px);

    padding:80px 20px;
}

.search-box{
    max-width:700px;

    margin:auto;

    background:#fff;

    padding:25px;

    border-radius:20px;
}

.search-top{
    display:flex;

    gap:10px;
}

.search-input{
    flex:1;

    border:
    1px solid #dbe1e8;

    padding:14px 16px;

    border-radius:10px;

    outline:none;
}

.search-input:focus{
    border-color:#e11d48;
}

.close-search{
    border:0;

    width:48px;

    border-radius:10px;

    background:#111827;

    color:#fff;

    cursor:pointer;
}

.search-results{
    margin-top:20px;
}

.search-result{
    padding:15px 0;

    border-bottom:
    1px solid #eee;
}

.search-result h3{
    font-size:16px;
}

.search-result p{
    color:#64748b;

    font-size:13px;
}


/* ================= NEWSLETTER ================= */

.newsletter{
    background:#111827;

    color:#fff;

    padding:70px 0;
}

.newsletter-box{
    max-width:750px;

    margin:auto;

    text-align:center;
}

.newsletter-box h2{
    font-size:40px;

    letter-spacing:-1.5px;

    margin-bottom:10px;
}

.newsletter-box p{
    color:#94a3b8;

    margin-bottom:25px;
}

.newsletter-form{
    display:flex;

    max-width:550px;

    margin:auto;

    background:#fff;

    padding:5px;

    border-radius:35px;
}

.newsletter-form input{
    flex:1;

    border:0;

    outline:0;

    padding:12px 18px;

    border-radius:30px;

    min-width:0;
}

.newsletter-form button{
    border:0;

    background:#e11d48;

    color:#fff;

    padding:12px 20px;

    border-radius:30px;

    font-weight:800;

    cursor:pointer;
}


/* ================= ABOUT ================= */

.about-box{
    max-width:800px;
}

.about-box p{
    color:#64748b;

    margin-top:18px;

    font-size:16px;
}


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

footer{
    background:#0b1120;

    color:#fff;

    padding-top:65px;
}

.footer-grid{
    display:grid;

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

    gap:45px;
}

.footer-logo{
    font-size:29px;

    font-weight:950;

    letter-spacing:-2px;
}

.footer-logo span{
    color:#e11d48;
}

.footer-description{
    color:#94a3b8;

    max-width:400px;

    margin-top:15px;

    font-size:14px;
}

footer h3{
    font-size:15px;

    margin-bottom:15px;
}

footer a{
    display:block;

    color:#94a3b8;

    font-size:13px;

    margin:8px 0;

    transition:.2s;
}

footer a:hover{
    color:#fff;
}

.footer-bottom{
    border-top:
    1px solid #1e293b;

    margin-top:50px;

    padding:22px 0;

    color:#64748b;

    font-size:12px;

    text-align:center;
}


/* ================= ARTICLE MODAL ================= */

.article-modal{
    display:none;

    position:fixed;

    inset:0;

    z-index:11000;

    background:
    rgba(15,23,42,.72);

    overflow-y:auto;

    padding:40px 15px;
}

.article-modal-box{
    position:relative;

    max-width:850px;

    margin:auto;

    background:#fff;

    border-radius:22px;

    overflow:hidden;
}

.modal-image{
    width:100%;

    max-height:430px;

    object-fit:cover;
}

.modal-content{
    padding:35px;
}

.modal-content h1{
    font-size:
    clamp(30px,5vw,48px);

    line-height:1.08;

    letter-spacing:-2px;

    margin:10px 0 15px;
}

.modal-date{
    color:#94a3b8;

    font-size:13px;

    margin-bottom:25px;
}

.modal-text{
    white-space:pre-line;

    font-size:17px;

    color:#374151;
}

.close-modal{
    position:absolute;

    top:15px;

    right:15px;

    z-index:2;

    width:42px;

    height:42px;

    border:0;

    border-radius:50%;

    background:#fff;

    cursor:pointer;

    font-size:20px;
}


/* ================= TABLET ================= */

@media(max-width:950px){

    .category-grid{
        grid-template-columns:
        repeat(3,1fr);
    }

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

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

    .featured-image{
        min-height:300px;
    }

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

}


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

@media(max-width:650px){

    .header-inner{
        min-height:65px;
    }

    .logo{
        font-size:25px;
    }

    .main-nav{
        gap:8px;
    }

    .main-nav a{
        display:none;
    }

    .search-button{
        width:40px;

        height:40px;
    }

    .hero{
        min-height:500px;
    }

    .hero-content{
        padding:70px 0;
    }

    .hero h1{
        font-size:52px;

        letter-spacing:-3px;
    }

    .hero p{
        font-size:16px;
    }

    .section{
        padding:60px 0;
    }

    .section-title{
        font-size:32px;
    }

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

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

    .featured-content{
        padding:30px 24px;
    }

    .featured-content h2{
        font-size:29px;
    }

    .featured-image{
        min-height:230px;
    }

    .newsletter-box h2{
        font-size:32px;
    }

    .newsletter-form{
        flex-direction:column;

        background:transparent;

        padding:0;

        gap:10px;
    }

    .newsletter-form input,
    .newsletter-form button{
        width:100%;

        padding:14px;
    }

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

    .modal-content{
        padding:25px 20px;
    }  
    
    
    /* ================= MOBILE NAV FIX ================= */

@media (max-width: 768px) {

  .site-header {
    display: block !important;
  }

  .header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
  }

  .main-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .main-nav a {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .search-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

}


/* ===== Hamburger Menu ===== */

.menu-btn{
  background:none;
  border:none;
  color:#fff;
  font-size:30px;
  cursor:pointer;
  display:block;
}

.main-nav{
  display:none;
  position:absolute;
  top:70px;
  right:20px;
  width:220px;
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  overflow:hidden;
  z-index:999;
}

.main-nav a{
  display:block;
  padding:15px 18px;
  text-decoration:none;
  color:#222;
  font-weight:600;
  border-bottom:1px solid #eee;
}

.main-nav a:hover{
  background:#e11d48;
  color:#fff;
}

.main-nav.show{
  display:block;
}

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