.eg-books-hero {
background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.12) 0%, rgba(10, 15, 29, 0.98) 70%);
padding: 100px 24px 60px;
text-align: center;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.eg-badge {
display: inline-block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #eabf32;
background: rgba(234, 191, 50, 0.12);
border: 1px solid rgba(234, 191, 50, 0.4);
padding: 6px 16px;
border-radius: 20px;
margin-bottom: 20px;
}
.eg-books-hero h1 {
font-size: clamp(32px, 5vw, 52px);
font-weight: 900;
line-height: 1.15;
margin: 0 auto 18px;
max-width: 900px;
color: #ffffff;
letter-spacing: -0.5px;
}
.eg-books-hero p {
font-size: clamp(16px, 2vw, 19px);
color: #94a3b8;
max-width: 720px;
margin: 0 auto 30px;
line-height: 1.7;
}
.eg-books-container {
max-width: 1200px;
margin: 0 auto;
padding: 60px 24px 100px;
}
.eg-books-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
}
.eg-book-card {
background: #111827;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 36px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.eg-book-card::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #eabf32, #10b981);
opacity: 0;
transition: opacity 0.3s ease;
}
.eg-book-card:hover {
transform: translateY(-6px);
border-color: rgba(234, 191, 50, 0.4);
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}
.eg-book-card:hover::before {
opacity: 1;
}
.eg-card-num {
font-size: 14px;
font-weight: 800;
color: #eabf32;
letter-spacing: 1px;
margin-bottom: 12px;
}
.eg-card-title {
font-size: 22px;
font-weight: 800;
color: #ffffff;
margin: 0 0 8px;
line-height: 1.3;
}
.eg-card-subtitle {
font-size: 13.5px;
font-weight: 600;
color: #10b981;
margin-bottom: 16px;
}
.eg-card-desc {
font-size: 14.5px;
color: #94a3b8;
line-height: 1.65;
margin-bottom: 28px;
}
.eg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(234, 191, 50, 0.15);
color: #eabf32 !important;
border: 1.5px solid #eabf32;
padding: 12px 22px;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
text-decoration: none !important;
transition: all 0.2s ease;
align-self: flex-start;
}
.eg-btn:hover {
background: #eabf32;
color: #0b0f19 !important;
transform: translateX(4px);
}
.eg-btn-featured {
background: #eabf32;
color: #0b0f19 !important;
}
.eg-btn-featured:hover {
background: #f3c623;
}
.eg-featured-tag {
position: absolute;
top: 20px;
right: 20px;
background: rgba(16, 185, 129, 0.2);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.4);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 12px;
letter-spacing: 1px;
}