/* ==========================================
   LEARN MORE PAGE
   PART 1
   GLOBAL STYLES
========================================== */

:root{

--bg:#080b12;
--surface:#141b26;
--surface2:#1d2634;

--gold:#d4af37;
--gold-light:#f3d46b;

--text:#edf2f7;
--muted:#aab4c5;

--border:rgba(255,255,255,.08);

--radius:22px;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:
radial-gradient(circle at top,
#202d48 0%,
#10141c 40%,
#080b12 100%);

color:var(--text);

overflow-x:hidden;

line-height:1.8;

}

/* ===========================
BACKGROUND ORBS
=========================== */

.bg-orbs{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:-2;

}

.bg-orbs span{

position:absolute;

width:320px;
height:320px;

border-radius:50%;

filter:blur(110px);

background:
rgba(212,175,55,.08);

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

}

.bg-orbs span:nth-child(1){

left:-80px;
top:80px;

}

.bg-orbs span:nth-child(2){

right:-120px;
top:40%;

animation-duration:22s;

}

.bg-orbs span:nth-child(3){

left:35%;
bottom:-120px;

animation-duration:28s;

}

@keyframes float{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-80px);

}

100%{

transform:
translateY(0);

}

}

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

#progress-bar{

position:fixed;

top:0;
left:0;

height:4px;

width:0;

background:
linear-gradient(
90deg,
#d4af37,
#f3d46b);

z-index:99999;

}

/* ===========================
MOUSE SPOTLIGHT
=========================== */

#spotlight{

position:fixed;

width:320px;
height:320px;

border-radius:50%;

pointer-events:none;

background:
radial-gradient(circle,
rgba(212,175,55,.12),
transparent 70%);

transform:
translate(-50%,-50%);

z-index:0;

}

/* ===========================
CONTAINER
=========================== */

.container{

width:min(1200px,92%);

margin:auto;

}

/* ===========================
NAVBAR
=========================== */

header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

background:
rgba(10,13,20,.65);

backdrop-filter:blur(20px);

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

}

.navbar{

width:min(1300px,94%);

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:1.4rem;

font-family:'Cinzel',serif;

color:var(--gold);

}

.logo i{

font-size:1.5rem;

}

.nav-links{

display:flex;

gap:35px;

list-style:none;

}

.nav-links a{

color:white;

text-decoration:none;

font-size:.95rem;

transition:.3s;

font-weight:500;

}

.nav-links a:hover,

.nav-links .active{

color:var(--gold);

}

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

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

padding:0 20px;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
180deg,
rgba(0,0,0,.45),
rgba(0,0,0,.75));

}

.hero-content{

position:relative;

z-index:2;

max-width:900px;

}

.subtitle{

color:var(--gold-light);

text-transform:uppercase;

letter-spacing:4px;

font-size:.95rem;

margin-bottom:20px;

}

.hero h1{

font-family:'Cinzel',serif;

font-size:clamp(3rem,7vw,5.8rem);

line-height:1.1;

margin-bottom:25px;

text-shadow:
0 10px 40px rgba(0,0,0,.5);

}

.hero p{

font-size:1.1rem;

color:var(--muted);

max-width:760px;

margin:auto;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}

.primary-btn,
.secondary-btn{

padding:16px 36px;

border-radius:999px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.primary-btn{

background:
linear-gradient(
135deg,
#d4af37,
#f3d46b);

color:#111;

}

.primary-btn:hover{

transform:translateY(-6px);

box-shadow:
0 18px 40px rgba(212,175,55,.35);

}

.secondary-btn{

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

color:white;

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

}

.secondary-btn:hover{

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

}
/* ==========================================
PART 2
INTRODUCTION
========================================== */

.intro{

padding:120px 0 70px;

}

.intro h2{

font-family:'Cinzel',serif;

font-size:2.8rem;

text-align:center;

color:var(--gold);

margin-bottom:30px;

}

.intro p{

max-width:950px;

margin:auto;

text-align:center;

font-size:1.1rem;

line-height:2;

color:var(--muted);

}

/* ==========================================
JOURNEY SECTION
========================================== */

.journey{

padding:90px 0;

}

.journey h2{

font-family:'Cinzel',serif;

font-size:2.8rem;

text-align:center;

color:var(--gold);

margin-bottom:15px;

}

.section-description{

max-width:760px;

margin:0 auto 60px;

text-align:center;

color:var(--muted);

font-size:1.05rem;

}

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

.journey-grid{

display:grid;

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

gap:35px;

}

/* ==========================================
PREMIUM CARDS
========================================== */

.period-card{

position:relative;

overflow:hidden;

padding:40px;

border-radius:25px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.06),
rgba(255,255,255,.03));

backdrop-filter:blur(18px);

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

transition:.45s;

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

}

