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


.header{
    position:sticky;
    top:0;
    z-index:var(--z-navbar);

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

    backdrop-filter:var(--blur-md);

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

.header .container{

    height:var(--header-height);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:var(--fs-xl);

    font-weight:700;

    color:var(--color-primary);

}

.nav-list{

    display:flex;

    gap:2rem;

}

.nav-list a{

    font-size:var(--fs-md);

    color: var(--color-text);

    transition:var(--transition);

}

.nav-list a:hover{

    color:var(--color-primary);

}

.theme-toggle{

    border:none;

    background:none;

    cursor:pointer;

    font-size:1.2rem;

}
/* ==========================================
   Hero Section
========================================== */

.hero {

    min-height: calc(100vh - var(--header-height));

    display: flex;

    align-items: center;

    padding: var(--space-xl) 0;

}

.hero-container {

    display: grid;

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

    gap: 4rem;

    align-items: center;

}

.hero-greeting {

    font-size: var(--fs-lg);

    color: var(--color-primary);

    margin-bottom: var(--space-sm);

}

.hero-title {

    font-size: clamp(2.8rem, 5vw, 4.5rem);

    line-height: 1.1;

    margin-bottom: var(--space-md);

}

.hero-subtitle {

    font-size: var(--fs-xl);

    color: var(--color-text-light);

    margin-bottom: var(--space-lg);
    min-height:40px;


}

.hero-description {

    max-width: 600px;

    margin-bottom: var(--space-xl);

    color: var(--color-text-light);

}

.hero-buttons {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}

.hero-image {

    display: flex;
    position: relative;
      justify-content: center;
      
}
  



.hero-image img {
    width: min(420px,100%);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    object-fit:cover;

}

/* ==========================================
   Buttons
========================================== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: .9rem 1.6rem;

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

    font-weight: 600;

    transition: var(--transition);

}

.btn-primary {

    background: var(--color-primary);

    color: var(--color-white);

}

.btn-primary:hover {

    background: var(--color-primary-hover);
   
}

.btn-secondary {

    border: 2px solid var(--color-primary);

    color: var(--color-primary);

}

.btn-secondary:hover {

    background: var(--color-primary);

    color: var(--color-white);

}
.btn-outline{
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}
.btn-outline:hover{
background-color:var(--color-primary);
color:white;
}

/*  .floating-card{
    position: absolute;
    background: var(--color-white);
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}
.card-one{
    top: 10%;
    left: -30px;
}
.card-two{
    bottom: 30%;
    right: -40px;
}
.card-three{
    bottom: 5%;
    left: 20px;
}
    */
.about-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
    margin-top:2rem;
}

.about-card{
    background: var(--color-surface);
    padding:1.5rem;
    border-radius:16px;
    box-shadow:var(--shadow-md);
    transition:.3s ease;
    aspect-ratio:1/1;
}

.about-card:hover{
    transform:translateY(-6px);
}
.about-image{
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image img{
    width: 320px;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    object-fit: cover;
}
.quick-facts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    margin-top:3rem;
}

.fact-card{
  background: var(--color-surface);
    border-radius:16px;
    padding:1.5rem;
    text-align:center;
    box-shadow:var(--shadow-md);
    transition:all .3s ease;
}

.fact-card:hover{
    transform:translateY(-8px);
}

.fact-icon{
    font-size:2rem;
    display:block;
    margin-bottom:.8rem;
}

.fact-card h3{
    margin-bottom:.5rem;
}
.journey{
    margin-top: 5rem;
}

.timeline{
    margin-top: 3rem;
    border-left: 3px solid var(--color-primary);
    padding-left: 2rem;
}

.timeline-item{
    position: relative;
    margin-bottom: 3rem;
}

.timeline-item::before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--color-primary);
    left:-2.6rem;
    top:.3rem;
}

.timeline-year{
    font-weight:700;
    color:var(--color-primary);
    margin-bottom:.5rem;
}

.timeline-content{
  background: var(--color-surface);
    padding:1.5rem;
    border-radius:16px;
    box-shadow:var(--shadow-md);
}
.skill-card{

    background: var(--color-surface);

    border-radius:20px;

    padding:2rem;

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

    transition:.35s ease;

}

.skill-card:hover{

    transform:translateY(-8px);

}

.skill-icon{

    font-size:3rem;

    margin-bottom:1rem;

}

.skill-card h3{

    margin-bottom:1rem;

}

.skill-list{

    display:flex;

    flex-direction:column;

    gap:.7rem;

}
.project-card{

  background: var(--color-surface);

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s ease;

}

.project-card:hover{

    transform:translateY(-10px);

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

}
.project-image{

    overflow:hidden;
    border-radius:20px 20px 0 0;
}
.project-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:transform .5s ease;

}

.project-content{

    padding:1.5rem;

}

.project-category{

    display:inline-block;

    background:var(--color-primary);

    color:#fff;

    padding:.3rem .8rem;

    border-radius:999px;

    font-size:.8rem;

    margin-bottom:1rem;

}

.project-content h3{

    margin-bottom:1rem;

    color:var(--color-text);

}

.project-content p{

    margin-bottom:1.2rem;

    color:var(--color-text-light);

}

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:.6rem;

    margin-bottom:1.5rem;

}

.project-tech span{

  background: var(--color-background);
  color:var(--color-text);

    padding:.4rem .8rem;

    border-radius:999px;

    font-size:.8rem;

}

.project-buttons{

    display:flex;

    gap:1rem;

}

.project-buttons a{

    flex:1;

    text-align:center;

    padding:.8rem;

    border-radius:10px;

    background:var(--color-primary);

    color:#fff;

  transition:.3s ease;
   
}

.project-buttons a:hover{
   transform:translateY(-3px);
    opacity:.9;

}
.project-meta{

    display:flex;

    justify-content:space-between;

    margin:1rem 0;

    font-size:.9rem;

   color:var(--color-text-light);

}
.project-buttons{

    display:grid;

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

    gap:.8rem;

}

.project-buttons a{

    text-align:center;

    padding:.8rem;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-demo{

    background:#2563eb;

    color:#fff;

}

.btn-github{

    background:#111827;

    color:#fff;

}

.btn-details{

    background:#10b981;

    color:#fff;

}

.project-buttons a:hover{

    transform:translateY(-3px);
 


}
.project-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:1rem;

    margin:3rem 0;

}

