/* ==========================================================
   Write2Text Blog
   Main Stylesheet
========================================================== */

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

:root{

    --primary:#2563EB;
    --primary-hover:#1D4ED8;

    --text:#1F2937;
    --text-light:#6B7280;

    --background:#F8FAFC;
    --white:#FFFFFF;

    --border:#E5E7EB;

    --radius:12px;

    --shadow:0 4px 15px rgba(0,0,0,.08);

}

body{

    background:var(--background);

    color:var(--text);

    font-family:Arial, Helvetica, sans-serif;

    line-height:1.8;

}

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

.site-header{

    position:sticky;

    top:0;

    z-index:999;

    background:#fff;

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

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.header-container{

    max-width:1200px;

    margin:auto;

    padding:0 20px;

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*======================================================
LOGO
======================================================*/
.logo img{

    height:58px;

    width:auto;

    display:block;

}

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

.main-nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

.main-nav a{

    text-decoration:none;

    color:var(--text);

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

.main-nav a:hover{

    color:var(--primary);

}

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

.search-btn{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#EFF6FF;

    color:var(--primary);

    text-decoration:none;

    font-size:20px;

    transition:.25s;

}

.search-btn:hover{

    background:var(--primary);

    color:#fff;

}

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

.page-content{

    max-width:1200px;

    margin:40px auto;

    padding:0 20px;

}
.hero-container{

    margin:25px 0 35px;

    text-align:center;

}

.hero-image{

    width:100%;

    max-width:850px;

    height:auto;

    display:block;

    margin:auto;

    border-radius:12px;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

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

.site-footer{

    background:#1F2937;

    color:#fff;

    margin-top:80px;

}

.footer-container{

    max-width:1200px;

    margin:auto;

    padding:60px 20px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

}

.footer-column h3{

    margin-bottom:20px;

}

.footer-column p{

    color:#D1D5DB;

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:12px;

}

.footer-column a{

    color:#D1D5DB;

    text-decoration:none;

}

.footer-column a:hover{

    color:#fff;

}

.footer-bottom{

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

    text-align:center;

    padding:20px;

    color:#9CA3AF;

}

.article-hero{

    display:block;

    width:100%;

    max-width:780px;

    margin:35px auto;

    border-radius:12px;

    height:auto;

}

.infographic{

    display:block;

    width:100%;

    max-width:900px;

    margin:50px auto;

    border-radius:12px;

    height:auto;

}
/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:900px){

    .main-nav{

        display:none;

    }

    .header-container{

        height:70px;

    }

    .logo img{

        height:48px;

    }

}