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

:root{

--bg-main:#f3ebe2;
--bg-alt:#fffaf5;
--navy:#1f2a33;
--gold:#c6a768;
--rose:#8a4f5c;
--soft:#6b6b6b;

}

body{

font-family:
Georgia,
"Times New Roman",
serif;

background:
linear-gradient(
to bottom,
#f6efe7,
#f3ebe2,
#f1e7dd
);

color:var(--navy);

overflow-x:hidden;

}

.hero,
.about-banner{

display:flex;
justify-content:center;
width:100%;
line-height:0;
margin:0;
padding:0;

}

.hero img,
.about-banner img{

display:block;
width:100%;
max-width:1400px;
height:auto;
margin:0 auto;
border-radius:0 0 20px 20px;

}

.hero img{

width:100%;

max-width:1400px;

display:block;

margin:auto;

}

.divider{

width:120px;

height:2px;

margin:
10px auto
14px;

background:

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

position:relative;

}

.divider:after{

content:"✦";

position:absolute;

left:50%;

top:-14px;

transform:
translateX(-50%);

padding:0 8px;

background:#f3ebe2;

color:var(--gold);

}

.section{

max-width:1250px;

margin:55px auto;

padding:70px 45px;

background:#fffaf5;

border-radius:34px;

border:1px solid rgba(198,167,104,.18);

box-shadow:
0 14px 40px rgba(0,0,0,.05);

overflow:hidden;

position:relative;

}

.section::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;

height:5px;

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

opacity:.45;

}

.section-inner{

max-width:1120px;

margin:auto;

}

.featured-book{

position:relative;

overflow:hidden;

padding:55px;

border-radius:38px;

background:

linear-gradient(
145deg,
#fffefc,
#f8f0e4
);

border:1px solid rgba(198,167,104,.22);

box-shadow:
0 20px 55px rgba(0,0,0,.07);

transition:
transform .4s ease,
box-shadow .4s ease;

}

.featured-book:hover{

transform:translateY(-6px);

box-shadow:
0 28px 70px rgba(0,0,0,.12);

}

.grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

margin-bottom:14px;

}

@media(max-width:768px){

.grid{

grid-template-columns:
1fr;

}

}

.card{

background:#fffaf5;

padding:22px;

border-radius:24px;

text-align:center;

border:
1px solid #eadfce;

box-shadow:
0 6px 12px rgba(
0,
0,
0,
.03
);

}

.icon{

font-size:2rem;

margin-bottom:10px;

}

.card h3{

font-family:
"Cinzel",
serif;

margin-bottom:10px;

}

.card p{

line-height:1.7;

color:var(--soft);

}

.quote{

margin-top:14px;

padding:20px;

border-radius:24px;

background:

linear-gradient(
135deg,
rgba(
198,
167,
104,
.08
),
rgba(
255,
255,
255,
.55
)
);

text-align:center;

}

.quote p{

font-size:1.1rem;

font-style:italic;

line-height:1.8;

}

.footer{

margin-top:12px;

padding:
22px
20px;

text-align:center;

background:#fffaf5;

border-top:
1px solid #eadfce;

}

.footerBrand{

font-family:
"Cinzel",
serif;

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

font-weight:700;

margin-bottom:8px;

color:var(--navy);

}

.footerTag{

font-size:.8rem;

letter-spacing:4px;

color:var(--rose);

margin-bottom:12px;

}

.footerDescription{

max-width:650px;

margin:auto;

line-height:1.8;

color:var(--soft);

margin-bottom:12px;

}

.footerLinks{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

margin-bottom:12px;

}

.footerLinks a{

padding:12px 22px;

background:white;

border-radius:999px;

text-decoration:none;

color:var(--rose);

font-weight:bold;

border:1px solid #eadfce;

}

.footerQuote{

font-style:italic;

color:var(--gold);

margin-bottom:10px;

}

.footerCopyright{

color:var(--soft);

}

/* Smooth Card Animations */

.card,
.storyCard{

transition:
transform .3s ease,
box-shadow .3s ease;

}

.card:hover,
.storyCard:hover{

transform:
translateY(-4px);

box-shadow:
0 14px 28px rgba(
0,
0,
0,
.08
);

}

/* Better Story Section */

.storyCard{

max-width:900px;

margin:
0 auto
18px;

}

.storyCard h2{

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

line-height:1.2;

}

.storyCard p{

font-size:1.05rem;

}

/* Improve Card Icons */

.icon{

font-size:2.3rem;

margin-bottom:12px;

}

/* Footer Links Hover */

.footerLinks a{

transition:
all .3s ease;

}

.footerLinks a:hover{

transform:
translateY(-2px);

background:
var(--gold);

color:white;

border-color:
var(--gold);

}

/* Quote Enhancement */

.quote{

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

}

