/* =================================
ROOT VARIABLES
================================= */

:root{

--paris-navy:#061121;
--paris-dark:#020617;
--paris-blue:#0045e6;
--paris-yellow:#ffde00;

--text-main:#ffffff;
--text-muted:#94a3b8;
--text-soft:#cbd5e1;

--border-color:#1e293b;

--radius:6px;

--transition:all .25s ease;

--shadow-soft:0 10px 30px rgba(0,0,0,.35);
--shadow-strong:0 25px 60px rgba(0,0,0,.55);

}

/* =================================
RESET
================================= */

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

body{

font-family:'Archivo',sans-serif;

background:#0c1829;

color:var(--text-main);

line-height:1.6;

-webkit-font-smoothing:antialiased;

}

img{

max-width:100%;
display:block;

}

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

/* =================================
TYPOGRAPHY
================================= */

h1,h2,h3,h4,h5,h6{

font-family:'Oswald',sans-serif;

text-transform:uppercase;

line-height:1.2;

letter-spacing:.02em;

}

p{

font-size:.95rem;

color:var(--text-soft);

}

/* =================================
CONTAINER
================================= */

.container{

max-width:1600px;

margin:0 auto;

padding-left:1rem;
padding-right:1rem;

}

@media(min-width:1024px){

.container{

padding-left:1.5rem;
padding-right:1.5rem;

}

}

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

.site-header{

background:var(--paris-navy);

border-bottom:1px solid #1f2937;

position:sticky;

top:0;

z-index:100;

}

/* =================================
CONTAINER
================================ */

.header-inner{

max-width:1600px;

margin:0 auto;

padding:0 1rem;

display:flex;

align-items:center;

justify-content:space-between;

padding-top:1rem;

padding-bottom:1rem;

}

/* =================================
LEFT GROUP
================================ */

.logo-nav-group{

display:flex;

align-items:center;

gap:2rem;

}

/* =================================
LOGO
================================ */

.logo-img{

height:2.5rem;

width:auto;

object-fit:contain;

}

@media(min-width:768px){

.logo-img{

height:3rem;

}

}

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

.main-nav{

display:none;

font-weight:800;

text-transform:uppercase;

font-size:.72rem;

letter-spacing:.12em;

gap:1.4rem;

}

.main-nav a{

color:white;

text-decoration:none;

padding-bottom:.3rem;

transition:.2s;

}

.main-nav a:hover{

color:var(--paris-yellow);

}

.main-nav .active{

color:var(--paris-yellow);

border-bottom:2px solid var(--paris-yellow);

}

/* show menu on desktop */

@media(min-width:1024px){

.main-nav{

display:flex;

}

}

/* =================================
RIGHT HEADER INFO
================================ */

.header-right{

display:none;

align-items:center;

gap:1rem;

}

@media(min-width:1024px){

.header-right{

display:flex;

}

}

/* live badge */

.live-badge{

background:#dc2626;

font-size:.62rem;

font-weight:900;

padding:.15rem .55rem;

border-radius:3px;

font-style:italic;

animation:pulse 2s infinite;

}

/* date */

.date-text{

font-size:.72rem;

font-weight:700;

color:#6b7280;

text-transform:uppercase;

font-style:italic;

}

/* =================================
HAMBURGER BUTTON (MOBILE)
================================ */

.mobile-menu-btn{

display:block;

background:none;

border:none;

color:white;

cursor:pointer;

padding:.5rem;

}

.menu-icon{

width:2rem;

height:2rem;

}

/* hide hamburger on desktop */

@media(min-width:1024px){

.mobile-menu-btn{

display:none;

}

}

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

.mobile-menu-panel{

max-height:0;
overflow:hidden;
transition:max-height .3s ease;

background:var(--paris-navy);

border-top:1px solid var(--border-color);

box-shadow:0 20px 40px rgba(0,0,0,.4);

position:absolute;

left:0;

width:100%;

}

/* show when active */

.mobile-menu-panel.active{

max-height:500px;
display:block;

}

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

.mobile-nav{

display:flex;

flex-direction:column;

gap:1.4rem;

padding:1.5rem;

font-weight:900;

font-style:italic;

text-transform:uppercase;

font-size:1.05rem;

}

