/* =======================================================
   QLEARMIND
   Premium Editorial Theme
   style.css
======================================================= */

:root{

    --white:#ffffff;
    --black:#111111;

    --text:#444444;
    --heading:#111111;

    --border:#ECECEC;

    --blue:#2563EB;

    --light:#F8F9FB;

    --radius:18px;

    --transition:.35s ease;

}

/* ======================================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--white);

    color:var(--text);

    font-size:16px;

    line-height:1.8;

    overflow-x:hidden;

}

/* ======================================================= */

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    font-family:inherit;

}

/* ======================================================= */

.container{

    width:min(1180px,92%);

    margin:auto;

}

/* ======================================================= */
/* Header */
/* ======================================================= */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

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

    backdrop-filter:blur(12px);

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

    z-index:1000;

}

.header .container{

    height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ======================================================= */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:44px;

}

.logo span{

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

    font-weight:800;

    font-size:20px;

    letter-spacing:1px;

    color:var(--heading);

}

/* ======================================================= */

.navigation ul{

    display:flex;

    gap:42px;

}

.navigation a{

    font-weight:500;

    color:#555;

    transition:var(--transition);

}

.navigation a:hover{

    color:var(--blue);

}

/* ======================================================= */

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    border-radius:14px;

    background:var(--heading);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-3px);

}

/* ======================================================= */

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    border-radius:14px;

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

    font-weight:600;

    transition:var(--transition);

}

.btn-outline:hover{

    border-color:var(--blue);

    color:var(--blue);

}

/* ======================================================= */

.btn-secondary{

    padding:12px 22px;

    border-radius:12px;

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

    transition:var(--transition);

}
/* ============================= */
/* YouTube Button */
/* ============================= */

.btn-youtube{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:12px;

    background:#FF0000;

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.btn-youtube:hover{

    background:#D50000;

    transform:translateY(-2px);

}
.btn-secondary:hover{

    border-color:var(--blue);

}

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

.hero{

    padding-top:180px;

    padding-bottom:130px;

}

.hero-container{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:80px;

}

.eyebrow{

    display:inline-block;

    letter-spacing:3px;

    color:var(--blue);

    font-size:13px;

    font-weight:700;

    margin-bottom:24px;

}

.hero h1{

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

    font-size:72px;

    line-height:1.05;

    color:var(--heading);

    margin-bottom:30px;

}

.hero p{

    max-width:620px;

    font-size:19px;

    color:#666;

}

.hero-buttons{

    margin-top:45px;

    display:flex;

    gap:20px;

}

.hero-image{

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:340px;

    border-radius:32px;

}

/* ======================================================= */
/* Sections */
/* ======================================================= */

.section{

    padding:120px 0;

}

.section-heading{

    margin-bottom:70px;

}

.section-heading span{

    color:var(--blue);

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

}

.section-heading h2{

    font-family:'Manrope';

    font-size:48px;

    line-height:1.2;

    margin:20px 0;

    color:var(--heading);

}

.section-heading p{

    max-width:700px;

    color:#666;

}

/* ======================================================= */
/* Articles */
/* ======================================================= */

.article-image{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

.article-content{

    padding:28px;

}
/* ======================================================= */
/* Tools */
/* ======================================================= */

.tool-card{

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

    border-radius:28px;

    padding:55px;

    transition:var(--transition);

}

.tool-card:hover{

    border-color:var(--blue);

}

.tool-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:35px;

}

.tool-top h3{

    font-family:'Manrope';

    font-size:42px;

    color:var(--heading);

}

.tool-top p{

    margin-top:10px;

}

.status{

    padding:10px 18px;

    border-radius:999px;

    background:#EEF4FF;

    color:var(--blue);

    font-size:13px;

    font-weight:700;

}

.tool-content{

    max-width:700px;

}

/* ======================================================= */
/* Books */
/* ======================================================= */

.book-card{

    display:grid;

    grid-template-columns:240px 1fr;

    gap:50px;

    align-items:center;

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

    border-radius:24px;

    padding:40px;

    margin-bottom:40px;

}

.book-left img{

    width:220px;

    border-radius:14px;

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

}

.book-right h3{

    font-family:'Manrope';

    font-size:36px;

    color:var(--heading);

    margin-bottom:18px;

}

.book-right p{

    max-width:650px;

    margin-bottom:30px;

    color:#555;

}

.book-buttons{

    margin-top:10px;

}
/* ======================================================= */
/* About */
/* ======================================================= */

.about{

    background:var(--light);

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

}

.about h2{

    font-family:'Manrope';

    font-size:52px;

    color:var(--heading);

    display:flex;

    flex-direction:column;

    gap:8px;   /* 8px, 10px ya 12px try karo */

    line-height:1.05;

}
.about p{

    margin-bottom:24px;

    font-size:18px;

}

/* ======================================================= */
/* Newsletter */
/* ======================================================= */

.newsletter{

    padding:130px 0;

}

.newsletter-box{

    background:#111;

    color:#fff;

    border-radius:34px;

    padding:90px;

    text-align:center;

}

.newsletter-box span{

    letter-spacing:3px;

    font-size:13px;

    color:#8EB5FF;

}

.newsletter-box h2{

    font-family:'Manrope';

    font-size:56px;

    margin:20px 0;

}

.newsletter-box p{

    color:#ddd;

    margin-bottom:40px;

}

.newsletter form{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.newsletter input{

    width:420px;

    padding:18px 22px;

    border:none;

    border-radius:14px;

    outline:none;

    font-size:16px;

}

.newsletter button{

    padding:18px 34px;

    background:var(--blue);

    color:#fff;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

}

/* ======================================================= */
/* Footer */
/* ======================================================= */

.footer{

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

    padding:90px 0 30px;

}

.footer-grid{

    display:grid;

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

    gap:70px;

    margin-bottom:70px;

}

.footer-brand img{

    width:56px;

    margin-bottom:20px;

}

.footer-brand h3{

    font-family:'Manrope';

    margin-bottom:18px;

}

.footer-links h4{

    margin-bottom:18px;

    font-family:'Manrope';

}

.footer-links li{

    margin-bottom:14px;

}

.footer-links a:hover{

    color:var(--blue);

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

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

    padding-top:25px;

    color:#777;

}
.footer-email{

    display:inline-block;

    margin-top:22px;

    font-size:16px;

    font-weight:600;

    color:var(--heading);

    text-decoration:none;

    transition:.3s;

}

.footer-email:hover{

    color:var(--blue);

}

/* ======================================================= */
/* Scroll Button */
/* ======================================================= */

.scroll-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#111;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

}
/* ======================================================= */
/* Featured Article */
/* ======================================================= */

.featured-post{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:0;

    overflow:hidden;

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

    border-radius:28px;

    background:#fff;

    transition:var(--transition);

}

.featured-post:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.08);

    border-color:var(--blue);

}

