/* ===================================
   WODERFIN CONTENT THEME
=================================== */

:root{
--bg:#f8f5ef;
--white:#ffffff;
--dark:#0f172a;
--muted:#64748b;
--bronze:#b77943;
--bronze-dark:#925f35;
--purple:#5b21b6;
--border:#ece7dd;
--shadow:0 15px 40px rgba(15,23,42,.08);
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--dark);
line-height:1.7;
overflow-x:hidden;
}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}

.container{
max-width:1280px;
margin:auto;
padding:0 24px;
}

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

.hero{
padding:90px 0;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 460px;
gap:70px;
align-items:center;
}

.hero-badge{
display:inline-flex;
align-items:center;
padding:10px 18px;
background:#fff;
border:1px solid var(--border);
border-radius:50px;
font-size:13px;
font-weight:700;
margin-bottom:25px;
}

.hero h1{
font-family:'Playfair Display',serif;
font-size:72px;
line-height:1.05;
margin-bottom:20px;
}

.hero p{
font-size:20px;
color:var(--muted);
max-width:700px;
margin-bottom:35px;
}

/* SEARCH */

.hero-search{
max-width:720px;
margin-bottom:25px;
}

.hero-search form{
display:flex;
align-items:center;
background:#fff;
border-radius:22px;
overflow:hidden;
border:1px solid var(--border);
box-shadow:var(--shadow);
}

.hero-search input{
flex:1;
height:64px;
border:none;
outline:none;
padding:0 22px;
font-size:16px;
}

.hero-search button{
height:64px;
padding:0 30px;
border:none;
background:linear-gradient(
135deg,
var(--bronze),
var(--bronze-dark)
);
color:#fff;
font-weight:700;
cursor:pointer;
}

/* TAGS */

.hero-tags{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:30px;
}

.hero-tags a{
padding:10px 18px;
background:#fff;
border:1px solid var(--border);
border-radius:40px;
font-size:14px;
font-weight:600;
transition:.3s;
}

.hero-tags a:hover{
background:var(--bronze);
color:#fff;
}

/* BUTTONS */

.hero-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn-outline{
display:inline-flex;
align-items:center;
justify-content:center;
height:52px;
padding:0 24px;
border:2px solid var(--dark);
border-radius:16px;
font-weight:700;
}

/* QUOTE CARD */

.quote-card{
background:#fff;
padding:40px;
border-radius:30px;
box-shadow:var(--shadow);
}

.quote-title{
font-size:12px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:var(--bronze);
margin-bottom:20px;
}

.quote-card blockquote{
font-family:'Playfair Display',serif;
font-size:38px;
line-height:1.4;
margin-bottom:20px;
}

.quote-author{
font-weight:700;
}

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

.section{
padding:90px 0;
}

.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
}

.section-header h2{
font-family:'Playfair Display',serif;
font-size:46px;
}

.section-header a{
font-weight:700;
color:var(--bronze);
}

/* ARTICLES */

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

.article-card{
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.3s;
}

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

.article-card img{
height:240px;
object-fit:cover;
}

.article-content{
padding:24px;
}

.category{
display:inline-block;
padding:6px 12px;
background:#f6ece4;
color:var(--bronze);
border-radius:30px;
font-size:12px;
font-weight:700;
margin-bottom:15px;
}

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

.article-content p{
color:var(--muted);
}

/* CATEGORIES */

.categories{
background:#fff;
}

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

.category-grid a{
padding:24px;
text-align:center;
background:var(--bg);
border:1px solid var(--border);
border-radius:18px;
font-weight:700;
transition:.3s;
}

.category-grid a:hover{
background:var(--bronze);
color:#fff;
}

/* NEWSLETTER */

.newsletter{
padding:90px 0;
}

.newsletter-box{
background:#fff;
padding:60px;
border-radius:30px;
text-align:center;
box-shadow:var(--shadow);
max-width:900px;
margin:auto;
}

.newsletter-box h2{
font-size:48px;
font-family:'Playfair Display',serif;
margin-bottom:15px;
}

.newsletter-box p{
font-size:18px;
color:var(--muted);
margin-bottom:25px;
}

.newsletter-box form{
display:flex;
justify-content:center;
gap:12px;
}

.newsletter-box input{
width:420px;
height:58px;
padding:0 18px;
border:1px solid var(--border);
border-radius:14px;
font-size:15px;
}

.newsletter-box button{
height:58px;
padding:0 25px;
border:none;
border-radius:14px;
background:var(--bronze);
color:#fff;
font-weight:700;
cursor:pointer;
}

/* MOBILE */

@media(max-width:991px){

.hero-grid{
grid-template-columns:1fr;
gap:35px;
}

.hero h1{
font-size:52px;
}

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

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

}

@media(max-width:768px){

.newsletter-box{
padding:30px 20px;
}

.newsletter-box h2{
font-size:32px;
}

.newsletter-box form{
flex-direction:column;
}

.newsletter-box input,
.newsletter-box button{
width:100%;
}

}

@media(max-width:600px){

.container{
padding:0 18px;
}

.hero{
padding:50px 0;
}

.hero h1{
font-size:38px;
line-height:1.15;
}

.hero p{
font-size:16px;
}

.hero-search form{
flex-direction:column;
padding:10px;
gap:10px;
}

.hero-search input,
.hero-search button{
width:100%;
height:56px;
border-radius:12px;
}

.hero-buttons{
flex-direction:column;
}

.hero-buttons a{
width:100%;
}

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

.section-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.quote-card{
padding:25px;
}

.quote-card blockquote{
font-size:28px;
}

}

.btn-outline{
display:inline-flex;
align-items:center;
justify-content:center;
height:56px;
padding:0 30px;
border:none;
border-radius:16px;
font-weight:700;
font-size:16px;
color:#fff !important;
cursor:pointer;
transition:.3s;

background:linear-gradient(
135deg,
#5b21b6 0%,
#7c3aed 40%,
#b77943 100%
);

box-shadow:
0 12px 30px rgba(91,33,182,.25);
}

.btn-outline:hover{
transform:translateY(-3px);
box-shadow:
0 18px 40px rgba(91,33,182,.35);
}

.btn-primary{
display:inline-flex;
align-items:center;
justify-content:center;
height:56px;
padding:0 30px;
border:none;
border-radius:16px;
font-weight:700;
font-size:16px;
color:#fff !important;
cursor:pointer;
transition:.3s;

background:linear-gradient(
135deg,
#5b21b6 0%,
#7c3aed 40%,
#b77943 100%
);

box-shadow:
0 12px 30px rgba(91,33,182,.25);
}

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:
0 18px 40px rgba(91,33,182,.35);
}

/* =====================================
   WODERFIN FEATURED ARTICLES CAROUSEL
===================================== */

.featured-slider-section{
    padding:80px 0;
    background:#f8f7f4;
    overflow:hidden;
}

.slider-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:35px;
}

.slider-badge{
    display:inline-block;
    background:#eef2ff;
    color:#4f46e5;
    padding:8px 16px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:12px;
}

