/*
==================================================
PustakOne Demo Website
File: components.css
Version: Generation 3
Purpose: Shared Components & Homepage Sections
==================================================
*/


/* ========================================= */
/* SECTION: HERO */
/* ========================================= */

.hero{

    padding:100px 0;
}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;
}

.hero-content h1{

    color:var(--color-dark);

    font-size:4rem;
    line-height:1.1;

    margin-bottom:25px;
}

.hero-content p{

    font-size:1.15rem;

    max-width:650px;

    margin-bottom:30px;
}

.hero-image img{

    width:100%;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);
}


/* ========================================= */
/* COMPONENT: BUTTONS */
/* ========================================= */

.hero-buttons{

    display:flex;
    gap:20px;
}

.btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:14px 30px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);
}

.btn-primary{

    background:var(--color-primary);
    color:#fff;
}

.btn-primary:hover{

    background:var(--color-primary-dark);

    transform:translateY(-2px);
}

.btn-secondary{

    border:2px solid var(--color-primary);

    color:var(--color-primary);
}

.btn-secondary:hover{

    transform:translateY(-2px);
}


/* ========================================= */
/* SECTION: SCHOOL SEARCH */
/* ========================================= */

.search-section{

    background:#fff;

    padding:80px 0;
}

.search-box{

    max-width:800px;

    margin:40px auto 0;

    display:flex;

    overflow:hidden;

    border-radius:60px;

    box-shadow:var(--shadow-md);
}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    padding:20px 25px;

    font-size:1rem;
}

.search-box button{

    border:none;

    background:var(--color-primary);

    color:#fff;

    padding:0 35px;

    font-weight:700;

    cursor:pointer;
}


/* ========================================= */
/* SECTION: TRUST BAR */
/* ========================================= */

.trust-bar{

    background:#f8fafc;

    padding:50px 0;
}

.trust-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
}

.trust-item{

    text-align:center;
}

.trust-item h3{

    color:var(--color-primary);

    font-size:2rem;

    margin-bottom:10px;
}


/* ========================================= */
/* SECTION: FEATURED SCHOOLS */
/* ========================================= */

.school-grid{

    display:grid;

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

    gap:25px;

    margin-top:50px;
}

.school-card{

    background:#fff;

    border-radius:var(--radius-md);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    cursor:pointer;
}

.school-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);
}

.school-card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;
}

.school-card h3{

    padding:20px 20px 10px;

    color:var(--color-dark);
}

.school-card p{

    padding:0 20px;

    margin-bottom:15px;
}

.card-link{

    display:block;

    padding:0 20px 20px;

    color:var(--color-primary);

    font-weight:700;
}


/* ========================================= */
/* SECTION: SHOP BY CLASS */
/* ========================================= */

.class-grid{

    display:grid;

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

    gap:15px;

    margin-top:40px;
}

.class-grid a{

    background:#fff;

    text-align:center;

    padding:15px;

    border-radius:10px;

    box-shadow:var(--shadow-sm);

    font-weight:600;

    transition:var(--transition);
}

.class-grid a:hover{

    color:var(--color-primary);

    transform:translateY(-3px);
}


/* ========================================= */
/* SECTION: PRODUCTS */
/* FEATURED BOOKS */
/* FEATURED BOOK SETS */
/* TESTIMONIALS */
/* ========================================= */

.product-grid{

    display:grid;

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

    gap:25px;

    margin-top:50px;
}

.product-card{

    background:#fff;

    border-radius:var(--radius-md);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    cursor:pointer;

    position:relative;
}

.product-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);
}

.product-card img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;
}

.product-card h3{

    padding:20px 20px 10px;
}

.product-card p{

    padding:0 20px;

    margin-bottom:10px;
}

.product-card strong{

    display:block;

    padding:0 20px 20px;

    color:var(--color-primary);

    font-size:1.15rem;
}


/* ========================================= */
/* COMPONENT: SALE BADGE */
/* ========================================= */

.sale-badge{

    position:absolute;

    top:15px;
    right:15px;

    background:var(--color-accent);

    color:#fff;

    padding:8px 12px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:700;
}


/* ========================================= */
/* SECTION: HOW IT WORKS */
/* ========================================= */

.why-grid{

    display:grid;

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

    gap:25px;

    margin-top:50px;
}

.why-grid > div{

    background:#fff;

    padding:30px;

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

    text-align:center;
}

.why-grid h3{

    margin-bottom:15px;

    color:var(--color-dark);
}


/* ========================================= */
/* SECTION: WHY PUSTAKONE */
/* ========================================= */

.why-section{

    background:#fff;

    padding:100px 0;
}


/* ========================================= */
/* SECTION: FOOTER */
/* ========================================= */

.site-footer{

    background:var(--color-dark);

    color:#fff;

    text-align:center;

    padding:60px 0;
}