.filter-btn{

    border:none;

    padding:.8rem 1.5rem;

    border-radius:999px;

    cursor:pointer;

   background:var(--color-border);

    transition:.3s;

    font-weight:600;

}

.filter-btn:hover{

    background:var(--color-primary);

    color:#fff;

}

.filter-btn.active{

    background:var(--color-primary);

    color:#fff;

}
body.dark-mode .header{

    background:rgba(15,23,42,.85);

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

}
/* ==========================================
   Projects Hero
========================================== */

.projects-hero{

    padding:6rem 0 4rem;

    text-align:center;

}

.section-tag{

    display:inline-block;

    padding:.5rem 1rem;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    font-size:.9rem;

    margin-bottom:1rem;

}

.projects-hero h1{

    font-size:clamp(2.5rem,5vw,4rem);

    margin-bottom:1rem;

    color:var(--color-text);

}

.projects-hero-text{

    max-width:720px;

    margin:0 auto;

    color:var(--color-text-light);

    line-height:1.8;

    font-size:1.05rem;

}
/* ==========================================
   Project Statistics
========================================== */

.project-stats{

    padding:4rem 0;

}

.stats-grid{

    display:grid;

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

    gap:2rem;

}

.stat-box{

    background:var(--color-surface);

    border-radius:20px;

    padding:2rem;

    text-align:center;

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

    transition:var(--transition);

}

.stat-box:hover{

    transform:translateY(-8px);

}

.stat-box h3{

    font-size:2.2rem;

    color:var(--color-primary);

    margin-bottom:.5rem;

}

.stat-box p{

    color:var(--color-text-light);

}
/* ==========================================
   Project Filter
========================================== */

.project-filter-section{

    display:flex;
    flex-direction:column;
    gap:20px;

}
.level-filter{

    margin-top:20px;

}

.project-filter{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}

.filter-btn{

    padding:.8rem 1.5rem;

    border:none;

    border-radius:999px;

    background:var(--color-border);

    color:var(--color-text);

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

}

.filter-btn:hover{

    background:var(--color-primary);

    color:var(--color-white);

}

.filter-btn.active{

    background:var(--color-primary);

    color:var(--color-white);

}
/* ==========================================
   Projects Grid
========================================== */

.projects-grid-section{

    padding:4rem 0;

}

.projects-grid{

    display:grid;

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

    gap:2rem;

}
.project-image img{

    width:100%;

    height:550px;

    object-fit:contain;

    background:var(--color-surface);

}
.project-image img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

}
.project-card{

    position:relative;

}

.project-badge{

    position:absolute;

    top:18px;

    right:18px;

    background:#f59e0b;

    color:#fff;

    padding:.45rem .9rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

    z-index:5;

}
.project-status{

    display:inline-block;

    padding:.35rem .8rem;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

    margin-bottom:1rem;

}

.completed{

    background:#dcfce7;

    color:#166534;

}

.progress{

    background:#fef3c7;

    color:#92400e;

}

.planning{

    background:#dbeafe;

    color:#1d4ed8;

}
/* ==========================================
   Projects CTA
========================================== */

.projects-cta{

    padding:6rem 0;

    text-align:center;

    background:var(--color-primary);

    color:#fff;

    margin-top:5rem;

}

.projects-cta h2{

    font-size:2.5rem;

    margin-bottom:1rem;

}

.projects-cta p{

    max-width:700px;

    margin:0 auto 2rem;

    opacity:.9;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}
.projects-cta .btn-primary{

    border:2px solid #fff;

    color:#fff;

    background:transparent;

}

.projects-cta .btn-primary:hover{

    background:#fff;

    color:var(--color-primary);

}
.projects-cta .btn-secondary{

    border:2px solid #fff;

    color:#fff;

    background:transparent;

}