.mobile-nav-item{

display:flex;

align-items:center;

gap:.8rem;

padding-bottom:.6rem;

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

color:white;

text-decoration:none;

transition:.2s;

}

.mobile-nav-item:hover{

color:var(--paris-yellow);

}

.nav-icon{

width:1.5rem;

height:1.5rem;

}

/* =================================
ANIMATION
================================ */

@keyframes pulse{

0%{opacity:1}

50%{opacity:.6}

100%{opacity:1}

}


/* =================================
MAIN CONTENT
================================= */

.main-content{

margin-top:3rem;

}

/* =================================
GRID LAYOUT (3 COLUMN)
================================= */

.grid-layout{

display:grid;

grid-template-columns:1fr;

gap:2rem;

align-items:start;

}

/* Desktop layout */

@media (min-width:1024px){

.grid-layout{

grid-template-columns:3fr 6fr 3fr;

gap:2.5rem;

}

}

/* Optional: very large screen optimization */

@media (min-width:1600px){

.grid-layout{

gap:3rem;

}

}


/* order mobile */

.sidebar-left{order:2;}
.main-section{order:1;}
.sidebar-right{order:3;}

@media(min-width:1024px){

.sidebar-left{order:1;}
.main-section{order:2;}
.sidebar-right{order:3;}

}

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

.hero-featured{

position:relative;

height:28rem;

border-radius:6px;

overflow:hidden;

border:1px solid var(--border-color);

box-shadow:var(--shadow-strong);

margin-bottom:2.5rem;

}

@media(min-width:768px){

.hero-featured{

height:34rem;

}

}

.hero-img{

width:100%;
height:100%;

object-fit:cover;

transition:transform .6s ease;

}

/* zoom hover */

.hero-featured:hover .hero-img{

transform:scale(1.06);

}

.hero-overlay{

position:absolute;

inset:0;

background:linear-gradient(
to top,
rgba(6,17,33,.95) 20%,
rgba(6,17,33,.4) 50%,
transparent 80%
);

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:1.5rem;

}

@media(min-width:768px){

.hero-overlay{

padding:2.5rem;

}

}

/* hero label */

.badge-live{

background:var(--paris-blue);

color:white;

font-size:.65rem;

font-weight:900;

letter-spacing:.12em;

text-transform:uppercase;

padding:.3rem .6rem;

border-radius:3px;

display:inline-flex;

align-items:center;

width:fit-content;

white-space:nowrap;

margin-bottom:1rem;

}
/* hero title */

.hero-title{

font-size:2.2rem;

font-weight:900;

font-style:italic;

line-height:1.05;

letter-spacing:-.02em;

color:#C084FC;

text-shadow:0 2px 6px rgba(0,0,0,.6);

}

@media(min-width:640px){

.hero-title{

font-size:2.8rem;

}

}

@media(min-width:768px){

.hero-title{

font-size:3.6rem;

}

}

/* hero excerpt */

.hero-excerpt{

margin-top:.9rem;

font-size:1.05rem;

max-width:36rem;

color:var(--text-soft);

font-style:italic;

}

/* =================================
FEATURED ARTICLES GRID
================================= */

.grid-2-col{

display:grid;

grid-template-columns:1fr;

gap:2.3rem;

margin-bottom:2.5rem;

}

@media(min-width:768px){

.grid-2-col{

grid-template-columns:1fr 1fr;

}

}

/* featured article */

.article-link{

display:block;

transition:var(--transition);

}

.article-img{

width:100%;

height:15rem;

object-fit:cover;

border-radius:var(--radius);

margin-bottom:1.2rem;

transition:transform .5s ease, opacity .3s ease;

}

/* hover zoom */

.article-link:hover .article-img{

transform:scale(1.05);

opacity:.9;

}

.article-title{

font-size:1.35rem;

font-weight:900;

font-style:italic;

margin-bottom:.4rem;

line-height:1.2;

transition:var(--transition);

}

.article-link:hover .article-title{

color:var(--paris-yellow);

}

.article-excerpt{

font-size:.95rem;

color:var(--text-muted);

line-height:1.6;

}

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

.news-grid{

display:grid;

grid-template-columns:1fr;

gap:1.6rem;

}

