/* ==========================================
   LEARNVAULT HERO SECTION
========================================== */

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

body{
    font-family:'Poppins',sans-serif;
    background:#f8fafc;
    color:#111827;
}

.lv-container{
    width:100%;
    max-width:1280px;
    margin:auto;
    padding:0 20px;
}

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

.lv-hero{
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg,#f8fbff 0%,#eef2ff 100%);
    padding: 40px 0 60px;
}

.lv-hero::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    background:#7c3aed;
    opacity:.08;
    border-radius:50%;
    top:-220px;
    right:-150px;
}

.lv-hero::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#2563eb;
    opacity:.08;
    border-radius:50%;
    bottom:-180px;
    left:-120px;
}

.lv-hero .lv-container{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
    position:relative;
    z-index:2;
}

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

.lv-badge{

display:inline-flex;

align-items:center;

padding:10px 22px;

background:#ede9fe;

color:#6d28d9;

font-weight:700;

border-radius:50px;

margin-bottom:25px;

font-size:14px;

}

.lv-hero-content h1{

font-size:64px;

font-weight:800;

line-height:1.08;

color:#0f172a;

margin-bottom:25px;

}

.lv-hero-content p{

font-size:18px;

line-height:1.9;

color:#64748b;

max-width:600px;

margin-bottom:40px;

}

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

.lv-search-box{

display:flex;

background:white;

border-radius:18px;

overflow:hidden;

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

margin-bottom:35px;

}

.lv-search-box input{

flex:1;

border:none;

outline:none;

padding:22px 25px;

font-size:16px;

background:transparent;

}

.lv-search-box button{

border:none;

cursor:pointer;

padding:22px 32px;

background:linear-gradient(135deg,#7c3aed,#2563eb);

color:white;

font-weight:700;

font-size:16px;

transition:.35s;

}

.lv-search-box button:hover{

transform:scale(1.05);

}

/* ==========================================
BUTTONS
========================================== */

.lv-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}