.projects-cta .btn-secondary:hover{

    background:#fff;

    color:var(--color-primary);

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

.footer{

    background:#111827;

    color:#e5e7eb;

    padding:5rem 0 2rem;

}

.footer-grid{

    display:grid;

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

    gap:3rem;

}

.footer-logo{

    font-size:2rem;

    color:#fff;

    margin-bottom:1rem;

}

.footer-column h3{

    margin-bottom:1.2rem;

    color:#fff;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:.8rem;

}

.footer-column a{

    color:#d1d5db;

    transition:.3s;

}

.footer-column a:hover{

    color:#60a5fa;

}

.footer-column p{

    color:#9ca3af;

}

.footer-bottom{

    margin-top:4rem;

    padding-top:2rem;

    border-top:1px solid #374151;

    text-align:center;

    color:#9ca3af;

}
/* ==========================================
   Project Details Hero
========================================== */

.project-hero{

    padding:7rem 0 5rem;

    text-align:center;

}

.project-hero h1{

    font-size:clamp(2.5rem,5vw,4rem);

    margin:1rem 0;

}

.project-hero-description{

    max-width:750px;

    margin:0 auto 2rem;

    color:var(--color-text-light);

    font-size:1.1rem;

}
/* ==========================================
   Project Overview
========================================== */

.project-overview{

    padding:5rem 0;

}

.overview-content{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:3rem;

    align-items:start;

}

.overview-text{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.overview-text p{

    line-height:1.9;

    color:var(--color-text-light);

}

.overview-info{

    display:grid;

    gap:1rem;

}

.info-box{

    background:var(--color-surface);

    padding:1.5rem;

    border-radius:16px;

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

}

.info-box h4{

    margin-bottom:.5rem;

    color:var(--color-primary);

}
/* ==========================================
   Project Technologies
========================================== */

.project-technologies{

    padding:5rem 0;

}

.tech-grid{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;

}

.tech-card{

    background:var(--color-surface);

    padding:2rem;

    border-radius:20px;

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

    text-align:center;

    transition:.35s ease;

}

.tech-card:hover{

    transform:translateY(-8px);

}

.tech-icon{

    font-size:3rem;

    display:block;

    margin-bottom:1rem;

}

.tech-card h3{

    margin-bottom:1rem;

}

.tech-card p{

    color:var(--color-text-light);

}
/* ==========================================
   Project Features
========================================== */

.project-features{

    padding:5rem 0;

}

.features-grid{

    display:grid;

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

    gap:1.5rem;

    margin-top:3rem;

}

.feature-item{

    background:var(--color-surface);

    padding:1.4rem;

    border-radius:16px;

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

    font-weight:600;

    transition:.3s ease;

}

.feature-item:hover{

    transform:translateY(-6px);

}
/* ==========================================
   Project Gallery
========================================== */

.project-gallery{

    padding:5rem 0;

}

.gallery-grid{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;

}

.gallery-item{

    overflow:hidden;

    border-radius:20px;

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

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    display:block;

    transition:.4s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

}
/* ==========================================
   Project Video
========================================== */

.project-video{

    padding:5rem 0;

}

.video-wrapper{

    max-width:900px;

    margin:auto;

}

.video-wrapper video{

    width:100%;

    border-radius:20px;

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

}
/* ==========================================
   Project Challenges
========================================== */

.project-challenges{

    padding:5rem 0;

}

.challenge-list{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;

}

.challenge-card{

    background:var(--color-surface);

    padding:2rem;

    border-radius:20px;

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

    transition:.35s ease;

}

.challenge-card:hover{

    transform:translateY(-8px);

}

.challenge-card h3{

    margin-bottom:1rem;

}

.challenge-card p{

    color:var(--color-text-light);

    line-height:1.8;

}
/* ==========================================
   Project Learning
========================================== */

.project-learning{

    padding:5rem 0;

}

.learning-grid{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;

}

.learning-card{

    background:var(--color-surface);

    padding:2rem;

    border-radius:20px;

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

    transition:.35s ease;

}

.learning-card:hover{

    transform:translateY(-8px);

}

.learning-card h3{

    margin-bottom:1rem;
}

.learning-card p{

    color:var(--color-text-light);
    line-height:1.8;

}
/* ==========================================
   Future Improvements
========================================== */

.project-future{

    padding:5rem 0;

}

.future-grid{

    display:grid;

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

    gap:2rem;

    margin-top:3rem;

}

.future-card{

    background:var(--color-surface);

    padding:1.5rem;

    border-radius:20px;

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

    font-weight:600;

    transition:.35s ease;

}

.future-card:hover{

    transform:translateY(-8px);

}
/* ==========================================
   Project Resources
========================================== */

.project-resources{

    padding:5rem 0 7rem;

    text-align:center;

}

.resource-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

    margin-top:3rem;
}

.navbar{

    display:flex;

    align-items:center;

}
.menu-toggle{
    display:none;
    background:none;
    border:none;
    font-size:1.8rem;
    color:var(--color-text);
    cursor:pointer;
}

.nav-list{

    display:flex;

    align-items:center;

    gap:2rem;

}

.nav-list a{

    position:relative;

    font-weight:500;

    transition:.3s ease;

}

.nav-list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:.3s;

}

.nav-list a:hover::after{

    width:100%;

}

.nav-list a:hover{

    color:var(--color-primary);

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

.footer{

    background:var(--color-surface);

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

    padding:5rem 0 2rem;

    margin-top:5rem;

}

.footer-grid{

    display:grid;

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

    gap:3rem;

}

.footer-column h3{

    margin-bottom:1rem;

    color:var(--color-primary);

}

.footer-column p{

    color:var(--color-text-light);

    margin-bottom:.8rem;

    line-height:1.8;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:.8rem;

}

.footer-column a{

    color:var(--color-text-light);

    transition:.3s;

}

.footer-column a:hover{

    color:var(--color-primary);

    padding-left:6px;

}

.footer-bottom{

    margin-top:4rem;

    padding-top:2rem;

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

    text-align:center;

}

.footer-bottom p{

    color:var(--color-text-light);

    margin:.4rem 0;

}
/* ==========================================
   Social Links
========================================== */

.social-links{

    display:flex;

    gap:1rem;

    margin-top:2rem;

}

.social-links a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--color-surface);

    color:var(--color-primary);

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

    transition:.3s ease;

    font-size:1.2rem;

}

.social-links a:hover{

    background:var(--color-primary);

    color:#fff;

    transform:translateY(-5px);

}
.quick-facts-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
}
.quick-facts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    
}
.quick-facts{
    margin-top:3rem;
}
.journey{
    margin-top:5rem;
}
.language-grid{

    display:grid;

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

    gap:1.5rem;

    margin-top:2rem;

}

.language-card{

    background:var(--color-surface);

    padding:2rem;

    border-radius:20px;

    text-align:center;

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

    transition:.3s ease;

}

.language-card:hover{

    transform:translateY(-8px);

}
.books-hero{

    padding:6rem 0;

    text-align:center;

}

.books-hero-text{

    max-width:700px;

    margin:1rem auto;

}

.featured-book{

    padding:5rem 0;

}

.featured-book-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:4rem;

    align-items:center;

}

.book-image img{

    width:100%;

    border-radius:20px;

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

}

.book-status{

    display:inline-block;

    background:#2563eb;

    color:#fff;

    padding:.4rem 1rem;

    border-radius:50px;

    margin-bottom:1rem;

}

.book-buttons{

    display:flex;

    gap:1rem;

    margin-top:2rem;

}
.resume-books{
    padding:80px 0;
}

.books-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:40px;
}

