/* =================================
   STUDY WITH JASMINE
   MATERIAL LIBRARY CSS
================================= */


:root {
    --pink: #d85c86;
    --soft-pink: #ffe8f0;
    --cream: #fffaf7;
    --text: #3c3036;
    --gray: #756970;
    --border: #f1dce4;
    --white: #ffffff;
}


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


body {

    font-family:
    "DM Sans",
    "Noto Sans SC",
    sans-serif;

    background:var(--cream);

    color:var(--text);

}



/* =========================
 NAVBAR
========================= */


.navbar {

    height:80px;

    padding:0 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:white;

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:50;
.navbar a,
.nav-links a,
.nav-actions a,
.brand,
.logo,
.logo-text {
    text-decoration: none !important;
}

.navbar a:hover,
.nav-links a:hover,
.nav-actions a:hover,
.brand:hover,
.logo:hover {
    text-decoration: none !important;
}
}


.brand {

    display:flex;

    align-items:center;

    gap:14px;

}


.brand-icon {

    width:45px;

    height:45px;

    border-radius:15px;

    background:#f3a4bd;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:bold;

}


.brand-text {

    display:flex;

    flex-direction:column;

}


.brand-text strong {

    font-size:18px;

}


.brand-text small {

    color:var(--gray);

}


.nav-links {

    display:flex;

    gap:30px;

}


.nav-links a {

    color:#6d5c63;

    font-weight:500;

}


.nav-links a:hover,
.nav-links .active {

    color:var(--pink);

}


.nav-actions {

    display:flex;

    gap:15px;

}



.login-button {

    padding:10px 22px;

    border:1px solid var(--border);

    border-radius:25px;

}



.book-button {

    background:var(--pink);

    color:white;

    padding:10px 22px;

    border-radius:25px;

}



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


.materials-hero {

    padding:90px 8%;

    background:

    linear-gradient(
        135deg,
        #fff4f8,
        #fffaf7
    );

}


.hero-content {

    max-width:800px;

}



.eyebrow {

    color:var(--pink);

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

}


.materials-hero h1 {

    font-size:65px;

    line-height:1.1;

    margin:20px 0;

}



.materials-hero h1 span {

    color:var(--pink);

}



.materials-hero p {

    color:var(--gray);

    font-size:18px;

    max-width:600px;

}



.hero-subjects {

    margin-top:35px;

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}


.hero-subjects span {

    background:white;

    border:1px solid var(--border);

    padding:10px 18px;

    border-radius:30px;

}



/* =========================
 LIBRARY
========================= */


.library-section {

    padding:80px 8%;

}


.library-header {

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:30px;

}



.section-label {

    color:var(--pink);

    font-weight:700;

    letter-spacing:2px;

}


.library-header h2 {

    font-size:45px;

    margin:10px 0;

}



.library-header p {

    color:var(--gray);

}



.search-box input {

    width:300px;

    padding:15px 20px;

    border-radius:30px;

    border:1px solid var(--border);

    outline:none;

}



.search-box input:focus {

    border-color:var(--pink);

}



/* =========================
 FILTER
========================= */


.filter-section {

    margin:40px 0;

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}



.filter-button {

    border:none;

    padding:10px 22px;

    border-radius:25px;

    background:white;

    border:1px solid var(--border);

    cursor:pointer;

}



.filter-button.active,
.filter-button:hover {

    background:var(--pink);

    color:white;

}




/* =========================
   CHINESE PROGRAM BUTTONS
========================= */

.category-buttons {

    margin-top:20px;

    display:grid;

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

    gap:18px;

}


.category-buttons button {

    background:#fff6f9;

    border:1px solid var(--border);

    padding:22px 12px;

    border-radius:20px;

    cursor:pointer;

    transition:all .3s ease;

    min-height:85px;

    font-size:15px;

    font-weight:500;

    color:var(--text);

}


.category-buttons button:hover {

    transform:translateY(-5px);

    background:var(--pink);

    color:white;

    border-color:var(--pink);

}

/* =========================
   MATERIAL CARD MODERN
========================= */


.materials-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    align-items:start;
}


.material-card {

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid #f2dce5;

    transition:all .3s ease;

    display:flex;

    flex-direction:column;

    min-height:520px;

}


.material-card:hover {

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(216,92,134,0.15);

}


/* IMAGE */

.material-card img {

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

}



/* CONTENT */

.material-card-content {

    padding:25px;

    display:flex;

    flex-direction:column;

    flex:1;

}



.material-card h3 {

    font-size:22px;

    line-height:1.3;

    margin-bottom:12px;

    color:#3c3036;

}



.material-card p {

    color:#756970;

    font-size:15px;

    line-height:1.6;

    margin-bottom:20px;

}



/* PRICE */

.material-card .price {

    font-weight:700;

    color:#d85c86;

    margin-top:auto;

}



/* BUTTON */

.material-card button,
.material-card a {

    display:inline-flex;

    justify-content:center;

    align-items:center;


    width:fit-content;


    padding:12px 24px;


    border-radius:30px;


    background:#d85c86;


    color:white;


    border:none;


    font-size:14px;


    font-weight:600;


    text-decoration:none;


    cursor:pointer;


    transition:.25s;

}



.material-card button:hover,
.material-card a:hover {

    background:#c44d76;

    transform:translateY(-2px);

}


/* =========================
 BENEFITS
========================= */


.library-benefits {

    padding:60px 8% 100px;

    display:grid;

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

    gap:25px;

}



.benefit {

    background:white;

    padding:35px;

    border-radius:30px;

    border:1px solid var(--border);

}



.benefit span {

    color:var(--pink);

    font-weight:bold;

}



.benefit p {

    color:var(--gray);

}



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


footer {

    background:#fff0f5;

    padding:40px 8%;

    text-align:center;

}



.footer-brand {

    display:flex;

    justify-content:center;

    gap:15px;

    align-items:center;

}




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


@media(max-width:900px){


.nav-links {

    display:none;

}


.nav-actions {

    display:none;

}


.materials-hero h1 {

    font-size:45px;

}



.library-header {

    flex-direction:column;

    align-items:flex-start;

}



.search-box input {

    width:100%;

}



.category-buttons {

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

}



.materials-grid {

    grid-template-columns:1fr;

}



.library-benefits {

    grid-template-columns:1fr;

}


}
.material-image {
    width:100%;
    height:220px;
    object-fit:cover;
}


.material-card-content {
    padding:25px;
}


.view-btn {
    margin-top:20px;
    display:inline-flex;
    width:max-content;

    padding:12px 25px;

    background:#d85c86;
    color:white;

    border-radius:30px;

    text-decoration:none;
    font-weight:600;

    transition:.3s;
}


.view-btn:hover {
    transform:translateY(-3px);
    background:#c34d76;
}
.material-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #f3dce6;
    box-shadow: 0 12px 30px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}


.material-card:hover {
    transform: translateY(-5px);
}


.material-image {
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}


.material-card-content {
    padding:24px;
}


.material-card h3 {
    font-size:22px;
    line-height:1.3;
    color:#3b3036;
    margin-bottom:12px;
}


.material-card p {
    font-size:15px;
    line-height:1.7;
    color:#766870;
}


.price {
    font-weight:700;
    color:#d95782;
    margin-top:15px;
}


.view-btn {
    display:inline-flex;
    margin-top:15px;
    padding:10px 22px;
    border-radius:30px;
    background:#d95782;
    color:white;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}

/* ================================
   REMOVE LINK UNDERLINES
================================ */

a {
    text-decoration: none;
    color: inherit;
}

a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none;
}