.period-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
transparent,
var(--gold),
transparent);

opacity:0;

transition:.4s;

}

.period-card:hover{

transform:
translateY(-12px);

border-color:
rgba(212,175,55,.4);

box-shadow:

0 30px 70px rgba(0,0,0,.45),

0 0 45px rgba(212,175,55,.15);

}

.period-card:hover::before{

opacity:1;

}

/* ==========================================
ICON
========================================== */

.period-icon{

width:75px;
height:75px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:1.9rem;

background:
linear-gradient(
135deg,
#d4af37,
#f2d574);

color:#111;

margin-bottom:25px;

box-shadow:
0 15px 35px rgba(212,175,55,.25);

}

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

.period-card h3{

font-family:'Cinzel',serif;

font-size:1.6rem;

margin-bottom:18px;

color:white;

}

.period-card p{

color:var(--muted);

font-size:1rem;

line-height:1.9;

margin-bottom:35px;

}

/* ==========================================
BUTTON
========================================== */

.card-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

border-radius:999px;

text-decoration:none;

font-weight:600;

background:
linear-gradient(
135deg,
#d4af37,
#f2d574);

color:#111;

transition:.35s;

}

.card-btn:hover{

transform:
translateY(-5px);

box-shadow:
0 15px 35px rgba(212,175,55,.35);

}

.card-btn i{

transition:.35s;

}

.card-btn:hover i{

transform:translateX(6px);

}
/* ==========================================
PART 3
TIMELINE
========================================== */

.timeline-section{

padding:120px 0;

}

.timeline-section h2{

font-family:'Cinzel',serif;

font-size:2.8rem;

color:var(--gold);

text-align:center;

margin-bottom:20px;

}

.timeline{

margin-top:70px;

display:grid;

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

gap:30px;

}

.timeline-item{

padding:35px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

border-radius:22px;

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

transition:.4s;

text-align:center;

}

.timeline-item:hover{

transform:translateY(-10px);

border-color:rgba(212,175,55,.35);

box-shadow:
0 20px 45px rgba(212,175,55,.12);

}

.year{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:
rgba(212,175,55,.12);

color:var(--gold-light);

font-weight:600;

margin-bottom:18px;

}

.timeline-item h3{

font-family:'Cinzel',serif;

margin-bottom:15px;

font-size:1.35rem;

color:white;

}

.timeline-item p{

color:var(--muted);

font-size:.95rem;

line-height:1.8;

}

/* ==========================================
IMPORTANCE
========================================== */

.importance{

padding:120px 0;

}

.importance-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.importance-text h2{

font-family:'Cinzel',serif;

font-size:2.7rem;

color:var(--gold);

margin-bottom:25px;

}

.importance-text p{

margin-bottom:22px;

color:var(--muted);

font-size:1.05rem;

line-height:2;

}

.importance-image img{

width:100%;

border-radius:24px;

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

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

transition:.4s;

}

.importance-image img:hover{

transform:scale(1.02);

}

/* ==========================================
QUOTE
========================================== */

.quote-section{

padding:120px 0;

text-align:center;

}

.quote-section blockquote{

font-family:'Cormorant Garamond',serif;

font-size:2.4rem;

font-style:italic;

max-width:900px;

margin:auto;

color:white;

line-height:1.6;

}

.quote-section p{

margin-top:25px;

color:var(--muted);

font-size:1.05rem;

}

/* ==========================================
CALL TO ACTION
========================================== */

.cta-section{

padding:120px 0;

text-align:center;

}

.cta-section h2{

font-family:'Cinzel',serif;

font-size:2.8rem;

color:var(--gold);

margin-bottom:25px;

}

.cta-section p{

max-width:700px;

margin:auto;

color:var(--muted);

margin-bottom:40px;

font-size:1.05rem;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

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

footer{

padding:80px 0 50px;

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

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

text-align:center;

}

footer h2{

font-family:'Cinzel',serif;

font-size:2rem;

color:var(--gold);

margin-bottom:20px;

}

footer p{

color:var(--muted);

margin-bottom:20px;

}

.footer-links{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

margin:35px 0;

}

.footer-links a{

text-decoration:none;

color:white;

transition:.3s;

}

.footer-links a:hover{

color:var(--gold);

}

.footer-line{

width:120px;

height:2px;

background:var(--gold);

margin:35px auto;

}

.back-top{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

border-radius:999px;

background:
linear-gradient(
135deg,
#d4af37,
#f3d46b);

text-decoration:none;

color:#111;

font-weight:600;

transition:.35s;

}

.back-top:hover{

transform:translateY(-5px);

box-shadow:
0 15px 35px rgba(212,175,55,.35);

}

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

@media(max-width:900px){

.importance-grid{

grid-template-columns:1fr;

}

.nav-links{

display:none;

}

.hero h1{

font-size:3.5rem;

}

}

@media(max-width:768px){

.timeline{

grid-template-columns:1fr;

}

.hero{

padding:120px 20px 80px;

height:auto;

}

.hero h1{

font-size:2.8rem;

}

.intro h2,
.journey h2,
.timeline-section h2,
.importance h2,
.cta-section h2{

font-size:2rem;

}

.period-card{

padding:30px;

}

}

@media(max-width:480px){

.hero h1{

font-size:2.2rem;

}

.period-card{

padding:25px;

}

.card-btn,
.primary-btn,
.secondary-btn{

width:100%;

justify-content:center;

}

}
/*=========================
MOBILE NAVBAR
=========================*/

@media (max-width:768px){

    .navbar{

        position:relative;

        padding:16px 20px;

        border-radius:18px;

    }

    .logo{

        font-size:1.3rem;

    }

    .nav-links{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:rgba(8,20,33,.97);

        backdrop-filter:blur(20px);

        border-radius:18px;

        display:none;

        flex-direction:column;

        padding:18px 0;

        gap:0;

        margin-top:10px;

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

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links a{

        display:block;

        padding:15px 25px;

        text-align:center;

    }

    .nav-links a::after{

        display:none;

    }

    .menu-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

        cursor:pointer;

        color:var(--gold);

        font-size:1.6rem;

    }

    .hero{

        padding:150px 20px 100px;

    }

    .hero h1{

        font-size:3.2rem;

    }

    .subtitle{

        letter-spacing:3px;

        font-size:.8rem;

    }

    .description{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:18px;

        margin-bottom:90px;

    }

    .primary-btn,
    .secondary-btn{

        width:260px;

        text-align:center;

    }

    section h2{

        font-size:2.3rem;

    }

    .cards,
    .featured-grid{

        grid-template-columns:1fr;

    }

    .timeline{

        flex-direction:column;

    }

    .timeline::before{

        display:none;

    }

    .time-item{

        width:100%;

    }

    .quote blockquote{

        font-size:2rem;

    }

}

/*=========================
SMALL PHONES
=========================*/

@media (max-width:480px){

    .navbar{

        width:94%;

        margin:12px auto;

    }

    .logo{

        font-size:1.15rem;

    }

    .hero{

        min-height:100vh;

        padding:145px 18px 90px;

    }

    .hero h1{

        font-size:2.4rem;

        line-height:1.2;

    }

    .description{

        font-size:.95rem;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        max-width:280px;

        padding:16px;

    }

    .scroll-indicator{

        bottom:15px;

        font-size:.8rem;

    }

    section{

        padding:80px 0;

    }

    section h2{

        font-size:1.9rem;

        margin-bottom:45px;

    }

    .card,
    .featured-card{

        padding:30px;

    }

    .featured-card h3{

        font-size:1.6rem;

    }

    .quote{

        padding:70px 20px;

    }

    .quote blockquote{

        font-size:1.5rem;

    }

    .quote blockquote::before,
    .quote blockquote::after{

        display:none;

    }

    footer{

        padding:60px 20px;

    }

}

/*=========================
VERY SMALL DEVICES
=========================*/

@media (max-width:360px){

    .hero h1{

        font-size:2rem;

    }

    .description{

        font-size:.9rem;

    }

    .logo{

        font-size:1rem;

    }

}