.book-card{
    background:#fff;
    padding:24px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.book-card:hover{
    transform:translateY(-8px);
}

.book-card h3{
    margin-bottom:10px;
}

.book-card p{
    color:#666;
    margin-bottom:20px;
}

.book-status{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
}

.completed{
    background:#dcfce7;
    color:#15803d;
}

.learning{
    background:#fef3c7;
    color:#b45309;
}

.planned{
    background:#dbeafe;
    color:#1d4ed8;
}
.resume-certificates{
    padding:80px 0;
}

.certificate-grid{

    display:grid;

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

    gap:24px;

    margin-top:40px;

}

.certificate-card{

    background:#fff;

    border-radius:16px;

    padding:28px;

    text-align:center;

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

    transition:.3s;

}

.certificate-card:hover{

    transform:translateY(-8px);

}

.certificate-icon{

    font-size:40px;

    margin-bottom:20px;

}

.certificate-card h3{

    margin-bottom:10px;

}

.certificate-card p{

    color:#666;

    margin-bottom:15px;

}

.certificate-card span{

    display:inline-block;

    background:#2563eb;

    color:#fff;

    padding:6px 14px;

    border-radius:999px;

    font-size:14px;

}
.resume-achievements{
    padding:80px 0;
}

.achievement-grid{

    display:grid;

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

    gap:24px;

    margin-top:40px;

}

.achievement-card{

    background:#fff;
    color: #666;

    padding:30px;

    border-radius:16px;

    text-align:center;

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

    transition:.3s;

}

.achievement-card:hover{

    transform:translateY(-8px);

}

.achievement-icon{

    font-size:42px;

    margin-bottom:20px;

}

.achievement-card h3{

    margin-bottom:15px;

}

/* ===========================
   BOOKS PAGE
=========================== */

/* Hero */
.books-hero {
    padding:100px 0 70px;
    text-align:center;
 }

.books-hero h1 {
    font-size:3rem;
    margin-bottom:20px;
 }

.books-hero p { 
     max-width:700px;
    margin:0 auto;
    color:var(--text-light);
    line-height:1.8;
}

/* Featured Books */
.books-grid { 
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:60px;
}
.book-card { 
    background:var(--card-bg);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
}
.book-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.book-cover { 
    margin:0  0 0 auto;
    height:550px;
    overflow:hidden;
}
.book-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.book-content { 
    padding:25px;
}
.book-content h3{
    margin-bottom:12px;
}
.book-content p{
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:20px;
}
.book-type{
    display:inline-block;
    padding:6px 14px;
    border-radius:40px;
    background:var(--primary-color);
    color:#fff;
    font-size:.8rem;
    margin-bottom:15px;
}
.book-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
}
.reading-status{
    margin-top:20px;
}
.progress span{
    display:block;
    height:100%;
    background:var(--primary-color);
}

/* Favorite Books */

.favorite-books{
    padding:90px 0;
}

/* Reading List */

.reading-list{
    padding:90px 0;
}
/*==================================
          ARTICLES PAGE
===================================*/

/* Hero */

.articles-hero{
    padding:100px 0 70px;
    text-align:center;
}

.articles-hero h1{
    font-size:3rem;
    margin-bottom:20px;
}

.articles-hero-text{
    max-width:720px;
    margin:0 auto;
    line-height:1.8;
    color:var(--text-light);
}

/* Featured Articles */

.featured-articles{
    padding:90px 0;
}

.articles-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-top:50px;
}

/* Card */

.article-card{
    background:var(--card-bg);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.article-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* Image */

.article-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

/* Content */

.article-content{
    padding:25px;
}

.article-category{
    display:inline-block;
    padding:6px 14px;
    border-radius:40px;
    background:var(--primary-color);
    color:#fff;
    font-size:.8rem;
    margin-bottom:15px;
}

.article-content h3{
    margin-bottom:12px;
}

.article-content p{
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:20px;
}

.article-meta{
    display:flex;
    justify-content:space-between;
    font-size:.9rem;
    color:gray;
    margin-bottom:20px;
}

/* Categories */

.article-categories{
    padding:80px 0;
}

.categories-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
    margin-top:35px;
}

.categories-grid span{
    padding:10px 22px;
    border-radius:40px;
    background:#eef3ff;
    transition:.3s;
    cursor:pointer;
}

.categories-grid span:hover{
    background:var(--primary-color);
    color:#fff;
}

/* Popular Topics */

.popular-topics{
    padding:80px 0;
}

.topics{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
    margin-top:35px;
}

.topics span{
    background:#f5f5f5;
    padding:10px 18px;
    border-radius:40px;
    transition:.3s;
}

.topics span:hover{
    background:var(--primary-color);
    color:#fff;
}

/* Newsletter */

.newsletter{
    padding:90px 0;
    text-align:center;
}

.newsletter form{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:35px;
    flex-wrap:wrap;
}

.newsletter input{
    width:320px;
    padding:15px;
    border-radius:12px;
    border:1px solid #ddd;
}
/* ==================================
          GALLERY PAGE
=================================== */

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

.gallery-hero {
    padding: 100px 0 70px;
    text-align: center;
}

.gallery-hero h1 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-md);
}
.gallery-hero-text{
    max-width:720px;
    margin:auto;
    line-height:1.8;
    color:var(--color-text-light);
}


/* ================= FILTER ================= */

.gallery-filter {
    padding: 30px 0 10px;
}

.gallery-filter .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.gallery-btn {
    padding: 11px 22px;

    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-full);

    background: var(--color-surface);
    color: var(--color-text);

    cursor: pointer;

    transition: var(--transition);
}

.gallery-btn:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.gallery-btn:hover,
.gallery-btn.active{
    background:var(--color-primary);
    color:#fff;
}


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

.gallery-grid-section {
    padding: 80px 0;
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(280px, 1fr));

    gap: 25px;
}


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

.gallery-card {
    position: relative;

    overflow: hidden;

    height: 380px;

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

    background: var(--color-surface);

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

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

    cursor: pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.gallery-card:hover {
    transform: translateY(-7px);

    box-shadow: var(--shadow-md);
}


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

.gallery-card .gallery-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 18px;
}

.gallery-card img {
    display: block;

    width: 100% !important;
    height: 289px !important;

    object-fit: cover !important;

    transition:
        transform .5s ease,
        filter .4s ease;
}

.gallery-card:hover img {
    transform: scale(1.08);
    filter: brightness(.65);
}


/* ================= OVERLAY ================= */

.gallery-overlay {
    position: absolute;

    inset: 0;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: flex-start;

    color: var(--color-white);

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .85),
            rgba(0, 0, 0, .40),
            rgba(0, 0, 0, 0)
        );

    opacity: 0;

    transition: opacity .35s ease;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}


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

.gallery-overlay h3 {
    margin: 0 0 8px;

    font-size: var(--fs-lg);

    font-weight: 700;

    color: var(--color-white);
}


/* ================= DESCRIPTION ================= */