.featured-post-image{

    overflow:hidden;

}

.featured-post-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.featured-post:hover img{

    transform:scale(1.03);

}

.featured-post-content{

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.featured-post-content h3{

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

    font-size:52px;

    line-height:1.08;

    color:var(--heading);

    margin-bottom:24px;

}

.featured-post-content p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:38px;

    max-width:520px;

}

.featured-post-content a{

    display:inline-flex;

    width:max-content;

    padding:16px 30px;

    border-radius:14px;

    background:var(--heading);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}

.featured-post-content a:hover{

    background:var(--blue);

}
/* ======================================================= */
/* Featured Research */
/* ======================================================= */

.featured-post{

display:grid;

grid-template-columns:1.1fr .9fr;

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

border-radius:28px;

overflow:hidden;

background:#fff;

transition:.35s;

margin-top:25px;

}

.featured-post:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(0,0,0,.08);

border-color:var(--blue);

}

.featured-post-image{

overflow:hidden;

}

.featured-post-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.featured-post:hover img{

transform:scale(1.04);

}

.featured-post-content{

padding:60px;

display:flex;

flex-direction:column;

justify-content:center;

}

.featured-post-content h3{

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

font-size:52px;

line-height:1.1;

color:var(--heading);

margin:20px 0;

}

.featured-post-content p{

font-size:18px;

color:#666;

line-height:1.8;

margin-bottom:35px;

}

.featured-post-content a{

display:inline-block;

padding:16px 30px;

background:#111;

color:#fff;

border-radius:14px;

font-weight:700;

transition:.3s;

width:max-content;

}

.featured-post-content a:hover{

background:var(--blue);

}

@media(max-width:992px){

.featured-post{

grid-template-columns:1fr;

}

.featured-post-content{

padding:40px;

}

.featured-post-content h3{

font-size:36px;

}

}
/* ======================================================= */
/* Responsive */
/* ======================================================= */

@media(max-width:992px){

.featured-post{

    grid-template-columns:1fr;

}

.featured-post-content{

    padding:40px;

}

.featured-post-content h3{

    font-size:38px;

}

}
/* ======================================================= */
/* Responsive */
/* ======================================================= */

@media(max-width:992px){

.hero-container,
.book-card,
.about-grid,
.footer-grid{

    grid-template-columns:1fr;

}

.articles-grid{

    grid-template-columns:1fr;

}

.navigation{

    display:none;

}

.hero h1{

    font-size:54px;

}

.section-heading h2{

    font-size:38px;

}

.book-cover{

    margin:auto;

}

.tool-card,
.book-card,
.newsletter-box{

    padding:35px;

}

.footer-bottom{

    flex-direction:column;

    gap:12px;

}

}

@media(max-width:600px){

.hero{

    padding-top:140px;

}

.hero h1{

    font-size:42px;

}

.hero-buttons{

    flex-direction:column;

}

.newsletter input{

    width:100%;

}

.newsletter-box h2{

    font-size:38px;

}

}

/* ======================================================= */

/* ========================================= */

.navigation a.active{

    color:var(--blue);

}

/* ========================================= */

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.visible{

    opacity:1;

    transform:translateY(0);

}