@media(min-width:768px){

.news-grid{

grid-template-columns:1fr 1fr;

}

}

@media(min-width:1200px){

.news-grid{

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

}

}

/* card */

.news-card{

background:var(--paris-navy);

border-radius:var(--radius);

border:1px solid var(--border-color);

overflow:hidden;

transition:var(--transition);

margin-bottom:1rem; /* jarak antar card */

}

.news-card:hover{

border-color:var(--paris-blue);

transform:translateY(-5px);

}

/* card image */

.card-img{

width:100%;

height:11rem;

object-fit:cover;

transition:transform .4s ease;

margin-bottom:.6rem; 

}

.news-card:hover .card-img{

transform:scale(1.05);

}

/* card content */

.card-content{

padding:1rem;

}

/* card title */

.card-title{

font-size:1.05rem;

font-weight:800;

font-style:italic;

margin-top:.2rem;

margin-bottom:.6rem; /* jarak judul ke excerpt */

line-height:1.35;

letter-spacing:.02em;

transition:var(--transition);

}

.news-card:hover .card-title{

color:var(--paris-yellow);

}

/* excerpt */

.card-excerpt{

font-size:.92rem;

color:var(--text-muted);

line-height:1.6;

margin-bottom:.4rem;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}

/* =================================
SIDEBAR BASE
================================= */

.sidebar-left,
.sidebar-right{

display:flex;

flex-direction:column;

gap:1.8rem;

}

/* sticky desktop */

@media(min-width:1024px){

.sidebar-left,
.sidebar-right{

position:sticky;

top:110px;

height:fit-content;

}

}

/* =================================
SIDEBAR TITLE
================================= */

.sidebar-title{

font-size:.9rem;

font-weight:900;

letter-spacing:.08em;

text-transform:uppercase;

margin-bottom:.8rem;

color:white;

border-left:3px solid var(--paris-yellow);

padding-left:.6rem;

}

/* =================================
LA SELECTION (LEFT SIDEBAR)
================================= */

.selection-list{

display:flex;

flex-direction:column;

gap:1rem;

}

.selection-item{

display:flex;

gap:.7rem;

align-items:flex-start;

padding:.6rem;

border-radius:4px;

transition:var(--transition);

}

.selection-item:hover{

background:#030913;

}

.selection-thumb{

width:70px;

height:50px;

object-fit:cover;

border-radius:4px;

flex-shrink:0;

}

.selection-title{

font-size:.85rem;

font-weight:800;

line-height:1.3;

transition:var(--transition);

}

.selection-item:hover .selection-title{

color:var(--paris-yellow);

}

/* =================================
INFO BOX (RIGHT SIDEBAR)
================================= */

.info-box{

background:var(--paris-navy);

border:1px solid var(--border-color);

border-radius:var(--radius);

padding:1.2rem;

box-shadow:var(--shadow-soft);

}

/* =================================
FIL INFO (LIVE FEED)
================================= */

.box-title{

font-size:.9rem;

font-weight:900;

margin-bottom:1rem;

display:flex;

align-items:center;

gap:.4rem;

letter-spacing:.05em;

}

.pulse-dot{

width:8px;

height:8px;

background:#ef4444;

border-radius:50%;

animation:pulseDot 1.5s infinite;

}

@keyframes pulseDot{

0%{opacity:1}

50%{opacity:.4}

100%{opacity:1}

}

.news-feed-list{

display:flex;

flex-direction:column;

gap:.9rem;

list-style:none;

}

/* item */

.feed-item{

display:block;

padding:.8rem;

border-radius:4px;

transition:var(--transition);

border:1px solid transparent;

}

.feed-item:hover{

background:#030913;

border-color:var(--border-color);

}

/* feed title */

.feed-title{

font-size:1.05rem;

font-weight:800;

font-style:italic;

line-height:1.35;

margin-bottom:.35rem;

}

/* feed excerpt */

.feed-excerpt{

font-size:.92rem;

color:var(--text-muted);

line-height:1.6;

}
/* time */

.feed-time{

font-size:.7rem;

font-weight:900;

color:var(--paris-yellow);

display:block;

margin-bottom:.2rem;

}

.feed-item:hover .feed-title{

color:var(--paris-yellow);

}