.slider-header h2{
    font-family:'Playfair Display',serif;
    font-size:42px;
    color:#111827;
    margin:0 0 10px;
}

.slider-header p{
    color:#6b7280;
    font-size:17px;
    line-height:1.7;
    max-width:700px;
    margin:0;
}

.view-all-btn{
    background:#111827;
    color:#fff;
    text-decoration:none;
    padding:14px 24px;
    border-radius:14px;
    font-weight:700;
    transition:.3s;
    white-space:nowrap;
}

.view-all-btn:hover{
    background:#4f46e5;
    color:#fff;
}

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

.slider-wrapper{
    position:relative;
}

.article-slider{

    display:flex;

    gap:20px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    touch-action:pan-x;

    scrollbar-width:none;

    scroll-snap-type:x mandatory;

    padding:10px 0 20px;
}

.article-slider::-webkit-scrollbar{
    display:none;
}

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

.article-card{

    flex:0 0 320px;

    width:320px;
    height:460px;

    border-radius:24px;

    overflow:hidden;

    position:relative;

    text-decoration:none;

    background:#fff;

    scroll-snap-align:start;

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

    transition:.35s ease;
}

.article-card:hover{
    transform:translateY(-6px);
}

.article-image{
    width:100%;
    height:100%;
}

.article-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s ease;
}

.article-card:hover img{
    transform:scale(1.08);
}

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

.article-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:25px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.95),
        rgba(0,0,0,.7),
        transparent
    );
}

.article-category{

    display:inline-block;

    background:#facc15;

    color:#111827;

    padding:7px 14px;

    border-radius:50px;

    font-size:12px;
    font-weight:700;

    margin-bottom:12px;
}

.article-overlay h3{

    color:#fff;

    font-size:20px;

    line-height:1.5;

    margin:0;

    font-weight:700;
}

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

.slider-nav{

    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:#fff;

    cursor:pointer;

    z-index:50;

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

    transition:.3s;
}

.slider-nav:hover{
    transform:translateY(-50%) scale(1.05);
}

.slider-nav i{
    font-size:18px;
    color:#111827;
}

.prevBtn{
    left:-25px;
}

.nextBtn{
    right:-25px;
}

/* ========================= */
/* TABLET */
/* ========================= */

@media(max-width:992px){

    .slider-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .slider-header h2{
        font-size:34px;
    }

    .article-card{
        flex:0 0 300px;
        width:300px;
        height:430px;
    }

}

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

@media(max-width:768px){

    .featured-slider-section{
        padding:60px 0;
    }

    .slider-header h2{
        font-size:28px;
    }

    .slider-header p{
        font-size:15px;
    }

    .article-slider{

        gap:16px;

        padding-left:15px;
        padding-right:15px;
    }

    .article-card{

        flex:0 0 280px;

        width:280px;
        height:420px;
    }

    .article-overlay{
        padding:20px;
    }

    .article-overlay h3{
        font-size:17px;
    }

    .slider-nav{
        display:none;
    }

}

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

@media(max-width:480px){

    .article-card{

        flex:0 0 260px;

        width:260px;
        height:390px;
    }

    .article-overlay h3{
        font-size:15px;
    }

}

.search-box{
    position:relative;
    max-width:750px;
    width:100%;
}

.search-box input{
    width:100%;
    height:64px;
    border:none;
    border-radius:50px;
    padding:0 70px 0 25px;
    font-size:17px;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
    outline:none;
}

.search-box button{
    position:absolute;
    right:8px;
    top:8px;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:#4f46e5;
    color:#fff;
    cursor:pointer;
}

#searchResults{

    position:absolute;

    top:70px;
    left:0;
    right:0;

    background:#fff;

    border-radius:20px;

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

    display:none;

    overflow:hidden;

    z-index:9999;
}

.search-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    text-decoration:none;
    color:#111827;
    border-bottom:1px solid #f3f4f6;
    transition:.2s;
}

.search-item:hover{
    background:#f8fafc;
}

.search-item img{
    width:50px;
    height:50px;
    object-fit:cover;
    border-radius:10px;
}

.search-title{
    font-weight:600;
}

.search-category{
    font-size:12px;
    color:#6b7280;
}

.search-box{
    position:relative;
}

#searchResults{

    position:absolute;

    top:100%;
    left:0;
    right:0;

    background:#fff;

    border-radius:16px;

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

    display:none;

    z-index:9999;

    overflow:hidden;
}

.search-item{

    display:flex;

    gap:12px;

    padding:15px 18px;

    text-decoration:none;

    color:#111;

    border-bottom:1px solid #eee;

    background:#fff;
}

.search-item:hover{
    background:#f8fafc;
}

.search-title{
    font-weight:600;
}

.search-category{
    font-size:12px;
    color:#666;
}

.search-box{
    position:relative;
    width:100%;
}

#searchResults{

    position:absolute;

    top:calc(100% + 10px);

    left:0;
    right:0;

    background:#fff;

    border-radius:18px;

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

    z-index:99999;

    display:none;

    overflow:hidden;
}

.search-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    text-decoration:none;

    color:#111827;

    border-bottom:1px solid #f1f5f9;

    transition:.2s;
}

.search-item:hover{
    background:#f8fafc;
}

.search-item img{
    width:50px;
    height:50px;
    object-fit:cover;
    border-radius:10px;
}

.search-title{
    font-weight:600;
    line-height:1.5;
}

.search-category{
    font-size:12px;
    color:#64748b;
    margin-top:4px;
}

.search-empty{
    padding:16px;
    color:#64748b;
}

.hero,
.hero-content,
.hero-search,
.search-box{
    overflow:visible;
}

.topics-section{
    padding:70px 0;
}

/* ===================================
   EXPLORE TOPICS
=================================== */

.topics-section{
    padding:70px 0;
}

.topics-slider{

    display:flex;

    gap:14px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -ms-overflow-style:none;

    padding-bottom:10px;
}

.topics-slider::-webkit-scrollbar{
    display:none;
}

/* TOPIC CHIP */

.topic-chip{

    flex:0 0 auto;

    padding:14px 22px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:999px;

    text-decoration:none;

    color:#111827;

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

    transition:.3s;

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

.topic-chip:hover{

    background:#4f46e5;

    color:#fff;

    border-color:#4f46e5;

    transform:translateY(-2px);
}

/* NAVIGATION */

.topic-nav{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-bottom:15px;
}

.topic-prev,
.topic-next{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.3s;
}

.topic-prev:hover,
.topic-next:hover{

    background:#4f46e5;

    color:#fff;
}

/* TABLET */

@media(max-width:992px){

    .topic-chip{

        padding:13px 20px;

        font-size:14px;
    }

}

/* MOBILE */

@media(max-width:768px){

    .topic-nav{
        display:none !important;
    }

    .topic-chip{

        padding:12px 18px;

        font-size:14px;

    }

}

/* =========================================
   TOPIC PAGE
========================================= */

.article-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
gap:35px;
margin-top:40px;
}

.article-card-link{
display:block;
text-decoration:none;
color:inherit;
height:100%;
}

