/* ==========================================================
   INFOWORLD V2
   STYLE.CSS
   Global Style
========================================================== */

/* ==========================
   BODY
========================== */

body{
    background:var(--bg);
    color:var(--text);
}

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

h1{
    font-size:clamp(2rem,5vw,3rem);
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
}

h2{
    font-size:clamp(1.6rem,4vw,2.2rem);
    margin-bottom:20px;
}

h3{
    font-size:1.25rem;
    margin-bottom:12px;
}

h4{
    font-size:1.1rem;
}

p{
    margin-bottom:15px;
}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    background:var(--primary);

    color:#fff;

    padding:12px 24px;

    border-radius:var(--radius-full);

    transition:var(--transition);

    font-weight:600;

}

.btn:hover{

    background:var(--primary-dark);

    color:#fff;

    transform:translateY(-2px);

}

/* ==========================
   TAG
========================== */

.tag{

    display:inline-block;

    background:var(--primary);

    color:#fff;

    padding:5px 12px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:12px;

}

/* ==========================
   BADGE
========================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#f1f5f9;

    color:var(--text);

    padding:6px 12px;

    border-radius:999px;

    font-size:.8rem;

}

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

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

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

    padding-bottom:15px;

}

.section-title h2{

    margin:0;

}

.section-title a{

    color:var(--primary);

    font-size:.9rem;

    font-weight:600;

}

.section-title a:hover{

    color:var(--primary-dark);

}

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

.card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.card-content{

    padding:20px;

}

.card-content h3{

    margin-bottom:12px;

}

.card-content time{

    display:block;

    margin-top:15px;

    color:var(--text-muted);

    font-size:.85rem;

}

/* ==========================
   CATEGORY CARD
========================== */

.category-card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

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

    transition:var(--transition);

}

.category-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.category-card img{

    width:100%;

    height:210px;

    object-fit:cover;

}

.category-card .card-content{

    padding:18px;

}

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

.cards{

    display:grid;

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

    gap:25px;

}

.category-grid{

    display:grid;

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

    gap:25px;

}

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

article{

    transition:var(--transition);

}

article:hover{

    transform:translateY(-4px);

}

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

img{

    border-radius:var(--radius-sm);

}

/* ==========================
   HR
========================== */

hr{

    border:none;

    height:1px;

    background:var(--border);

    margin:40px 0;

}

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

.fade-up{

    animation:fadeUp .5s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:none;

}

}

/* ==========================
   HOVER LINK
========================== */

h3 a:hover{

    color:var(--primary);

}

/* ==========================
   BOX
========================== */

.box{

    background:#fff;

    border-radius:var(--radius);

    padding:25px;

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

}

/* ==========================
   UTILITIES
========================== */

.mb-5{

margin-bottom:50px;

}

.mt-5{

margin-top:50px;

}

.py{

padding:60px 0;

}

.text-uppercase{

text-transform:uppercase;

}

.overflow-hidden{

overflow:hidden;

}
/* ==========================================
BACK TO TOP
========================================== */

.back-top{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:20px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.back-top.show{

opacity:1;

visibility:visible;

}

.back-top:hover{

background:var(--primary-dark);

transform:translateY(-3px);

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

.search-box{

position:relative;

}

.search-box input:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(14,165,233,.15);

}
/* ==========================================
DARK MODE
========================================== */

body.dark-mode{

background:#0f172a;

color:#f8fafc;

}

body.dark-mode .site-header,

body.dark-mode .main-nav,

body.dark-mode .article-card,

body.dark-mode .sidebar-widget,

body.dark-mode .hero-small,

body.dark-mode footer{

background:#111827;

}

body.dark-mode a{

color:#f8fafc;

}

body.dark-mode p{

color:#cbd5e1;

}

body.dark-mode input{

background:#1e293b;

color:#fff;

}

body.dark-mode .search-box{

background:#1e293b;

border-color:#334155;

}

body.dark-mode .search-box input::placeholder{

color:#94a3b8;

}