.gallery-overlay p {
    margin: 8px 0 0;

    color: rgba(255, 255, 255, .9);

    font-size: var(--fs-sm);

    line-height: 1.6;
}


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

.gallery-category {
    display: inline-block;

    padding: 5px 12px;

    margin-bottom: 8px;

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

    background: var(--color-primary);

    color: var(--color-white);

    font-size: var(--fs-xs);

    font-weight: 600;
}


/* ================= EMPTY ================= */

.empty-gallery {
    width: 100%;

    padding: 50px 20px;

    text-align: center;

    color: var(--color-text-light);
}


/* ================= VIDEOS ================= */
/* ==========================================
   VIDEO GALLERY
========================================== */

.video-gallery {
    padding: 80px 0;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(320px, 1fr)
    );
    gap: 30px;
    align-items: start;
}

.video-card {
    overflow: hidden;
    border-radius: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.video-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.video-card video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
}

.video-content {
    padding: 20px;
}

.video-content h3 {
    margin: 0 0 8px;
    color: var(--color-text);
    font-size: var(--fs-lg);
}

.video-content p {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.7;
}
/* ================= CERTIFICATES ================= */

.gallery-certificates {
    padding: 80px 0;
}


/* ================= BEHIND THE SCENES ================= */

.behind-scenes {
    padding: 80px 0;

    text-align: center;
}


/* ================= FUTURE ================= */

.future-gallery {
    padding: 80px 0;
}

.future-grid {
    display: grid;

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

    gap: 25px;
}
.future-card{
    padding:35px;
    border-radius:18px;
    background:var(--color-surface);
    text-align:center;
    transition:.3s;
}
.future-card:hover {
    transform: translateY(-8px);

    box-shadow: var(--shadow-md);
}


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

@media (max-width: 768px) {

    .gallery-hero {
        padding: 70px 0 50px;
    }

    .gallery-hero h1 {
        font-size: var(--fs-2xl);
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-card {
        height: 250px;
    }

    /*
       On touch screens hover is unreliable.
       Show overlay information directly.
    */
    .gallery-overlay {
        opacity: 1;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .gallery-filter .container {
        gap: 8px;
    }

    .gallery-btn {
        padding: 9px 16px;
        font-size: var(--fs-sm);
    }
}
/*==================================
            CONTACT PAGE
===================================*/

/* Hero */

.contact-hero{
    padding:100px 0 70px;
    text-align:center;
}

.contact-hero h1{
    font-size:3rem;
    margin-bottom:20px;
}

.contact-hero-text{
    max-width:720px;
    margin:auto;
    color:var(--text-light);
    line-height:1.8;
}

/* Contact Info */

.contact-info{
    padding:80px 0;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.contact-card{
    background:var(--card-bg);
    border-radius:18px;
    padding:35px;
    text-align:center;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.contact-card:hover{
    transform:translateY(-8px);
}

.contact-card i{
    font-size:2rem;
    color:var(--primary-color);
    margin-bottom:20px;
}

.contact-card a{
    text-decoration:none;
    color:inherit;
}

/* Form */

.contact-form-section{
    padding:90px 0;
}

.contact-form{
    max-width:700px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-form input,
.contact-form textarea{

    padding:16px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:1rem;

    font-family:inherit;

}

.contact-form textarea{

    resize:vertical;

}

/* Availability */

.availability{

    padding:80px 0;

    text-align:center;

}

.availability p{

    margin-top:12px;

}

/* FAQ */

.faq{

    padding:80px 0;

}

.faq-item{

    background:var(--card-bg);

    padding:25px;

    border-radius:16px;

    margin-top:20px;

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

}

.faq-item h3{

    margin-bottom:10px;

}
.nav-list a.active{

    color:var(--primary-color);

    font-weight:700;

}
.nav-list a.active{

    color:var(--primary-color);

    font-weight:700;

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

    padding-bottom:4px;

}
/*===============================
        Back To Top
================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    font-size:1.2rem;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

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

    z-index:999;

}

.back-to-top:hover{

    transform:translateY(-5px);

    background:var(--color-secondary);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}
/*====================================
        Scroll Animation
====================================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}
/*==================================
    PROFESSIONAL CERTIFICATIONS
===================================*/

.resume-certifications{

    padding:80px 0;

}

.certifications-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.certificate-card{

    background:var(--color-surface);

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

    border-radius:20px;

    padding:35px;

    transition:.35s ease;

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

    display:flex;

    flex-direction:column;

    height:100%;

}

.certificate-card:hover{

    transform:translateY(-8px);

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

}

.certificate-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    background:rgba(37,99,235,.08);

    border-radius:50%;

    margin-bottom:20px;

}

.certificate-card h3{

    font-size:1.35rem;

    margin-bottom:20px;

    color:var(--color-text);

    line-height:1.4;

}

.certificate-meta{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:20px;

}

.certificate-meta span{

    color:var(--color-text-light);

    font-size:.95rem;

}

.certificate-meta strong{

    color:var(--color-text);

}

.certificate-card p{

    color:var(--color-text-light);

    line-height:1.8;

    margin-bottom:25px;

    flex:1;

}

.certificate-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.certificate-buttons .btn{

    flex:1;

    text-align:center;

}
/*==================================
        PROJECT LABELS
===================================*/


.project-labels{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:15px;

}


.project-category,
.project-level{

    padding:6px 14px;

    border-radius:20px;

    font-size:.85rem;

    font-weight:600;

}


.project-category{

    background:rgba(37,99,235,.1);

    color:var(--color-primary);

}


.project-level{

    background:rgba(34,197,94,.1);

    color:#16a34a;

}
.nav-list a{

    transition:.3s;

}

.nav-list a:hover{

    color:var(--color-primary);

}
/* ==========================
      Active Navigation
========================== */

.nav-list a.active{

    color:var(--color-primary);

    font-weight:700;

}


.nav-list a{

    position:relative;

}


.nav-list a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    background:var(--color-primary);

    border-radius:10px;

}
/*====================================
            LIGHTBOX
====================================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.lightbox.show{

    opacity:1;

    visibility:visible;

}

.lightbox-image{

    max-width:90%;

    max-height:85%;

    border-radius:15px;

}

.close-lightbox{

    position:absolute;

    top:25px;

    right:40px;

    font-size:45px;

    color:#fff;

    cursor:pointer;

}

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:white;

    font-size:45px;

    cursor:pointer;

}

.lightbox-prev{

    left:40px;

}

.lightbox-next{

    right:40px;

}
/*====================================
            LOADER
====================================*/
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--bg-color, #ffffff);

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

#loader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-spinner {
    width: 50px;
    height: 50px;

    border: 4px solid #ddd;
    border-top-color: #333;

    border-radius: 50%;

    animation: spin 0.8s linear infinite;
}

@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


#scroll-progress{

    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 4px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    z-index: 999999;

    transition: width .15s linear;

}





.error-page{

    min-height:70vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.error-number{

    font-size:9rem;

    font-weight:bold;

    color:var(--color-primary);

    line-height:1;

    animation:float 4s ease-in-out infinite;

}

.error-icon{

    font-size:3rem;

    margin:20px 0;

}

.error-content h1{

    margin-bottom:15px;

}

.error-content p{

    max-width:600px;

    margin:auto;

    color:var(--color-text-light);

}

.error-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.quick-links{

    padding:60px 0;

}

.quick-links-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:40px;

}

.quick-links-grid a{

    background:var(--color-surface);

    padding:20px;

    border-radius:12px;

    text-align:center;

    transition:.3s;

}

.quick-links-grid a:hover{

    transform:translateY(-6px);

    color:var(--color-primary);

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}





/* =========================================================
   BOOKS PAGE
========================================================= */

.books-hero {
    padding: 100px 0 70px;
    text-align: center;
}

.books-hero .section-tag {
    margin-bottom: 12px;
}

.books-hero h1 {
    margin-bottom: 18px;
}

.books-hero-text {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.9;
}


/* =========================================================
   BOOK SECTIONS
========================================================= */

.published-books,
.reading-list,
.planned-books,
.coming-soon-books,
.favorite-books {
    padding: 80px 0;
}

.reading-list,
.favorite-books {
    background: var(--bg-secondary);
}


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

.books-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}


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