/* =================================
FEATURED ARTICLES GRID
================================ */

.featured-articles-grid{

display:grid;

grid-template-columns:1fr;

gap:2.5rem;

margin-top:2rem;

}

/* desktop */

@media (min-width:768px){

.featured-articles-grid{

grid-template-columns:1fr 1fr;

gap:2.5rem;

}

}

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

.featured-article{

display:block;

}

/* clickable area */

.article-link{

display:block;

text-decoration:none;

color:white;

}

/* =================================
IMAGE
================================ */

.article-img{

width:100%;

height:15rem; /* sama dengan h-60 */

object-fit:cover;

border-radius:var(--radius);

margin-bottom:1.25rem;

transition:opacity .3s ease;

}

.article-link:hover .article-img{

opacity:.8;

}

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

.article-title{

font-size:1.8rem;

font-weight:900;

font-style:italic;

line-height:1.2;

margin-bottom:.5rem;

letter-spacing:.01em;

transition:var(--transition);

}

/* hover effect */

.article-link:hover .article-title{

color:var(--paris-yellow);

}

/* =================================
EXCERPT
================================ */

.article-excerpt{

font-size:1rem;

line-height:1.65;

color:var(--text-muted);

max-width:42rem;

}

/* ================================
SECTION BLOCK
================================ */

.section-block{

margin-top:2rem;

display:flex;

flex-direction:column;

gap:2rem; /* sama seperti space-y-8 */

}

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

.section-title{

font-size:1.5rem;

font-weight:900;

font-style:italic;

padding-bottom:.5rem;

border-bottom:1px solid #1f2937;

letter-spacing:.02em;

}

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

.news-tiles-grid{

display:grid;

grid-template-columns:1fr;

gap:1.5rem;

}

/* desktop */

@media (min-width:768px){

.news-tiles-grid{

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

}

}

/* =================================
TILE CARD
================================ */

.news-tile{

display:block;

background:var(--paris-navy);

padding:1.5rem;

border-radius:var(--radius);

border:1px solid #1f2937;

text-decoration:none;

color:white;

transition:var(--transition);

}

/* hover */

.news-tile:hover{

background:rgba(31,41,55,.5);

border-color:var(--paris-blue);

}

/* =================================
TILE TITLE
================================ */

.tile-title{

font-size:1.1rem;

font-weight:800;

font-style:italic;

margin-bottom:.35rem;

line-height:1.35;

transition:var(--transition);

}

/* hover title */

.news-tile:hover .tile-title{

color:var(--paris-yellow);

}

/* =================================
TILE EXCERPT
================================ */

.tile-excerpt{

font-size:.92rem;

color:var(--text-muted);

line-height:1.6;

font-style:italic;

}


/* =================================
SPECIAL FOCUS CARD
================================ */

.special-focus-card{

position:relative;

border-radius:var(--radius);

overflow:hidden;

border:1px solid var(--border-color);

background:#020617;

}

/* background image */

.focus-bg-img{

width:100%;

height:20rem;

object-fit:cover;

display:block;

}

/* overlay */

.focus-overlay{

position:absolute;

inset:0;

background:linear-gradient(
to top,
rgba(2,6,23,.95) 20%,
rgba(2,6,23,.7) 50%,
rgba(2,6,23,.3) 75%,
transparent
);

}

/* content area */

.focus-content{

position:absolute;

bottom:0;

left:0;

right:0;

padding:1.5rem;

z-index:2;

}

/* header */

.focus-header{

display:flex;

align-items:center;

gap:.75rem;

margin-bottom:.6rem;

}

/* badge */

.badge-special{

font-size:.65rem;

font-weight:900;

letter-spacing:.12em;

text-transform:uppercase;

background:var(--paris-blue);

color:white;

padding:.3rem .55rem;

border-radius:3px;

white-space:nowrap;

}

/* divider */

.divider-line{

flex:1;

height:1px;

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

}

/* title link */

.focus-title-link{

text-decoration:none;

color:white;

}

/* title */

.focus-title{

font-size:1.4rem;

font-weight:900;

font-style:italic;

line-height:1.25;

margin-bottom:.5rem;

transition:var(--transition);

}

.focus-title-link:hover .focus-title{

color:var(--paris-yellow);

}

/* excerpt */

