/* ========== RESET ========== */

*{
    Margin:0;
    Padding:0;
    Box-sizing:border-box;
    Font-family:Arial, Helvetica, sans-serif;
}

Body{
    Background:#f7f7f7;
    Color:#272727;
}

/* ========== HEADER ========== */

Header{
    Background:#ff7a00;
    Color:white;
    Display:flex;
    Justify-content:space-between;
    Align-items:center;
    Padding:20px 8%;
    Position:sticky;
    Top:0;
}

.logo{
    Font-size:30px;
    Font-weight:bold;
}

Nav a{
    Color:white;
    Text-decoration:none;
    Margin-left:25px;
    Font-size:18px;
    Transition:0.3s;
}

Nav a:hover{
    Color:#ffe4c4;
}

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

.hero{
    Text-align:center;
    Padding:100px 20px;
    Background:white;
}

.hero h1{
    Font-size:50px;
    Margin-bottom:20px;
}

.hero p{
    Font-size:20px;
    Max-width:700px;
    Margin:auto;
    Line-height:1.6;
}

.button{
    Display:inline-block;
    Margin-top:30px;
    Background:#ff7a00;
    Color:white;
    Text-decoration:none;
    Padding:15px 35px;
    Border-radius:8px;
    Font-size:18px;
}

.button:hover{
    Background:#e36b00;
}

/* ========== BOOKS ========== */

.featured{
    Padding:70px 8%;
}

.featured h2{
    Text-align:center;
    Margin-bottom:40px;
    Font-size:36px;
}

.cards{
    Display:grid;
    Grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    Gap:30px;
}

.card{
    Background:white;
    Border-radius:10px;
    Overflow:hidden;
    Text-align:center;
    Box-shadow:0 0 15px rgba(0,0,0,.1);
    Transition:.3s;
}

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

.card img{
    Width:100%;
    Height:320px;
    Object-fit:cover;
}

.card h3{
    Margin-top:20px;
}

.card p{
    Padding:15px;
}

.card a{
    Display:inline-block;
    Margin-bottom:20px;
    Background:#ff7a00;
    Color:white;
    Text-decoration:none;
    Padding:12px 25px;
    Border-radius:6px;
}

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

Footer{
    Background:#222;
    Color:white;
    Text-align:center;
    Padding:25px;
    Margin-top:60px;
}

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

@media(max-width:768px){

Header{
    Flex-direction:column;
}

Nav{
    Margin-top:15px;
}

Nav a{
    Display:inline-block;
    Margin:10px;
}

.hero h1{
    Font-size:36px;
}

.hero p{
    Font-size:18px;
}

}

.search{
Text-align:center;
Padding:40px 20px;
}

.search input{
Width:80%;
Max-width:500px;
Padding:14px;
Font-size:18px;
Border:2px solid #ff7a00;
Border-radius:8px;
Outline:none;
}

.library{
Padding:40px 8%;
Display:grid;
Grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
Gap:30px;
}

.book-card{
Background:white;
Border-radius:10px;
Overflow:hidden;
Box-shadow:0 0 12px rgba(0,0,0,.12);
Text-align:center;
Transition:.3s;
}

.book-card:hover{
Transform:translateY(-8px);
}

.book-card img{
Width:100%;
Height:330px;
Object-fit:cover;
}

.book-card h2{
Margin-top:15px;
}

.book-card p{
Padding:10px 20px;
Color:#555;
}

.buttons{
Margin:20px;
}

.buttons a{
Display:inline-block;
Margin:5px;
Padding:12px 20px;
Background:#ff7a00;
Color:white;
Text-decoration:none;
Border-radius:6px;
}

.buttons a:hover{
Background:#e06b00;
}