.book-card {
    position: relative;
    display: flex;
    flex-direction: column;

    padding: 24px;

    border-radius: 20px;

    background: var(--bg-primary);

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

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.book-card:hover {
    transform: translateY(-8px);

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

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


/* =========================================================
   BOOK COVER
========================================================= */

.book-cover {
    width: 100%;
    height: 360px;

    margin-bottom: 22px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--bg-secondary);
}

.book-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;
}

.book-card:hover .book-cover img {
    transform: scale(1.04);
}


/* =========================================================
   BOOK TEXT
========================================================= */

.book-card h3 {
    margin: 0 0 8px;

    font-size: 1.25rem;

    line-height: 1.4;
}

.book-author {
    margin-bottom: 12px;

    font-weight: 600;

    opacity: 0.75;
}

.book-card > p {
    line-height: 1.75;
}


/* =========================================================
   BOOK STATUS
========================================================= */

.book-status,
.book-access {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;

    padding: 6px 12px;

    margin-top: 12px;

    border-radius: 999px;

    font-size: 0.82rem;

    font-weight: 700;
}

.book-status.published {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.book-status.reading {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.book-status.planned {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.book-status.coming_soon {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
}


/* =========================================================
   ACCESS
========================================================= */

.book-access.free {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.book-access.paid {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}


/* =========================================================
   BOOK ACTIONS
========================================================= */

.book-actions {
    display: flex;

    gap: 10px;

    margin-top: auto;
    padding-top: 22px;
}

.book-action {
    flex: 1;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 10px 14px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 0.88rem;

    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease;
}

.book-action:hover {
    transform: translateY(-2px);
}

.read-online {
    background: var(--primary-color);
    color: #fff;
}

.read-online:hover {
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.download-pdf {
    background: var(--bg-secondary);
    color: var(--text-primary);

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

.download-pdf:hover {
    border-color: var(--primary-color);
}


/* =========================================================
   FAVORITE
========================================================= */

.favorite-books .book-card {
    position: relative;
}

.favorite-books .book-card::before {
    content: "★";

    position: absolute;

    top: 16px;
    right: 16px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(245, 158, 11, 0.95);

    color: #fff;

    font-size: 15px;

    z-index: 2;
}


/* =========================================================
   BOOK STATS
========================================================= */

.books-stats {
    padding: 80px 0;
}

.stats-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 22px;
}

.stat-box {
    padding: 30px 20px;

    text-align: center;

    border-radius: 18px;

    background: var(--bg-primary);

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

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-md);
}

.stat-box h3 {
    margin-bottom: 8px;

    font-size: 2.2rem;

    color: var(--primary-color);
}

.stat-box p {
    margin: 0;

    opacity: 0.75;
}


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

@media (max-width: 1000px) {

    .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .books-hero {
        padding: 70px 0 50px;
    }

    .published-books,
    .reading-list,
    .planned-books,
    .coming-soon-books,
    .favorite-books,
    .books-stats {
        padding: 60px 0;
    }

    .books-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .book-cover {
        height: 400px;
    }

    .book-actions {
        flex-direction: column;
    }

    .book-action {
        width: 100%;
    }

}



/* =========================================================
   BOOK READER
========================================================= */

.book-reader-page {
    min-height: 100vh;
}


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

.reader-header {
    padding: 45px 0 55px;

    background: var(--bg-secondary);

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


.reader-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 45px;
}


.reader-back {
    display: inline-flex;

    align-items: center;

    text-decoration: none;

    color: var(--text-primary);

    font-weight: 700;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.reader-back:hover {
    color: var(--primary-color);

    transform: translateX(-3px);
}


.reader-download {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 10px 18px;

    border-radius: 10px;

    background: var(--primary-color);

    color: #fff;

    text-decoration: none;

    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.reader-download:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.25);
}


/* =========================================================
   READER INFORMATION
========================================================= */

.reader-info {
    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 35px;

    align-items: center;
}


.reader-cover {
    width: 220px;

    height: 300px;

    overflow: hidden;

    border-radius: 16px;

    background: var(--bg-primary);

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

    box-shadow: var(--shadow-lg);
}


.reader-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.reader-cover-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 4rem;
}


.reader-details h1 {
    margin: 10px 0 10px;

    font-size: clamp(2rem, 5vw, 3.5rem);

    line-height: 1.15;
}


.reader-author {
    margin-bottom: 18px;

    font-size: 1.05rem;

    font-weight: 600;

    opacity: 0.7;
}


.reader-description {
    max-width: 800px;

    line-height: 1.9;

    opacity: 0.82;
}


.reader-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
}


/* =========================================================
   PDF READER SECTION
========================================================= */

.reader-content {
    padding: 55px 0 90px;
}


.pdf-reader-wrapper {
    overflow: hidden;

    border-radius: 18px;

    background: var(--bg-primary);

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

    box-shadow: var(--shadow-lg);
}


/* =========================================================
   PDF TOOLBAR
========================================================= */

.pdf-reader-toolbar {
    min-height: 64px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 12px 18px;

    background: var(--bg-secondary);

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


.pdf-toolbar-actions {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


.pdf-toolbar-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 13px;

    border-radius: 8px;

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

    color: var(--text-primary);

    text-decoration: none;

    font-size: 0.82rem;

    font-weight: 700;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.pdf-toolbar-button:hover {
    border-color: var(--primary-color);

    background: var(--bg-primary);
}


/* =========================================================
   PDF FRAME
========================================================= */

.book-pdf-frame {
    display: block;

    width: 100%;

    height: 850px;

    border: none;

    background: #fff;
}


/* =========================================================
   PDF UNAVAILABLE
========================================================= */

.pdf-unavailable {
    max-width: 650px;

    margin: 40px auto;

    padding: 70px 30px;

    text-align: center;

    border-radius: 20px;

    background: var(--bg-secondary);

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


.pdf-unavailable-icon {
    margin-bottom: 20px;

    font-size: 4rem;
}


.pdf-unavailable h2 {
    margin-bottom: 12px;
}


.pdf-unavailable p {
    margin-bottom: 25px;

    opacity: 0.75;
}


/* =========================================================
   READER RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .reader-header {
        padding: 35px 0 45px;
    }


    .reader-top {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 35px;
    }


    .reader-info {
        grid-template-columns: 150px 1fr;

        gap: 22px;
    }


    .reader-cover {
        width: 150px;

        height: 215px;
    }


    .reader-details h1 {
        font-size: 1.8rem;
    }


    .book-pdf-frame {
        height: 700px;
    }

}


@media (max-width: 550px) {

    .reader-info {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .reader-cover {
        width: 180px;

        height: 250px;

        margin: 0 auto;
    }


    .reader-meta {
        justify-content: center;
    }


    .reader-top {
        align-items: stretch;
    }


    .reader-download {
        width: 100%;
    }


    .pdf-reader-toolbar {
        align-items: stretch;

        flex-direction: column;
    }


    .pdf-toolbar-actions {
        width: 100%;
    }


    .pdf-toolbar-button {
        flex: 1;
    }


    .book-pdf-frame {
        height: 600px;
    }

}


/* =========================================================
   BOOKS — PREMIUM CARD POLISH
========================================================= */

.book-card {
    overflow: hidden;
    isolation: isolate;
}

.book-cover {
    position: relative;
}

.book-cover::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.18),
        transparent 45%
    );

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.35s ease;
}

.book-card:hover .book-cover::after {
    opacity: 1;
}


/* Book title */

.book-card h3 {
    transition: color 0.25s ease;
}

.book-card:hover h3 {
    color: var(--primary-color);
}


/* Description */

.book-card > p:not(.book-author) {
    opacity: 0.75;
    margin-bottom: 4px;
}


/* Badges */

.book-status,
.book-access {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.book-card:hover .book-status,
.book-card:hover .book-access {
    transform: translateY(-1px);
}


/* Actions */

.book-actions {
    position: relative;
    z-index: 2;
}

.book-action {
    cursor: pointer;
}


/* Favorite indicator */

.favorite-books .book-card::before {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.favorite-books .book-card:hover::before {
    transform: scale(1.12) rotate(8deg);

    box-shadow:
        0 6px 15px rgba(245, 158, 11, 0.3);
}


/* Empty state */

.books-grid > p {
    grid-column: 1 / -1;

    padding: 45px 20px;

    text-align: center;

    border-radius: 16px;

    background: var(--bg-secondary);

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

    opacity: 0.7;
}


/* =========================================================
   BOOK SECTION SEPARATION
========================================================= */

.published-books {
    position: relative;
}

.published-books::after {
    content: "";

    display: block;

    width: 70px;
    height: 4px;

    margin: 65px auto 0;

    border-radius: 999px;

    background: var(--primary-color);

    opacity: 0.8;
}


/* =========================================================
   READING / FAVORITE VISUAL DIFFERENCE
========================================================= */

.reading-list .book-card {
    border-top: 3px solid rgba(37, 99, 235, 0.45);
}

.favorite-books .book-card {
    border-top: 3px solid rgba(245, 158, 11, 0.55);
}


/* =========================================================
   PREMIUM COVER HOVER
========================================================= */

.book-cover img {
    will-change: transform;
}


/* =========================================================
   MOBILE POLISH
========================================================= */

@media (max-width: 650px) {

    .book-card {
        padding: 18px;
    }

    .book-cover {
        border-radius: 13px;
    }

    .book-card h3 {
        font-size: 1.15rem;
    }

}
/* =========================================================
   BOOKS — CARD ENTRANCE ANIMATION
========================================================= */

.books-grid .book-card {
    opacity: 0;
    transform: translateY(30px);

    animation: bookCardReveal 0.65s ease forwards;
}

.books-grid .book-card:nth-child(1) {
    animation-delay: 0.08s;
}

.books-grid .book-card:nth-child(2) {
    animation-delay: 0.16s;
}

.books-grid .book-card:nth-child(3) {
    animation-delay: 0.24s;
}

.books-grid .book-card:nth-child(4) {
    animation-delay: 0.32s;
}

.books-grid .book-card:nth-child(5) {
    animation-delay: 0.40s;
}

.books-grid .book-card:nth-child(6) {
    animation-delay: 0.48s;
}

@keyframes bookCardReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.books-hero {
    position: relative;
    overflow: hidden;

    padding: 100px 0 90px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37, 99, 235, 0.12),
            transparent 35%
        ),
        var(--bg-primary);
}


.books-hero::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    top: -100px;

    border-radius: 50%;

    border: 1px solid rgba(37, 99, 235, 0.15);
}


.books-hero .container {
    position: relative;
    z-index: 1;
}


.books-hero h1 {
    max-width: 850px;

    margin: 12px 0 20px;

    font-size: clamp(2.5rem, 6vw, 4.5rem);

    line-height: 1.05;

    letter-spacing: -0.04em;
}


.books-hero-text {
    max-width: 760px;

    font-size: 1.08rem;

    line-height: 1.9;

    opacity: 0.75;
}


/* =========================================================
   SECTION HEADERS
========================================================= */

.books-hero + .published-books,
.reading-list,
.favorite-books {
    scroll-margin-top: 80px;
}


.section-header {
    margin-bottom: 40px;
}


.section-header h2 {
    position: relative;

    display: inline-block;
}


.section-header h2::after {
    content: "";

    display: block;

    width: 42px;
    height: 3px;

    margin-top: 10px;

    border-radius: 999px;

    background: var(--primary-color);
}




/* ==========================================
   PORTRAIT GALLERY CARD
=============================================================================================== */

.gallery-card {
    width: 280px !important;
    height: 360px !important;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 18px;
}

.gallery-card .gallery-image {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

.gallery-card .gallery-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

/* ==========================================
   ARTICLE PORTRAIT COVER
========================================== */
.article-card .article-cover {
    width: 380px;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--color-background);
}

.article-card .article-cover img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: contain;
    object-position: center center;
}