.focus-excerpt{

font-size:.95rem;

line-height:1.6;

color:var(--text-light);

margin-bottom:.9rem;

max-width:32rem;

}

/* actions */

.focus-actions{

display:flex;

align-items:center;

gap:1rem;

flex-wrap:wrap;

}

/* button */

.btn-read{

font-size:.8rem;

font-weight:900;

text-transform:uppercase;

padding:.45rem .8rem;

border-radius:3px;

background:var(--paris-blue);

color:white;

text-decoration:none;

transition:var(--transition);

}

.btn-read:hover{

background:#0036b8;

}

/* read time */

.read-time{

font-size:.8rem;

color:var(--text-muted);

}

/* top highlight */

.top-gradient-line{

position:absolute;

top:0;

left:0;

right:0;

height:4px;

background: linear-gradient(
90deg,
#d90429 0%,
#ffffff 6%,
#1d3557 100%
);

z-index:3;

}

/* =================================
NUMBERED LIST
================================ */

.numbered-list{

margin-top:1.8rem;

display:flex;

flex-direction:column;

gap:1.2rem;

}

/* item */

.numbered-item{

display:flex;

gap:1rem;

text-decoration:none;

padding:.7rem;

border-radius:4px;

transition:var(--transition);

border:1px solid transparent;

}

.numbered-item:hover{

background:#030913;

border-color:var(--border-color);

}

/* number */

.number{

font-size:1.4rem;

font-weight:900;

font-style:italic;

color:var(--paris-blue);

min-width:2.5rem;

}

/* content */

.item-content{

flex:1;

}

/* title */

.item-title{

font-size:1rem;

font-weight:800;

font-style:italic;

line-height:1.35;

margin-bottom:.3rem;

transition:var(--transition);

}

.numbered-item:hover .item-title{

color:var(--paris-yellow);

}

/* excerpt */

.item-excerpt{

font-size:.9rem;

color:var(--text-muted);

line-height:1.55;

}


/* =================================
INFO BOX WRAPPER
================================ */

.info-box.after-paris{

background:var(--paris-blue);

padding:2rem;

border-radius:var(--radius);

box-shadow:0 20px 40px rgba(0,0,0,.35);

overflow:hidden;

transform:skewY(-2deg);

}

/* meluruskan isi */

.skew-wrapper{

transform:skewY(2deg);

}

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

.box-title{

color:white;

font-size:1.5rem;

font-weight:900;

font-style:italic;

text-transform:uppercase;

letter-spacing:-.02em;

margin-bottom:2rem;

}

/* =================================
QUOTE LIST
================================ */

.quotes-list{

display:flex;

flex-direction:column;

gap:2rem;

}

/* =================================
QUOTE ITEM
================================ */

.quote-item{

display:block;

text-decoration:none;

transition:var(--transition);

}

/* =================================
QUOTE TEXT
================================ */

.quote-text{

font-size:1.2rem;

font-weight:700;

font-style:italic;

line-height:1.35;

color:white;

transition:color .25s ease;

}

/* hover hanya ubah warna */

.quote-item:hover .quote-text{

color:var(--paris-yellow);

}

/* =================================
AUTHOR
================================ */

.quote-author{

font-size:.65rem;

margin-top:.7rem;

color:#bfdbfe;

font-weight:900;

letter-spacing:.18em;

text-transform:uppercase;

opacity:.85;

}



/* =================================
EFFECTIF NEWS (PLAYERS)
================================= */

.staff-list{

display:flex;

flex-direction:column;

gap:.6rem;

}

.staff-item{

display:flex;

align-items:center;

gap:.6rem;

padding:.45rem;

border-radius:4px;

transition:var(--transition);

}



.staff-avatar{

width:48px;

height:48px;

border-radius:50%;

overflow:hidden;

border:1px solid #ffffff;

flex-shrink:0;

}

.staff-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.staff-name{

flex:1;

font-size:1.5rem;

font-weight:700;

font-style: italic;

font-family:'Oswald', sans-serif;

}

/* =================================
CHAMPIONS LEAGUE FOCUS BLOCK
================================= */

.champions-block{

margin-top:3rem;

background:linear-gradient(
135deg,
#020617,
#061121
);

border:1px solid var(--border-color);

border-radius:var(--radius);

padding:2rem;

box-shadow:var(--shadow-soft);

}