.article-card{

background:#ffffff;

border-radius:24px;

overflow:hidden;

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

transition:all .35s ease;

height:100%;

display:block;

}

.article-card:hover{

transform:translateY(-8px);

box-shadow:
0 18px 45px rgba(0,0,0,.12);

}

/* IMAGE */

.article-card img{

width:100%;

height:240px;

object-fit:cover;

display:block;

}

/* CONTENT */

.article-content{

padding:24px;

}

.article-content h3{

font-size:28px;

font-weight:800;

line-height:1.5;

margin-bottom:15px;

color:#0f172a;

}

.article-content p{

font-size:17px;

line-height:1.9;

color:#64748b;

margin-bottom:22px;

}

/* BUTTON */

.read-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 24px;

background:linear-gradient(
135deg,
#5b21b6,
#b77943
);

color:#fff;

font-weight:700;

border-radius:14px;

font-size:15px;

transition:.3s;

}

.article-card:hover .read-btn{

transform:translateX(4px);

}

/* PAGE TITLE */

.topic-title{

font-size:54px;

font-family:'Playfair Display',serif;

margin-bottom:15px;

color:#0f172a;

}

.topic-desc{

font-size:20px;

color:#64748b;

margin-bottom:20px;

}

/* MOBILE */

@media(max-width:991px){

.article-grid{

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

gap:25px;

}

.article-content h3{

font-size:22px;

}

}

@media(max-width:768px){

.article-grid{

grid-template-columns:1fr;

}

.article-card img{

height:220px;

}

.article-content{

padding:20px;

}

.article-content h3{

font-size:20px;

}

.article-content p{

font-size:15px;

}

.topic-title{

font-size:38px;

}

.topic-desc{

font-size:17px;

}

}

/* ==========================
TOPIC ARTICLE SLIDER
========================== */

.articles-slider-wrapper{

position:relative;

margin-top:40px;
padding:0 50px;
}

.articles-slider{

display:flex;
gap:24px;

overflow-x:auto;

scrollbar-width:none;
-ms-overflow-style:none;

scroll-behavior:smooth;

padding-bottom:15px;
}

.articles-slider::-webkit-scrollbar{
display:none;
}

.article-card{

flex:0 0 320px;

background:#fff;

border-radius:24px;

overflow:hidden;

text-decoration:none;

color:#111827;

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

transition:.3s;
}