/* ===============================================================================
   CONTACT — FINAL POLISH
========================================================= */

.contact-form-section {
    padding: 90px 0;
}

.contact-form {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);

    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    color: var(--color-text);
}

.form-group label span {
    color: var(--color-text-light);
    font-size: .85rem;
    font-weight: 400;
}

.contact-form input,
.contact-form textarea,
.contact-form input[type="file"] {
    width: 100%;
    box-sizing: border-box;

    padding: 15px 17px;

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

    background: var(--color-background);
    color: var(--color-text);

    font-family: inherit;
    font-size: 1rem;

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.contact-form textarea {
    min-height: 180px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, .10);
}

.contact-form input[type="file"] {
    padding: 12px;
    cursor: pointer;
}

.file-help {
    color: var(--color-text-light);
    font-size: .85rem;
}

.form-error {
    color: #dc2626;
    font-size: .85rem;
    line-height: 1.5;
}

.contact-submit {
    min-height: 52px;
    margin-top: 8px;
    cursor: pointer;
}

.contact-submit:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.submit-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* =========================================================
   SUCCESS / ERROR MESSAGES
========================================================= */

.contact-messages {
    max-width: 760px;
    margin: 0 auto 25px;
}

.contact-alert {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px 20px;

    border-radius: 14px;

    font-weight: 600;

    animation:
        contactAlertIn .4s ease;
}

