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

body{
    font-family:"Poppins",sans-serif;
    background:#020617;
    color:#e2e8f0;
}

/* NAVBAR */

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 5%;
    background:rgba(28,26,28,0.95);
    backdrop-filter:blur(10px);
    border-radius:0 0 25px 25px;
    position:sticky;
    top:0;
    z-index:1000;
}

.logo{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1.2rem;
    font-weight:600;
    color:#c94242;
}

.logo img{
    height:30px;
}

/* NAV LINKS */

.nav-links{
    display:flex;
    align-items:center;
    gap:10px;
    list-style:none;
}

.nav-links a{
    color:#cbd5e1;
    text-decoration:none;
    background:#010101;
    padding:8px 16px;
    border-radius:25px;
    font-size:0.95rem;
    border:2px solid transparent;
    transition:all .3s ease;
}

.nav-links a:hover{
    color:#22c55e;
    border-color:red;
    box-shadow:0 0 10px red;
    transform:scale(1.05);
}

/* DIVIDER */

.divider{
    background:white;
    width:100%;
    height:1px;
    opacity:.2;
}

/* TOP LATEST SECTION */

.top-latest-box{
    display:flex;
    border:2px solid white;
    border-radius:20px;
    margin-top:10px;
    padding:10px;
    gap:10px;
}

.latest-trend{
    max-width:50vw;
}

.latest-trend img{
    width:100%;
    border-radius:20px;
    border:.5px solid wheat;
}

.latest-trend a{
    text-decoration:none;
    background:#7bff00;
    border-radius:12px;
    padding:4px 10px;
    border-right:4px solid white;
}

/* QUICK LINKS */

.quick-links{
    border-radius:12px;
    border:2px solid white;
}

.quick-links a{
    display:flex;
    border-left:2px solid white;
    font-size:clamp(1rem,1vw + .5rem,2rem);
    margin:10px 6px;
    padding:8px 14px;
    background:rgba(255,255,255,0.06);
    border-radius:10px;
    color:#cbd5e1;
    text-decoration:none;
}

.quick-links a:hover{
    background:#22c55e;
    color:#020617;
}

/* HERO */

.hero{
    text-align:center;
    padding:60px 12px;
}

.green{color:#22c55e;}
.blue{color:#38bdf8;}
.pink{color:#e879f9;}

.subtitle{
    color:#cbd5e1;
    margin-top:10px;
}

/* FEATURES */

.features{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    justify-content:center;
    padding:40px 12px;
}

.feature-card{
    width:300px;
    padding:18px;
    border-radius:18px;
    background:rgba(15,23,42,0.7);
    border:1px solid rgba(255,255,255,0.1);
}

.green-card{border-color:#22c55e;}
.blue-card{border-color:#38bdf8;}
.pink-card{border-color:#e879f9;}

.feature-card a{
    display:inline-block;
    margin-top:10px;
    color:#38bdf8;
    text-decoration:none;
}

/* BLOG GRID */

.blogs{
    text-align:center;
    padding:20px;
}

.blog-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
}

.blog-card{
    width:300px;
    background:rgba(15,23,42,0.8);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px;
    padding:14px;
    text-align:left;
    font-family:'Courier New',Courier,monospace;
}

.blog-card img{
    width:100%;
    border-radius:12px;
}

.more-btn{
    display:flex;
    justify-content:center;
    padding:10px;
    text-decoration:none;
    color:white;
    border-radius:25px;
    width:max-content;
    min-width:100px;
    background:black;
    font-weight:bold;
}

/* FOOTER */

.footer-body{
    background:#010101;
    border-top-right-radius:20px;
    border-top-left-radius:20px;
    margin-top:20px;
    padding:20px;
}

.footer-top{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:40px;
    align-items:center;
}

.container-0{
    display:flex;
    flex-direction:column;
    color:#ff9898;
}

.container-0 a{
    color:white;
    background:black;
    border:2px solid #222;
    border-radius:25px;
    padding:5px;
    margin-top:4px;
    text-decoration:none;
    text-align:center;
    transition:.3s;
}

.container-0 a:hover{
    background:white;
    color:black;
    box-shadow:0 0 10px red;
    transform:scale(1.05);
}

/* CENTER LOGO */

.container-1{
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#5fa800;
    font-family:cursive;
    font-weight:bold;
    border:2px solid red;
    border-radius:25px;
    padding:10px;
}

.container-1 img{
    width:clamp(50px,10vw,80px);
    margin-bottom:6px;
}

/* SOCIAL LINKS */

.container-2{
    display:flex;
    flex-direction:column;
}

.container-2 a{
    display:flex;
    align-items:center;
    gap:8px;
    background:black;
    border:2px solid #222;
    color:#ff9494;
    border-radius:25px;
    padding:6px;
    margin-top:4px;
    text-decoration:none;
    transition:.3s;
}

.container-2 img{
    width:20px;
}

.container-2 a:hover{
    background:white;
    color:black;
    box-shadow:0 0 10px red;
}

/* COPYRIGHT */

.footer-body p{
    display:flex;
    justify-content:center;
    margin-top:10px;
    color:#b62a2a;
    font-size:.9rem;
}

.footer-body a{
    color:#ff9393;
    margin-left:10px;
    text-decoration:none;
}

/* MOBILE */

@media(max-width:600px){

.navbar{
    flex-direction:column;
    gap:8px;
}

.top-latest-box{
    flex-direction:column;
}

.latest-trend{
    max-width:100%;
}

}