.article-card:hover{

transform:translateY(-8px);

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

.article-card img{

width:100%;
height:220px;

object-fit:cover;
display:block;
}

.article-info{

padding:20px;
}

.article-info h3{

font-size:26px;

font-weight:800;

line-height:1.4;

margin-bottom:12px;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.article-info p{

font-size:15px;

line-height:1.8;

color:#64748b;

margin-bottom:15px;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.article-meta{

display:inline-block;

padding:8px 14px;

border-radius:999px;

background:#ede9fe;

color:#6d28d9;

font-size:13px;

font-weight:700;
}

.slider-btn{

position:absolute;

top:40%;

transform:translateY(-50%);

width:50px;
height:50px;

border:none;

border-radius:50%;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.15);

cursor:pointer;

z-index:5;

font-size:24px;
}

.prev-btn{
left:0;
}

.next-btn{
right:0;
}

@media(max-width:768px){

.articles-slider-wrapper{

padding:0;
}

.slider-btn{

display:none;
}

.article-card{

flex:0 0 85%;
}

}

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

.wf-hero{

padding:80px 0;

background:
linear-gradient(
180deg,
#f8f6f1 0%,
#ffffff 100%
);

}

.wf-container{

max-width:1400px;

margin:auto;

padding:0 20px;

}

.wf-hero-grid{

display:grid;

grid-template-columns:
1.1fr 1fr;

gap:60px;

align-items:center;

}

/* LEFT */

.wf-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:50px;

background:#fff;

border:1px solid #e5e7eb;

font-weight:600;

color:#111827;

margin-bottom:25px;

}

.wf-live-dot{

width:10px;
height:10px;

border-radius:50%;

background:#10b981;

box-shadow:
0 0 15px #10b981;

}

.wf-content h1{

font-size:72px;

line-height:1.05;

font-weight:800;

color:#0f172a;

margin-bottom:20px;

}

.wf-content h1 span{

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.wf-content p{

font-size:20px;

line-height:1.8;

color:#64748b;

max-width:700px;

margin-bottom:35px;

}

/* SEARCH */

.wf-search{

display:flex;

background:#fff;

border-radius:22px;

overflow:hidden;

border:1px solid #e5e7eb;

box-shadow:
0 8px 25px rgba(0,0,0,.06);

margin-bottom:30px;

}

.wf-search input{

flex:1;

height:70px;

border:none;

outline:none;

padding:0 25px;

font-size:17px;

}

.wf-search button{

width:70px;

border:none;

cursor:pointer;

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

font-size:20px;

}

/* TOPICS */

.wf-topics{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:30px;

}

.wf-topic{

padding:14px 22px;

border-radius:50px;

background:#fff;

border:1px solid #e5e7eb;

text-decoration:none;

font-weight:600;

color:#111827;

transition:.3s;

}

.wf-topic:hover{

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

}

/* FEATURE TAGS */

.wf-tags{

display:flex;

flex-wrap:wrap;

gap:14px;

margin-bottom:35px;

}

.wf-tag{

display:flex;

align-items:center;

gap:10px;

padding:15px 22px;

border-radius:50px;

background:#fff;

border:1px solid #e5e7eb;

text-decoration:none;

font-weight:600;

color:#111827;

transition:.3s;

}

.wf-tag:hover{

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

}

.wf-tag i{

color:#f59e0b;

}

/* BUTTONS */

.wf-buttons{

display:flex;

gap:15px;

}

.wf-btn-primary{

padding:18px 34px;

border-radius:18px;

text-decoration:none;

font-weight:700;

color:#fff;

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

}

.wf-btn-secondary{

padding:18px 34px;

border-radius:18px;

text-decoration:none;

font-weight:700;

background:#fff;

border:1px solid #e5e7eb;

color:#111827;

}

/* RIGHT */

.wf-visual{

position:relative;

height:600px;

}

.wf-card-main{

position:absolute;

right:60px;

width:340px;

background:#fff;

padding:25px;

border-radius:35px;

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

}

.wf-book-cover{

height:260px;

border-radius:25px;

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

padding:25px;

display:flex;

flex-direction:column;

justify-content:flex-end;

color:#fff;

}

.wf-player{

margin-top:25px;

}

.wf-progress{

height:6px;

background:#6d28d9;

border-radius:20px;

margin-bottom:20px;

}

.wf-player-icons{

display:flex;

justify-content:center;

gap:30px;

font-size:22px;

}

/* FLOATING CARDS */

.wf-floating{

position:absolute;

display:flex;

align-items:center;

gap:12px;

padding:18px;

background:#fff;

border-radius:18px;

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

}

.wf-floating i{

font-size:22px;

color:#6d28d9;

}

.wf-ai{

top:50px;

left:20px;

}

.wf-growth{

bottom:70px;

right:0;

}

.wf-books{

bottom:200px;

left:0;

}

/* MOBILE */

@media(max-width:991px){

.wf-hero-grid{

grid-template-columns:1fr;

}

.wf-content{

text-align:center;

}

.wf-content h1{

font-size:48px;

}

.wf-buttons{

justify-content:center;

}

.wf-topics,
.wf-tags{

justify-content:center;

}

.wf-visual{

height:auto;

margin-top:50px;

}

.wf-card-main{

position:relative;

right:auto;

margin:auto;

}

.wf-floating{

display:none;

}

}

@media(max-width:576px){

.wf-content h1{

font-size:38px;

}

.wf-content p{

font-size:16px;

}

.wf-search input{

font-size:15px;

}

.wf-buttons{

flex-direction:column;

}

.wf-btn-primary,
.wf-btn-secondary{

width:100%;

text-align:center;

}

}

/* ===================================
WODERFIN PREMIUM HERO
=================================== */

.wf-hero{

padding:90px 0;

background:
linear-gradient(
180deg,
#f8f6f1 0%,
#ffffff 100%
);

overflow:hidden;

position:relative;

}

.wf-container{

max-width:1400px;

margin:auto;

padding:0 20px;

}

.wf-hero-grid{

display:grid;

grid-template-columns:
1.1fr 1fr;

gap:80px;

align-items:center;

}

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

.wf-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 20px;

background:#fff;

border:1px solid #ece8df;

border-radius:50px;

font-weight:600;

color:#475569;

box-shadow:
0 5px 15px rgba(0,0,0,.04);

margin-bottom:25px;

}

.wf-live-dot{

width:10px;
height:10px;

border-radius:50%;

background:#10b981;

box-shadow:
0 0 15px rgba(16,185,129,.5);

}

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

.wf-content h1{

font-size:72px;

line-height:1.05;

font-weight:800;

color:#0f172a;

margin-bottom:25px;

letter-spacing:-2px;

}

.wf-content h1 span{

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.wf-content p{

font-size:20px;

line-height:1.9;

color:#64748b;

max-width:650px;

margin-bottom:35px;

}

/* =========================
FEATURE TAGS
========================= */

.wf-tags{

display:flex;

flex-wrap:wrap;

gap:14px;

margin-bottom:40px;

}

.wf-tag{

display:flex;

align-items:center;

gap:10px;

padding:15px 22px;

text-decoration:none;

background:#fff;

border:1px solid #ece8df;

border-radius:50px;

font-weight:700;

font-size:15px;

color:#0f172a;

transition:.35s;

box-shadow:
0 5px 15px rgba(0,0,0,.04);

}

.wf-tag i{

color:#f59e0b;

font-size:15px;

}

.wf-tag:hover{

transform:translateY(-4px);

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

border-color:transparent;

box-shadow:
0 15px 30px rgba(109,40,217,.25);

}

.wf-tag:hover i{

color:#fff;

}

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

.wf-buttons{

display:flex;

gap:15px;

margin-bottom:45px;

}

.wf-btn-primary{

height:58px;

padding:0 35px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

border-radius:18px;

font-weight:700;

font-size:16px;

color:#fff;

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

box-shadow:
0 15px 30px rgba(109,40,217,.25);

transition:.35s;

}

.wf-btn-primary:hover{

transform:translateY(-4px);

}

.wf-btn-secondary{

height:58px;

padding:0 35px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

border-radius:18px;

font-weight:700;

font-size:16px;

background:#fff;

color:#0f172a;

border:1px solid #ece8df;

transition:.35s;

}

.wf-btn-secondary:hover{

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

border-color:transparent;

}

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

.wf-stats{

display:flex;

gap:50px;

}

.wf-stat h3{

font-size:34px;

font-weight:800;

color:#0f172a;

margin-bottom:5px;

}

.wf-stat p{

font-size:14px;

font-weight:600;

color:#64748b;

margin:0;

}

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

.wf-showcase{

position:relative;

height:700px;

display:flex;

align-items:center;

justify-content:center;

}

.wf-hero-image{

width:100%;

max-width:620px;

border-radius:35px;

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

}

/* =========================
FEATURE CARDS
========================= */

.wf-feature-card{

position:absolute;

display:flex;

align-items:center;

gap:15px;

padding:18px 22px;

background:#fff;

border-radius:20px;

border:1px solid #ece8df;

box-shadow:
0 12px 30px rgba(0,0,0,.08);

min-width:260px;

transition:.35s;

}

.wf-feature-card:hover{

transform:translateY(-5px);

}

.wf-feature-card i{

width:55px;
height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

font-size:20px;

flex-shrink:0;

}

.wf-feature-card h4{

font-size:17px;

font-weight:700;

color:#0f172a;

margin:0 0 4px;

}

.wf-feature-card p{

font-size:13px;

color:#64748b;

margin:0;

line-height:1.5;

}

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

.card1{

top:30px;

left:0;

}

.card2{

top:140px;

right:0;

}

.card3{

top:320px;

left:-20px;

}

.card4{

bottom:110px;

right:-10px;

}

.card5{

bottom:30px;

left:30px;

}

.card6{

bottom:20px;

right:240px;

}

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

@media(max-width:1200px){

.wf-content h1{

font-size:58px;

}

.wf-showcase{

height:620px;

}

}

@media(max-width:991px){

.wf-hero{

padding:70px 0;

}

.wf-hero-grid{

grid-template-columns:1fr;

gap:50px;

}

.wf-content{

text-align:center;

}

.wf-content p{

margin-left:auto;
margin-right:auto;

}

.wf-tags{

justify-content:center;

}

.wf-buttons{

justify-content:center;

}

.wf-stats{

justify-content:center;

}

.wf-showcase{

height:auto;

}

.wf-hero-image{

max-width:100%;

}

.wf-feature-card{

position:relative;

left:auto;
right:auto;
top:auto;
bottom:auto;

margin:15px auto;

width:100%;

max-width:420px;

}

}

@media(max-width:768px){

.wf-content h1{

font-size:42px;

}

.wf-content p{

font-size:17px;

}

.wf-buttons{

flex-direction:column;

}

.wf-btn-primary,
.wf-btn-secondary{

width:100%;

}

.wf-stats{

gap:20px;

flex-wrap:wrap;

}

.wf-stat{

text-align:center;

}

.wf-tag{

font-size:14px;

padding:12px 18px;

}

}

@media(max-width:480px){

.wf-content h1{

font-size:36px;

}

.wf-badge{

font-size:13px;

}

.wf-feature-card{

min-width:auto;

padding:15px;

}

.wf-feature-card i{

width:48px;
height:48px;

font-size:18px;

}

}

/* ===================================
WHY WODERFIN
=================================== */

.why-woderfin{

padding:100px 0;

background:#fff;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

color:#f59e0b;

font-weight:700;

letter-spacing:2px;

font-size:13px;

}

.section-heading h2{

font-size:60px;

line-height:1.1;

color:#0f172a;

margin:15px 0;

}

.section-heading p{

font-size:18px;

color:#64748b;

}

.why-grid{

display:grid;

grid-template-columns:
450px 1fr;

gap:80px;

align-items:center;

}

.why-features{

display:flex;

flex-direction:column;

gap:30px;

}

.why-item{

display:flex;

gap:20px;

align-items:flex-start;

}

.why-icon{

width:70px;
height:70px;

flex-shrink:0;

display:flex;

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

border-radius:20px;

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

font-size:28px;

}

.why-item h3{

font-size:26px;

margin-bottom:10px;

color:#0f172a;

}

.why-item p{

font-size:17px;

line-height:1.8;

color:#64748b;

}

.why-visual{

position:relative;

}

.why-visual img{

width:100%;

border-radius:30px;

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

}

.visual-card{

position:absolute;

display:flex;

align-items:center;

gap:10px;

padding:14px 20px;

background:#fff;

border-radius:50px;

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

font-weight:700;

}

.visual-card i{

color:#f59e0b;

}

.card-top{

top:30px;

left:-30px;

}

.card-middle{

top:50%;

right:-30px;

transform:translateY(-50%);

}

.card-bottom{

bottom:30px;

left:30px;

}

/* MOBILE */

@media(max-width:991px){

.why-grid{

grid-template-columns:1fr;

gap:50px;

}

.section-heading h2{

font-size:42px;

}

.why-item h3{

font-size:22px;

}

.visual-card{

position:relative;

top:auto;
bottom:auto;
left:auto;
right:auto;

margin:15px auto;

display:flex;

justify-content:center;

max-width:250px;

transform:none;

}

}

@media(max-width:576px){

.why-woderfin{

padding:70px 0;

}

.section-heading h2{

font-size:34px;

}

.why-item{

gap:15px;

}

.why-icon{

width:55px;
height:55px;

font-size:20px;

}

.why-item h3{

font-size:18px;

}

.why-item p{

font-size:15px;

}

}

/* ===================================
WODERFIN STATS SLIDER
=================================== */

.wf-stats-slider{

padding:100px 0;

background:
linear-gradient(
180deg,
#ffffff,
#f8f6f1
);

overflow:hidden;

}

.wf-slider-heading{

text-align:center;

margin-bottom:60px;

}

.wf-slider-heading span{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:#fff;

border:1px solid #ece8df;

font-size:12px;

font-weight:700;

letter-spacing:1px;

color:#6d28d9;

}

.wf-slider-heading h2{

font-size:56px;

margin:20px 0;

color:#0f172a;

}

.wf-slider-heading p{

font-size:18px;

color:#64748b;

}

/* SLIDER */

.wf-slider{

overflow:hidden;

position:relative;

}

.wf-track{

display:flex;

gap:24px;

width:max-content;

animation:wf-scroll 40s linear infinite;

}

.wf-slider:hover .wf-track{

animation-play-state:paused;

}

@keyframes wf-scroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* ITEM */

.wf-slide{

min-width:260px;

background:#fff;

border:1px solid #ece8df;

border-radius:28px;

padding:30px;

text-align:center;

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

transition:.35s;

}

.wf-slide:hover{

transform:translateY(-8px);

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

}

.wf-slide i{

width:70px;
height:70px;

display:flex;

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

margin:auto;

margin-bottom:18px;

border-radius:20px;

font-size:24px;

color:#fff;

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

}

.wf-slide:hover i{

background:#fff;

color:#6d28d9;

}

.wf-slide h3{

font-size:42px;

font-weight:800;

margin-bottom:10px;

color:#0f172a;

}

.wf-slide p{

font-size:15px;

font-weight:600;

color:#64748b;

}

.wf-slide:hover h3,
.wf-slide:hover p{

color:#fff;

}

/* MOBILE */

@media(max-width:768px){

.wf-stats-slider{

padding:70px 0;

}

.wf-slider-heading h2{

font-size:34px;

}

.wf-slider-heading p{

font-size:15px;

}

.wf-slide{

min-width:200px;

padding:20px;

}

.wf-slide h3{

font-size:30px;

}

.wf-slide i{

width:55px;
height:55px;

font-size:20px;

}

}

/* ===================================
WODERFIN 20 MIN LEARNING
=================================== */

.wf-learning{

padding:120px 0;

background:
linear-gradient(
180deg,
#ffffff,
#f8f6f1
);

overflow:hidden;

}

.wf-learning-header{

text-align:center;

max-width:850px;

margin:auto;

margin-bottom:60px;

}

.wf-learning-badge{

display:inline-block;

padding:12px 22px;

border-radius:50px;

background:#fff;

border:1px solid #ece8df;

font-size:12px;

font-weight:700;

letter-spacing:1px;

color:#6d28d9;

margin-bottom:20px;

}

.wf-learning-header h2{

font-size:64px;

line-height:1.1;

margin-bottom:20px;

font-weight:800;

color:#0f172a;

}

.wf-learning-header p{

font-size:18px;

line-height:1.8;

color:#64748b;

}

.wf-section-title{

margin-bottom:20px;
margin-top:40px;

}

.wf-section-title h3{

font-size:26px;

font-weight:800;

color:#0f172a;

}

/* SCROLL */

.wf-scroll-wrapper{

overflow-x:auto;

cursor:grab;

padding-bottom:20px;

scrollbar-width:none;

}

.wf-scroll-wrapper::-webkit-scrollbar{

display:none;

}

.wf-scroll-track{

display:flex;

gap:18px;

width:max-content;

}

/* CHIP */

.wf-chip{

display:flex;

align-items:center;

padding:18px 26px;

background:#fff;

border-radius:50px;

border:1px solid #ece8df;

text-decoration:none;

font-weight:700;

font-size:15px;

white-space:nowrap;

color:#0f172a;

transition:.35s;

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

}

.wf-chip:hover{

transform:translateY(-4px);

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

box-shadow:
0 15px 30px rgba(109,40,217,.25);

}

/* AUDIO */

.wf-chip.audio{

background:
linear-gradient(
135deg,
rgba(109,40,217,.08),
rgba(245,158,11,.08)
);

}

/* MOBILE */

@media(max-width:991px){

.wf-learning-header h2{

font-size:44px;

}

}

@media(max-width:768px){

.wf-learning{

padding:80px 0;

}

.wf-learning-header h2{

font-size:32px;

}

.wf-learning-header p{

font-size:15px;

}

.wf-section-title h3{

font-size:20px;

}

.wf-chip{

padding:14px 18px;

font-size:14px;

}

}

.wf-scroll-controls{

display:flex;

justify-content:flex-end;

gap:12px;

margin-bottom:20px;

}

.wf-scroll-btn{

width:48px;
height:48px;

border:none;

cursor:pointer;

border-radius:14px;

background:
linear-gradient(
135deg,
#6d28d9,
#f59e0b
);

color:#fff;

font-size:18px;

transition:.3s;

}

.wf-scroll-btn:hover{

transform:translateY(-3px);

box-shadow:
0 10px 25px rgba(109,40,217,.25);

}

.wf-summary-library{
padding:100px 0;
background:#faf8f3;
}

.wf-summary-header{
text-align:center;
max-width:800px;
margin:auto;
margin-bottom:40px;
}

.wf-badge{
display:inline-block;
padding:10px 18px;
border-radius:50px;
background:#fff;
border:1px solid #ece8df;
font-size:12px;
font-weight:700;
color:#6d28d9;
margin-bottom:20px;
}

.wf-summary-header h2{
font-size:58px;
font-weight:800;
color:#0f172a;
margin-bottom:15px;
}

.wf-summary-header p{
font-size:18px;
color:#64748b;
}

.wf-nav{
display:flex;
justify-content:flex-end;
gap:12px;
margin-bottom:20px;
}

.wf-prev,
.wf-next{
width:50px;
height:50px;
border:none;
border-radius:15px;
cursor:pointer;
color:#fff;
background:linear-gradient(135deg,#6d28d9,#f59e0b);
}

.wf-slider{
display:flex;
gap:22px;
overflow-x:auto;
scroll-behavior:smooth;
scrollbar-width:none;
padding-bottom:15px;
}

.wf-slider::-webkit-scrollbar{
display:none;
}

.wf-book-item{
min-width:220px;
text-decoration:none;
color:inherit;
}

.wf-book-item img{
width:100%;
height:320px;
object-fit:cover;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
}

.wf-book-item:hover img{
transform:translateY(-8px);
}

.wf-book-item span{
display:inline-block;
margin-top:12px;
padding:6px 12px;
border-radius:30px;
font-size:11px;
font-weight:700;
background:#f3e8ff;
color:#6d28d9;
}

.wf-book-item h4{
margin-top:10px;
font-size:17px;
font-weight:700;
color:#0f172a;
}

@media(max-width:768px){

.wf-summary-header h2{
font-size:34px;
}

.wf-book-item{
min-width:170px;
}

.wf-book-item img{
height:250px;
}

}

.wf-learn{
padding:80px 0;
overflow:hidden;
}

.wf-head{
text-align:center;
max-width:800px;
margin:auto auto 40px;
padding:0 20px;
}

.wf-head span{
background:#eef2ff;
color:#4f46e5;
padding:10px 18px;
border-radius:30px;
font-size:12px;
font-weight:700;
}

.wf-head h2{
font-size:52px;
font-weight:800;
margin:20px 0 10px;
color:#082f49;
}

.wf-head p{
color:#64748b;
font-size:18px;
}

.wf-wrap{
position:relative;
}

.wf-slider{
display:flex;
gap:18px;
overflow-x:auto;
scrollbar-width:none;
scroll-behavior:smooth;
padding:0 60px;
cursor:grab;
}

.wf-slider::-webkit-scrollbar{
display:none;
}

.wf-card{
min-width:900px;
height:320px;
border-radius:28px;
display:flex;
align-items:center;
overflow:hidden;
flex-shrink:0;
}

.wf-left{
width:45%;
padding:40px;
}

.wf-right{
width:55%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:15px;
}

.wf-right img{
width:100%;
max-width:520px;
max-height:260px;
object-fit:contain;
}

.wf-badge{
display:inline-block;
padding:8px 14px;
background:#fff;
border-radius:30px;
font-size:12px;
font-weight:700;
margin-bottom:15px;
}

.wf-left h3{
font-size:34px;
margin-bottom:10px;
}

.wf-left p{
margin-bottom:20px;
color:#475569;
}

.wf-left a{
display:inline-block;
padding:12px 22px;
background:#4f46e5;
color:#fff;
border-radius:12px;
text-decoration:none;
font-weight:600;
}

.purple{background:#ede9fe;}
.indigo{background:#e0e7ff;}
.orange{background:#ffedd5;}
.green{background:#dcfce7;}
.dark{background:#e2e8f0;}
.gold{background:#fef3c7;}

.wf-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:52px;
height:52px;
border:none;
border-radius:50%;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.15);
cursor:pointer;
z-index:10;
}

.wf-prev{left:0;}
.wf-next{right:0;}

@media(max-width:768px){

.wf-head h2{
font-size:34px;
}

.wf-slider{
padding:0 12px;
}

.wf-card{
min-width:92%;
height:auto;
flex-direction:column;
}

.wf-left{
width:100%;
padding:25px;
text-align:center;
}

.wf-right{
width:100%;
padding:10px;
}

.wf-right img{
max-height:180px;
}

.wf-arrow{
display:none;
}

}

.wf-reviews{
padding:100px 0;
overflow:hidden;
}

.wf-review-header{
text-align:center;
max-width:800px;
margin:auto auto 50px;
}

.wf-review-badge{
display:inline-block;
padding:10px 18px;
background:#eef2ff;
color:#4f46e5;
border-radius:30px;
font-size:13px;
font-weight:700;
}

.wf-review-header h2{
font-size:52px;
font-weight:800;
margin:20px 0;
}

.wf-review-slider{
display:flex;
gap:20px;
overflow-x:auto;
scrollbar-width:none;
padding:10px 20px;
scroll-behavior:smooth;
}

.wf-review-slider::-webkit-scrollbar{
display:none;
}

.wf-review-card{
min-width:320px;
background:#fff;
border-radius:24px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.wf-stars{
color:#fbbf24;
font-size:20px;
margin-bottom:15px;
}

.wf-review-card p{
line-height:1.8;
margin-bottom:20px;
}

.wf-review-card h4{
margin-bottom:5px;
}

.wf-review-card span{
color:#64748b;
}

.wf-faq-section{
padding:100px 20px;
max-width:1000px;
margin:auto;
}

.wf-faq-header{
text-align:center;
margin-bottom:50px;
}

.wf-faq-badge{
display:inline-block;
padding:10px 18px;
background:#eef2ff;
color:#4f46e5;
font-size:13px;
font-weight:700;
border-radius:30px;
margin-bottom:20px;
}

.wf-faq-header h2{
font-size:52px;
font-weight:800;
color:#082f49;
margin-bottom:20px;
}

.wf-faq-header p{
font-size:18px;
color:#64748b;
line-height:1.7;
}

.wf-faq-item{
background:#fff;
border:1px solid #e5e7eb;
border-radius:20px;
margin-bottom:15px;
overflow:hidden;
}

.wf-faq-question{
width:100%;
padding:24px;
border:none;
background:none;
cursor:pointer;
font-size:20px;
font-weight:700;
text-align:left;
display:flex;
justify-content:space-between;
align-items:center;
}

.wf-faq-question span{
font-size:28px;
color:#4f46e5;
}

.wf-faq-answer{
max-height:0;
overflow:hidden;
transition:.3s;
}

.wf-faq-answer p{
padding:0 24px 24px;
color:#64748b;
line-height:1.8;
}

.wf-faq-item.active .wf-faq-answer{
max-height:300px;
}

@media(max-width:768px){

.wf-faq-header h2{
font-size:34px;
}

.wf-faq-question{
font-size:17px;
padding:20px;
}

}

/* ===================================
WODERFIN GROW ANYWHERE
=================================== */

.wf-anywhere{
padding:100px 0;
overflow:hidden;
}

.wf-any-header{
max-width:900px;
margin:auto;
text-align:center;
margin-bottom:60px;
padding:0 20px;
}

.wf-any-badge{
display:inline-block;
padding:10px 18px;
background:#eef2ff;
color:#4f46e5;
border-radius:50px;
font-size:13px;
font-weight:700;
margin-bottom:20px;
}

.wf-any-header h2{
font-size:58px;
font-weight:800;
line-height:1.1;
color:#082f49;
margin-bottom:20px;
}

.wf-any-header p{
font-size:20px;
color:#64748b;
line-height:1.8;
max-width:700px;
margin:auto;
}

/* WRAPPER */

.wf-slider-wrapper{
position:relative;
}

/* SLIDER */

.wf-any-slider{
display:flex;
gap:24px;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
scroll-behavior:smooth;
padding:10px 70px;
cursor:grab;
}

.wf-any-slider::-webkit-scrollbar{
display:none;
}

.wf-any-slider.active{
cursor:grabbing;
}

/* CARD */

.wf-any-card{
min-width:380px;
background:#fff;
border-radius:28px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
flex-shrink:0;
transition:.3s;
}

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

.wf-any-card img{
width:100%;
height:280px;
object-fit:cover;
display:block;
}

/* TAG */

.wf-tag{
position:absolute;
margin:18px;
padding:8px 14px;
background:#fff;
border-radius:30px;
font-size:13px;
font-weight:700;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

/* CONTENT */

.wf-content{
padding:25px;
}

.wf-content h3{
font-size:24px;
font-weight:700;
margin-bottom:10px;
color:#082f49;
}

.wf-content p{
font-size:15px;
line-height:1.7;
color:#64748b;
}

/* NAVIGATION */

.wf-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.15);
cursor:pointer;
font-size:22px;
z-index:999;
}

.wf-prev{
left:5px;
}

.wf-next{
right:5px;
}

/* TABLET */

@media(max-width:991px){

.wf-any-header h2{
font-size:44px;
}

.wf-any-card{
min-width:320px;
}

}

/* MOBILE */

@media(max-width:768px){

.wf-anywhere{
padding:70px 0;
}

.wf-any-header h2{
font-size:34px;
}

.wf-any-header p{
font-size:16px;
}

.wf-any-slider{
padding:10px 15px;
gap:15px;
}

.wf-any-card{
min-width:88%;
}

.wf-any-card img{
height:220px;
}

.wf-nav{
display:none;
}

}

/* ===================================
TODAY'S GROWTH PICKS
=================================== */

.wf-growth-picks{
padding:100px 0;
overflow:hidden;
}

.wf-growth-header{
text-align:center;
max-width:800px;
margin:auto;
margin-bottom:50px;
padding:0 20px;
}

.wf-growth-badge{
display:inline-block;
padding:10px 18px;
background:#eef2ff;
color:#4f46e5;
border-radius:50px;
font-size:13px;
font-weight:700;
margin-bottom:20px;
}

.wf-growth-header h2{
font-size:56px;
font-weight:800;
color:#082f49;
margin-bottom:15px;
}

.wf-growth-header p{
font-size:18px;
color:#64748b;
}

/* SLIDER */

.wf-growth-wrapper{
position:relative;
}

.wf-growth-slider{
display:flex;
gap:24px;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
scroll-behavior:smooth;
padding:10px 70px;
cursor:grab;
}

.wf-growth-slider::-webkit-scrollbar{
display:none;
}

/* CARD */

.wf-growth-card{
min-width:260px;
max-width:260px;
background:#fff;
border-radius:24px;
overflow:hidden;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
flex-shrink:0;
}

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

.wf-growth-card img{
width:100%;
height:340px;
object-fit:cover;
display:block;
}

.wf-growth-content{
padding:18px;
}

.wf-growth-category{
display:inline-block;
padding:6px 12px;
background:#eef2ff;
color:#4f46e5;
border-radius:20px;
font-size:12px;
font-weight:600;
margin-bottom:12px;
}

.wf-growth-content h3{
font-size:20px;
font-weight:700;
color:#082f49;
margin-bottom:12px;
line-height:1.3;
}

.wf-growth-meta{
display:flex;
justify-content:space-between;
font-size:13px;
color:#64748b;
}

/* NAV */

.wf-growth-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:52px;
height:52px;
border:none;
border-radius:50%;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.15);
cursor:pointer;
font-size:22px;
z-index:99;
}

.wf-growth-prev{
left:5px;
}

.wf-growth-next{
right:5px;
}

/* MOBILE */

@media(max-width:768px){

.wf-growth-picks{
padding:70px 0;
}

.wf-growth-header h2{
font-size:34px;
}

.wf-growth-header p{
font-size:15px;
}

.wf-growth-slider{
padding:10px 15px;
gap:15px;
}

.wf-growth-card{
min-width:220px;
max-width:220px;
}

.wf-growth-card img{
height:300px;
}

.wf-growth-nav{
display:none;
}

}

.wf-minds{
padding:100px 0;
overflow:hidden;
}

.wf-minds-header{
text-align:center;
max-width:850px;
margin:auto;
margin-bottom:50px;
padding:0 20px;
}

.wf-minds-header h2{
font-size:56px;
font-weight:800;
margin:20px 0;
color:#082f49;
}

.wf-minds-header p{
font-size:18px;
color:#64748b;
}

.wf-minds-slider{
display:flex;
gap:22px;
overflow-x:auto;
scrollbar-width:none;
padding:10px 20px;
scroll-behavior:smooth;
}

.wf-minds-slider::-webkit-scrollbar{
display:none;
}

.wf-mind-card{
min-width:280px;
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
flex-shrink:0;
}

.wf-mind-card img{
width:100%;
height:280px;
object-fit:cover;
}

.wf-mind-card h3{
padding:20px 20px 5px;
font-size:24px;
font-weight:700;
}

.wf-mind-card span{
padding:0 20px;
display:block;
color:#64748b;
margin-bottom:18px;
}

.wf-mind-links{
padding:0 20px 20px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.wf-mind-links a{
padding:10px;
text-align:center;
background:#eef2ff;
color:#4f46e5;
border-radius:12px;
text-decoration:none;
font-size:14px;
font-weight:600;
}

@media(max-width:768px){

.wf-minds{
padding:70px 0;
}

.wf-minds-header h2{
font-size:34px;
}

.wf-mind-card{
min-width:240px;
}

.wf-mind-card img{
height:220px;
}

}

.wf-minds{
padding:100px 0;
overflow:hidden;
}

.wf-minds-header{
text-align:center;
max-width:850px;
margin:auto;
margin-bottom:50px;
padding:0 20px;
}

.wf-badge{
display:inline-block;
padding:10px 18px;
background:#eef2ff;
color:#4f46e5;
border-radius:50px;
font-size:13px;
font-weight:700;
margin-bottom:20px;
}

.wf-minds-header h2{
font-size:56px;
font-weight:800;
margin-bottom:20px;
color:#082f49;
}

.wf-minds-header p{
font-size:18px;
color:#64748b;
line-height:1.7;
}

.wf-minds-slider{
display:flex;
gap:24px;
overflow-x:auto;
padding:10px 20px;
scrollbar-width:none;
}

.wf-minds-slider::-webkit-scrollbar{
display:none;
}

.wf-mind-card{
min-width:280px;
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
flex-shrink:0;
}

.wf-mind-card img{
width:100%;
height:280px;
object-fit:cover;
}

.wf-mind-card h3{
padding:20px 20px 5px;
font-size:24px;
font-weight:700;
}

.wf-mind-card span{
padding:0 20px;
display:block;
color:#64748b;
margin-bottom:20px;
}

.wf-listen-btn{
width:calc(100% - 40px);
margin:0 20px 20px;
padding:14px;
background:#4f46e5;
color:#fff;
border:none;
border-radius:14px;
cursor:pointer;
font-weight:700;
font-size:15px;
}

.wf-listen-btn:hover{
background:#4338ca;
}

.wf-audio-player{
display:none;
position:fixed;
bottom:20px;
right:20px;
z-index:9999;
}

.wf-player-box{
background:#fff;
padding:20px;
border-radius:20px;
width:350px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.wf-player-box h3{
margin-bottom:15px;
}

.wf-player-box audio{
width:100%;
}

#closeAudio{
margin-top:15px;
padding:10px 15px;
border:none;
background:#ef4444;
color:#fff;
border-radius:10px;
cursor:pointer;
}

@media(max-width:768px){

.wf-minds{
padding:70px 0;
}

.wf-minds-header h2{
font-size:34px;
}

.wf-mind-card{
min-width:240px;
}

.wf-mind-card img{
height:220px;
}

.wf-player-box{
width:90vw;
}

}

.wf-roadmaps-section{
padding:100px 20px;
background:#ffffff;
overflow:hidden;
}

.wf-roadmaps-header{
text-align:center;
max-width:800px;
margin:auto;
margin-bottom:50px;
}

.wf-roadmaps-badge{
display:inline-block;
padding:10px 18px;
background:#eef2ff;
color:#4f46e5;
font-weight:700;
border-radius:50px;
margin-bottom:20px;
}

.wf-roadmaps-header h2{
font-size:56px;
font-weight:800;
line-height:1.1;
color:#082f49;
margin-bottom:15px;
}

.wf-roadmaps-header p{
font-size:18px;
color:#64748b;
}

.wf-roadmaps-wrapper{
position:relative;
}

.wf-roadmaps-slider{
display:flex;
gap:24px;
overflow-x:auto;
scroll-behavior:smooth;
padding:10px;
scrollbar-width:none;
}

.wf-roadmaps-slider::-webkit-scrollbar{
display:none;
}

.wf-road-card{
min-width:370px;
background:#fff;
border-radius:28px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
}

.wf-road-card:hover{
transform:translateY(-10px);
}

.wf-road-image{
height:220px;
overflow:hidden;
}

.wf-road-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.wf-road-content{
padding:25px;
}

.wf-road-tag{
display:inline-block;
padding:8px 14px;
background:#eef2ff;
color:#4f46e5;
font-size:13px;
font-weight:700;
border-radius:30px;
margin-bottom:15px;
}

.wf-road-content h3{
font-size:28px;
color:#082f49;
margin-bottom:10px;
}

.wf-road-content p{
color:#64748b;
line-height:1.7;
margin-bottom:18px;
}

.wf-road-meta{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-bottom:20px;
font-size:14px;
font-weight:600;
color:#334155;
}

.wf-road-content a{
display:inline-block;
padding:12px 22px;
background:#4f46e5;
color:white;
text-decoration:none;
border-radius:12px;
font-weight:700;
}

.wf-road-btn{
position:absolute;
top:45%;
transform:translateY(-50%);
width:55px;
height:55px;
border:none;
border-radius:50%;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,.15);
font-size:24px;
cursor:pointer;
z-index:20;
}

.wf-road-prev{
left:-10px;
}

.wf-road-next{
right:-10px;
}

@media(max-width:768px){

.wf-roadmaps-header h2{
font-size:34px;
}

.wf-road-card{
min-width:290px;
}

.wf-road-image{
height:180px;
}

.wf-road-btn{
display:none;
}

}

.wf-paths-section{
padding:100px 20px;
background:#f8fafc;
overflow:hidden;
}

.wf-paths-header{
text-align:center;
max-width:800px;
margin:auto;
margin-bottom:50px;
}

.wf-path-badge{
display:inline-block;
padding:10px 18px;
border-radius:50px;
background:#eef2ff;
color:#6C3CF4;
font-weight:700;
margin-bottom:15px;
}

.wf-paths-header h2{
font-size:56px;
font-weight:800;
line-height:1.1;
color:#082f49;
margin-bottom:15px;
}

.wf-paths-header p{
font-size:18px;
color:#64748b;
}

.wf-paths-wrapper{
position:relative;
}

.wf-paths-slider{
display:flex;
gap:24px;
overflow-x:auto;
scroll-behavior:smooth;
padding:10px;
scrollbar-width:none;
}

.wf-paths-slider::-webkit-scrollbar{
display:none;
}

.wf-path-card{
min-width:330px;
background:#fff;
padding:35px;
border-radius:30px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
}

.wf-path-card:hover{
transform:translateY(-10px);
}

.wf-path-icon{
width:90px;
height:90px;
display:flex;
align-items:center;
justify-content:center;
border-radius:24px;

background:
linear-gradient(
135deg,
#6C3CF4,
#D18B45
);

font-size:38px;
color:#fff;

margin-bottom:25px;

box-shadow:
0 15px 35px
rgba(108,60,244,.25);
}

.wf-path-card h3{
font-size:32px;
font-weight:800;
color:#082f49;
margin-bottom:12px;
}

.wf-path-card p{
color:#64748b;
line-height:1.7;
margin-bottom:25px;
}

.wf-path-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:30px;
}

.wf-feature{
display:flex;
align-items:center;
gap:10px;
padding:14px;
background:#f8fafc;
border-radius:14px;
font-weight:600;
color:#082f49;
transition:.3s;
}

.wf-feature:hover{
background:#eef2ff;
}

.wf-feature i{
color:#6C3CF4;
font-size:18px;
}

.wf-path-card a{
display:block;
text-align:center;
padding:15px;
border-radius:16px;

background:
linear-gradient(
135deg,
#6C3CF4,
#D18B45
);

color:#fff;
font-weight:700;
text-decoration:none;
font-size:17px;
}

.wf-path-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:60px;
height:60px;
border:none;
border-radius:50%;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.15);
cursor:pointer;
font-size:24px;
z-index:10;
}

.wf-path-prev{
left:-10px;
}

.wf-path-next{
right:-10px;
}

@media(max-width:768px){

.wf-paths-section{
padding:70px 15px;
}

.wf-paths-header h2{
font-size:36px;
}

.wf-path-card{
min-width:290px;
padding:25px;
}

.wf-path-nav{
display:none;
}

.wf-path-icon{
width:75px;
height:75px;
font-size:30px;
}

.wf-path-card h3{
font-size:26px;
}

}