.contact-alert i {
    font-size: 1.25rem;
}

.contact-alert-success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.contact-alert-error {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

@keyframes contactAlertIn {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

body.dark-mode .contact-form {
    background: var(--color-surface);
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .contact-form input[type="file"] {
    background: var(--color-background);
    color: var(--color-text);
}


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

@media (max-width: 768px) {

    .contact-form {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .contact-hero {
        padding: 75px 0 50px;
    }

    .contact-hero h1 {
        font-size: 2.3rem;
    }

    .contact-form-section {
        padding: 60px 0;
    }

}


/* =========================
   Language Switcher
========================= */

.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.language-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.language-link:hover {
    background: var(--primary-color);
    color: #fff;
}


/* ==========================================
   RTL / LTR SUPPORT
========================================== */

/* RTL */
html[dir="rtl"] .header .container {
    direction: rtl;
}

html[dir="rtl"] .nav-list {
    direction: rtl;
}

html[dir="rtl"] .nav-list a::after {
    left: auto;
    right: 0;
}

/* LTR */
html[dir="ltr"] .header .container {
    direction: ltr;
}

html[dir="ltr"] .nav-list {
    direction: ltr;
}

html[dir="ltr"] .nav-list a::after {
    left: 0;
    right: auto;
}
/* ==========================================
   RTL HEADER & NAVBAR
========================================== */

html[dir="rtl"] .header .container {
    direction: rtl;
}

html[dir="rtl"] .navbar {
    direction: rtl;
}

html[dir="rtl"] .nav-list {
    direction: rtl;
}

html[dir="rtl"] .nav-list a::after {
    left: auto;
    right: 0;
}


/* ==========================================
   LTR HEADER & NAVBAR
========================================== */

html[dir="ltr"] .header .container {
    direction: ltr;
}

html[dir="ltr"] .navbar {
    direction: ltr;
}

html[dir="ltr"] .nav-list {
    direction: ltr;
}

html[dir="ltr"] .nav-list a::after {
    left: 0;
    right: auto;
}

/* //////////////////////////////
/* ==========================================
   ABOUT — RTL SUPPORT
========================================== */

html[dir="rtl"] .about {
    direction: rtl;
}

html[dir="rtl"] .about-wrapper {
    direction: rtl;
}

html[dir="rtl"] .about-content {
    text-align: right;
}

html[dir="rtl"] .about-cards {
    direction: rtl;
}

html[dir="rtl"] .quick-facts {
    direction: rtl;
}

html[dir="rtl"] .journey {
    direction: rtl;
}


/* ==========================================
   ABOUT TIMELINE — RTL
========================================== */

html[dir="rtl"] .timeline {
    border-left: none;
    border-right: 3px solid var(--color-primary);
    padding-left: 0;
    padding-right: 2rem;
}

html[dir="rtl"] .timeline-item::before {
    left: auto;
    right: -2.6rem;
}


/* ==========================================
   ABOUT TIMELINE — LTR
========================================== */

html[dir="ltr"] .timeline {
    border-left: 3px solid var(--color-primary);
    border-right: none;
    padding-left: 2rem;
    padding-right: 0;
}

html[dir="ltr"] .timeline-item::before {
    left: -2.6rem;
    right: auto;
}