@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{

    --primary:#041E42;
    --secondary:#1E293B;

    --gold:#D4AF37;
    --gold-dark:#B89028;

    --background:#F8F5F0;
    --white:#FFFFFF;

    --text:#1E293B;
    --text-light:#64748B;

    --border:#E5E7EB;

    --success:#16A34A;
    --danger:#DC2626;

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

    --radius:16px;

}
*{

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

}

html{

    scroll-behavior:smooth;

}
body{

    background:var(--background);

    color:var(--text);

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

    line-height:1.7;

}

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

h1,h2,h3,h4,h5{

    font-family:'Playfair Display',serif;

    color:var(--primary);

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    max-width:100%;

    display:block;

}

button{

    cursor:pointer;

    border:none;

    font-family:inherit;

}

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

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

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

.hero{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;

    max-width:1400px;
    margin:20px auto;
    padding:40px 20px;
}

.hero-image{
    flex:1;
    display:flex;
    justify-content:center;
    
}

.hero-image img{
   border-radius: 20px;
    width:100%;
    max-width:420px;
    height:auto;
    display:block;
    object-fit:contain;
}

.hero-content{
    flex:1;
}

.hero-content h1{
    font-size:2.2rem;
    line-height:1.4;
    margin-bottom:20px;
}

.hero-content p{
    font-size:1.2rem;
    color:#666;
    margin-bottom:30px;
}

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

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

.featured{

padding:90px 8%;

}

.featured h2{

text-align:center;

font-size:42px;

color:#0F172A;

margin-bottom:50px;

position:relative;

}

.featured h2::after{

content:"";

display:block;

width:90px;

height:4px;

background:#D4AF37;

margin:15px auto;

border-radius:20px;

}

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

.card-grid{

display:grid;

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

gap:35px;

}

.card{

background:white;

border-radius:18px;

overflow:hidden;

padding:22px;

transition:.35s;

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

border-top:5px solid #D4AF37;

}

.card:hover{

transform:translateY(-10px);

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

}

.card h3{

margin:18px 0;

color:#0F172A;

font-size:24px;

}

.card p{

color:#555;

margin-bottom:20px;

}

.card a{

color:#D4AF37;

font-weight:700;

transition:.3s;

}

.card a:hover{

padding-left:8px;

}

/* ==========================================
BOOK COVERS
========================================== */

.book-cover{

width:100%;

height:330px;

object-fit:cover;

border-radius:12px;

}

/* ==========================================
STATISTICS
========================================== */

.stats{

background:#0F172A;

padding:90px 8%;

}

.stats h2{

color:#D4AF37;

text-align:center;

font-size:42px;

margin-bottom:45px;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

background:#172235;

padding:35px;

border-radius:18px;

text-align:center;

border:2px solid #D4AF37;

transition:.3s;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h1{

font-size:58px;

color:#D4AF37;

margin-bottom:10px;

}

.stat-card p{

color:white;

font-size:18px;

}

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

.why{

padding:90px 8%;

background:#F8F5F0;

}

.why h2{

text-align:center;

font-size:42px;

margin-bottom:55px;

}

.why-grid{

display:grid;

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

gap:35px;

}

.why-card{

background:white;

padding:35px;

border-radius:18px;

text-align:center;

transition:.3s;

border-bottom:5px solid #D4AF37;

}

.why-card:hover{

transform:translateY(-10px);

}

.icon{

font-size:55px;

margin-bottom:18px;

}

.why-card h3{

margin-bottom:15px;

color:#0F172A;

}

/* ==========================================
FEEDBACK
========================================== */

.feedback-section{

background:

#0F172A
;

padding:100px 20px;
padding-bottom: 50px;
text-align:center;

color:white;

}

.feedback-section h2{

color:#D4AF37;

font-size:42px;

margin-bottom:20px;

}

.feedback-section p{

max-width:650px;

margin:auto;

margin-bottom:35px;

color:#E5E7EB;

font-size:18px;

}

.feedback-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}




/* buttons */
.btn-primary{

    display:inline-block;

    background:var(--gold);

    color:var(--primary);

    padding:14px 28px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:var(--gold-dark);

    transform:translateY(-3px);

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

}

.btn-secondary{

    display:inline-block;

    background:var(--white);

    color:var(--primary);

    padding:14px 28px;

    border-radius:12px;

    border:2px solid var(--gold);

    font-weight:600;
    
    transition:.3s;

}

.btn-secondary:hover{

    transform:translateY(-3px);

    background:var(--gold);

}


/* ==========================================
TABLETS
========================================== */

@media (max-width: 992px){

.hero{

    flex-direction:column;

    text-align:center;

    gap:40px;

    padding:30px 20px;

}

.hero-content h1{

    font-size:2rem;

}

.hero-content p{

    font-size:1.1rem;

}

.hero-buttons{

    justify-content:center;

}

.featured h2,
.stats h2,
.why h2{

    font-size:34px;

}

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

@media (max-width: 768px){

.hero{

    gap:25px;

    padding:20px;

}

.hero-image img{

    max-width:280px;

}

.hero-content h1{

    font-size:1.5rem;

    line-height:1.4;

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.hero-buttons a{

    width:100%;

    text-align:center;

}

.featured{

    padding:60px 20px;

}

.featured h2,
.stats h2,
.why h2{

    font-size:28px;

}

.card-grid{

    grid-template-columns:1fr;

}

.stats-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.card,
.stat-card,
.why-card{

    padding:25px;

}

.book-cover{

    height:260px;

}

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

@media (max-width:480px){

.hero-content h1{

    font-size:1.3rem;

}

.hero-image img{

    max-width:220px;

}

.stat-card h1{

    font-size:42px;

}

.featured h2,
.stats h2,
.why h2{

    font-size:24px;

}

}
.site-footer {

    margin-top: 0px;

    padding: 35px 20px;

    background:
#0F172A;

    text-align: center;

}

.footer-links {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;

    margin-bottom: 20px;

}

.footer-links a {

    color: #D4AF37;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

}

.footer-links a:hover {

    color: white;

}

.site-footer p {

    color: #aaa;

    font-size: 13px;

    margin: 0;

}

@media(max-width:600px) {

    .footer-links {

        flex-direction: column;

        gap: 12px;

    }

}