.btn-primary{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 34px;

background:linear-gradient(135deg,#7c3aed,#2563eb);

border-radius:15px;

color:white;

text-decoration:none;

font-weight:700;

transition:.35s;

box-shadow:0 18px 35px rgba(124,58,237,.30);

}

.btn-primary:hover{

transform:translateY(-5px);

}

.btn-outline{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 34px;

border-radius:15px;

text-decoration:none;

font-weight:700;

border:2px solid #7c3aed;

color:#7c3aed;

background:white;

transition:.35s;

}

.btn-outline:hover{

background:#7c3aed;

color:white;

}

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

.lv-stats{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.stat-box{

background:white;

padding:22px;

border-radius:18px;

min-width:150px;

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

}

.stat-box h3{

font-size:28px;

color:#111827;

margin-bottom:6px;

}

.stat-box span{

color:#64748b;

font-size:15px;

}

/* ==========================================
RIGHT
========================================== */

.lv-hero-image{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.dashboard-card{

width:440px;

background:white;

border-radius:28px;

padding:30px;

box-shadow:0 30px 60px rgba(0,0,0,.10);

animation:floatCard 5s ease-in-out infinite;

}

.card-header{

display:flex;

gap:8px;

margin-bottom:25px;

}

.dot{

width:12px;

height:12px;

border-radius:50%;

display:block;

}

.red{

background:#ff5f57;

}

.yellow{

background:#ffbd2f;

}

.green{

background:#28c840;

}

.dashboard-card h2{

font-size:30px;

margin-bottom:8px;

color:#111827;

}

.dashboard-subtitle{

color:#64748b;

margin-bottom:25px;

}

.pdf-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px;

background:#f8fafc;

border-radius:15px;

margin-bottom:14px;

transition:.35s;

}

.pdf-item strong{

display:block;

font-size:15px;

}

.pdf-item small{

display:block;

margin-top:5px;

color:#64748b;

}

.pdf-item span{

font-size:14px;

font-weight:700;

}

.pdf-item:hover{

background:#6d28d9;

color:white;

transform:translateX(8px);

}

.pdf-item:hover small{

color:#ffffffcc;

}

/* ==========================================
PROGRESS
========================================== */

.progress-section{

margin-top:25px;

}

.progress-top{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-weight:600;

}

.progress-bar{

height:12px;

background:#e5e7eb;

border-radius:20px;

overflow:hidden;

}

.progress-fill{

width:82%;

height:100%;

background:linear-gradient(90deg,#7c3aed,#2563eb);

border-radius:20px;

}

/* ==========================================
FLOATING TAGS
========================================== */

.floating-tag{

position:absolute;

background:white;

padding:12px 20px;

border-radius:50px;

font-weight:700;

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

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

}

.tag-1{

top:20px;

left:-40px;

}

.tag-2{

top:180px;

right:-40px;

animation-delay:1s;

}

.tag-3{

bottom:20px;

left:-30px;

animation-delay:2s;

}

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

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes floatTag{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}




/* ==========================
   CATEGORIES
========================== */

.lv-categories{
    padding:90px 0;
    background:#fff;
}

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-heading span{
    color:#6d28d9;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.section-heading h2{
    font-size:42px;
    margin:15px 0;
    color:#111827;
}

.section-heading p{
    color:#64748b;
    max-width:650px;
    margin:auto;
}

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

.category-card{
    background:#fff;
    border-radius:22px;
    padding:35px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.06);
    transition:.35s;
    border:1px solid #eef2f7;
}

.category-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 50px rgba(124,58,237,.15);
}

.category-icon{
    width:80px;
    height:80px;
    margin:auto auto 20px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:20px;
    font-size:34px;
    background:linear-gradient(135deg,#7c3aed,#2563eb);
}

.category-card h3{
    font-size:24px;
    margin-bottom:10px;
    color:#111827;
}

.category-card p{
    color:#64748b;
}

@media(max-width:992px){
    .category-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .category-grid{
        grid-template-columns:1fr;
    }

    .section-heading h2{
        font-size:32px;
    }
}




/* ==========================
FEATURED PDFS
========================== */

.featured-pdfs{

padding:100px 0;

background:#f8fafc;

}

.pdf-grid{

display:grid;

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

gap:30px;

}

.pdf-card{

background:#fff;

border-radius:22px;

overflow:hidden;

transition:.35s;

box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.pdf-card:hover{

transform:translateY(-10px);

}

.pdf-thumb{

height:180px;

display:flex;

justify-content:center;

align-items:center;

font-size:70px;

background:linear-gradient(135deg,#7c3aed,#2563eb);

color:white;

}

.pdf-content{

padding:25px;

}

.pdf-category{

display:inline-block;

padding:6px 14px;

background:#ede9fe;

color:#6d28d9;

border-radius:30px;

font-size:13px;

font-weight:700;

margin-bottom:15px;

}

.pdf-content h3{

margin-bottom:10px;

font-size:24px;

}

.pdf-content p{

color:#64748b;

margin-bottom:25px;

}

.pdf-footer{

display:flex;

justify-content:space-between;

align-items:center;

}

.pdf-footer a{

text-decoration:none;

font-weight:700;

color:#2563eb;

}

@media(max-width:992px){

.pdf-grid{

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

}

}

@media(max-width:768px){

.pdf-grid{

grid-template-columns:1fr;

}

}




/* ==========================
MEMBERSHIP
==========================*/

.membership-section{

padding:100px 0;

background:white;

}

.pricing-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.pricing-card{

background:white;

padding:45px 35px;

border-radius:25px;

text-align:center;

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

position:relative;

transition:.35s;

border:1px solid #eee;

}

.pricing-card:hover{

transform:translateY(-10px);

}

.popular{

background:linear-gradient(135deg,#7c3aed,#2563eb);

color:white;

transform:scale(1.05);

}

.popular h3,

.popular .price,

.popular li{

color:white;

}

.popular-badge{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:#f59e0b;

color:white;

padding:8px 20px;

border-radius:30px;

font-size:13px;

font-weight:bold;

}

.price{

font-size:52px;

font-weight:800;

margin:25px 0;

}

.price span{

display:block;

font-size:16px;

font-weight:500;

margin-top:5px;

}

.pricing-card ul{

list-style:none;

margin:35px 0;

padding:0;

}

.pricing-card li{

padding:12px 0;

color:#555;

}

.pricing-btn{

display:inline-block;

padding:16px 34px;

border-radius:12px;

background:#6d28d9;

color:white;

text-decoration:none;

font-weight:700;

}

.popular .pricing-btn{

background:white;

color:#6d28d9;

}

@media(max-width:992px){

.pricing-grid{

grid-template-columns:1fr;

}

.popular{

transform:none;

}

}


/*=========================
WHY CHOOSE
=========================*/

.why-learnvault{

padding:100px 0;

background:#f8fafc;

}

.feature-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.feature-card{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

transition:.35s;

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

}

.feature-card:hover{

transform:translateY(-10px);

background:linear-gradient(135deg,#7c3aed,#2563eb);

color:white;

}

.feature-card:hover p{

color:#fff;

}

.feature-icon{

font-size:55px;

margin-bottom:20px;

}

.feature-card h3{

margin-bottom:15px;

font-size:24px;

}

.feature-card p{

color:#64748b;

line-height:1.8;

}

@media(max-width:992px){

.feature-grid{

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

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

}


/* =========================
TESTIMONIALS
========================= */

.testimonials{

padding:100px 0;

background:#fff;

}

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial-card{

background:#f8fafc;

padding:35px;

border-radius:20px;

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

}

.testimonial-card p{

margin-bottom:20px;

line-height:1.8;

}

.testimonial-card h4{

margin-bottom:5px;

}

/* =========================
FAQ
========================= */

.faq-section{

padding:100px 0;

background:#f8fafc;

}

.faq-list{

max-width:850px;

margin:auto;

}

.faq-item{

background:white;

padding:25px;

margin-bottom:20px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.faq-item h3{

margin-bottom:12px;

}

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

.lv-footer{

background:#0f172a;

color:white;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

margin-bottom:40px;

}

.footer-grid h4{

margin-bottom:18px;

}

.footer-grid ul{

list-style:none;

padding:0;

}

.footer-grid li{

margin-bottom:10px;

}

.footer-grid a{

color:#cbd5e1;

text-decoration:none;

}

.footer-grid p{

color:#cbd5e1;

line-height:1.8;

}

.lv-footer hr{

border:0;

height:1px;

background:#334155;

margin:30px 0;

}

.copyright{

text-align:center;

color:#94a3b8;

}

@media(max-width:992px){

.footer-grid,
.testimonial-grid{

grid-template-columns:1fr;

}

}




.library-hero{

padding:100px 0;

text-align:center;

background:linear-gradient(135deg,#eef2ff,#f8fafc);

}

.library-hero h1{

font-size:54px;

margin-bottom:20px;

}

.library-filter{

padding:50px 0;

background:white;

}

.library-filter input{

width:100%;

padding:18px;

border-radius:12px;

border:1px solid #ddd;

margin-bottom:25px;

}

.filter-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.filter-buttons button{

padding:12px 20px;

border:none;

border-radius:30px;

cursor:pointer;

background:#f3f4f6;

}

.filter-buttons .active{

background:#6d28d9;

color:white;

}