.quote p{

max-width:700px;

margin:auto;

}

/* Banner Refinement */

.aboutBanner img{

border-radius:
0 0 20px 20px;

}

.icon{

font-size:2.5rem;

margin-bottom:18px;

line-height:1;

}

.grid .card{

text-align:center;

}

.grid .card h3{

font-size:1.45rem;

margin-bottom:15px;

color:var(--navy);

}

.grid .card p{

font-size:1rem;

line-height:1.9;

}

/*==============================
MISSION PANEL
===============================*/

.mission-panel{

display:flex;

flex-direction:column;

gap:18px;

}

.mission-item{

background:#ffffff;

padding:24px;

border-radius:22px;

border:1px solid rgba(198,167,104,.18);

box-shadow:0 12px 28px rgba(0,0,0,.05);

transition:.35s ease;

}

.mission-item:hover{

transform:translateY(-4px);

box-shadow:0 18px 38px rgba(0,0,0,.08);

}

.mission-item h3{

font-size:1.2rem;

margin-bottom:10px;

color:var(--navy);

}

.mission-item p{

font-size:.98rem;

line-height:1.8;

color:var(--soft);

margin:0;

}

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 55px;

}

.section-heading h2{

font-size:clamp(2rem,4vw,3rem);

line-height:1.2;

margin-bottom:18px;

color:var(--navy);

}

.section-heading h2::after{

content:"";

display:block;

width:90px;

height:3px;

background:var(--gold);

margin:18px auto 0;

border-radius:999px;

}

.sectionText{

font-size:1.08rem;

line-height:1.9;

color:var(--soft);

margin-top:22px;

}

/* ===========================
   AUTHOR INTRODUCTION
=========================== */

.author-introduction{

max-width:900px;

margin:0 auto;

text-align:center;

padding:10px 0 35px;

}

.author-introduction h1{

font-size:clamp(2.8rem,6vw,4.6rem);

line-height:1.1;

font-weight:700;

color:var(--navy);

margin-bottom:18px;

text-shadow:
0 2px 8px rgba(0,0,0,.05);

}

.author-introduction p{

max-width:760px;

margin:0 auto 22px;

font-size:1.08rem;

line-height:2;

color:var(--soft);

}

.hero-divider{

width:110px;

height:4px;

margin:25px auto 35px;

border-radius:999px;

background:

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

}

.seo-intro{

font-size:1.15rem;

line-height:1.9;

margin-bottom:28px;

color:#374151;

}

.hero-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin:40px 0;

}

.primary-button,
.secondary-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border-radius:999px;

font-weight:700;

text-decoration:none;

transition:.35s ease;

font-size:.95rem;

}

.primary-button{

background:var(--rose);

color:#fff;

box-shadow:

0 10px 25px rgba(138,79,92,.25);

}

.primary-button:hover{

transform:translateY(-5px);

box-shadow:

0 18px 35px rgba(138,79,92,.35);

}

.secondary-button{

background:#fff;

color:var(--navy);

border:1px solid rgba(198,167,104,.35);

}

.secondary-button:hover{

transform:translateY(-5px);

background:#faf5ee;

}

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

.featured-book{

position:relative;

overflow:hidden;

padding:55px;

border-radius:38px;

background:

linear-gradient(
145deg,
#fffefc,
#f8f0e4
);

border:1px solid rgba(198,167,104,.22);

box-shadow:

0 20px 55px rgba(0,0,0,.07);

transition:

transform .4s ease,
box-shadow .4s ease;

}

.featured-book:hover{

transform:translateY(-6px);

box-shadow:

0 28px 70px rgba(0,0,0,.12);

}

.featured-book::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:

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

}

.featured-glow{

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

border-radius:50%;

background:

rgba(198,167,104,.08);

filter:blur(50px);

}

.featured-label{

display:inline-block;

padding:8px 18px;

background:

rgba(198,167,104,.12);

border:1px solid rgba(198,167,104,.25);

border-radius:999px;

font-size:.75rem;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

color:var(--rose);

margin-bottom:25px;

}

.featured-content{

position:relative;

z-index:2;

display:grid;

grid-template-columns:

1fr 340px;

gap:40px;

align-items:center;

}

.featured-text{

max-width:850px;

margin:auto;

text-align:center;

}

.featured-text h2{

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

line-height:1.05;

margin-bottom:10px;

color:var(--navy);

}

.featured-text p{

font-size:1.08rem;

line-height:2;

color:var(--soft);

margin-bottom:22px;

}

.featured-quote{

max-width:720px;

margin:40px auto;

padding:28px;

border-left:5px solid var(--gold);

background:

rgba(255,255,255,.72);

border-radius:22px;

font-size:1.25rem;

line-height:1.8;

font-style:italic;

color:var(--rose);

box-shadow:

0 12px 25px rgba(0,0,0,.05);

}