.champions-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:1.5rem;

}

.champions-title{

font-size:1.2rem;

font-weight:900;

letter-spacing:.06em;

text-transform:uppercase;

}

.focus-card{

border-radius:var(--radius);

overflow:hidden;

background:var(--paris-navy);

border:1px solid var(--border-color);

transition:transform .3s ease, box-shadow .3s ease;

}

.focus-card:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(0,0,0,.45);

}

/* image */

.focus-img{

width:100%;

height:16rem;

object-fit:cover;

display:block;

transition:transform .5s ease;

}

.focus-card:hover .focus-img{

transform:scale(1.05);

}

/* content */

.focus-content{

padding:1.2rem;

}

.focus-title{

font-size:1.5rem;

font-weight:900;

font-style:italic;

line-height:1.25;

margin-bottom:.5rem;

}

.focus-desc{

font-size:.95rem;

color:var(--text-soft);

line-height:1.6;

max-width:32rem;

}


/* =================================
BUTTON SYSTEM
================================= */

.btn{

display:inline-flex;

align-items:center;

gap:.4rem;

font-size:.8rem;

font-weight:900;

text-transform:uppercase;

padding:.5rem .8rem;

border-radius:4px;

transition:var(--transition);

cursor:pointer;

}

/* primary */

.btn-primary{

background:var(--paris-blue);

color:white;

}

.btn-primary:hover{

background:#0037b8;

}

/* outline */

.btn-outline{

border:1px solid var(--border-color);

color:white;

}

.btn-outline:hover{

border-color:var(--paris-yellow);

color:var(--paris-yellow);

}

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

.site-footer{

margin-top:4rem;

background:#02060f;

border-top:1px solid var(--border-color);

padding-top:3rem;

}

/* footer grid */

.footer-grid{

display:grid;

grid-template-columns:1fr;

gap:2rem;

margin-bottom:2rem;

}

@media(min-width:768px){

.footer-grid{

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

}

}

/* logo */

.footer-logo{

height:2.2rem;

margin-bottom:.6rem;

}

.footer-desc{

font-size:.9rem;

color:var(--text-muted);

line-height:1.6;

max-width:320px;

}

/* footer column */

.column-title{

font-size:.85rem;

font-weight:900;

margin-bottom:.8rem;

letter-spacing:.05em;

}

.footer-links{

list-style:none;

display:flex;

flex-direction:column;

gap:.4rem;

}

.footer-links a{

font-size:.85rem;

color:var(--text-muted);

transition:var(--transition);

}

.footer-links a:hover{

color:var(--paris-yellow);

}

/* footer bottom */

.footer-bottom{

border-top:1px solid var(--border-color);

padding:1rem 0;

display:flex;

flex-direction:column;

gap:.6rem;

align-items:center;

text-align:center;

}

@media(min-width:768px){

.footer-bottom{

flex-direction:row;

justify-content:space-between;

}

}

.copyright{

font-size:.75rem;

color:#64748b;

}

.social-links{

display:flex;

gap:1rem;

}

.social-links a{

font-size:.8rem;

font-weight:700;

color:#94a3b8;

transition:var(--transition);

}

.social-links a:hover{

color:var(--paris-yellow);

}

/* =================================
SCROLLBAR
================================= */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#02060f;

}

::-webkit-scrollbar-thumb{

background:#1e293b;

border-radius:6px;

}

::-webkit-scrollbar-thumb:hover{

background:#334155;

}

/* =================================
UTILITY CLASSES
================================= */

.hidden{

display:none;

}

.text-center{

text-align:center;

}

.mt-1{margin-top:.25rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:1rem;}
.mt-4{margin-top:1.5rem;}
.mt-5{margin-top:2rem;}

.mb-1{margin-bottom:.25rem;}
.mb-2{margin-bottom:.5rem;}
.mb-3{margin-bottom:1rem;}
.mb-4{margin-bottom:1.5rem;}
.mb-5{margin-bottom:2rem;}

.rounded{

border-radius:var(--radius);

}

.shadow{

box-shadow:var(--shadow-soft);

}

.transition{

transition:var(--transition);

}